A realtime fluid flow simulation on the GPU using WebGL
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dependencies
GPUMath.js
GlBoilerplate.js
README.md
img1.jpg
img2.jpg
index.html
main.css
main.js
vortexshedding.gif

README.md

VortexShedding

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.