Água-viva dourada das profundezas

Crie uma página web interativa de águas-vivas com Three.js. Em um cenário oceânico claro no centro e azul-profundo nas bordas, exiba de 6 a 10 águas-vivas douradas e translúcidas, girando lentamente e pulsando para cima; pelo menos três devem permanecer visíveis o tempo todo, e qualquer água-viva que atravesse o limite superior deve reaparecer por baixo. Cada água-viva tem listras radiais laranjas e branco-creme, pintas, brilho interno e uma borda translúcida bem definida; os braços orais franzidos são visíveis através da umbrela. Quando a umbrela se contrai, sua borda se abre visivelmente para fora.

Cada água-viva é composta por uma camada interna e outra externa da umbrela, uma saia macia, 20 tentáculos finíssimos e 4 braços orais franzidos. A umbrela se contrai periodicamente, e a saia, os tentáculos e os braços orais acompanham o movimento por meio de um sistema estável de física de molas Verlet — não use animações pré-gravadas. Todo o movimento deve seguir um único relógio de física unificado; limite intervalos longos entre quadros e use subetapas suficientes para que a simulação não divirja nem saia do lugar durante execuções prolongadas.

Adicione cáusticas suaves, cortinas simuladas de luz volumétrica e plâncton cintilante ao fundo, renderizados com bloom suave e mapeamento de tons ACES para criar uma atmosfera de iluminação das profundezas. Faça corretamente a ordenação das camadas transparentes e o antisserrilhamento para que os tentáculos permaneçam contínuos e nítidos. Quando o mouse se aproximar de uma água-viva, sua pulsação deve acelerar, seu brilho deve se intensificar e seus tentáculos devem receber um leve impulso. Ofereça suporte para arrastar o mouse e girar a visualização, além de usar a roda de rolagem para aplicar zoom, com distância de visualização e ângulo de inclinação limitados. Substitua as águas-vivas douradas por 15 a 20 peixes tropicais brilhantes em tons de azul-esverdeado. Mantenha a física de molas Verlet para o movimento da cauda e das nadadeiras e faça o cardume circular lentamente pela cena, evitando colisões. Use WebGL2 com modelos e materiais procedurais. Não use WebGPU, modelos externos, áudio, painel de controle nem alternância entre várias cenas. Entregue uma página web estática que seja executada diretamente, com as dependências incluídas localmente. Siga a abordagem visual e de física de Aurelia e mantenha os créditos de atribuição e as notas de licença de todos os códigos e algoritmos utilizados; se reutilizar o trabalho original ou o algoritmo de cáusticas de Dave Hoskins, mantenha a atribuição de licença correspondente.

Crie uma página web interativa de águas-vivas com Three.js. Em um cenário oceânico claro no centro e azul-profundo nas bordas, exiba de 6 a 10 águas-vivas douradas e translúcidas, girando lentamente e pulsando para cima; pelo menos três devem permanecer visíveis o tempo todo, e qualquer água-viva que atravesse o limite superior deve reaparecer por baixo. Cada água-viva tem listras radiais laranjas e branco-creme, pintas, brilho interno e uma borda translúcida bem definida; os braços orais franzidos são visíveis através da umbrela. Quando a umbrela se contrai, sua borda se abre visivelmente para fora.

Cada água-viva é composta por uma camada interna e outra externa da umbrela, uma saia macia, 20 tentáculos finíssimos e 4 braços orais franzidos. A umbrela se contrai periodicamente, e a saia, os tentáculos e os braços orais acompanham o movimento por meio de um sistema estável de física de molas Verlet — não use animações pré-gravadas. Todo o movimento deve seguir um único relógio de física unificado; limite intervalos longos entre quadros e use subetapas suficientes para que a simulação não divirja nem saia do lugar durante execuções prolongadas.

Adicione cáusticas suaves, cortinas simuladas de luz volumétrica e plâncton cintilante ao fundo, renderizados com bloom suave e mapeamento de tons ACES para criar uma atmosfera de iluminação das profundezas. Faça corretamente a ordenação das camadas transparentes e o antisserrilhamento para que os tentáculos permaneçam contínuos e nítidos. Quando o mouse se aproximar de uma água-viva, sua pulsação deve acelerar, seu brilho deve se intensificar e seus tentáculos devem receber um leve impulso. Ofereça suporte para arrastar o mouse e girar a visualização, além de usar a roda de rolagem para aplicar zoom, com distância de visualização e ângulo de inclinação limitados. Torne cada água-viva clicável. Ao clicar, pause seu movimento e exiba um cartão informativo com o nome da espécie, a profundidade do habitat e dois fatos curtos escritos para o público geral. Use WebGL2 com modelos e materiais procedurais. Não use WebGPU, modelos externos, áudio, painel de controle nem alternância entre várias cenas. Entregue uma página web estática que seja executada diretamente, com as dependências incluídas localmente. Siga a abordagem visual e de física de Aurelia e mantenha os créditos de atribuição e as notas de licença de todos os códigos e algoritmos utilizados; se reutilizar o trabalho original ou o algoritmo de cáusticas de Dave Hoskins, mantenha a atribuição de licença correspondente.