Open Sea — Océan WebGPU en temps réel
Un océan WebGPU en temps réel rendu avec Three.js TSL : houle de Gerstner, détails de micro-surface FBM, ciel spectral, commandes d’état de la mer et d’heure de la journée, et mode dérive autonome. Cette création a été générée par Kimi K3.
Une démo autonome d’océan WebGPU avec commandes d’orbite, curseurs d’état de la mer et d’heure de la journée, et un mode dérive.
Essayer Websites AgentCréez une démo autonome d’océan en temps réel appelée « Open Sea » avec WebGPU et Three.js TSL. Affichez une houle de vagues de Gerstner avec des normales de micro-surface FBM et un ciel spectral qui suit l’heure de la journée. Prenez en charge les commandes de caméra par glisser-déposer pour l’orbite et à la molette pour le zoom, un panneau HUD avec des curseurs d’état de la mer et d’heure de la journée ainsi qu’un affichage FPS en direct, et un mode dérive qui permet à la caméra de glisser seule. Conservez le tout sur une unique page statique sans étape de build, affichez un élégant état d’initialisation au démarrage du rendu et prévoyez un fonctionnement dégradé lorsque WebGPU n’est pas disponible.
Remplacez le calme de l’après-midi par une tempête nocturne, avec une houle plus forte, des traînées de pluie et quelques éclairs occasionnels.
Essayer Websites AgentCréez une démo autonome d’océan en temps réel appelée « Open Sea — Night Storm » avec WebGPU et Three.js TSL. Affichez une houle de vagues de Gerstner avec des normales de micro-surface FBM et un ciel spectral qui suit l’heure de la journée. Prenez en charge les commandes de caméra par glisser-déposer pour l’orbite et à la molette pour le zoom, un panneau HUD avec des curseurs d’intensité de la tempête et de hauteur des vagues ainsi qu’un affichage FPS en direct, et un mode dérive qui permet à la caméra de glisser seule. Conservez le tout sur une unique page statique sans étape de build, affichez un élégant état d’initialisation au démarrage du rendu et prévoyez un fonctionnement dégradé lorsque WebGPU n’est pas disponible.
Placez un petit voilier sur les vagues, que le spectateur peut diriger au clavier pendant qu’il suit la houle.
Essayer Websites AgentCréez une démo autonome d’océan en temps réel appelée « Open Sea » avec WebGPU et Three.js TSL. Affichez une houle de vagues de Gerstner avec des normales de micro-surface FBM et un ciel spectral qui suit l’heure de la journée. Ajoutez un voilier low-poly qui flotte sur la houle grâce à une flottabilité simple, et permettez au spectateur de le diriger avec WASD tandis que la caméra peut suivre le bateau ou orbiter librement. Prenez en charge les commandes de caméra par glisser-déposer pour l’orbite et à la molette pour le zoom, un panneau HUD avec des curseurs d’état de la mer et d’heure de la journée ainsi qu’un affichage FPS en direct, et un mode dérive qui permet à la caméra de glisser seule. Conservez le tout sur une unique page statique sans étape de build, affichez un élégant état d’initialisation au démarrage du rendu et prévoyez un fonctionnement dégradé lorsque WebGPU n’est pas disponible.
Détectez d’emblée la prise en charge de WebGPU et proposez une version WebGL2 plus légère afin que la démo fonctionne dans tous les navigateurs modernes.
Essayer Websites AgentCréez une démo autonome d’océan en temps réel appelée « Open Sea » qui détecte la prise en charge de WebGPU au démarrage et bascule vers un moteur de rendu WebGL2 plus léger lorsque WebGPU n’est pas disponible, tout en conservant la même scène et les mêmes commandes dans les deux cas. Affichez une houle de vagues de Gerstner avec des normales de micro-surface FBM et un ciel spectral qui suit l’heure de la journée. Prenez en charge les commandes de caméra par glisser-déposer pour l’orbite et à la molette pour le zoom, un panneau HUD avec des curseurs d’état de la mer et d’heure de la journée ainsi qu’un affichage FPS en direct, et un mode dérive qui permet à la caméra de glisser seule. Conservez le tout sur une unique page statique sans étape de build, affichez un élégant état d’initialisation au démarrage du rendu et, sur mobile, réduisez le HUD à un volet inférieur avec orbite tactile.
Une sélection de saison et des photos de mannequins sous deux angles dans une boutique de mode épurée articulée autour de deux lignes de produits.
Quatre chambres, chacune face à sa propre montagne, un bain de pierre en plein air : une auberge onsen paisible dans la brume.