This simulation solves the Navier-Stokes equations for incompressible fluids. The fluid visualization includes thousands of Lagrangian particles that follow the fluid's velocity field and leave behind semi-transparent trails as they move. All computation happens in several GPU fragment shaders for real-time performance.
Instructions: Click and drag to apply a force to the fluid. This simulation can also be used to export vector graphics and toolpaths for pen plotting, see instructions on Github.
To learn more about the math involved, check out the following sources:Real-time ink simulation using a grid-particle method - mixing Eulerian and Lagrangian techniques for fluids.
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. Also check out Stam's book The Art of Fluid Animation.