Fluid Simulation
Real-time 2D fluid solver using WebGL2 compute shaders. Mouse-interactive with dye injection and velocity visualization.
The Math
This project implements a stable, real-time 2D fluid simulation using the Navier-Stokes equations solved on the GPU. The simulation runs entirely in WebGL2 compute shaders, achieving 60fps at high resolutions.
The fluid state is represented as two textures:
- Velocity field — a vector texture encoding flow direction and speed at each pixel
- Dye field — a scalar texture representing the concentration of visible dye
Advection
The core operation is semi-Lagrangian advection — moving quantities along the velocity field. Each pixel's value is computed by tracing backwards along the velocity to find where the material came from:
vec2 coord = fragCoord - velocity * dt;
fragColor = texture(sourceField, coord / resolution);
Mouse Interaction
Mouse movement injects both velocity and dye into the simulation. Click and drag to push the fluid around; the velocity dissipates over time while dye trails persist, creating beautiful swirling patterns.
Performance
Running at 1024×1024 resolution on a single GPU, the solver processes over 1 million cells per frame. The WebGL2 compute pipeline eliminates CPU-GPU transfer overhead, keeping everything on the GPU from simulation to render.