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:

  1. A képernyőnek a teljes átlátszatlansággal rendelkező része, newUv.x / xScale > uThreshold.
  2. A képernyőnek az a része, amelyet még nem töröltek (a else utasítás), amely teljesen átlátszó.
  3. 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 uThresholduniform 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.