Distorsión líquida con Three.js
Una galería donde las imágenes se funden unas con otras con una distorsión líquida que sigue al ratón. Cada transición se calcula en tiempo real en la GPU con WebGL, sin vídeo.
La técnica
Tres piezas trabajan juntas: Three.js gestiona la escena y el render WebGL; un shader GLSL calcula la distorsión píxel a píxel directamente en la GPU; y un campo de ruido procedural genera el desplazamiento líquido y la mezcla entre imágenes. Todo a 60 fotogramas por segundo, con un peso mínimo y un fallback estático si el navegador no soporta WebGL.
Cómo está hecho
Three.js
Three.js es la librería que lo orquesta todo. Crea la escena 3D, configura la cámara y el plano a pantalla completa, carga las texturas y se comunica con la tarjeta gráfica a través de WebGL. Sin Three.js habría que escribir cientos de líneas de WebGL puro; con ella podemos centrarnos en el efecto y no en la fontanería.
WebGL
WebGL es la API del navegador que dibuja gráficos acelerados por hardware, directamente en la GPU. Es lo que permite que todo vaya a 60 fotogramas por segundo sin plugins ni vídeo: el mismo tipo de motor que mueve los videojuegos, pero dentro de una página web y sin nada que instalar.
GLSL shaders
Los shaders son pequeños programas escritos en GLSL que se ejecutan en la GPU una vez por cada píxel, en paralelo. Aquí ocurre la magia: el shader calcula cuánto se deforma la imagen, mezcla las dos escenas y desplaza los canales de color para crear la aberración cromática. Ese cálculo masivo en paralelo es lo que lo hace tan rápido y fluido.
Para qué sirve
Estos efectos dan personalidad a portfolios, lanzamientos de producto y landing pages que quieren destacar. En Nexe Labs los construimos a medida, optimizados para que carguen rápido y funcionen en cualquier dispositivo. Si quieres una web con este nivel de detalle, hablamos.