Showroom · Make-of

How Tidepool was made

A painting pool where the medium is a real fluid simulation. Drag pours ink and momentum into water solved live on the GPU — nothing is a brush texture.

What it demonstrates

That a browser can run honest computational physics, not just play back an effect. The curls, blooms, and filaments are never drawn — they emerge from an incompressible Navier–Stokes solver stepping about sixty times a second in WebGL2 fragment shaders. It also demonstrates resilience: mobile browsers reclaim GPU contexts constantly, and this page recovers instead of leaving a dead canvas.

Techniques, honestly named

• Stable fluids — Jos Stam's classic solver: semi-Lagrangian advection backtraces each texel along the velocity field, which keeps the simulation unconditionally stable at large time steps.
• Vorticity confinement — the curl field feeds a small corrective force that re-energizes whirls numerical dissipation would otherwise smear away.
• Jacobi pressure projection — about twenty relaxation iterations per frame solve for pressure; subtracting its gradient keeps the water incompressible.
• Ping-ponged half-float textures — velocity at ~144 px, dye at ~1024 px, each double-buffered; requires the EXT_color_buffer_float extension.
• Splat injection — pointer events (mouse, pen, multi-touch) stamp a Gaussian of momentum and ink where you drag; a Ripple button stirs the pool from the keyboard.
• PNG export — the context keeps its drawing buffer, so Save PNG is one canvas.toBlob call at full canvas resolution.
• Context-loss recovery — webglcontextlost is intercepted and every GPU resource is rebuilt on restore, so the pool survives the context resets that are routine on phones.
• Respectful fallbacks — prefers-reduced-motion skips the opening swirl; the loop pauses when the tab is hidden; devicePixelRatio is capped at 2; browsers without WebGL2 float rendering get a plain-spoken styled notice.

Recreate it