Distorsió líquida amb Three.js
Una galeria on les imatges es fonen les unes amb les altres amb una distorsió líquida que segueix el ratolí. Cada transició es calcula en temps real a la GPU amb WebGL, sense vídeo.
La tècnica
Tres peces treballen juntes: Three.js gestiona l'escena i el render WebGL; un shader GLSL calcula la distorsió píxel a píxel directament a la GPU; i un camp de soroll procedural genera el desplaçament líquid i la barreja entre imatges. Tot a 60 imatges per segon, amb un pes mínim i un fallback estàtic si el navegador no suporta WebGL.
Com està fet
Three.js
Three.js és la llibreria que ho orquestra tot. Crea l'escena 3D, configura la càmera i el pla a pantalla completa, carrega les textures i es comunica amb la targeta gràfica a través de WebGL. Sense Three.js caldria escriure centenars de línies de WebGL pur; amb ella ens podem centrar en l'efecte i no en la lampisteria.
WebGL
WebGL és l'API del navegador que dibuixa gràfics accelerats per maquinari, directament a la GPU. És el que permet que tot vagi a 60 imatges per segon sense connectors ni vídeo: el mateix tipus de motor que mou els videojocs, però dins d'una pàgina web i sense res a instal·lar.
GLSL shaders
Els shaders són petits programes escrits en GLSL que s'executen a la GPU una vegada per cada píxel, en paral·lel. Aquí passa la màgia: el shader calcula quant es deforma la imatge, barreja les dues escenes i desplaça els canals de color per crear l'aberració cromàtica. Aquest càlcul massiu en paral·lel és el que fa que sigui tan ràpid i fluid.
Per a què serveix
Aquests efectes donen personalitat a portfolios, llançaments de producte i pàgines d'aterratge que volen destacar. A Nexe Labs els construïm a mida, optimitzats perquè carreguin ràpid i funcionin a qualsevol dispositiu. Si vols una web amb aquest nivell de detall, en parlem.