WebGL Fluid Simulation
Click, drag, or touch the canvas to create mesmerizing fluid patterns. Adjust viscosity, pressure, and color modes to explore fluid dynamics — everything runs in your browser using WebGL shaders.
Click and drag on the canvas to create fluid motion
How Fluid Simulation Works
This fluid simulation solves the Navier-Stokes equations in real time using WebGL fragment shaders running on your GPU. The simulation uses a grid-based approach where each pixel represents a point in a velocity field. When you click and drag, you inject velocity and color dye into the field. The simulation then advects (moves) the dye along the velocity field, applies diffusion to simulate viscosity, and uses a pressure solver to ensure the fluid remains incompressible. The curl parameter adds vorticity confinement, creating swirling patterns that make the fluid look more natural and visually striking.
Fluid Dynamics for Creative Projects
Interactive fluid simulations have become a popular tool for creative coding, generative art, and interactive web design. Designers use fluid effects as dynamic backgrounds, loading animations, and interactive hero sections on websites. Artists create mesmerizing abstract compositions by layering colors and adjusting physical parameters. The combination of mathematical precision and organic beauty makes fluid simulation one of the most visually captivating applications of GPU computing in the browser. Every interaction produces unique, unrepeatable patterns — making each session a creative experience.
Tips for Best Visual Effects
For dramatic swirling effects, increase the curl parameter while keeping viscosity low. This creates tight vortices that spin and merge. For smooth, paint-like spreading, increase viscosity and reduce curl. The fire color mode works best with fast, short strokes, while ocean mode shines with slow, sweeping movements. Try the Random Splats button to seed the canvas with multiple color sources, then gently drag through them to create complex mixing patterns. For screenshots, let the simulation settle for a moment after your last interaction — the natural dissipation creates beautiful gradient transitions.
WebGL Performance and Compatibility
This simulation runs entirely on your device using WebGL shaders, with no server processing. It works on any modern browser that supports WebGL — including Chrome, Firefox, Safari, and Edge on both desktop and mobile devices. On mobile, touch and multi-touch interactions create fluid motion naturally. Performance depends on your GPU — most devices handle the simulation smoothly at 60 frames per second. The simulation uses half-float textures when available for better precision, with automatic fallback to standard textures on older hardware.
Privacy and Offline Use
No data leaves your browser — the entire simulation runs locally using GPU shaders. You can disconnect from the internet after loading the page and continue playing with the fluid. Screenshots are generated locally as PNG images and download directly to your device. There are no analytics tracking your interactions with the canvas, no cookies stored, and no account required. This is a pure client-side WebGL application.