README.md 2.32 KB
Newer Older
Amanda Ghassaei's avatar
Amanda Ghassaei committed
1
# FluidSimulation
amandaghassaei's avatar
doc  
amandaghassaei committed
2
WebGL shader for mixed grid-particle fluid simulation
Amanda Ghassaei's avatar
Amanda Ghassaei committed
3

Amanda Ghassaei's avatar
Amanda Ghassaei committed
4
Live demo at <a href="https://amanda.pages.cba.mit.edu/FluidSimulation/" target="_blank">amanda.pages.cba.mit.edu/FluidSimulation/</a>
Amanda Ghassaei's avatar
Amanda Ghassaei committed
5 6 7 8 9 10 11

This simulation solves the <a href="https://en.wikipedia.org/wiki/Navier%E2%80%93Stokes_equations" target="_blank">Navier-Stokes equations</a> for incompressible fluids in a GPU fragment shader.
I implemented <a href="https://en.wikipedia.org/wiki/No-slip_condition" 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="https://en.wikipedia.org/wiki/Lagrangian_particle_tracking" target="_blank">Lagrangian particles</a> on top of the simulation -
these particles are rendered using <a href="https://threejs.org/" target="_blank">threejs</a>, but their positions are computed on the GPU.
<br/><br/>
Amanda Ghassaei's avatar
Amanda Ghassaei committed
12
<b>Instructions:</b> Click and drag to apply a force to the fluid.  Over time, the colored material in the fluid will dissipate.
Amanda Ghassaei's avatar
Amanda Ghassaei committed
13
<br/><br/>
Amanda Ghassaei's avatar
Amanda Ghassaei committed
14
To learn more about the math involved, see the following sources:<br/>
Amanda Ghassaei's avatar
Amanda Ghassaei committed
15 16 17 18 19 20
<a href="https://pdfs.semanticscholar.org/84b8/c7b7eecf90ebd9d54a51544ca0f8ff93c137.pdf" target="_blank">Real-time ink simulation using a grid-particle method</a> - mixing Eulerian and Lagrangian techniques for fluids<br/>
<a href="http://http.developer.nvidia.com/GPUGems/gpugems_ch38.html" 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="http://jamie-wong.com/2016/08/05/webgl-fluid-simulation/" target="_blank">Fluid Simulation (with WebGL demo)</a> - this article has some nice, interactive graphics that helped me debug my code.<br/>
<a href="http://www.dgp.toronto.edu/people/stam/reality/Research/pdf/ns.pdf" target="_blank">Stable Fluids</a> - a paper about stable numerical methods for evaluating Navier-Stokes on a discrete grid.<br/>
<br/>
Amanda Ghassaei's avatar
Amanda Ghassaei committed
21
By <a href="http://www.amandaghassaei.com/" target="_blank">Amanda Ghassaei</a>.
Amanda Ghassaei's avatar
Amanda Ghassaei committed
22