WebGL Fluid Lab

A static WebGL2 fluid playground in the Stam / GPU Gems 3 family. The solver, post-processing, input, presets, and UI live in this repo. Inspired by Pavel Dobryakov's 2017 demo. The default look is grey smoke, not the rainbow CodePen.

Live demo: patschmittdev.github.io/webgl-fluid-lab

The simulation uses a pressure-projection pipeline each frame: advect velocity, advect dye, calculate curl, apply vorticity confinement, calculate divergence, decay and solve pressure, subtract the pressure gradient, then render the dye. Bloom adds a soft-knee bright pass with a downsample and upsample pyramid. Sunrays use a radial transmittance pass derived from the dye mask.

The solver requires WebGL2 and EXT_color_buffer_float. If either is unavailable, the page shows a clear fallback message.

Run locally

npx --yes serve . -p 4173

Open http://localhost:4173. A file:// URL will not load the ES modules.

Controls

• Click-drag on desktop, or swipe on a phone, to paint.
• Presets switch the complete visual configuration.
• Each load starts on Smoke. Wick is a warm core with a cooler smoke tip. Paper is ink on a light page. Pavel 2017 is the original rainbow demo look.
• Phones start with the panel hidden and cap expensive resolutions.
• Leave Mouseover paint off unless you want cursor motion to paint without a click.
• Continuous jet follows the current preset (off for Smoke and Paper, on for Wick). Same solver, not an engine model.
• Export or import JSON, or copy a share URL that contains the complete configuration.
• Splats count persists in localStorage under webgl-labs.fluid.state.v4. Visual settings reset to Smoke on every load.

Config from storage, imported JSON, or a share URL is validated before use. Unknown keys are dropped, numbers are clamped to the control ranges, colors must be #rrggbb, and invalid palette entries are removed.

Keys

• Space: random splats
• P: pause while keeping painting available
• J: toggle the continuous jet
• H: hide or show the panel

Modifier combinations are ignored, so browser shortcuts such as Ctrl+J and Ctrl+P remain available.

Layout

index.html
assets/
  app.js            UI, state, persistence, share links
  presets.js        presets, defaults, and authoritative slider ranges
  styles.css
  engines/
    lab.js          WebGL2 solver and GPU resource lifecycle
    lab/shaders.js  GLSL simulation and post-processing programs

Credits

Inspired by Pavel Dobryakov's WebGL Fluid Simulation (MIT, 2017) and the literature it cites. This repo is a separate WebGL2 playground with its own UI, presets, and shaders. It is not a drop-in copy of Pavel's script.js, and it is not a claim that the fluid method is original.

The live page footer links here and to Pavel's repo.

• WebGL Fluid Simulation CodePen by @PavelDoGreat
• PavelDoGreat/WebGL-Fluid-Simulation, including its live demo
• WebGL Fluid Enhanced, an ES-module fork used earlier for comparison
• GPU Gems 3, chapter 38: Fast Fluid Dynamics Simulation on the GPU
• mharrys/fluids-2d
• haxiomic/GPU-Fluid-Experiments

See NOTICE for the original MIT copyright.