WebGL fluid simulation

This is a 2D fluid simulation written in TS using WebGL2. You can play around with it here.

• Drag your mouse around to add external forces.
• When visualizing dye: either right-click or double-click then drag to add dye.
• press S to take a screenshot.

Running the app

Install pnpm with corepack or npm, then run

pnpm install
pnpm run dev

Gallery

References

• Harris, M. J. (2004). GPU GEMS Chapter 38, Fast Fluid Dynamics Simulation on the GPU. link
• Fluid Simulation (with WebGL Demo) link
• Fluids-2D: https://github.com/mharrys/fluids-2d
• WebGL wind: https://github.com/mapbox/webgl-wind