Skip to content
Patina Preview: Real-Time Procedural Weathering in Three.js and TSL

Patina Preview: Real-Time Procedural Weathering in Three.js and TSL

A small procedural PBR playground by codetaur where metal ages in real time. Oxidation pools in the cavities, highlights dull from mirror to milk, and the whole surface rewrites itself through a Three.js TSL node graph running on WebGPU.

Details

Published

What it is

There's something satisfying about watching a clean surface learn how to age. Patina Preview is a small PBR playground from codetaur where metal forgets itself in slow motion: oxidation pools settle into the low spots, highlights go from mirror to milk, and the surface relaxes into that specific tired-green you recognize from any old bronze left out in the rain. You orbit the mesh, nudge a few sliders, and the weathering rewrites itself live. It has the quiet charm of a lab experiment, minus the gloves.

The heavy lifting looks like a node graph, not a baked texture stack, which tracks with the rest of codetaur's output. Their recent feed is a parade of Three.js, TSL, and WebGPU sketches (fluid sims, CRT filters, VGA-palette UI toys, the occasional mrdoob repost), and a procedural patina built this way is a natural fit: cavity masks, noise fields, and roughness modulation composed as shader nodes that respond to parameter changes without round-tripping through any offline pipeline.

Crack open devtools, pop the scene inspector, and watch the graph while you tweak. Push the oxidation past where it wants to go and see what falls apart at the extremes.

How it’s made

Framework & Tool
Three.js