Realistic water in the browser · a comparison bench

WATER LAB

One question, several answers: what is the best way to put convincing water on a web page? Each exhibit is a complete take on it — a simulation method, a renderer, and an honest list of what it gets wrong. Open one, poke it, and read the card for where it breaks.

Live

Pastel blocks and balls bobbing in a glassy rippled pool
Exhibit A

Analytic buoyancy

Bodies floating in a pool of waves. There is no fluid: the water is four summed sine waves, and Jolt Physics gives each body its own water plane every step and integrates the displaced volume against it. Splashes are the only thing the bodies send back to the water.

  • Jolt
  • WASM
  • WebGL 2
Simulates
Rigid bodies only. The water is geometry.
Costs
Nine bodies, ~0.1 ms per step. Runs anywhere WASM does.
Fails at
Pouring, sloshing, breaking waves — anything that changes the water's shape.
A collapsing column of water running across a tiled tank, whitewater at its leading edge
Exhibit C

Particle fluid

A real fluid: 100,000 particles solved with MLS-MPM in WebGPU compute, so waves fold over and sheets tear into spray. The dam-break front runs at 1.2√(gH), inside the range measured for real dam breaks. Six views take the surface apart, from raw particles to shaded water with foam and bioluminescent plankton. Stir the water, drag and shake the tank itself, or tap in Box3D crates to float on it.

  • MLS-MPM
  • Screen-space surface
  • Box3D
  • WebGPU
Simulates
The fluid itself, weakly compressible: under 6% density change through the collapse. Crates, when added, couple both ways.
Costs
64³ grid, fourteen substeps a frame — roughly 10 ms on a desktop GPU, surface included. High quality doubles the particles for a smoother surface at about 3.5× that.
Fails at
Lone droplets and fine spray: a 12.5 cm grid cannot resolve them, so thin films fade out.
Open sea at dusk with a sun glitter path and floating crates, barrels and buoys
Exhibit E

Open water

An endless ocean with exhibit A's solver riding it. The sea is an inverse FFT of a wind spectrum, computed fresh every frame, so jumping fifteen minutes ahead costs nothing. Tap to drop crates, switch between calm and gale, and open the tuning drawer to adjust sky, glitter, scatter and foam live.

  • FFT ocean
  • Jolt
  • WebGL 2
Simulates
Rigid bodies, on a surface that is a transform rather than a simulation.
Costs
One 128² FFT plus eight bodies, ~2 ms per frame. No WebGPU needed.
Fails at
Splashes and shores. The sea moves the bodies but never the reverse, and a repeating tile has no edges.
Rain streaks falling onto dark, rough asphalt
Exhibit G

Rain impact

Rain on wet asphalt, from drizzle to cloudburst. Drop sizes and fall speeds follow measured distributions, and every impact feeds a thin-film shallow-water solve before it becomes a dimple, a crown, secondary spray and spreading ripples.

  • Shallow water
  • WebGPU
  • WebGL 2
Simulates
Every drop at the measured concentration, wind drift, splash thresholds, crowns, secondary droplets and the film's own sheet flow.
Costs
640×400 film, eight substeps, ~38,000 falling drops and ~10,000 impacts/m²·s in a cloudburst.
Fails at
Fully resolved splashes. Crowns follow measured scaling laws and hand over to the grid at their peak.
A water jet landing on a square glass plate, its thin film spread out to the rim
Exhibit H

Sharp-edge wetting

Water poured onto a square glass plate. It spreads as a thin film shaped by surface tension and the glass's contact angle, and pins at the sharp rim.

  • Thin film
  • Wetting
  • WebGPU
Simulates
Film mass and momentum, capillary and wetting forces, contact angle and rim pinning.
Costs
A 192² WebGPU film, four substeps a frame on isotropic 9-point stencils.
Fails at
Anything past the rim. Water reaching the edge leaves the plate with no drops or threads, and high contact angles keep a slight grid bias.

Beyond water

A column of sand grains starting to slump onto a flat plate
Exhibit I

Dry sand

It pours like a fluid and rests like a solid. Collapse a column, pour a pile or rake it apart, then lower the friction to see why sand keeps a slope while water levels out.

  • Granular contact
  • WebGPU
Simulates
Dry grains with contact friction. No fluid pressure anywhere.
Costs
65,536 grains, sixteen contact substeps per tick, all on the GPU.
Fails at
Grain shape, rotation and wet cohesion. The slope is illustrative, not a calibrated angle of repose.

On the bench

Nothing, for the moment — every experiment on the bench has moved to the floor.