Web Ocean — Productivity skill for Claude Code

web-ocean

A real-time ocean renderer written from scratch on WebGPU, with no engine or rendering library. It draws a sunset sea with simulated waves, whitecaps, sun glitter, and a physically based sky with clouds. You fly around it with a free camera.


75 degrees off the sun, 2.4 m up	Looking toward the sun from 30 m up

Run it

You need a recent Chrome with WebGPU and a reasonably capable GPU. On a laptop, force Chrome onto the dedicated GPU in the Windows graphics settings, or it will fall back to the integrated one.

Open `ocean.html` directly in the browser. `ocean.min.html` is the same page minified (61 KB instead of 102 KB). Both are self-contained and work from `file://`.

To run from source:

npm install
npm start        # serves http://localhost:8080/

After editing anything under `js/`, run `npm run build` to regenerate both bundles. The minified build strips WGSL comments and whitespace and minifies the JavaScript with esbuild.

Controls

Input	Action
Click the canvas	Capture the mouse (Esc releases it). Holding the right mouse button also works.
Mouse	Look around
W A S D	Move
Space or E / Q or C	Up / down
Shift	5x speed
Mouse wheel	Change base speed
H	Settings panel: wind, swell, choppiness, turbidity, foam, sun, haze, clouds, exposure, bloom

The camera keeps itself above the displaced water surface, so waves never pass through it.

URL parameters are handy for testing. `?w=2560&h=1440` forces the render resolution, `cam=x,y,z,yawDeg,pitchDeg` sets the camera, `fov=deg` sets the field of view, `ui=0` hides the HUD, and any settings key works too, for example `windSpeed=12&swellHs=2&sunElev=8`.

How it works

Waves

The sea is a Tessendorf FFT simulation with six cascades of 256 by 256 samples. The patches range from 1103 m down to 0.26 m, so wav