Las cáusticas del agua en el navegador se calculan como rayos de luz en tiempo real

Un desarrollador con el alias ScottieFox ha publicado en abierto el código fuente del proyecto CAUSTIC//VOLUME: dos escenas de agua para el navegador en las que las cáusticas del fondo se calculan en cada fotograma a partir de rayos de luz. Cada vértice de una malla fina sobre la superficie envía un rayo hacia abajo a través de la masa de agua, y las líneas brillantes surgen allí donde los rayos vecinos convergen en el suelo.

Ambas versiones son un único archivo HTML basado en three.js, sin instalación ni compilación: se abre en el navegador y funciona. El código se publica bajo MIT, es decir, se puede leer, modificar y usar en proyectos comerciales conservando el aviso de copyright y el texto de la licencia.

Cómo se calcula el brillo de las cáusticas

El brillo se obtiene de una relación de áreas: un fragmento de superficie cuya luz cae sobre un fragmento menor del fondo la concentra con más fuerza, y el shader recibe esa relación mediante derivadas de pantalla. Los fragmentos superpuestos se suman: así surgen los característicos hilos de luz en movimiento. Los rayos de sol que entran a través de la pared de cristal por debajo del nivel del agua se añaden aparte.

La superficie está compuesta por 24 ondas viajeras de entre 1,2 metros y 12 centímetros de longitud, con direcciones repartidas según el ángulo áureo para que las ondas de longitud parecida no vayan juntas. Por eso la red de cáusticas resulta celular y no rayada, como ocurriría con un oleaje unidireccional. Las alturas de las ondas están escogidas de modo que cada escala desvíe la luz aproximadamente por igual: eso es lo que produce las líneas más nítidas en el fondo.

Los círculos interactivos sobre el agua los calcula una simulación aparte de la ecuación de ondas en la GPU, basada en el GPUComputationRenderer de three.js: reparte por el acuario los clics del usuario, las ráfagas de viento y la estela de un pato, haciendo que todo ello se refleje en el cristal. El material del agua funciona con las fórmulas de Fresnel para el reflejo del cielo y la ley de Snell para la refracción de la mirada hacia el fondo; más allá del ángulo crítico entra en juego la reflexión interna total, y el color lo aporta la absorción según Bouguer-Lambert: el rojo se apaga más rápido que el azul.

Una demo para el móvil, la otra para una gráfica de gama alta

CAUSTIC//LITE es un acuario de cristal, un pato de goma en la superficie y una fuente de luz conmutable: el sol o una lámpara colgante. Con un clic se puede levantar una ola y empujar al pato, y con deslizadores cambiar la altura de las olas y la turbulencia. Todo el programa ocupa unas 990 líneas comentarios incluidos y está escrito pensando en que va a ser leído. La página vigila por sí misma la tasa de fotogramas y cambia la resolución de render y, si WebGL 2 no está disponible o three.js no se ha cargado, la escena junto con el pato se traza en JavaScript normal sobre un canvas 2D.

La versión completa ronda las 7500 líneas repartidas en 18 módulos y está pensada para hardware potente: necesita WebGL 2 con la extensión EXT_color_buffer_float. En ella se añaden:

• espectro oceánico FFT por encima de la simulación interactiva de rizos (iWave), espuma y salpicaduras;
• un volumen cáustico que hace atravesar el agua a los haces de luz, y trazado de fotones de las cáusticas con dispersión cromática;
• flotabilidad basada en física para un acorazado de juguete, un barco pirata, un pato de goma, una botella con un mensaje, un cofre, un ancla, un ánfora y un casco de buzo;
• peces payaso y cirujanos que forman bancos, una medusa que palpita con tentáculos ondulantes, un pulpo con dos hileras de ventosas y un cangrejo que camina de lado;
• una simulación tridimensional de tinta y arena de colores que se deposita en capas, ambas arrastradas por la corriente cuando se remueve el agua arrastrando el ratón;
• hasta tres lámparas con colores propios y un láser que se refracta a media altura del agua y se refleja en las paredes;
• ajustes preestablecidos de calidad de Low a Insane con suavizado temporal, bloom y profundidad de campo.

Resulta especialmente curioso el punto de vista submarino: el trazador resuelve tanto la reflexión interna total como la ventana de Snell, ese círculo de cielo que se ve desde abajo al mirar una superficie en calma.

Dónde conseguirlo y qué se puede hacer con ello

El proyecto CAUSTIC//VOLUME está íntegro en GitHub: el repositorio se puede descargar como archivo ZIP y abrir lite/index.html o sandbox/index.html en local. No hace falta servidor; three.js en su versión r186 se descarga del CDN jsDelivr mediante un import map y después queda en la caché del navegador. El sandbox se recompila a partir de los módulos con un solo comando en Node 18, sin dependencias adicionales; unas pruebas opcionales ejecutan ambas escenas en Chromium headless a través de Playwright y fallan ante errores de shader.

El autor pide a quienes contribuyan que mantengan dos condiciones: cada versión sigue siendo un único archivo HTML basado en three.js y sin instalación, y la variante lite no debe superar las mil líneas y está obligada a conservar un fallback de CPU funcional.

Por qué estas demos se vuelven a hacer en el navegador

En tiempo real las cáusticas se representan casi siempre por la vía barata: con una textura animada calculada de antemano y proyectada sobre el fondo; ese truco se usa también en los ejemplos típicos de three.js. En los motores grandes el cálculo físicamente correcto suele aparecer solo junto con el trazado de rayos, o bien queda dentro de una implementación cerrada en la que un artista no puede asomarse. El valor de esta publicación está probablemente en que se ha puesto a disposición una versión legible al completo y sin restricciones de licencia.

El método en sí no es nuevo: la comparación de las áreas del fragmento original y del refractado de la superficie ya la utilizó Evan Wallace en su demo de WebGL, que todavía hoy se porta a distintas plataformas; enlaces a esos ports los recoge también 80 Level. Lo nuevo aquí son la escala y la accesibilidad: el mismo principio se ha desplegado hasta convertirse en un sandbox completo con flotabilidad, tinta, arena y haces de luz, y aun así sigue siendo un archivo que se abre con doble clic.

Que el proyecto aparezca justo ahora parece lógico: WebGL 2 se ha convertido en el denominador común de todos los navegadores actuales, incluido Safari, y los targets en coma flotante han dejado de ser una rareza, así que una simulación seria en el navegador se ha vuelto notablemente más accesible. También es significativa la advertencia de la documentación de que Chrome, desde la versión 141, ha dejado de recurrir a WebGL por software en máquinas sin GPU operativa: de ahí el énfasis en el fallback de CPU de la versión lite. En torno al agua en three.js se aprecia en general una reactivación, también comercial, y un proyecto gratuito con un análisis detallado de los algoritmos marca el listón de lo que se considera alcanzable en una pestaña del navegador. Si el formato de las tecnodemos abiertas de un solo archivo se consolida, la comunidad irá acumulando poco a poco un corpus de implementaciones de referencia de efectos que antes se transmitían de proyecto en proyecto en forma de apaños aproximados.