Design do Shader Caustic Pool

Um Campo de Água Luminoso

Caustic Pool é um exemplo oficial de OpenDesign WebGL2 apresentado como um canvas completo, e não como uma sequência de telas. Seu título criado para a composição, “CAUSTIC POOL”, fica no canto inferior esquerdo sobre um campo teal profundo de filamentos claros e ramificados. O título grande em duas linhas estabelece primeiro o tema; o texto de apoio identifica o efeito como “domain-warped ripples” e “caustic filaments”.

Essa ordem de leitura torna a peça legível antes do início da interação. A borda superior traz “OPENDESIGN · WEBGL PREVIEW” à esquerda e “REAL-TIME · GPU” à direita, dando uma moldura técnica compacta à superfície abstrata. A escolha é deliberada: os rótulos orientam o espectador, mas a sobreposição fixa compete ligeiramente com a atmosfera ininterrupta.

01

Título Antes da Técnica

“CAUSTIC POOL” nomeia o universo visual antes que a descrição apresente as ondulações deformadas por domínio, permitindo que o efeito permaneça expressivo, em vez de puramente técnico.

02

Instrução na Borda

“CLICK THE WATER ↗” é posicionada no canto inferior direito, afastada do bloco de título, para que o convite continue fácil de descobrir sem interromper o caminho principal de leitura.

Onde a Composição se Encaixa

O design é adequado a contextos em que o movimento é o tema, e não uma decoração de apoio. Um estudo de creative coding pode usá-lo para comparar campos de ondulação e concentração de luz; uma landing page interativa pode usar a mesma estrutura para dar uma dimensão espacial a uma mensagem curta. O canvas completo é especialmente útil quando não há uma interface de produto para examinar.

A composição também funciona como pano de fundo visual para um evento, instalação ou recurso web experimental, desde que a experiência ao redor consiga acomodar uma superfície renderizada pela GPU. Sua principal restrição é o foco: como o campo não possui controles criados na marcação estática, a interação permanece intencionalmente limitada e o visual faz a maior parte da comunicação.

Como a Ondulação e a Tipografia Compartilham o Espaço

As capturas mostram um único canvas completo em estados visuais mutáveis, e não telas separadas. Nesses estados, o fundo teal permanece contínuo enquanto a posição e a densidade da rede clara mudam. Essa continuidade faz o movimento parecer uma propriedade do campo de água, e não uma transição de página. A consequência visual é uma superfície calma e persistente; a contrapartida é que a mudança de estado é comunicada pelo movimento sutil do padrão, em vez de um texto de status explícito.

O shader forma sua rede brilhante por meio de cinco rodadas de cálculos de coordenadas dobradas. No pointer-down, ele redefine a posição e a idade de uma ondulação; uma onda radial senoidal então curva as coordenadas de amostragem e desaparece conforme a distância e a idade aumentam. Isso produz uma impressão de luz sobre a água sem malha, textura externa ou solucionador de fluidos físicos. O título fixo no canto inferior esquerdo e a instrução na borda oposta permitem que os espectadores comparem esse campo em transformação com um texto estável.

1. Ancorar

   Mantenha o título e o texto explicativo em um bloco estável no canto inferior esquerdo, para que o espectador possa comparar os estados mutáveis do shader com uma referência fixa.

2. Contrastar

   Use filamentos brilhantes contra o campo teal mais escuro para tornar a rede de refração legível sem adicionar gráficos, controles ou painéis decorativos.

3. Convidar

   Posicione uma única instrução concisa para o ponteiro na borda inferior oposta, conectando o gesto local à metáfora visual da água.

Uma Única Superfície, Vários Estados

As capturas alternativas mantêm os mesmos rótulos, título, descrição e indicação de clique enquanto as linhas luminosas mudam. Essa sobreposição repetida separa o conteúdo do estado animado: os espectadores podem comparar o campo sem reaprender a interface. Uma recriação deve preservar essa camada editorial estável, permitindo que a saída do shader varie abaixo dela.

Limite de Capacidade

A fonte implementa renderização local em WebGL2, entrada por pointer-down, tratamento de redimensionamento e um loop de desenho. Cada acionamento substitui a ondulação anterior, em vez de acumular várias ondas independentes. A idade da ondulação aumenta em 1/60 a cada quadro de animação, portanto sua temporização de dissipação depende da taxa de quadros real. As três capturas mostram estados de um único canvas; sem registros dos rastros de entrada, elas não demonstram de forma independente uma resposta ao clique.

Esta é uma aproximação visual cáustica, não uma simulação de água validada. A fonte não estabelece serviços conectados, dados de usuário armazenados, desempenho de GPU medido, compatibilidade universal de entrada ou o modelo usado originalmente para gerar a composição. Para uma adaptação de produção, teste o comportamento local de entrada e temporização no ambiente pretendido, em vez de tratar o rótulo da GPU ou a metáfora de água criada para a composição como evidência de aceitação.