Your browser does not support WebGPU.

Please use a recent version of Chrome or Edge.

GPU device lost.

FlowLab

WebGPU

Watch real fluid dynamics unfold in your browser. FlowLab solves the 2D incompressible Navier-Stokes equations entirely on your GPU — pressure, advection, and boundary conditions all run as WebGPU compute shaders for real-time interactive performance. Drag obstacles through flowing fluid and watch vortex streets, recirculation zones, and flow separation emerge naturally.

WebGPU is available

You're running on the GPU renderer for maximum performance.
Adapter: detecting…

GPU-Accelerated Solver — High Performance

The pressure solver, velocity advection, and boundary conditions all execute as compute shader dispatches on your graphics card. This delivers real-time frame rates even at high grid resolutions, with the CPU free for rendering overlays and particle tracing.

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 (SOR Jacobi), then used to correct velocities so they satisfy the divergence-free condition. The entire computation — pressure solve, velocity advection, 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.

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 Three classic configurations to explore

Wind Tunnel

Uniform flow past a bluff body. Watch for flow separation in the wake and the pressure difference between the upstream and downstream faces of the obstacle.

▸ Learn more about wake transition

At low Reynolds number the wake is steady and symmetric. As Re increases (raise inflow velocity or grid resolution), the wake becomes unsteady — you'll see vortex shedding begin. For a circular cylinder, this transition happens around Re ≈ 47. Try it: start with low inflow velocity, then slowly increase it with the Advanced panel slider.

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 follows the Strouhal relationship: St = fD/U ≈ 0.2 for circular cylinders, where f is frequency, D is diameter, and U is freestream velocity.

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.

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. Higher velocity means higher Reynolds number and more complex wake behavior.
Grid resolution Number of cells across the domain. Higher resolution captures finer detail but demands more GPU work. Also raises the effective Reynolds number by reducing numerical diffusion.
▸ Learn more about numerical stability

The solver uses a semi-Lagrangian advection scheme. 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 Wind Tunnel preset
2 Load Kármán Vortex preset
3 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 (?) --
Solver Internals
Grid resolution
Visualize:
Shape: