Interactive WebGL fluid simulation showing colorful swirling liquid patterns created by cursor movement, with bloom lighting effects and real-time GPU-based Navier-Stokes physics
Pavel Dobryakov's WebGL Fluid Simulation is one of those projects that just makes you want to keep dragging your cursor around for way too long. It's a GPU-powered Navier-Stokes solver running entirely in the browser, and yes, it works beautifully on mobile too. Swipe around and watch swirling, vivid colors advect and bloom across your screen in real time. There's a reason this repo has 16k+ stars on GitHub.
Under the hood, Pavel implemented the classic GPU Gems approach to fluid dynamics: separate fragment shaders handle advection, divergence, curl, vorticity confinement, pressure solving, and gradient subtraction, all ping-ponging between double-buffered framebuffers. What makes it particularly slick is how configurable everything is via dat.gui controls. You can tweak pressure dissipation, vorticity, splat radius, toggle bloom, and even take screenshots with transparent backgrounds. The code is refreshingly readable for a simulation this polished, and it's a great reference if you're trying to understand how these solvers actually get wired together in WebGL.
Pavel also turned this into a proper iOS and Android app if you want something native. Definitely worth playing with the live demo, then digging into the repo to see how everything fits together.
- Live Demo: https://paveldogreat.github.io/WebGL-Fluid-Simulation
- Source Code: https://github.com/PavelDoGreat/WebGL-Fluid-Simulation
- Author: Pavel Dobryakov (X, Instagram, GitHub)