Open Sea — Oceano WebGPU in tempo reale

Un oceano WebGPU in tempo reale visualizzato con Three.js TSL: onde di Gerstner, dettagli della microsuperficie in FBM, un cielo spettrale, controlli per lo stato del mare e l'ora del giorno e una modalità deriva senza intervento. Questo caso è stato generato da Kimi K3.

Loading preview...
Inizia con questo prompt

Una demo autonoma di un oceano WebGPU con controlli orbitali, cursori per lo stato del mare e l'ora del giorno e una modalità deriva.

Prova Websites Agent
Crea una demo autonoma di un oceano in tempo reale chiamata 'Open Sea' con WebGPU e Three.js TSL. Visualizza onde di Gerstner con normali della microsuperficie in FBM e un cielo spettrale che segue l'ora del giorno. Supporta controlli della fotocamera tramite trascinamento per orbitare e scorrimento per zoomare, un pannello HUD con cursori per lo stato del mare e l'ora del giorno, lettura FPS in tempo reale e una modalità deriva che consente alla fotocamera di scorrere autonomamente. Mantieni tutto in un'unica pagina statica senza fase di build, mostra un elegante stato di inizializzazione durante l'avvio del renderer e gestisci con eleganza l'assenza di WebGPU.
Trasformala in una tempesta notturna

Sostituisci la calma pomeridiana con una tempesta al chiaro di luna, con onde più imponenti, scie di pioggia e fulmini occasionali.

Prova Websites Agent
Crea una demo autonoma di un oceano in tempo reale chiamata 'Open Sea — Night Storm' con WebGPU e Three.js TSL. Visualizza onde di Gerstner con normali della microsuperficie in FBM e un cielo spettrale che segue l'ora del giorno. Supporta controlli della fotocamera tramite trascinamento per orbitare e scorrimento per zoomare, un pannello HUD con cursori per l'intensità della tempesta e l'altezza delle onde, lettura FPS in tempo reale e una modalità deriva che consente alla fotocamera di scorrere autonomamente. Mantieni tutto in un'unica pagina statica senza fase di build, mostra un elegante stato di inizializzazione durante l'avvio del renderer e gestisci con eleganza l'assenza di WebGPU.
Aggiungi una barca a vela governabile

Colloca sulle onde una piccola barca a vela che l'utente può governare con la tastiera mentre cavalca le onde.

Prova Websites Agent
Crea una demo autonoma di un oceano in tempo reale chiamata 'Open Sea' con WebGPU e Three.js TSL. Visualizza onde di Gerstner con normali della microsuperficie in FBM e un cielo spettrale che segue l'ora del giorno. Aggiungi una barca a vela low-poly che galleggia sulle onde con una semplice fisica di galleggiamento e consenti all'utente di governarla con WASD, mentre la fotocamera può seguire la barca o orbitare liberamente. Supporta controlli della fotocamera tramite trascinamento per orbitare e scorrimento per zoomare, un pannello HUD con cursori per lo stato del mare e l'ora del giorno, lettura FPS in tempo reale e una modalità deriva che consente alla fotocamera di scorrere autonomamente. Mantieni tutto in un'unica pagina statica senza fase di build, mostra un elegante stato di inizializzazione durante l'avvio del renderer e gestisci con eleganza l'assenza di WebGPU.
Includi un fallback WebGL2

Rileva subito il supporto a WebGPU e fornisci una versione WebGL2 più leggera affinché la demo funzioni in ogni browser moderno.

Prova Websites Agent
Crea una demo autonoma di un oceano in tempo reale chiamata 'Open Sea' che rilevi il supporto a WebGPU all'avvio e utilizzi un renderer WebGL2 più leggero quando WebGPU non è disponibile, mantenendo la stessa scena e gli stessi controlli in entrambi i percorsi. Visualizza onde di Gerstner con normali della microsuperficie in FBM e un cielo spettrale che segue l'ora del giorno. Supporta controlli della fotocamera tramite trascinamento per orbitare e scorrimento per zoomare, un pannello HUD con cursori per lo stato del mare e l'ora del giorno, lettura FPS in tempo reale e una modalità deriva che consente alla fotocamera di scorrere autonomamente. Mantieni tutto in un'unica pagina statica senza fase di build, mostra un elegante stato di inizializzazione durante l'avvio del renderer e fai in modo che, sui dispositivi mobili, l'HUD si riduca a un pannello inferiore con orbita tramite tocco.