Website for the musician Floating points that uses WebGL shader for mixed grid-particle fluid simulation.
Instrutctions: Move the mouse over the webpage to apply a force to the fluid. Over time, the colored material in the fluid will dissipate.
This simulation solves the Navier-Stokes equations for incompressible fluids in a GPU fragment shader. I implemented no-slip boundary conditions 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. There is the option to add Lagrangian particles on top of the simulation - these particles are rendered using threejs, but their positions are computed on the GPU.
To learn more about the maths 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.
The two clickable buttons bring up scrollable overlays containing the album artwork which is a clickable link to bandcamp where the album/EP can be purchased, track listing and a music video. Either side of the overlays the mouse cursor can still be used to induce a force on the background.
Fluid simulation framework by Amanda Ghassaei, code on Github.
Website design by Jamie Edwards, [email protected].