fluid-wallpaper / Shaders
Equations into
living ink.
Navier–Stokes on a grid, made interactive — then painted as pigment,
not pixels.
The wallpaper is not a baked video loop. Each frame a small fluid solve
runs on the GPU, then a display pass turns concentrations into the look
you see.
The Navier–Stokes problem
Fluids follow the Navier–Stokes equations: velocity
and pressure evolve together under inertia, viscosity, and forces,
while volume is conserved. In everyday words — the fluid carries
itself, resists shearing, reacts to stirs and wind, and should not
invent or destroy space.
For interactive art we use a
2D incompressible approximation: one shared velocity
field, a pressure-like projection to keep flow roughly
divergence-free, and scalar fields (our dyes) that ride along. Exact
continuum CFD is too heavy for a background; we want motion that
reads as fluid within a frame budget.
Stable fluids on the GPU
The method family is Jos Stam’s
stable fluids, widely taught for real-time demos in
GPU Gems chapter 38
(Fast Fluid Dynamics Simulation on the GPU). This repository
studies that family and implements
original WebGL2 / GLSL ES 3.00 passes — it does not
paste third-party fluid-simulation source.
01 / Advect
Semi-Lagrangian transport
Trace each texel backward through velocity and sample the previous
field. Stable at larger steps than naïve forward integration.
02 / Project
Pressure / Jacobi solve
Measure divergence, relax a pressure-like field, subtract its
gradient so the flow stays closer to incompressible.
03 / Liven
Vorticity & forces
Curl confinement, injectors, wind stations and curl-noise
composers keep the field from going flat under numerical
dissipation.
forces → project velocity → advect velocity → advect dye → display look
Dye is up to four concentration channels sharing one
velocity field — not baked RGB paint. The display shader interprets
weight, sheen, glow and alpha. Simulation moves matter; rendering
decides identity.
Pass map
| Idea |
What it means here |
| Semi-Lagrangian advection |
Trace each texel backward along velocity and sample the previous
field — stable at larger steps than naïve forward schemes.
|
| Pressure projection |
Estimate divergence, iteratively relax a pressure-like field
(Jacobi-style), subtract its gradient so velocity stays closer to
divergence-free.
|
| Vorticity confinement |
Reintroduce curl lost to numerical dissipation so motion stays
lively under artistic budgets.
|
| Packed dye |
Up to four concentration channels share one velocity; display
turns weights into color and material response.
|
Where the shaders live
Fullscreen fragment programs write float / half-float targets. A
small catalog assembles includes; the solver schedules passes each
tick. The public docs and component playground load the
published
fluid-wallpaper@0.1.0-next.0 build from jsDelivr so the
live site matches npm.
This page explains the approach. It does not certify physical accuracy,
mobile thermals, or unfinished prototype solvers.