Utilizarea umbritoarelor pentru a crea efecte speciale realiste în design web

WebGL a devenit subiectul experimentării și testării limitelor a ceea ce este posibil pe web. Aproape în fiecare zi dăm peste soluții grandioase alimentate de el. Drept dovadă, am examinat deja o serie de proiecte reale.

Astăzi vom explora câteva concepte care arată beneficiile utilizării shader-urilor. Ne vom concentra pe GLSL.

GLSL înseamnă Graphics Library Shader Language. Este o parte integrantă a WebGL și responsabilă pentru majoritatea soluțiilor uimitoare pe care le vedem în sălbăticie. În conformitate cu numele său, oferă dezvoltatorilor instrumente pentru a manipula grafica în mod intuitiv. În mâinile potrivite, este capabil să aducă la viață aproape orice idee.

Codepen este deja plin de proiecte fascinante create cu ajutorul shader-urilor. Cu toate acestea, cele care arată efecte realiste sunt cele mai impresionante și mai inspiratoare. Și vom demonstra acest lucru în colecția de astăzi. Să ne scufundăm.

Waterdroplet WebGL Shader de Stefan Weck

Stefan Werk deschide rezumatul nostru cu capodopera sa, demonstrând tuturor că tehnologiile de vârf sunt o adevărată magie. A reușit să recreeze ploaia căzută pe o fereastră (sau în cazul nostru, un paravan). Comportamentul și realizarea picăturilor de ploaie sunt atât de reale încât vrei să le atingi. Aici, JavaScript stă în spatele simulării ploii, în timp ce WebGL shader își asumă responsabilitatea pentru efectul lipici și refracția.

Three js water shader de Jonathan Blair / ShaderToy Compilation de David Hartley

Poate că următoarele două proiecte sunt printre cele mai impresionante exemple de utilizare a shader-urilor din colecția noastră. Deși fiecare vă obligă computerul să funcționeze la capacitate maximă pentru a face față a tot ceea ce se întâmplă în culise, cu toate acestea, merită. Fiecare concept, cu toate aceste valuri, valuri mici și mari, împreună cu culorile în schimbare, arată incredibil de realist și foarte inspirant.

În timp ce Jonathan Blair a recreat doar suprafața apei, David Hartley a făcut lucrurile puțin interesante, dându-i acestuia din urmă o formă sferică, imitând astfel cu pricepere Pământul. Ambele proiecte sunt uluitoare.

Exemplu de umbrire Pixijs.v3 de Omar Shehata

Produs de Pixi.js, acest concept fascinant de Omar Shehata vă va surprinde prin simularea sa foarte detaliată a efectului de ceață. Condimentați cu o frumoasă culoare violet și un fundal întunecat, acești nori de fum arată incredibil de autentici. Comportamentul este bine gândit. Conceptul este pur și simplu fascinant.

Snowfall WebGL Shader de Boris Šehovac

Acest concept își ridică numele. Este extrem de realist. Boris Sehovac a folosit diferite dimensiuni de fulgi de nea, diferite niveluri de neclaritate și diferite viteze pentru a recrea adâncimea. Mai mult, a încercat să simuleze vântul forțând compoziția să-și schimbe direcția de la stânga la dreapta și invers. Drept urmare, putem asista la un fel de furtună de zăpadă mică. Un shader nativ WebGL stă în spatele acestei frumuseți.

Concept de Anand Davaasuren

Dacă exemplul anterior v-a lăsat o impresie bună, atunci conceptul lui Anand Davaasuren vă va încânta, fără îndoială, ochiul. Soluția se bazează pe aceeași idee. Efectul căderii zăpezii se află în centrul acestuia: deși cu o singură excepție. Acest exemplu folosește inimi în loc de fulgi de zăpadă. Drept urmare, conceptul are o atmosferă încântătoare, greu de rezistat. Poate că nu este brutal de realist, dar totuși, efectul de cădere, precum și comportamentul inimilor sunt incredibil de lustruit.

Clouds Shader de David Hartley

Aceasta este o altă capodoperă creată de David Hartley. De data aceasta, artistul își demonstrează interpretarea norilor și a comportamentului lor plutitor. Din nou, Pixi.js stă în spatele acestui proiect grandios. Aici, camera trece direct prin nori, permițându-vă să simți întreaga frumusețe a ideii. Dar nu a fost suficient pentru David. De asemenea, ne-a oferit ocazia de a explora scena prin mișcarea cursorului. Doar incredibil.

Umbritor de foc de la 14inslands

De la o furtună de zăpadă înghețată și nori pufosi și reci la chestiile fierbinți, iată o încercare reușită de a simula focul. Echipa din spatele 14islands folosește o grămadă de particule și shadere personalizate pentru a da viață acestei idei. Drept urmare, putem asista la un mic foc de tabără cu fum care emană căldură pe toate fronturile.

GLSL: Chrome de Liam Egan

Chrome de la Liam Egan prezintă lichid cu o densitate ridicată. Proiectul amintește puțin de o scenă din epicul Terminator 2, când maleficul T-1000 și-a arătat compoziția metalică lichidă. Conceptul pare artificial, fără îndoială. Cu toate acestea, comportamentul și suprafața lucioasă arată incredibil de realiste. În plus, sunteți binevenit să vă jucați prin mișcarea mouse-ului în sus și în jos pentru a modifica parametrul de netezire.

Efect de ondulare de Martin Laxenaire

Acest proiect al lui Martin Laxenaire este un exemplu perfect de shadere puse în practică. Aici, autorul a reușit să obțină un adevărat efect de ondulare care face ca imaginea să se miște ca o perdea atunci când trece mouse-ul. Curtains.js alimentează acest concept. Singurul dezavantaj este că poate fi prea devreme pentru a furniza fiecare imagine de pe un site web cu acest efect, deoarece este încă prea greu pentru ca un computer de ultimă generație să o „digere”.

Glitched Fireflies de Fabien Motte

Proiectul lui Fabien Motte are și o soluție practică. Cu toate acestea, nu ne referim la acești licurici strălucitori care se mișcă haotic în jurul axei verticale. Vorbim despre un efect de glitch care lovește ocazional ecranul. Este pur și simplu incredibil. Și, deoarece este popular în zilele noastre, acest concept poate servi drept bază perfectă pentru experimentele dvs.

Aruncă un pic de umbră

Shaders sunt instrumente puternice. Deși ne-am concentrat pe soluții realiste în acest articol, există o grămadă de alte concepte uimitoare care par mai artificiale. Puteți crea scene și compoziții absolut diferite - aici este locul în care imaginația îți poate zburda.

Cu toate acestea, cu o mare putere vine o mare responsabilitate. Există câteva probleme pe care trebuie să le țineți cont înainte de a trece în toată chestia cu shaderul.

În primul rând, există o problemă cu compatibilitatea browserului. Nu toată lumea se poate bucura de frumusețea ei. Și în al doilea rând, nu orice computer se poate descurca fără probleme. Aceasta înseamnă că shaderele nu sunt instrumente universale – cel puțin nu încă.