The Transpiration
The story behind The Transpiration
Inspired by Transpiration cooling on Wikipedia
Built with Pure WebGL2 · Navier-Stokes solver · Multi-pass FBO pipeline
Techniques Semi-Lagrangian advection · Jacobi pressure solver · Vorticity confinement · Buoyancy forces · Blackbody fire gradient · Gaussian splat injection
Direction Your press is fire. The surface has no choice but to weep.
Result Turbulent fire blooming from your touch on a midnight void — embers, orange plumes, and white-hot cores rising and curling with real fluid dynamics
The Story
Rocket nozzles run at 3,000°C. Steel melts at 1,538°C. The nozzle doesn’t melt because it sweats.
Transpiration cooling is one of the most elegant survival strategies in engineering. A porous wall material — often sintered metal or ceramic — has coolant forced through its microscopic channels from the cold side. As the coolant passes through, it absorbs heat from the wall material. When it reaches the hot surface, it evaporates into a thin protective gas film. The wall endures temperatures that should destroy it because it weeps coolant continuously.
SpaceX uses this principle in the Starship’s heat shield tiles. Gas turbine blades use it to survive inside jet engines. Nuclear reactors use it at the fuel rod boundaries. The principle is always the same: when the environment is too hostile for any material to survive by being strong, the material survives by being permeable. It lets something through. It sweats. It endures by weeping.
The Take
A dark void. The word “press” in faint uppercase. Nothing happens until you commit.
Press and hold — fire blooms from your finger. Not a particle effect, not a painted sprite. A real fluid simulation solving the Navier-Stokes equations on your GPU, 25 pressure iterations per frame. The fire rises because hot fluid rises. It curls because vorticity is preserved. It spreads because that’s what diffusion does. Every behavior is earned from the physics.
Drag slowly and the heat pools into a deep ember mass, red and dense. Drag faster and the velocity injection creates turbulent plumes — orange and yellow tongues curling upward, edges fracturing into fine structure. The gesture maps directly to fluid injection: your movement direction becomes velocity, your speed becomes intensity. You are the heat source. The screen is the wall.
The narrative arrives as temperature milestones. After a second: “47°C.” After sustained interaction: “380°C — aluminum melts.” Then steel. Then the truth: “the nozzle runs at 3,000°C.” Then the mechanism: “3% coolant — 800° drop.” Then the metaphor: “the wall sweats to survive.” And finally, after a full minute of sustained heat: “everything endures by weeping.”
The Tech
Navier-Stokes on GPU: The full incompressible fluid pipeline runs in 9 shader programs, executing sequentially each frame. Velocity and dye fields are stored in RGBA16F float textures at 384px simulation resolution. The pipeline: advect velocity → compute curl → vorticity confinement + buoyancy → compute divergence → clear pressure → Jacobi pressure solve (25 iterations) → gradient subtraction → advect dye. Each step reads from one FBO and writes to another, with ping-pong swapping between read and write targets.
Semi-Lagrangian Advection: Instead of pushing quantities forward (which causes instability), the shader traces backward along the velocity field to find where each texel’s value came from. coord = vUv - vel * texelSize * dt finds the source position, then bilinear filtering samples smoothly. This method is unconditionally stable regardless of velocity magnitude — critical for a simulation where the user can inject arbitrary forces.
Jacobi Pressure Solver: After forces are applied, the velocity field isn’t divergence-free (fluid would compress or expand). The divergence shader computes how much each cell is “leaking.” Then 25 Jacobi iterations solve the Poisson equation ∇²p = div(v), computing a pressure field that, when its gradient is subtracted from velocity, makes the flow incompressible. More iterations = more accurate, but 25 provides visually convincing results at interactive framerates.
Vorticity Confinement: Numerical diffusion in grid-based fluid sims slowly kills vortices — small eddies smooth out over time. Vorticity confinement counteracts this by computing the curl (rotational component) of the velocity field, finding the gradient of its absolute magnitude, and applying a corrective force perpendicular to that gradient. This pushes vortices back toward their centers, preserving the fine turbulent structure that makes fluid look alive rather than muddy.
Buoyancy: Hot dye rises. The shader reads dye intensity at each cell and applies an upward force proportional to it. This creates the natural convective behavior — freshly injected dye rises, cools (dissipates), and makes room for new heat. The buoyancy strength is tuned low enough that dye doesn’t immediately rocket upward, but high enough that the upward drift is visible within seconds.
Fire Gradient Display: The display shader maps dye intensity through a piecewise-linear blackbody gradient: dark ember (0.12, 0.02, 0.0) through deep red, orange, yellow, to white-hot (1.0, 0.94, 0.78). A smoothstep at low intensity blends to the midnight background, preventing hard cutoffs at the fluid boundary. A subtle vignette darkens the corners.
This blog post was AI generated with Claude Code. Authored by Artificial Noodles.