Build a real-time WebGPU ocean renderer from scratch

Noniv asked Claude Code (Opus 5.5) for the most realistic water it could make in WebGPU and got an engine-free sunset ocean with FFT waves and foam that ships as a 61 KB HTML file.

Done withClaude Code· Oct 16, 2026

What they did

GitHub user Noniv gave Claude Code, running Opus 5.5, a one-line brief: the most realistic water it could produce in WebGPU, with a free-flying camera, and no engine or rendering library. The architecture and the implementation were left to the agent. To check its own output, it rendered screenshots in headless Chrome and handed them to separate critic subagents for review, so the code writer was not also the judge. Noniv stepped in with feedback along the way, mostly about how the clouds looked.

How it went

The result is an open-source renderer with a six-cascade FFT wave simulation, a quadtree surface mesh reaching 160 km, whitecaps that drift and streak, a physically based sunset sky with two cloud layers, bloom and tone mapping. The author measured 6 to 8 ms of GPU time per frame at 2560 by 1440 on an RTX 5070 Ti. The volumetric clouds were dropped for flat layers after feedback, and their edge aliasing was fixed later. Open issues listed: far water reads too dark, no shoreline or objects, clouds are not volumetric.

Worth knowing

It needs a recent Chrome with WebGPU and a capable GPU; laptops may fall back to the integrated GPU. The README says little about how long the build took or how many sessions it ran. The critic-subagent loop on rendered screenshots is the part worth copying for any visual work.

Try it

With Claude Code· 6 parts to fill in

Build [a real-time graphics demo, e.g. an ocean scene] from scratch in [WebGPU or my graphics API], with no engine or rendering library, aiming for the most realistic result you can get. You choose the architecture. After each meaningful change, render screenshots in [headless Chrome or my test harness] and have a separate reviewer subagent critique them against reference photos of [subject]; fix what it flags. Keep the frame time under [ms budget] at [resolution]. Stop and show me screenshots before any major rework, such as replacing a whole subsystem.

Square brackets are the parts to fill in. The prompt is ours; the story is theirs.

Where they said it

Related