As cáusticas da água no browser são calculadas como raios de luz em tempo real

Um programador conhecido pelo pseudónimo ScottieFox disponibilizou publicamente o código-fonte do projeto CAUSTIC//VOLUME — duas cenas de água para browser em que as cáusticas no fundo são calculadas em cada fotograma a partir de raios de luz. Cada vértice de uma malha fina à superfície envia um raio para baixo através da massa de água, e as linhas brilhantes surgem onde os raios vizinhos convergem no fundo.

Ambas as versões são um único ficheiro HTML assente em three.js, sem instalação e sem build: abre-se no browser e funciona. O código foi publicado sob MIT, ou seja, pode ser lido, alterado e usado em projetos comerciais, mantendo o aviso de direitos de autor e o texto da licença.

Como se calcula o brilho das cáusticas

O brilho resulta de uma razão entre áreas: um troço de superfície cuja luz cai sobre uma área menor do fundo concentra-a com mais força, e o shader obtém essa razão através de derivadas de ecrã. Os troços sobrepostos somam-se — é assim que surgem os característicos fios de luz em movimento. Os raios de sol que entram pela parede de vidro abaixo do nível da água são adicionados à parte.

A superfície é composta por 24 ondas progressivas com comprimentos entre 1,2 metros e 12 centímetros, com direções distribuídas pelo ângulo de ouro para que ondas de comprimento semelhante não sigam lado a lado. Por isso a rede de cáusticas sai celular e não às riscas, como aconteceria com uma ondulação unidirecional. As alturas das ondas foram escolhidas de modo a que cada escala desvie a luz aproximadamente da mesma forma — e é isso que dá as linhas mais nítidas no fundo.

Os círculos interativos na água são calculados por uma simulação separada da equação de onda na GPU, baseada no GPUComputationRenderer do three.js: espalha pelo aquário os cliques do utilizador, as rajadas de vento e o rasto de um pato, refletindo tudo isso no vidro. O material da água funciona com as fórmulas de Fresnel para o reflexo do céu e a lei de Snell para a refração do olhar em profundidade; além do ângulo crítico entra a reflexão interna total, e a cor é dada pela absorção segundo Bouguer-Lambert: o vermelho apaga-se mais depressa do que o azul.

Uma demo para o telemóvel, outra para uma placa gráfica de topo

CAUSTIC//LITE é um aquário de vidro, um pato de borracha à superfície e uma fonte de luz comutável: sol ou candeeiro suspenso. Com um clique é possível levantar uma onda e empurrar o pato, e com cursores alterar a altura das ondas e a turbulência. Todo o programa ocupa cerca de 990 linhas, comentários incluídos, e foi escrito a contar com que venha a ser lido. A própria página monitoriza a taxa de fotogramas e altera a resolução de render e, se o WebGL 2 não estiver disponível ou o three.js não carregar, a cena, pato incluído, é traçada em JavaScript comum numa canvas 2D.

A versão completa tem cerca de 7500 linhas reunidas a partir de 18 módulos e foi pensada para hardware potente: precisa de WebGL 2 com a extensão EXT_color_buffer_float. Nela foram acrescentados:

• espetro oceânico FFT por cima da simulação interativa de ondulação fina (iWave), espuma e salpicos;
• um volume cáustico que faz atravessar a água por feixes de luz, e traçado de fotões das cáusticas com dispersão cromática;
• flutuabilidade com base na física para um couraçado de brincar, um navio pirata, um pato de borracha, uma garrafa com uma mensagem, um baú, uma âncora, uma ânfora e um capacete de mergulho;
• peixes-palhaço e cirurgiões em cardume, uma alforreca pulsante com tentáculos ondulantes, um polvo com duas fileiras de ventosas e um caranguejo que anda de lado;
• uma simulação tridimensional de tinta e areia colorida que assenta em camadas — ambas arrastadas pela corrente quando se mexe a água arrastando o cursor;
• até três candeeiros com cores próprias e um laser que se refrata a meia altura da água e se reflete nas paredes;
• predefinições de qualidade de Low a Insane com suavização temporal, bloom e profundidade de campo.

À parte, é curioso o ponto de vista subaquático: o tracer resolve tanto a reflexão interna total como a janela de Snell — aquele círculo de céu que se vê de baixo ao olhar para uma superfície calma.

Onde obter e o que se pode fazer com isto

O projeto CAUSTIC//VOLUME está por inteiro no GitHub: o repositório pode ser descarregado como arquivo ZIP e abre-se lite/index.html ou sandbox/index.html localmente. Não é preciso servidor, o three.js na versão r186 é puxado do CDN jsDelivr através de um import map e a seguir fica em cache no browser. A sandbox é reconstruída a partir dos módulos com um único comando em Node 18, sem dependências adicionais; testes opcionais correm ambas as cenas em Chromium headless através do Playwright e falham perante erros de shader.

O autor pede aos contribuidores que mantenham duas condições: cada versão continua a ser um único ficheiro HTML assente em three.js e sem instalação, e a variante lite não deve exceder as mil linhas e é obrigada a manter um fallback de CPU funcional.

Porque é que estas demos voltam a ser feitas no browser

Em tempo real, as cáusticas são na maioria das vezes representadas pela via barata — com uma textura animada calculada previamente e projetada no fundo; esse truque é usado também nos exemplos típicos para three.js. Nos grandes motores o cálculo fisicamente correto costuma aparecer apenas em conjunto com o traçado de raios, ou então permanece dentro de uma implementação fechada, onde o artista não consegue espreitar. O valor desta publicação está provavelmente precisamente no facto de uma variante legível ter sido disponibilizada por inteiro e sem restrições de licença.

O método em si não é novo: a comparação das áreas do troço original e do troço refratado da superfície já tinha sido usada por Evan Wallace na sua demo em WebGL, que continua a ser portada para diversas plataformas — links para esses ports são também referidos pela 80 Level. O que é novo aqui são a escala e a acessibilidade: o mesmo princípio foi desdobrado até uma sandbox completa com flutuabilidade, tinta, areia e feixes de luz, e mesmo assim continua a ser um ficheiro que se abre com um duplo clique.

O surgimento do projeto precisamente agora parece natural: o WebGL 2 tornou-se o denominador comum de todos os browsers atuais, incluindo o Safari, e os targets em vírgula flutuante deixaram de ser exóticos, pelo que uma simulação a sério no browser se tornou bastante mais acessível. É igualmente significativa a nota na documentação de que o Chrome, a partir da versão 141, deixou de recorrer ao WebGL por software em máquinas sem GPU funcional — daí a ênfase no fallback de CPU na versão lite. Em torno da água em three.js nota-se, de forma geral, uma reanimação, também comercial, e um projeto gratuito com uma análise detalhada dos algoritmos define a fasquia daquilo que se considera alcançável num separador do browser. Se o formato das tecno-demos abertas num único ficheiro se consolidar, a comunidade irá acumulando gradualmente um corpo de implementações de referência de efeitos que antes passavam de projeto em projeto sob a forma de soluções aproximadas.