🌊

Fluid Dynamics & Aerodynamics

The Navier-Stokes equations govern everything from a raindrop to a galaxy-scale gas cloud. Explore SPH particles, ocean Gerstner waves, and turbulent vortices — all running live in your browser.

7+ simulations WebGL · Canvas 2D SPH · Navier-Stokes · Gerstner

Category Simulations

From laminar to turbulent — fluids in motion

Fluid simulation is one of the hardest problems in real-time graphics. The Navier-Stokes equations are non-linear PDEs with no closed-form general solution. Modern methods — SPH particles, lattice-Boltzmann cells, height-field approximations — trade physical exactness for interactive framerates.

💧
★★★ Advanced
SPH Fluid Simulation
Smoothed Particle Hydrodynamics in WebGL. Thousands of particles interact via Lennard-Jones-like pressure and viscosity forces. Adjustable surface tension, gravity and density. Marching-squares surface extraction optional.
WebGL SPH Navier-Stokes Density
🌊
★★☆ Moderate
Ocean Waves
Gerstner wave superposition on a Three.js mesh with per-vertex displacement and foam accumulation. Tune amplitude, wavelength, phase speed and wind direction in real time.
Three.js Gerstner Waves GLSL FFT
〰️
★★☆ Moderate
Wave Equation
2D wave equation solved on a grid using finite differences. Click to place sources; tune wave speed and damping. Interference patterns, standing waves, and boundary reflections emerge naturally.
Canvas 2D Finite Differences PDE Interference
🌧️
★☆☆ Beginner
Rain & Puddles
Falling raindrops with realistic splatter physics; ripple rings expand on the puddle surface with physically motivated decay. Wind angle and rain intensity sliders included.
Canvas 2D Ripples Surface Tension Particles
🫧
★☆☆ Beginner
Soap Bubbles
Pressure-driven bubbles rising through a fluid column. Surface tension drives the spherical shape; coalescence and film thinning produce the Plateau–Rayleigh instability when bubbles meet.
Canvas 2D Surface Tension Pressure Buoyancy
🌀
★★★ Advanced New
Kármán Vortex Street
2D Lattice Boltzmann (D2Q9, BGK) simulation of vortex shedding behind a cylinder. Adjust Reynolds number in real time. Color by velocity, vorticity or density. Click to add obstacles.
LBM D2Q9 Reynolds Number
🌪️
★★★ Advanced
Tornado
Rotating convective vortex: pressure gradient drives inflow, updraft sustains the funnel. Adjust wind speed and humidity to see formation and dissipation dynamics.
Vortex Convection Particles
🌍
★★☆ Moderate
Planetary Atmosphere
Simplified GCM: Hadley cells, Coriolis deflection and jet streams on a rotating sphere. See how latitude and rotation rate shape global circulation patterns.
GCM Coriolis Three.js
🌀
New★★★ Advanced
Lattice-Boltzmann Flow
D2Q9 Lattice-Boltzmann fluid simulator. Draw obstacles, watch vortices form, visualise velocity, vorticity and density fields. Adjust viscosity and Reynolds number in real time.
Canvas 2D LBM Vorticity
✈️
★★★ Advanced
Aerofoil & Lift
NACA 4-digit profile with streamlines and pressure distribution. Adjust angle of attack and watch Cl/Cd coefficients and stall onset update in real time.
Canvas 2D NACA Lift Bernoulli
🔵
★☆☆ Beginner
Bernoulli's Principle
Fluid through a Venturi tube: particles speed up in the constriction as pressure drops. P + ½ρv² = const and A₁v₁ = A₂v₂ shown with live pressure gauges. Choose Water, Air, Oil or Mercury.
Bernoulli Continuity Canvas 2D
🌊
★★☆ Moderate New
Shallow Water Equations
1D Saint-Venant equations solved with the Lax-Friedrichs scheme. Dam-break, sloshing, tidal wave, and hydraulic step scenarios. Live Froude number, wave speed, Manning friction and mass conservation tracking.
Saint-Venant Lax-Friedrichs Froude Number Canvas 2D

Key Concepts

The equations behind fluid motion

Navier-Stokes
∂u/∂t + (u·∇)u = −∇p/ρ + ν∇²u + f. The left-hand non-linear convection term is what makes turbulence so hard. Incompressibility adds ∇·u = 0. No general closed-form solution exists for 3D — one of the Millennium Prize Problems.
Smoothed Particle Hydrodynamics
Lagrangian method: fluid is N particles. Each carries mass, velocity and pressure. Quantities at any point are a kernel-weighted sum over neighbours within radius h. Pressure from density via equation of state. No mesh — handles free surfaces naturally.
Gerstner Waves
Surface particles move on circles: x = x₀ − (A/kh)sin(kx−ωt), y = A cos(kx−ωt). Superpose multiple components with different wavelengths via a Phillipps spectrum for photorealistic ocean. Velocity is analytic — no PDE solve needed.
Lattice-Boltzmann Method
Mesoscopic approach: instead of tracking particles or solving Navier-Stokes directly, evolve a particle distribution function on a fixed lattice. Streaming + collision → BGK operator. Recovers incompressible NS in the low-Mach limit. GPU-friendly — each cell updates independently.

Learning Resources

Deep dives into fluid simulation techniques

Article Navier-Stokes Fluid Simulation From scratch: pressure projection, velocity advection, Poisson solver. Full JS implementation with canvas rendering. → Article SPH Fluid — How It Works Particle kernels, density estimation, pressure forces and viscosity — step by step with JavaScript code samples. → Article Lattice-Boltzmann in 200 Lines of JS D2Q9 streaming and BGK collision, boundary conditions, velocity field visualisation. → Article Gerstner Waves & Ocean Rendering Closed-form trochoidal waves, Phillipps spectrum superposition and foam accumulation in Three.js. →
All articles →

About Fluid Dynamics Simulations

SPH, Navier–Stokes, Kármán vortex streets, and ocean waves — live

Fluid dynamics simulations model the motion of liquids and gases governed by the Navier–Stokes equations. Smoothed-Particle Hydrodynamics (SPH) represents fluid as interacting particles that compute pressure and viscosity from kernel-weighted neighbourhood sums. The Kármán vortex street simulation solves a simplified 2D grid model to reproduce the alternating vortex shedding behind a cylinder — a pattern visible in cloud formations and studied in aerodynamics and civil engineering.

Ocean wave simulations implement Gerstner's trochoidal wave equations on a GPU vertex shader for tens of thousands of vertices at interactive frame rates. By adjusting Reynolds number, particle density, viscosity, or wave steepness you transition between laminar flow and turbulence, observe wave breaking, and watch surface tension create capillary ripples. These are the same mathematical frameworks used in CFD software, weather models, and animated film pipelines.

Fluid dynamics is among the most computationally demanding fields in science. Weather forecasting, aircraft design, cardiovascular medicine, and offshore engineering all depend on solving the Navier-Stokes equations. The Clay Mathematics Institute has offered a $1 million prize for a rigorous mathematical proof of whether smooth solutions always exist — one of the seven Millennium Prize Problems. These browser simulations give an intuitive feel for turbulence, vortex dynamics, and the transition from laminar to chaotic flow.

Key Concepts

Topics and algorithms you'll explore in this category

Navier-StokesMomentum and continuity equations for viscous flow
SPHSmoothed Particle Hydrodynamics for Lagrangian fluid
Eulerian GridFixed-grid finite-difference fluid solver
Reynolds NumberRatio of inertial to viscous forces: Re = ρvL/μ
Kármán Vortex StreetPeriodic vortex shedding behind a bluff body
LBMLattice Boltzmann Method — mesoscopic fluid simulation

🌊 Test Your Fluid Dynamics Knowledge

5 questions — Reynolds number, Bernoulli, viscosity and more

Frequently Asked Questions

Common questions about this simulation category

What is the difference between SPH and Euler fluid?
SPH (Smoothed Particle Hydrodynamics) is a Lagrangian method: fluid is represented by moving particles that carry mass, velocity, and pressure. Eulerian methods use a fixed grid and compute fluxes between cells. SPH handles splashing and free surfaces better; Eulerian grids handle large smooth flows more efficiently.
What causes the Kármán vortex street?
At Reynolds numbers between ~50 and ~200 000, flow past a cylinder becomes unstable. Vortices shed alternately from the upper and lower sides of the obstacle, creating a periodic street of counter-rotating vortices. This phenomenon causes the singing of telephone wires and structural resonance in chimneys.
How is the Navier-Stokes equation solved in real time?
The simulation uses Jos Stam's stable fluids method: advection (semi-Lagrangian backtracking), diffusion (implicit Gauss-Seidel), and pressure projection (Helmholtz decomposition) ensure unconditional stability at interactive frame rates, at the cost of some numerical dissipation.

Other Categories