A realtime fluid flow simulation on the GPU using WebGL
Live demo at apps.amandaghassaei.com/VortexShedding/
This simulation solves the Navier-Stokes equations for incompressible fluid flow past an obstacle in a GPU fragment shader.
It exhibits a phenomenon called vortex shedding,
where vortices of alternating spin spontaneously emerge behind the obstacle.
To increase performance, I solved for the velocity vector field of the fluid at a lower resolution than I used to compute the distribution of material moving through the fluid (shown in black and white).
I used bilinear interpolation to smooth out most artifacts caused by this speedup - though you can still see some artifacts around the boundary of the obstacle.
I ignored the viscous diffusion term from the Navier-Stokes formula to encourage better vortex formation (the implicit advection solving I'm using creates enough diffusion on its own for this system).
Click and drag to apply a force to the fluid:
To learn more about the math involved, check out the following sources:
Fast Fluid Dynamics Simulation on the GPU - a very well written tutorial about programming the Navier-Stokes equations on a GPU.
Though not WebGL specific, it was still very useful.
Fluid Simulation (with WebGL demo) - this article has some nice, interactive graphics that helped me debug my code.
Stable Fluids - a paper about stable numerical methods for evaluating Navier-Stokes on a discrete grid.
Written by Amanda Ghassaei as a homework assignment for The Nature of Mathematical Modeling, code on Github.
If you like this, you might also check out my other Fluid Simulation app.