Używanie shaderów do tworzenia realistycznych efektów specjalnych w projektowaniu stron internetowych

WebGL stał się przedmiotem eksperymentów i testowania granic tego, co jest możliwe w sieci. Niemal każdego dnia natykamy się na oparte na nim wspaniałe rozwiązania. Jako dowód zbadaliśmy już kilka realnych projektów.

Dzisiaj przyjrzymy się niektórym koncepcjom, które pokazują korzyści płynące z używania shaderów. Skoncentrujemy się na GLSL.

GLSL to skrót od Graphics Library Shader Language. Jest integralną częścią WebGL i odpowiada za większość niesamowitych rozwiązań, które widzimy na wolności. Zgodnie ze swoją nazwą zapewnia programistom narzędzia do intuicyjnej manipulacji grafiką. We właściwych rękach jest w stanie wcielić w życie niemal każdy pomysł.

Codepen już aż roi się od fascynujących projektów tworzonych za pomocą shaderów. Jednak te, które pokazują realistyczne efekty, są najbardziej imponujące i inspirujące. I zamierzamy to udowodnić w dzisiejszej kolekcji. Zanurzmy się.

Waterdroplet WebGL Shader autorstwa Stefana Wecka

Stefan Werk otwiera nasze podsumowanie swoim arcydziełem, udowadniając wszystkim, że high-endowe technologie to prawdziwa magia. Udało mu się odtworzyć deszcz padający na okno (lub w naszym przypadku ekran). Zachowanie i realizacja kropli deszczu są tak realne, że aż chce się ich dotknąć. Tutaj JavaScript stoi za symulacją deszczu, podczas gdy moduł cieniujący WebGL bierze odpowiedzialność za efekt lepki i refrakcję.

Three js water shader autorstwa Jonathana Blaira / ShaderToy Compilation autorstwa Davida Hartleya

Być może kolejne dwa projekty należą do najbardziej imponujących przykładów wykorzystania shaderów w naszej kolekcji. Chociaż każdy z nich zmusza komputer do działania z pełną wydajnością, aby poradzić sobie ze wszystkim, co dzieje się za kulisami, niemniej jednak warto. Każda koncepcja, z tymi wszystkimi falami, małymi i dużymi falami, wraz ze zmieniającymi się kolorami, wygląda niesamowicie realistycznie i bardzo inspirująco.

Podczas gdy Jonathan Blair odtworzył tylko powierzchnię wody, David Hartley uczynił rzeczy nieco interesującymi, nadając tej ostatniej kulisty kształt, umiejętnie imitując w ten sposób Ziemię. Oba projekty są oszałamiające.

Przykład cieniowania Pixijs.v3 autorstwa Omara Shehata

Ta fascynująca koncepcja Omara Shehaty, oparta na Pixi.js, zaskoczy Cię bardzo szczegółową symulacją efektu zamglenia. Doprawione piękną fioletową kolorystyką i ciemnym tłem, te kłęby dymu wyglądają niesamowicie autentycznie. Zachowanie jest przemyślane. Koncepcja jest po prostu hipnotyzująca.

Snowfall WebGL Shader autorstwa Borisa Šehovac

Ta koncepcja zasługuje na swoją nazwę. Jest bardzo realistyczny. Boris Sehovac wykorzystał różne rozmiary płatków śniegu, różne poziomy rozmycia i różne prędkości, aby odtworzyć głębię. Co więcej, próbował również symulować wiatr, zmuszając kompozycję do zmiany kierunku z lewej na prawą i odwrotnie. W rezultacie możemy być świadkami jakiejś małej burzy śnieżnej. Za tym pięknem stoi natywny moduł cieniujący WebGL.

Koncepcja autorstwa Ananda Davaasurena

Jeśli poprzedni przykład wywarł na tobie dobre wrażenie, to koncepcja Ananda Davaasurena z pewnością ucieszy twoje oko. Rozwiązanie opiera się na tym samym pomyśle. U podstaw tego leży efekt padającego śniegu: choć z jednym wyjątkiem. W tym przykładzie zastosowano serca zamiast płatków śniegu. Dzięki temu konceptowi panuje przyjemna atmosfera, której trudno się oprzeć. Może nie jest to brutalnie realistyczne, ale efekt opadania i zachowanie serc są niesamowicie dopracowane.

Chmury Shader autorstwa Davida Hartley

To kolejne arcydzieło stworzone przez Davida Hartleya. Tym razem artysta demonstruje swoje podejście do chmur i ich unoszenia się w powietrzu. Ponownie, za tym wspaniałym projektem stoi Pixi.js. Tutaj kamera przechodzi przez chmury, pozwalając poczuć całe piękno tego pomysłu. Ale Davidowi to nie wystarczyło. Zapewnił nam również możliwość eksploracji sceny poprzez przesuwanie kursora. Po prostu niesamowite.

Shader ognia od 14 wysp

Od marznącej śnieżycy i zimnych, puszystych chmur po gorące rzeczy — oto udana próba symulacji pożaru. Zespół odpowiedzialny za 14islands używa wielu cząsteczek i niestandardowych shaderów, aby wprowadzić ten pomysł w życie. W efekcie możemy być świadkami małego ogniska z dymem, który emanuje ciepłem na wszystkich frontach.

GLSL: Chrome autorstwa Liama ​​Egana

Chrome od Liama ​​Egana zawiera płyn o dużej gęstości. Projekt nieco przypomina scenę z epickiego Terminatora 2, kiedy zły T-1000 pokazał swoją kompozycję płynnego metalu. Koncepcja bez wątpienia wydaje się sztuczna. Jednak zachowanie i błyszcząca powierzchnia wyglądają niesamowicie realistycznie. Co więcej, możesz pobawić się, przesuwając mysz w górę iw dół, aby zmienić parametr wygładzania.

Efekt Ripple autorstwa Martina Laxenaire

Ten projekt autorstwa Martina Laxenaire jest doskonałym przykładem zastosowania shaderów w praktyce. Tutaj autorowi udało się uzyskać prawdziwy efekt falowania, który sprawia, że ​​obraz porusza się jak zasłona po najechaniu myszą. Curtains.js napędza tę koncepcję. Jedyną wadą jest to, że może być za wcześnie, aby dostarczyć każdy obraz na stronie internetowej z takim efektem, ponieważ jest on nadal zbyt ciężki, aby komputer z niższej półki mógł go „przetrawić”.

Glitched świetliki autorstwa Fabiena Motte

Projekt Fabiena Motte zawiera również praktyczne rozwiązanie. Nie mamy jednak na myśli tych jasnych świetlików, które chaotycznie poruszają się wokół osi pionowej. Mówimy o efekcie usterki, który od czasu do czasu pojawia się na ekranie. To jest po prostu niesamowite. A ponieważ jest popularny w dzisiejszych czasach, koncepcja ta może służyć jako idealna podstawa do twoich eksperymentów.

Rzuć trochę cienia

Shadery to potężne narzędzia. Chociaż w tym artykule skupiliśmy się na realistycznych rozwiązaniach, istnieje kilka innych oszałamiających koncepcji, które wyglądają bardziej sztucznie. Możesz tworzyć zupełnie inne sceny i kompozycje – to tutaj Twoja wyobraźnia może szaleć.

Jednak z wielką mocą wiąże się wielka odpowiedzialność. Jest kilka kwestii, które musisz wziąć pod uwagę przed przejściem do tej całej rzeczy z shaderem.

Po pierwsze, występuje problem z kompatybilnością przeglądarek. Nie każdy może cieszyć się jego pięknem. Po drugie, nie każdy komputer poradzi sobie z tym bez problemu. Oznacza to, że shadery nie są uniwersalnymi narzędziami – przynajmniej jeszcze nie.