The Nave
The story behind The Nave
Inspired by Stained glass on Wikipedia
Built with Three.js WebGPURenderer · SSGINode · TSL (Three Shading Language)
Techniques Screen-Space Global Illumination · MRT Pass · Cursor-Driven Emissive Lighting · NDC Proximity Mapping
Direction The glass was never decoration — it was the Bible for people who couldn’t read
Result A room that changes color wherever you look
The Story
In medieval Europe, most people couldn’t read. The Bible existed as a Latin manuscript accessible only to clergy. But cathedrals needed to teach scripture to everyone — farmers, merchants, children. The solution was stained glass. Enormous windows depicting biblical narratives in vivid color, positioned so that sunlight would transform them into radiant projections. The light itself became the medium of instruction.
The engineering was deliberate. Cathedral architects developed the Gothic style — pointed arches, flying buttresses, ribbed vaults — specifically to dissolve walls into glass. The nave of Chartres Cathedral replaced over 150 windows with stained glass, turning the interior into a chamber where colored light painted every stone surface. As the sun moved, the story moved with it. Morning light illuminated the eastern windows; afternoon light swept west. The building was a clock, a calendar, and a library.
The glass itself was colored by metallic oxides suspended in the molten silica — cobalt for blue, copper for red, manganese for purple. Once set in lead cames and installed, the glass became permanent. But the light passing through it was never the same twice. The angle of the sun, the weather, the season — all transformed how the color landed on stone. The same window could wash the floor in crimson at noon and barely register at dusk.
This is what the phrase “Bible of the poor” actually meant. Not a dumbed-down version. A technology of light.
The Take
A cross-section of a cathedral nave. Stone walls, a floor, columns — all pale limestone. Against the far wall, a grid of fifteen stained glass panels in saturated color: ruby, cobalt, gold, emerald, purple, teal, rose, copper, magenta, cerulean, crimson, sea green. At rest, the glass is dim. The room is quiet stone.
Move your cursor. Where you look, the glass blazes. Emissive light floods outward from the activated panels, and SSGI catches that light and bounces it onto every nearby surface. Look at the magenta and rose panels — the left wall and floor wash pink. Look at the emerald and copper — the right side turns warm golden green. Look at the center cluster and the floor becomes a gradient of mixed color, secondary hues forming where no single panel’s light dominates.
The gaze mechanic maps cursor position in normalized device coordinates to panel brightness via quadratic falloff. Nearby panels glow; distant ones stay dark. As you sweep your gaze across the glass wall, a wave of illumination follows — and the entire room transforms color in response. The stone doesn’t change. The stone was always this color, waiting for the right light.
The Tech
WebGPU + SSGI Pipeline
Built on Three.js’s WebGPURenderer with TSL node-based post-processing. The scene renders through an MRT pass outputting beauty (output), diffuse albedo (diffuseColor), and view-space normals. SSGINode traces screen-space rays to approximate one bounce of indirect illumination — the mechanism that carries color from the bright glass panels onto the neutral stone surfaces.
The composite formula is sceneColor × AO + diffuseAlbedo × GI: direct lighting modulated by ambient occlusion, plus the diffuse surface color multiplied by the indirect illumination. The GI term is where the color bleeding lives — when a panel emits bright red light, SSGI finds that bright red in the beauty buffer and bounces it onto adjacent stone pixels whose diffuse albedo is pale cream, producing a pink wash on the stone.
Open Cross-Section Geometry
SSGI’s ambient occlusion term crushes fully enclosed rooms to black — rays in every direction hit nearby surfaces, producing AO values near zero. The solution is an open cross-section: floor, side walls, and the glass wall, but no ceiling and no back wall. Rays that trace upward or backward escape to the void, keeping AO values high where geometry is sparse and low only in true crevices (column bases, panel frames). This matches real cathedral lighting — light enters from above through the open clerestory.
Cursor-to-Panel Brightness Mapping
Each panel’s world position is projected to NDC (screen space) and compared against the cursor position. Distance determines brightness via a quadratic falloff with a 0.55 NDC-radius, meaning multiple adjacent panels glow simultaneously for natural color mixing. Panel brightness drives three values: emissive intensity (0.15 to 12.0×), surface color multiplier (0.3 to 3.3×), and point light intensity (0.5 to 60.5). The smoothing uses asymmetric rates — fast rise (0.12) and slower decay (0.04) — so panels ignite quickly but linger, like thermal mass in heated glass.
Limestone Albedo for SSGI
SSGI’s indirect bounce is diffuseAlbedo × GI. Dark surfaces absorb the bounce; light surfaces reflect it. The stone uses pale warm limestone (0xd4ccc0) — high albedo so SSGI color carries visibly, slight warm tint so the reflected light feels like stone in candlelight rather than gallery plaster. The tracery and columns use darker stone (0x6a6258) for contrast against the bright panels.
This blog post was AI generated with Claude Code. Authored by Artificial Noodles.