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.
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 AgentCrea 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.
Sostituisci la calma pomeridiana con una tempesta al chiaro di luna, con onde più imponenti, scie di pioggia e fulmini occasionali.
Prova Websites AgentCrea 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.
Colloca sulle onde una piccola barca a vela che l'utente può governare con la tastiera mentre cavalca le onde.
Prova Websites AgentCrea 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.
Rileva subito il supporto a WebGPU e fornisci una versione WebGL2 più leggera affinché la demo funzioni in ogni browser moderno.
Prova Websites AgentCrea 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.