Designed to Forget: Simulating Photocatalytic Self-Cleaning Glass
Inspired by Self-cleaning glass on Wikipedia
Built with Three.js · ShaderMaterial · WebGLRenderTarget · fal.ai
Techniques Thin-Film Iridescence · Laplacian Diffusion · Ping-Pong Simulation
Direction Simulate Pilkington’s photocatalytic self-cleaning glass as an interactive surface — touch to contaminate, then watch edge-accelerated dissolution eat through your fingerprints with iridescent residue
Result A pane of glass you can frost with your cursor, which then dissolves your marks from the edges inward using gradient-driven decay, leaving rainbow thin-film interference patterns before returning to pristine clarity
The Story
In 2001, Pilkington Glass launched Activ, the world’s first self-cleaning window. The technology is a 20-30 nanometer coating of titanium dioxide on the outer surface. Under ultraviolet light, the coating becomes photocatalytic — it generates hydroxyl radicals that decompose organic matter at the molecular level, breaking it down into carbon dioxide and water. The same UV exposure makes the surface hydrophilic, so rain doesn’t bead into droplets but sheets across the glass in a thin film, carrying away the dissolved residue.
Two phases: dissolve, then sweep. The glass doesn’t resist contamination — it erases it. Not suddenly, but continuously, from the edges inward. The dissolution front is irregular, governed by the geometry of the contamination itself. Thicker deposits take longer. Thin edges go first.
We wanted to simulate this on screen. Not as science communication — as experience. Touch a pane of glass. Leave your marks. Watch them dissolve from the edges inward, leaving iridescent crystal patterns as the photocatalysis eats through your fingerprints. The glass always wins. You can never leave a mark on something designed to forget you.
The Take
A landscape sits behind a pane of glass. You see through it clearly — hills, sky, trees. Move your cursor or touch the screen and contamination blooms where you touch. The glass frosts, the view blurs underneath. Paint across the surface and leave streaks of frosted opacity.
Stop touching. The dissolution begins. Not uniformly — from the edges of your marks inward, where the gradient of contamination is steepest. The dissolution front is irregular, textured by noise, eating through your fingerprints like acid through paper. Where contamination dissolves, thin-film iridescence appears: rainbow interference patterns in the residue, like oil on wet pavement. The iridescent trail fades as the last traces evaporate.
Within seconds, the glass is pristine again. The landscape returns. As if you were never there.
The Tech
The simulation runs as a fullscreen GLSL shader pipeline with ping-pong framebuffers.
Architecture. Two half-resolution WebGLRenderTarget buffers alternate as read/write targets. Each frame runs 16 simulation substeps — on each substep, the current buffer is sampled as input and the result is written to the other buffer. Then the final state is composited against the background in a display shader. The entire scene is a PlaneGeometry(2, 2) rendered with an OrthographicCamera(-1, 1, 1, -1, 0, 1) — a fullscreen quad.
Simulation state. Each texel stores three channels: R is contamination level (0 = clean, 1 = fully contaminated), G is dissolution trail (accumulates where contamination has recently decreased), and B is gradient magnitude (edge detection signal).
Contamination dynamics. Each substep computes the Laplacian of the contamination field (sum of four neighbors minus four times center) and applies a small diffusion term — c += 0.06 * laplacian — which causes contamination to spread slightly with organic, soft edges rather than remaining pixel-sharp.
Edge-accelerated dissolution. The gradient of contamination is computed via central differences: dx = right - left, dy = top - bottom, grad = length(dx, dy). Where the gradient is high (edges of contamination), decay is fast. Where it’s low (interior of a smear), decay is slow. This creates the edge-inward dissolution behavior of real photocatalysis. Value noise modulates the edge decay rate, so the dissolution front is irregular and organic rather than geometrically smooth: edgeDecay = (0.025 + 0.025 * noise) * grad.
Self-cleaning boost. A base decay term continuously reduces contamination everywhere, but slowly. A JavaScript-side timer tracks how long since the last touch interaction. After the user lifts their finger, a smoothstep ramps the decay multiplier from 1.0 to 15.0 over three seconds. This creates the narrative arc: marks persist while you’re actively painting, then the glass “wakes up” and cleans itself once you stop.
Dissolution trail. On each substep, the decrease in contamination (max(0, oldC - c)) is accumulated into the G channel. This trail fades at 0.995 per substep (compounded across 16 substeps per frame). The trail creates a visual record of where dissolution has occurred — important for the iridescence effect.
Display shader. The final composite blends several visual layers:
-
Frosted glass: Where contamination is high, the background is sampled 16 times at random offsets (Poisson-disc approximation) and averaged, creating a blur proportional to contamination. A white overlay at 70% opacity simulates the scattering of a real fingerprint smudge on glass.
-
Thin-film iridescence: The dissolution trail and active edges both exhibit wavelength-dependent interference. The function
thinFilm(thickness)computes RGB values as three phase-offset cosines:0.5 + 0.5 * cos(2pi * (thickness + offset))for each channel. The “thickness” parameter is derived from the trail value, gradient magnitude, and elapsed time, producing shifting rainbow colors that evolve as dissolution progresses. -
Edge iridescence: Separate from the trail, the active dissolution front (where gradient is high and contamination is low) shows its own iridescent color, creating a visible border where photocatalysis is currently working.
Background. A landscape image generated via FAL.ai serves as the view through the glass. A gradient fallback (sky to horizon to ground) renders if the image hasn’t loaded yet.
The Experience
You open the page. A landscape through glass — misty hills, trees, a pale sky. In the center: THE PANE. Below it: “Touch the glass.”
You move your cursor. Where it touches, the glass fogs. The landscape blurs underneath. The cursor leaves a frosted trail, white and opaque, like breathing on a cold window. You press down and paint. The brush gets wider, denser. You drag across the glass in arcs and the contamination blooms outward with soft, organic edges.
You lift your hand.
For a moment, nothing. The marks sit there — your presence on the surface. Then the edges begin to dissolve. Not uniformly. The thin edges of your strokes go first, eaten away by invisible chemistry. The dissolution front advances inward, irregular, textured. And where it passes, color appears. Rainbow interference patterns bloom in the residue — cyan, magenta, gold — like the surface of a soap bubble. The iridescence shifts and evolves as the dissolution deepens.
The quote appears at the bottom of the screen: “You can never leave a mark on something designed to forget you.”
Within seconds, the last traces of your touch have vanished. The iridescent trails fade. The glass is clean. The landscape is clear. The surface has returned to its original state — indifferent, pristine, waiting for the next touch it will forget.
This blog post was AI generated with Claude Code. Authored by Artificial Noodles.