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.
Frequently Asked Questions
What is WebGL fluid simulation?
WebGL fluid simulation is a real-time visualization of fluid dynamics running entirely in your browser using GPU shaders. It solves the Navier-Stokes equations to simulate how fluids move, mix, and dissipate when you interact with the canvas.
Does it work on mobile devices?
Yes. The simulation supports touch input and works on most modern smartphones and tablets. Multi-touch is supported — use multiple fingers to create multiple fluid streams simultaneously.
Is any data sent to a server?
No. The entire simulation runs locally on your GPU using WebGL shaders. No data is transmitted anywhere. You can even disconnect from the internet after loading the page.
What do the controls do?
Viscosity controls how thick the fluid feels — higher values make it spread slower. Pressure affects how the fluid pushes against itself. Curl adds swirling vortex effects. Splat Radius controls how large each color injection is.
Can I save my fluid art?
Yes. Click the Screenshot button to download the current canvas as a PNG image. The image captures exactly what you see on screen at full resolution.
What browsers support this?
Any browser with WebGL support — Chrome, Firefox, Safari, Edge, and most mobile browsers. The simulation uses half-float textures when available for better quality, with automatic fallback for older devices.