Your browser does not support WebGPU.

Please use a recent version of Chrome or Edge.

GPU device lost.
Failed to start:

FlowLab

WebGPU

Real-time fluid dynamics on your GPU — drag obstacles through flowing fluid and watch vortices emerge.

WebGPU ready: detecting…

FlowLab Guide

WebGPU
Getting Started Drag the obstacle and watch the flow react
▸

Click and drag the obstacle to move it through the fluid. The simulation responds in real time — you'll see the flow separate and form wake patterns behind the body.

▸ Learn more about the solver

FlowLab solves the 2D incompressible Navier-Stokes equations using a pressure-projection method. The pressure field is computed iteratively (red-black SOR), then used to correct velocities so they satisfy the divergence-free condition. The entire computation — pressure solve, MacCormack advection, viscous diffusion, and boundary enforcement — runs as WebGPU compute shader dispatches on your GPU.

Visualization Modes Four ways to see the flow
▸
Smoke Dye tracer injected at the inlet. Dark regions show dye, light regions are clear fluid. Uses the magma colormap.
Pressure Color-coded pressure field. Blue is low pressure, red is high. Uses the coolwarm colormap.
Streamlines Lines tangent to the velocity field at each instant. They show the instantaneous flow direction everywhere.
Velocity Arrows Arrow field where length and color indicate local speed. Shows both direction and magnitude.
magma coolwarm
▸ Learn more about Eulerian visualization

All four modes show the flow from a fixed reference frame (Eulerian perspective). Smoke and pressure are scalar fields mapped to colormaps; streamlines and velocity arrows visualize the vector velocity field. You can toggle multiple modes simultaneously — try enabling both smoke and streamlines to see how dye transport relates to flow direction.

Obstacle Shapes & Rotation Four shapes, each with different flow behavior
▸

Select a shape from the toolbar. Hold Shift and move the mouse to rotate the obstacle to any angle. If the canvas has no obstacle, click once on the flow to insert one; then drag and rotate as usual.

Circle
Square
Airfoil
Wedge
▸ Learn more about shapes & aerodynamics

A circle produces symmetric flow separation; a square has fixed separation points at its sharp corners, creating a wider wake. The airfoil (NACA 0012 profile) is streamlined to minimize drag — flow stays attached longer. The wedge deflects flow obliquely. Rotating any shape changes its effective angle of attack, dramatically altering the wake pattern.

▸ Learn more about how rotation works

Hold Shift and move the mouse to set the angle — the obstacle rotates like a compass needle pointing toward your cursor. The angle persists when you release Shift. Drag without Shift to translate as usual. Loading a new preset resets rotation to zero.

Particle Tracing Release tracer particles into the flow
▸

Click the Particles button in the toolbar to switch to particle mode. Then click anywhere on the canvas to place an emitter — it continuously releases particles that follow the flow. Click again to add more emitters. Click Particles again to return to obstacle-drag mode.

▸ Learn more about Lagrangian vs Eulerian

Particles show the Lagrangian perspective — following individual fluid parcels as they move through space. Compare with streamlines, which show the Eulerian (fixed-frame) snapshot of flow direction. In steady flow, particle paths and streamlines coincide. In unsteady flow like vortex shedding, they diverge: streamlines show where flow is going right now, while particle trails show where fluid has been.

Presets & Flow Phenomena Two classic configurations to explore
▸

Kármán Vortex Street

A small cylinder sheds alternating vortices in a beautiful periodic pattern — one of the most iconic phenomena in fluid dynamics.

▸ Learn more about the Strouhal number

Named after Theodore von Kármán, this alternating vortex pattern explains why power lines hum in the wind and why certain bridges oscillate. The shedding frequency is reported as the Strouhal number, St = fD/U, where f is frequency, D is diameter, and U is freestream velocity.

The familiar “St ≈ 0.2 for a circular cylinder” is the high-Re plateau, not a constant: below Re ≈ 300 the Strouhal number falls with Reynolds number. FlowLab does not assume a value — the St readout in the Flow Info panel is measured from this simulation’s own wake by a downstream probe, and in the Re range the app runs it reads below 0.2.

▸ Learn more about wake transition

At low Reynolds number the wake is steady and symmetric. Raise Re and the wake becomes unsteady — you'll see vortex shedding begin. The textbook figure for an unconfined circular cylinder is Re ≈ 47; in this solver's channel the onset was measured at Re 52.2 ± 0.3, which sits above the textbook value in the direction the 12% blockage and the staircased cylinder both predict. Try it: drag the Re slider in the Flow Info panel below 52 and the street dies out, then bring it back up and watch it grow again — slowly, because the growth rate vanishes near onset. Use that slider and not the inflow velocity: the Re control sets ν = U·D/Re, so moving U moves ν with it and holds Re fixed. Grid resolution does not raise Re either.

Backward-Facing Step

A sudden expansion in the channel creates a recirculation zone behind the step. Watch the trapped vortex and the downstream reattachment point.

This preset starts with no obstacle. The first click on the canvas inserts the active obstacle shape (a circle by default) and activates the drag/rotate ring, shape buttons, and Re/St badges; after that it works like Kármán.

reattach
▸ Learn more about the benchmark problem

The backward-facing step is a classic benchmark in computational fluid dynamics. The flow separates at the step edge and reattaches downstream, trapping a recirculation bubble. The reattachment length (distance from step to where flow touches the wall again) grows with Reynolds number. Getting this length right is a standard test of solver accuracy.

Advanced Controls Fine-tune the numerical solver
▸
dt (timestep) Smaller is more accurate but slower. If the simulation blows up, lower this first.
ω (SOR relaxation) Controls pressure solver convergence speed. Values near 1.9 are optimal; above 1.98 can diverge.
Iterations Pressure solver iterations per frame. More iterations means better pressure accuracy but slower frames.
Inflow velocity Speed of the incoming flow — the U in Re = U·D/ν. It does not raise Reynolds number: the Re control sets ν = U·D/Re, so raising the inflow raises the viscosity with it and Re holds constant. It does raise the CFL number, and it takes you off the one amplitude (U = 1.0) at which the solver's numerical viscosity was measured — so the Re badge stops quoting a measured ceiling once you move it.
Grid resolution Number of cells across the domain. Higher resolution captures finer detail but demands more GPU work. It does not buy Reynolds number. The scheme's own numerical viscosity was measured independent of cell size — flat to 0.5% across a 4× refinement — because it is an operator-splitting error in time, not grid diffusion; only a smaller dt lowers it. And at the 256 pressure iterations the Kármán preset ships, the honest Re ceiling falls as the grid grows — Re 236 at tier 64 down to Re 16.5 at tier 1024 — because a fixed iteration count converges the pressure solve progressively less well on a finer grid.
▸ Learn more about numerical stability

The solver uses a MacCormack advection scheme — a semi-Lagrangian trace forward, the same trace backward, then a limited combine that keeps the correction only where it stays inside the min/max of the cells it was interpolated from. For stability, the CFL condition (dt × U / h < 1) should be satisfied — meaning fluid should not cross more than one cell per timestep. The default parameters are chosen to be stable for typical configurations. If the simulation explodes into noise, lower dt or reduce inflow velocity.

Keyboard Shortcuts Quick keys for common actions
▸
P Play / Pause the simulation
M Step one frame forward (while paused)
1 Load Kármán Vortex preset
2 Load Backward Step preset
FlowLab WebGPU Author GitHub
Preset:
0
0 N/m²
-- ms/frame
Click "Particles" then click on the flow to release particles
Advanced
Numerical Parameters
dt 0.0167
ω 1.90
Iterations 40
Inflow velocity 2.00
Flow Info
Re (?) --
St (?) measuring…
Solver Internals
Grid resolution
Visualize:
Shape: