Első bejárásom a shaderek varázslatos és zavaros világába
Találkoztam egy weboldallal, amely összeállította a hihetetlen átmenetekkel rendelkező webhelyek listáját: "Smoke Transitions: Beginning of a Trend?" Nyilvánvalóan rá kellett jönnöm, hogyan csinálják. A cél? Bármilyen képernyőtörlő, amely gomolygó füstre hasonlít, nagyon jó lenne.
Demo és forráskód
Használd kiindulópontként a munkámat. Másold ki a kódot, és játssz vele. Egy hozzám hasonló amatőr írása sem taníthatja meg a shadereknek szükséges megértést!
"Nézze meg a bemutatót itt".
"Nézze meg a forráskódot itt."
Primer
Gyorsan leírok néhány dolgot, amit a projekt előtt nem tudtam (amennyire megértem), mivel ez a tudás előfeltétele a végeredményhez.
A Three.js egy 3D grafikus megjelenítési könyvtár az internethez JavaScriptben. A 3D-s megjelenítéshez objektumok pozicionálása, világítás és kamera szükséges.
A 3D objektumok árnyékolókkal rendelkeznek, amelyek vagy a csúcsaik pozícióját határozzák meg (vertex shader), vagy a képpontjaik színét (fragment shader). Innentől kezdve csak a fragment shaderekről beszélek.
Az Shaderek olyan kóddarabok, amelyek minden egyes kimeneti feldolgozás alatt álló képponton futnak. Elfogadják a paramétereket kívülről: egyenruhát (amely nem változik pixelpozíciónként) vagy variáló (amelyek pixelpozíciónként változnak). A Shaderek nem ismerhetik egyetlen másik pixel kimenetét sem – ez a tervezésből fakad, mivel ez azt jelenti, hogy párhuzamos működésre vannak optimalizálva sok maggal rendelkező hardver (pl. GPU) által.
Szükségünk van némi véletlenszerűségre, hogy szimuláljuk azt a kaotikus módot, ahogy a füst kiáramlik, de egyúttal zökkenőmentesen is megjeleníthetjük ezt a véletlenszerűséget (mivel a füst intenzitása nem szokott éles változásokat okozni). Szerencsére a zajfunkciók mindkét követelménynek megfelelnek, bár egyáltalán nem vagyok elég képzett ahhoz, hogy leírjam, hogyan működnek.
A JavaScriptet használó egyéni Vue-átmenetekről szóló oktatóanyagért lásd az előző írásomat.
A hozzávalók
A kombinált eredmény több dolog együttes munkájának eredménye:
- Egyéni JavaScript-átmenet a
src/transitions/smoke.js
-ben, amely egy<canvas />
-t hoz létre a kilépési animáció elején, amely az animáció végén törlődik. A<canvas />
a szülőhöz van csatolva, és olyan stílussal rendelkezik, amely lehetővé teszi, hogy elfedje az áthelyezett tartalmat. - Egy Three.js renderer, amely jelenetet jelenít meg a
<canvas />
. A jelenet egyetlen síkban van méretezve és úgy elhelyezve, hogy a textúrája a teljes<canvas />
-t lefedje. - Egy shader a Three.js síkon, amely zajfüggvényt és mozgó gradienst használ, amelyek együttesen a gomolygó füst elfogadható ábrázolását hozzák létre.
Az árnyékoló
Csak azt mondani, hogy a shader felelős a hatásért, olyan, mintha azt mondanánk, hogy a számítógép ezt az írást HTML-olvasással jeleníti meg, tehát vessünk egy pillantást a részletekbe! A felhő árnyékoló itt található: /src/transitions/shaders/cloud.frag
.
Az alján a shadernek csak három része van:
- A képernyőnek a teljes átlátszatlansággal rendelkező része,
newUv.x / xScale > uThreshold
. - A képernyőnek az a része, amelyet még nem töröltek (a
else
utasítás), amely teljesen átlátszó. - A törlés alatt álló rész,
newUv.x / xScale > uThreshold - uGradientSize,
matematikailag gradiensként számítva.
Az alap a képernyő mentén mozog, hogy animáljon egy egyszerű képernyőtörlést az átadott uThreshold
uniform alapján, amely maga az eltelt idő függvénye. A hatás így néz ki:
A „gördülő” effektus hozzáadásához a gradiens minden pixeléhez hozzáadjuk a zajfüggvény kimenetét a pixelkoordinátákhoz, és a pixel visszaadja az alap színét az új koordinátákon, ami így néz ki:
A zajfüggvény előnye, hogy ennek az eltolási effektusnak a mérete körülbelül azonos a szomszédos pixeleknél, így a mintavételezett színek még mindig viszonylag közel vannak egymáshoz, és elkerüljük a nagy színeltolódásokat. (Őszintén szólva ez számomra valamiféle matematikai varázslat). Csináld ezt újra és újra a gradiens mozgatása mellett, és füst lesz!
Következtetés
Remélem, hogy ez segíthet a hozzám hasonló, intenzív kíváncsisággal rendelkező front-end fejlesztőknek, hogy feltárják a weben található legérdekesebb effektusok mögött meghúzódó alapvető mechanizmusokat. Az árnyékolók olyan lehetőségeket nyitnak meg, amelyektől minden más primitívnek tűnik. Használd őket és nyűgözd le!
Ahogyan mondtam, ez az első búvárkodásom a shaderekben. Soha nem jöttem volna ki erre anélkül, hogy a helyes irányba nem löktek volna, ezért el kell ismernem azokat a zseniális embereket, akiknek munkája alapján építettem. A „felhőeffektust ebből az írásból” vettem alapul, majd visszafordítottam a vékony éleket, és létrehoztam a gradienst a füsttörlőhöz.