El tutorial Three.js Fluid Display Effects de Cullen Webber utiliza WebGPU, simulación de tenis de mesa y materiales Fresnel para fusionar dos escenas 3D en una apariencia de rayos X.
Webber, un desarrollador creativo de Perth, Australia, publicó este tutorial en Codrops en marzo de 2026. Esta demostración coloca 12 instancias de caracteres en una cuadrícula hexagonal. Al mover el cursor se inicia una simulación fluida, exponiendo la capa del esqueleto debajo de la forma sólida. Los resultados se encuentran entre un escaneo médico y un holograma de ciencia ficción, y todo se ejecuta instantáneamente en el navegador.
Cómo funciona la canalización de efectos de visualización fluida de Three.js
La arquitectura tiene cuatro fases. Primero, el lienzo 2D rastrea el movimiento del cursor y genera una máscara circular basada en la entrada del mouse. Estas máscaras se introducen en una simulación de fluidos basada en el objetivo de renderizado de Ping Pong. Esta tecnología de GPU utiliza alternativamente dos texturas como buffers de lectura y escritura, evitando conflictos que podrían dañar la salida. El ruido FBM (movimiento browniano fraccional) desplaza el fluido, creando turbulencias orgánicas en el área de transición entre las dos escenas.
Las capas de renderizado de escenas duales se ejecutan en objetos InstancedMesh. Una red mantiene la figura física en su lugar. El otro sostiene un modelo esquelético comprimido con geometría DRACO. El material del esqueleto utiliza un sombreador Fresnel escrito en TSL (Three.js Shading Language). Fresnel hace que los bordes del esqueleto brillen intensamente mientras que la superficie frente a la cámara permanece oscura, lo que da como resultado el característico aspecto holográfico de rayos X que define las pantallas fluidas de Three.js.
El posprocesamiento completa el proceso. Bloom amplió Fresnel Glow. Las líneas de escaneo y la gradación de color realzan la estética de ciencia ficción, mientras que el grano sutil agrega profundidad. Todo el proceso de revelación fluida de Three.js se ejecuta en WebGPU a través de TSL, reemplazando GLSL sin formato con una sintaxis de sombreado basada en nodos que se compila en WebGPU y WebGL. Webber mantiene una bifurcación alternativa de WebGL en GitHub para navegadores sin soporte nativo de WebGPU.
El código fuente completo y la guía escrita están disponibles en Página de tutoriales de Codrops de Cullen Webber.
