Humpalumps/Ultra-Water

Media & Design

A real-time FFT ocean renderer for three.js with shore breakers, foam, caustics and underwater effects, plus a demo island.

162
26
JavaScript
MIT
new today

Ultra Water is a real-time ocean renderer built for three.js on WebGL2, shipped with a demo island scene. It is aimed at people building interactive 3D water — a browser-based ocean scene, a game prototype, or a visual study — who want ready-made wave, foam and underwater effects rather than inventing them. It is a renderer and scene kit, not a finished game or product.

What it does

The waves come from a Tessendorf FFT simulation with four cascades (from 600 m down to a 2.1 m capillary band) stacked into one atlas. On top of that, the surface shader adds per-pixel normals, roughness-aware Fresnel, sun glints, half-res planar reflections, depth-validated refraction, subsurface scatter and aerial perspective. Shore breakers are computed from an eikonal travel-time field over the bathymetry, so wave fronts slow, bunch and refract near the coast; foam erodes from whitewater to lace, and the beach gets a swash film and wet line. Caustics are splatted by area ratio and sampled by the seabed, props and underwater shafts, while the underwater pass handles Snell's window, total internal reflection, sun shafts and marine snow. Floating rigid bodies get buoyancy at 240 Hz substeps from a GPU water-height query read back asynchronously. A Hillaire atmosphere, procedural island, rocks and post effects (auto exposure, bloom, AgX) complete the demo README.

Running it

It is a JavaScript project: npm install then npm run dev, then open the printed localhost URL. Orbit with mouse or finger, and the in-page performance panel reports fps, ms per frame and a 20 s graph; its benchmark runs 300 frames and freezes the screen for about a second README.

Phones and tablets are detected and start on a lighter profile (lower resolution, 2× MSAA, scaled-back reflections, no bloom), with optional auto-resolution stepping. ?mobile or ?desktop forces either profile phone and tablet notes.

Performance figures

The author's benchmark numbers are reported on an RTX 3060 in Chrome via ANGLE/D3D11, 4× MSAA, all features on, at 1954×1692 (3.3 MP): roughly 208–303 uncapped fps depending on camera shot, with the Breakers shot around 240 fps README. On a OnePlus Nord 4 the mobile profile held 60 live fps on all shots, and the desktop settings on the same phone ran 41–50 live fps. The README notes the crest-foam upgrade landed after that run and has not been cleanly re-measured, and that the earlier quoted numbers 2–4× lower came from a flawed readback-based benchmark — treat these as author-reported measurements on specific hardware, not a general guarantee.

Limitations

Wakes behind moving objects are not implemented; floaters only disturb the water on drop. Floaters do not collide with each other. Breakers are heightfield waves, so they lean but never curl into a tube. The camera-centred surface mesh is coarse right at the lens when sitting on the waterline README.

Licence

MIT license; code adapted from other projects is listed in third-party notices.

Written by AI from the project's README, updated October 29, 2026. The project's own docs are the source of truth.