Open Sea — Oceano WebGPU em tempo real

Um oceano WebGPU em tempo real renderizado com Three.js TSL: ondulação de Gerstner, detalhes de microssuperfície FBM, céu espectral, controles de estado do mar e hora do dia, e um modo de deriva sem intervenção. Este caso foi gerado pelo Kimi K3.

Loading preview...
Começar com este prompt

Uma demonstração autônoma de oceano em WebGPU, com controles de órbita, controles deslizantes de estado do mar e hora do dia, além de um modo de deriva.

Experimentar o Websites Agent
Crie uma demonstração autônoma de oceano em tempo real chamada 'Open Sea' com WebGPU e Three.js TSL. Renderize ondulações de Gerstner com normais de microssuperfície FBM e um céu espectral que acompanhe a hora do dia. Inclua controles de câmera para arrastar e orbitar, rolar e aplicar zoom, um painel HUD com controles deslizantes de estado do mar e hora do dia, além de uma leitura de FPS em tempo real, e um modo de deriva que permita à câmera deslizar sozinha. Mantenha tudo em uma única página estática, sem etapa de compilação, mostre um elegante estado de inicialização enquanto o renderizador é iniciado e tenha uma degradação adequada quando WebGPU não estiver disponível.
Transformar em uma tempestade noturna

Troque a calmaria da tarde por uma tempestade ao luar, com ondulação mais intensa, rastros de chuva e relâmpagos ocasionais.

Experimentar o Websites Agent
Crie uma demonstração autônoma de oceano em tempo real chamada 'Open Sea — Night Storm' com WebGPU e Three.js TSL. Renderize ondulações de Gerstner com normais de microssuperfície FBM e um céu espectral que acompanhe a hora do dia. Inclua controles de câmera para arrastar e orbitar, rolar e aplicar zoom, um painel HUD com controles deslizantes de intensidade da tempestade e altura das ondas, além de uma leitura de FPS em tempo real, e um modo de deriva que permita à câmera deslizar sozinha. Mantenha tudo em uma única página estática, sem etapa de compilação, mostre um elegante estado de inicialização enquanto o renderizador é iniciado e tenha uma degradação adequada quando WebGPU não estiver disponível.
Adicionar um veleiro controlável

Coloque um pequeno veleiro sobre as ondas, que o espectador possa controlar pelo teclado enquanto ele navega na ondulação.

Experimentar o Websites Agent
Crie uma demonstração autônoma de oceano em tempo real chamada 'Open Sea' com WebGPU e Three.js TSL. Renderize ondulações de Gerstner com normais de microssuperfície FBM e um céu espectral que acompanhe a hora do dia. Adicione um veleiro low-poly que flutue na ondulação com uma flutuabilidade simples e permita que o espectador o controle com WASD, enquanto a câmera pode acompanhar o barco ou orbitar livremente. Inclua controles de câmera para arrastar e orbitar, rolar e aplicar zoom, um painel HUD com controles deslizantes de estado do mar e hora do dia, além de uma leitura de FPS em tempo real, e um modo de deriva que permita à câmera deslizar sozinha. Mantenha tudo em uma única página estática, sem etapa de compilação, mostre um elegante estado de inicialização enquanto o renderizador é iniciado e tenha uma degradação adequada quando WebGPU não estiver disponível.
Incluir uma alternativa em WebGL2

Detecte o suporte a WebGPU logo no início e disponibilize uma versão mais leve em WebGL2 para que a demonstração funcione em todos os navegadores modernos.

Experimentar o Websites Agent
Crie uma demonstração autônoma de oceano em tempo real chamada 'Open Sea' que detecte o suporte a WebGPU na inicialização e use um renderizador WebGL2 mais leve quando WebGPU não estiver disponível, mantendo a mesma cena e os mesmos controles em ambos os caminhos. Renderize ondulações de Gerstner com normais de microssuperfície FBM e um céu espectral que acompanhe a hora do dia. Inclua controles de câmera para arrastar e orbitar, rolar e aplicar zoom, um painel HUD com controles deslizantes de estado do mar e hora do dia, além de uma leitura de FPS em tempo real, e um modo de deriva que permita à câmera deslizar sozinha. Mantenha tudo em uma única página estática, sem etapa de compilação, mostre um elegante estado de inicialização enquanto o renderizador é iniciado e faça o layout móvel recolher o HUD em um painel inferior, com órbita por toque.