05 / 25·Shaders
TERRA
Cartography studio. One mountain, drawn three ways by one shader.
About the work
A map-maker's site built on a single GLSL terrain. The same fBm mountain renders as contour lines, hypsometric tints and hillshade — and scroll morphs between the three cartographic languages without swapping a single asset.
How it was made
The shader was the whole gamble: contour, tint and shade had to come from one height function or the morphs would lie. Iteration went to anti-aliasing the isolines with screen-space derivatives and keeping the header legible over any of the three modes.
Like every work in the exhibition, it passed three full iteration passes — a visual critique, a deepening pass, and a QA pass at 390px with reduced motion and zero console errors — and documents itself in its own build guide.
Key features
- fBm terrain evaluated in-fragment with anti-aliased isolines
- Three render modes blended by one uniform as you scroll
- fwidth-based contour lines that stay crisp at any zoom
- Map furniture — neatline, graticule, compass rose — as UI
Technology
- GLSL
- three.js
- fBm noise
- GSAP ScrollTrigger
In its own light
