ZeonTools
Key Takeaways
- This is a real Navier-Stokes fluid solver running on your GPU via WebGL — not a particle system or pre-rendered animation.
- The simulation computes 8 physics shader passes per frame (Curl, Vorticity, Divergence, Jacobi Pressure × 20, Gradient Subtract, two Advections).
- Bloom, Sunrays, and Shading are GPU post-processing effects that run after the physics solve each frame.
- You can create 10 color themes and apply 4 physics presets (Galaxy, Storm, Lava Lamp, Watercolor) with one click.
- All generated artwork can be exported as a free HD PNG with zero watermarks.
- The tool works on any WebGL-capable device — desktop, laptop, tablet, or mobile — at 60fps.
How to Use the WebGL Fluid Simulation (Step-by-Step)
Getting started takes under 30 seconds. No account, no download, and no installation needed — the simulation runs entirely in your browser.
Open the Canvas
The black fluid canvas at the top of this page loads automatically. You will see an animated starter burst of fluid appear within 1–2 seconds as the simulation initializes its GPU framebuffers.
Click and Drag to Paint Fluid
Click anywhere on the canvas and drag your mouse. Colorful fluid trails will follow your cursor. On mobile, swipe with one or multiple fingers — multi-touch creates complex intersecting flows.
Choose a Color Theme
In the left panel, click any of the 10 colored dots to switch the fluid palette. Options include Rainbow, Fire, Ocean, Aurora, Neon, Lava, Galaxy, Mint, Ghost, and Monochrome.
Try a Quick Preset
Click Galaxy for a deep-space nebula look, Storm for chaotic neon turbulence, Lava Lamp for slow hypnotic blobs, or Watercolor for soft painterly washes. Each preset reconfigures all physics sliders instantly.
Fine-Tune Physics Sliders
Adjust Density Dissipation to control how long colors linger. Use Vorticity (Curl) to increase or decrease swirling turbulence. Raise Splat Radius for sweeping waves or lower it for precise streams.
Export HD Artwork
When your composition looks perfect, click Save HD Artwork to download the canvas as a full-resolution PNG. The file is royalty-free for any personal or commercial use.
How Real-Time WebGL Fluid Simulation Works
Unlike the particle systems used in video games, or the simple canvas gradient animations common online, this fluid simulation solves real partial differential equations — specifically the incompressible Navier-Stokes equations — directly on your device's GPU every single frame at 60fps.
The core method is based on the seminal research paper "Fast Fluid Dynamics Simulation on the GPU" by Mark Harris (GPU Gems, Chapter 38, 2004). The technique discretizes the fluid domain into a grid and uses a series of GLSL fragment shader passes to compute the physical state of the fluid 60 times per second.
A modern GPU has thousands of shader cores. By expressing the fluid solver as a series of texture-sampling operations, every single cell in the simulation grid is calculated in parallel — not one-by-one in a loop. This is what makes 60fps, HD-resolution fluid simulation possible inside a browser tab.
The Full GPU Shader Pipeline
Each frame rendered by the simulation involves a precise sequence of fragment shader passes. Understanding this pipeline reveals the elegance of GPU-based physics simulation:
Input Forces
Mouse/touch deltas are converted into velocity and dye impulses injected at the splat position.
Curl Calculation
Computes the Z-component of the velocity field's curl (∇ × u), measuring local rotational energy.
Vorticity Confinement
Amplifies the computed curl back into the velocity field to prevent numerical diffusion from killing fine swirling detail.
Velocity Advection
Moves the velocity field along itself using a semi-Lagrangian scheme, creating the self-perpetuating motion of real fluid.
Divergence
Measures how much fluid mass is flowing into or out of each cell — a non-zero result violates conservation of mass.
Pressure Solve
Runs multiple Jacobi iterations to compute a scalar pressure field that, when subtracted, will make the velocity divergence-free.
Gradient Subtraction
Subtracts the pressure gradient from the velocity field, producing a final, physically correct, incompressible velocity field.
Dye Advection
The visible color (dye) is passively carried along the final corrected velocity field to produce the visible output.
Complete Parameters Reference Guide
Every physics parameter in the left-hand control panel maps directly to a mathematical constant in the solver. The table below explains the physical meaning and visual impact of each control:
| Parameter | Physical Meaning | Visual Effect at Max | Visual Effect at Min |
|---|---|---|---|
| Density Dissipation | Rate at which dye opacity decays per frame | Colors vanish quickly; clean, transient trails | Saturated screen; colors persist for many seconds |
| Velocity Dissipation | Rate at which momentum energy decays (simulated drag) | Fluid stops almost instantly after input | Fluid continues flowing for a long time |
| Pressure | Strength of the Jacobi pressure solver iterations | Strong incompressibility; fluid pushes apart forcefully | Fluid compresses; less "bouncy" flow separation |
| Vorticity (Curl) | Magnitude of vorticity confinement amplification | Extreme, chaotic turbulent spirals | Smooth, laminar flows with no swirling |
| Splat Radius | Gaussian kernel radius of the force injection impulse | Massive, sweeping force vectors per drag | Fine, precise, hair-thin streams of color |
Performance Impact Reference
| Setting | Performance Cost | Quality Benefit | Recommended For |
|---|---|---|---|
| Bloom (Glow) | Medium | Dramatic light emission effect on bright colors | High-end desktops for screenshots |
| Sunrays | High | Volumetric god-ray scattering through the fluid | Static wallpaper creation sessions |
| Shading | Low | Adds 3D depth illusion via light-angle intensity | Always-on for all devices |
| Colorful Mode | Negligible | Randomized, constantly-shifting HSV hue cycling | Always-on for artistic output |
Post-Processing Visual Effects Deep Dive
Bloom (Glow Effect)
Bloom is a physically-based rendering technique that simulates how bright light sources scatter within a camera lens or the human eye. The process involves three sub-passes:
- Threshold Pass: Pixels whose luminance exceeds a configurable threshold (default: 60%) are extracted into a separate framebuffer.
- Blur Pass (Downsample): The bright-pixel mask is progressively blurred at half, quarter, and eighth resolutions (8 iterations total), creating a wide, soft glow halo.
- Additive Blend: The blurred result is additively composited back onto the main color buffer, making bright fluid colors appear to emit light.
Sunrays (Volumetric Light Shafts)
Sunrays simulate volumetric light scattering — the phenomenon seen when light passes through fog, smoke, or dust (also called "crepuscular rays" or "god rays"). The GPU implementation uses a radial blur shader that samples the dye texture repeatedly along a direction vector emanating from the center of the screen.
Sunrays involve many texture samples per pixel and significantly increase GPU workload. On mobile devices, the simulation automatically disables Sunrays to maintain 60fps battery-efficient operation.
Vorticity Confinement
Real-world turbulent fluids exhibit complex, self-sustaining swirling structures called vortices. However, the finite-difference numerical method used in the solver naturally introduces numerical diffusion — a smoothing artifact that kills these vortices over time. Without correction, the simulation quickly becomes a boring, diffuse blob.
Vorticity Confinement, a technique introduced by Fedkiw, Stam, and Jensen (2001), measures the local rotational energy (curl) at each grid cell, and then adds a small amplifying force directed toward local curl maxima. This effectively restores the fine-scale turbulent detail, making the simulation look organic and alive.
Real-World Applications of Fluid Simulation
The same Navier-Stokes algorithms powering this browser tool are used across a wide range of professional and creative industries. Understanding these applications reveals why fluid simulation is one of the most impactful areas of computational physics.
| Application | Industry | How Fluid Simulation Is Used | Recommended Preset |
|---|---|---|---|
| Digital Wallpaper Art | Design / Creative | Generate unique, organic abstract textures impossible to create manually. Each interaction produces a one-of-a-kind composition. | Galaxy / Watercolor |
| ASMR & Relaxation Content | Content Creation | Record slow, hypnotic fluid movements as looping video backgrounds for ASMR YouTube channels, meditation apps, and lo-fi music videos. | Lava Lamp / Ocean |
| Livestream Overlays | Streaming / Gaming | Use the fluid canvas as a dynamic, interactive overlay background on OBS or Streamlabs. Viewers can interact via touchscreen during streams. | Storm / Neon |
| Physics Education | Academia / STEM | Visually demonstrate concepts like vorticity, incompressible flow, pressure gradients, and numerical diffusion to students in real time. | Default (adjust sliders) |
| Game Dev Prototyping | Game Development | Prototype fluid shader effects for game environments (water, fire, smoke, explosions) before implementing in Unity or Unreal Engine. | Fire / Lava |
| UI/UX Motion Design | Web / App Design | Capture fluid frames as background assets for hero sections, loading screens, and onboarding animations in modern web and mobile apps. | Aurora / Mint |
| Generative NFT Art | Digital Art / Web3 | Generate unique fluid art compositions and export as high-resolution PNG for minting as generative NFT artwork on platforms like OpenSea. | Galaxy / Rainbow |
| Scientific Visualization | Research / Engineering | Demonstrate how flow patterns emerge from initial conditions — relevant to weather modeling, aerodynamics, and oceanography research. | Custom sliders |
Fluid Dynamics in Nature — Mapping Real Fluids to Simulation Parameters
Every fluid in nature has unique physical properties that determine how it flows. The physics parameters in this simulation can be tuned to approximate the behavior of real-world fluids. The table below maps natural fluids to their corresponding simulation settings:
| Natural Fluid | Density Diss. | Velocity Diss. | Vorticity | Pressure | Real-World Viscosity | Characteristic |
|---|---|---|---|---|---|---|
| 🌊 Water | 1.5 | 0.15 | 25 | 0.85 | ~1 mPa·s | Rapid, turbulent flow; high vortex detail |
| 🌋 Lava | 0.2 | 0.6 | 8 | 0.95 | ~100–1,000 Pa·s | Slow, viscous blobs; minimal turbulence |
| 💨 Smoke | 3.0 | 0.05 | 40 | 0.7 | ~0.018 mPa·s | Fast, wispy; highly turbulent vortices |
| 🍯 Honey | 0.1 | 0.9 | 2 | 0.99 | ~2,000–10,000 mPa·s | Extremely slow; flows only under pressure |
| 🩸 Blood | 0.8 | 0.3 | 15 | 0.85 | ~3–4 mPa·s | Moderate viscosity; pulsed non-Newtonian flow |
| 🌬️ Air | 4.0 | 0.02 | 50 | 0.6 | ~0.018 mPa·s | Near-instant dissipation; maximum chaos |
Kinematic viscosity in the Navier-Stokes equations is a material property measured in m²/s. The simulation does not directly map to SI units — instead, the Velocity Dissipation slider acts as a proxy for viscosity, controlling how quickly momentum spreads and decays per simulation step.
Fluid Dynamics Glossary
- Navier-Stokes Equations
- A set of partial differential equations that describe the motion of viscous fluid substances, defining how velocity, pressure, temperature, and density correlate.
- Vorticity
- A measure of the local rotation or swirling motion within a fluid. High vorticity creates the curling, chaotic vortexes seen in smoke.
- Divergence
- The rate at which fluid exits or enters a given region. For incompressible fluids (like water), divergence must mathematically equal zero everywhere.
- Advection
- The transport of a substance (like dye or heat) by bulk fluid motion. In this solver, both velocity and color dye are advected through the grid.
- Jacobi Iteration
- A numerical algorithm used by the shader to approximate the solution to the pressure Poisson equation, which enforces incompressibility.
- WebGL
- A JavaScript API for rendering high-performance interactive 2D and 3D graphics within any compatible web browser without the use of plug-ins.
WebGL Fluid Simulation vs. Other Simulators
How does this web-based solver stack up against professional VFX software and game engines?
| Feature | ZeonTools WebGL Simulator | Unity / Unreal Engine | Houdini (VFX) |
|---|---|---|---|
| Underlying Math | Navier-Stokes (Grid-based Eulerian) | Usually Particle Systems | FLIP (Fluid-Implicit-Particle) |
| Platform | Runs in web browser (Client-side) | Requires game install | Heavy desktop software |
| Performance | 60fps on modern phones & PCs | 60fps+ on dedicated GPUs | Offline (Pre-rendered) |
| Physical Accuracy | Visually accurate | Approximated for games | 100% accurate |
| Best Used For | Interactive art, education, UI | Video games, VR experiences | Hollywood movies, engineering |
Frequently Asked Questions (FAQ)
A WebGL fluid simulation is a browser-based physics engine that renders highly realistic liquid and smoke dynamics in real-time. By utilizing the WebGL API, the simulation bypasses the CPU and executes complex mathematical equations directly on your device's Graphics Processing Unit (GPU), allowing you to interact with colorful fluids without installing any external software.
The Navier-Stokes equations mathematically describe how viscous fluids flow. This simulator uses an Eulerian grid-based approach to solve these equations across multiple GPU shader passes. It calculates advection (how fluid moves itself), divergence (incompressibility), pressure gradients (using Jacobi iterations), and vorticity (swirling motion) to produce stunningly accurate physics.
Eulerian simulations (which this tool uses) observe fluid flow through a fixed, stationary grid of cells—perfect for rendering continuous volumes like smoke, fire, and liquid dye. Lagrangian simulations, commonly used in video games, track thousands of individual particles moving freely through space. Eulerian grids provide vastly superior visual blending and turbulence.
In grid-based fluid solvers, numerical errors naturally cause the fluid to lose its chaotic rotational energy over time. Vorticity confinement is a mathematical technique used in this simulation to locate swirling areas (vortexes) and artificially inject energy back into them. This preserves the beautiful, small-scale wisps and curls you see trailing behind your mouse.
To achieve a smooth 60 frames per second, this tool executes up to 8 distinct compute shader passes on every single frame. This immense level of parallel processing pushes your GPU to its hardware limits. It is completely normal for your computer or phone to generate heat, as it is rendering physics at a level comparable to modern 3D video games.
They are visually accurate approximations. In order to run seamlessly in a web browser without lagging, the simulator takes necessary mathematical shortcuts—such as running fewer pressure iterations per frame. While it looks completely real to the human eye, it is not a substitute for offline engineering software like Houdini or ANSYS used in aerospace design.
Absolutely. Modern mobile browsers (Safari, Chrome, Firefox) have excellent WebGL support. When you open this tool on a smartphone, the simulation automatically optimizes the internal dye resolution to ensure it maintains a buttery-smooth 60fps experience while you interact using the touchscreen.
Yes! By clicking the "Save HD Artwork" button, you can instantly export a high-resolution, watermark-free PNG of your current fluid canvas. You are completely free to use these images for digital art, website backgrounds, graphic design projects, or even commercial merchandise.