Open Sea — Realtime WebGPU Ocean

A realtime WebGPU ocean rendered with Three.js TSL: Gerstner swell, FBM micro-surface detail, a spectral sky, sea-state and time-of-day controls, and a hands-off drift mode. This case was generated by Kimi K3.

Try Websites Agent

Loading preview...

Start with this prompt

A self-contained WebGPU ocean demo with orbit controls, sea-state and time-of-day sliders, and a drift mode.

Try Websites Agent

Build a self-contained realtime ocean demo called 'Open Sea' with WebGPU and Three.js TSL. Render Gerstner-wave swell with FBM micro-surface normals and a spectral sky that follows the time of day. Support drag-to-orbit and scroll-to-zoom camera controls, a HUD panel with sea state and time-of-day sliders plus a live FPS readout, and a drift mode that lets the camera glide on its own. Keep everything in a single static page with no build step, show an elegant initializing state while the renderer starts, and degrade gracefully when WebGPU is unavailable.

Turn it into a night storm

Swap the afternoon calm for a moonlit storm with heavier swell, rain streaks, and occasional lightning.

Try Websites Agent

Build a self-contained realtime ocean demo called 'Open Sea — Night Storm' with WebGPU and Three.js TSL. Render Gerstner-wave swell with FBM micro-surface normals and a spectral sky that follows the time of day. Support drag-to-orbit and scroll-to-zoom camera controls, a HUD panel with storm intensity and wave height sliders plus a live FPS readout, and a drift mode that lets the camera glide on its own. Keep everything in a single static page with no build step, show an elegant initializing state while the renderer starts, and degrade gracefully when WebGPU is unavailable.

Add a steerable sailboat

Place a small sailboat on the waves that the viewer can steer with the keyboard while it rides the swell.

Try Websites Agent

Build a self-contained realtime ocean demo called 'Open Sea' with WebGPU and Three.js TSL. Render Gerstner-wave swell with FBM micro-surface normals and a spectral sky that follows the time of day. Add a low-poly sailboat that floats on the swell with simple buoyancy, and let the viewer steer it with WASD while the camera can follow the boat or orbit freely. Support drag-to-orbit and scroll-to-zoom camera controls, a HUD panel with sea state and time-of-day sliders plus a live FPS readout, and a drift mode that lets the camera glide on its own. Keep everything in a single static page with no build step, show an elegant initializing state while the renderer starts, and degrade gracefully when WebGPU is unavailable.

Ship a WebGL2 fallback

Detect WebGPU support up front and serve a lighter WebGL2 version so the demo works in every modern browser.

Try Websites Agent

Build a self-contained realtime ocean demo called 'Open Sea' that detects WebGPU support at startup and falls back to a lighter WebGL2 renderer when WebGPU is unavailable, keeping the same scene and controls in both paths. Render Gerstner-wave swell with FBM micro-surface normals and a spectral sky that follows the time of day. Support drag-to-orbit and scroll-to-zoom camera controls, a HUD panel with sea state and time-of-day sliders plus a live FPS readout, and a drift mode that lets the camera glide on its own. Keep everything in a single static page with no build step, show an elegant initializing state while the renderer starts, and make the mobile layout collapse the HUD into a bottom sheet with touch orbit.

Start with this prompt

A self-contained WebGPU ocean demo with orbit controls, sea-state and time-of-day sliders, and a drift mode.

Try Websites Agent

Build a self-contained realtime ocean demo called 'Open Sea' with WebGPU and Three.js TSL. Render Gerstner-wave swell with FBM micro-surface normals and a spectral sky that follows the time of day. Support drag-to-orbit and scroll-to-zoom camera controls, a HUD panel with sea state and time-of-day sliders plus a live FPS readout, and a drift mode that lets the camera glide on its own. Keep everything in a single static page with no build step, show an elegant initializing state while the renderer starts, and degrade gracefully when WebGPU is unavailable.

Turn it into a night storm

Swap the afternoon calm for a moonlit storm with heavier swell, rain streaks, and occasional lightning.

Try Websites Agent

Build a self-contained realtime ocean demo called 'Open Sea — Night Storm' with WebGPU and Three.js TSL. Render Gerstner-wave swell with FBM micro-surface normals and a spectral sky that follows the time of day. Support drag-to-orbit and scroll-to-zoom camera controls, a HUD panel with storm intensity and wave height sliders plus a live FPS readout, and a drift mode that lets the camera glide on its own. Keep everything in a single static page with no build step, show an elegant initializing state while the renderer starts, and degrade gracefully when WebGPU is unavailable.

Add a steerable sailboat

Place a small sailboat on the waves that the viewer can steer with the keyboard while it rides the swell.

Try Websites Agent

Build a self-contained realtime ocean demo called 'Open Sea' with WebGPU and Three.js TSL. Render Gerstner-wave swell with FBM micro-surface normals and a spectral sky that follows the time of day. Add a low-poly sailboat that floats on the swell with simple buoyancy, and let the viewer steer it with WASD while the camera can follow the boat or orbit freely. Support drag-to-orbit and scroll-to-zoom camera controls, a HUD panel with sea state and time-of-day sliders plus a live FPS readout, and a drift mode that lets the camera glide on its own. Keep everything in a single static page with no build step, show an elegant initializing state while the renderer starts, and degrade gracefully when WebGPU is unavailable.

Ship a WebGL2 fallback

Detect WebGPU support up front and serve a lighter WebGL2 version so the demo works in every modern browser.

Try Websites Agent

Build a self-contained realtime ocean demo called 'Open Sea' that detects WebGPU support at startup and falls back to a lighter WebGL2 renderer when WebGPU is unavailable, keeping the same scene and controls in both paths. Render Gerstner-wave swell with FBM micro-surface normals and a spectral sky that follows the time of day. Support drag-to-orbit and scroll-to-zoom camera controls, a HUD panel with sea state and time-of-day sliders plus a live FPS readout, and a drift mode that lets the camera glide on its own. Keep everything in a single static page with no build step, show an elegant initializing state while the renderer starts, and make the mobile layout collapse the HUD into a bottom sheet with touch orbit.