2.49 KB
Newer Older
Amanda Ghassaei's avatar
Amanda Ghassaei committed
# FluidSimulation
amandaghassaei's avatar
amandaghassaei committed
WebGL shader for mixed grid-particle fluid simulation
Amanda Ghassaei's avatar
Amanda Ghassaei committed
3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

Live demo at <a href="" target="_blank"></a>

<img style="width:100%" src="img.png"/>

This simulation solves the <a href="" target="_blank">Navier-Stokes equations</a> for incompressible fluids in a GPU fragment shader.
I implemented <a href="" target="_blank">no-slip boundary conditions</a> at the borders to keep the fluid contained within the bounds of the screen.
To increase performance, I solved for the velocity vector field of the fluid at a lower resolution than I used to compute the visualization of fluid flow; I used bilinear interpolation to smooth out artifacts caused by this speedup.
I've also added 160,000 <a href="" target="_blank">Lagrangian particles</a> on top of the simulation -
these particles are rendered using <a href="" target="_blank">threejs</a>, but their positions are computed on the GPU.
<b>Instructions:</b> Click and drag to apply a force to the fluid.  Over time, the colored material in the fluid will dissipate:
<img style="width:100%" src="img2.png"/>
To learn more about the math involved, check out the following sources:<br/>
<a href="" target="_blank">Real-time ink simulation using a grid-particle method</a> - mixing Eulerian and Lagrangian techniques for fluids<br/>
<a href="" target="_blank">Fast Fluid Dynamics Simulation on the GPU</a> - a very well written tutorial about programming the Navier-Stokes equations on a GPU.
Though not WebGL specific, it was still very useful.<br/>
<a href="" target="_blank">Fluid Simulation (with WebGL demo)</a> - this article has some nice, interactive graphics that helped me debug my code.<br/>
<a href="" target="_blank">Stable Fluids</a> - a paper about stable numerical methods for evaluating Navier-Stokes on a discrete grid.<br/>
By <a href="" target="_blank">Amanda Ghassaei</a>, code on <a href="" target="_blank">Github</a>.