← appaday

A cathedral grown from one rule

A new empty folder called awe3d, and this as the first message:

creating epic and awe experiences. every project a subfolder, if using git then seperate. first idea: create some magnificent gothic-ish church like so: [a link to a cathedral concept by Thomas Stoop] ... idea being to make a procedural system like mandelbrot. you can practice in 2D first but yes the idea is to get it 3D if possible

Mandelbrot was the right hint, because gothic tracery already is a fractal. A pointed window splits into two smaller pointed windows of the same kind. The space left over above them gets a foiled circle, which is a rose window, which is a ring of smaller roses. That is the whole rule, 154 lines in tracery.mjs. Everything else in the project is scaffolding around it.

2D first

Twenty-three minutes after the prompt, the first commit was a whole west front from a seed word: two towers, portals, a gallery, a rose, and spires whose pinnacles are the same spire an octave down. Every size in the rule is a ratio to the smallest window the design allows, never an absolute number. So zooming is part of the rule, not the viewer: scroll in and the drawing keeps subdividing instead of turning into big pixels. At 400× it is thirteen levels deep and still drawing new shapes.

A flat gothic west front at dusk: two tall spires with small pinnacles, a gabled centre with a big rose window, rows of pointed windows glowing gold, three portals at the bottom, dark blue stone against a dark sky.
The west front for the seed "awe", as the 2D page opens.
A single rose window on its own: a big circle filled with a ring of twelve smaller gold roses around an inner ring of six, each of those made of still smaller roses.
One rose on its own: a ring of roses, made of roses.
A close zoom into the rose of the west front: the whole screen is gold lace, clusters of small foiled circles each made of smaller ones, with two large trefoils where the rings meet.
The same front, zoomed 400× into the rose: depth 13, 8,293 shapes.

Then 3D

Thirty-five minutes later the same recursion came out as polygons instead of drawing commands, cut as holes into extruded slabs of stone. The windows are really pierced, so the sun casts the tracery pattern onto the floor. My first question was about the hardware: are you using CPU rendering? dgpu is attached (for now). It was not CPU, but it was not the GTX 1650 either. Chrome on a hybrid laptop takes the integrated Intel chip by default and ignores the page's request for the fast one. Measured, that is 22.5 ms per frame against 6.2 ms. The page now names the graphics chip it is actually running on, in green, amber or red.

The first 3D view opened inside the nave, looking down a long corridor of piers. My reply: there's a lot of flickering... also obviously I want to see the church building, not a hallway. The flicker turned out to be five separate things: a near plane far too close for a building this size, wall panels meeting exactly face to face, the floor shadowing itself, haze quads cutting through stone, and the buttress caps rotated around the centre of the world instead of their own, so they flew off across the field and their shadows strobed over the walls. And the camera now starts outside, with keys 1 to 3 for views of the building and 4 to 6 inside.

Inside the 3D nave: a long, dark corridor of tall piers with rib vaults far above, three glowing lancet windows at the far end, and small patches of sunlight falling on the right-hand wall through the tracery.
Inside, view 4: the hallway. Sun comes through the clerestory tracery on the right.

Megacastle

looks great. the flicker is still there but it's like black rectangles so not the entire frame... possible there are any UI elements or invisible sprites? anywho... let's not go crazy with lighting etc... what I wanted was a megacastle videogame style like in the image I first referenced

Parish proportions were never going to look like the reference, so everything vertical was stretched to cathedral scale: a nave 16 m wide, the vault crown at 46 m, the west spires and the crossing spire both around 120 m. The silhouette got what it was missing: a transept through the middle bay with roses in its gable ends, a crossing tower, stair turrets on the west towers, and two tiers of flying buttresses instead of one. That was the last commit of the evening, an hour and a half after the first message.

The 3D cathedral from the side at dusk: grey stone, the west towers with tall spires on the right, a transept gable with a stained-glass rose on the left, a crossing tower with its own spire behind, a row of glowing windows and flying buttresses along the nave.
View 1, the flank, as the live 3D page opens.
The 3D west front head-on: two towers bristling with pinnacles and spires, the crossing spire between them, a stained-glass rose over a pointed portal, and a long shadow to the right.
View 2, the west front.
The 3D cathedral from behind: the rounded east end with tall glowing windows, roofs, buttresses and the towers behind, casting a long jagged shadow across the ground.
View 3, the east end.

A month later, while I was away

The evening's work stayed on the laptop until the overnight agent runs picked it up. On 2 October one put it online, with three.js copied in next to the pages so nothing loads from elsewhere. On 9 October others added a contact sheet of 96 drawings, a test suite for the geometry and the rule, and an experimental mode that draws the repeated parts of the 3D building as instances: about 600 objects become 75.

The contact sheet: a grid of small west fronts, each labelled with its seed word, awe, chartres, reims, amiens, beauvais, rouen, alternating a gold-glass dusk palette and a pale-blue ash palette.
The contact sheet. The seeds are only words; "chartres" is not a likeness of Chartres.
built
2 September, 16:37 to 18:17, with Claude Code; put online on 2 October and extended on 9 October by overnight agent runs
the rule
154 lines of tracery recursion; about 2,600 lines in all, plain JavaScript modules
3D
three.js; 1.69 million triangles and 565 objects on the live page, built in under a second
2D
SVG, re-cut on every zoom; seed, palette and subject (front, window, rose) settable in the address
gallery
96 drawings: 76 west fronts from 38 seeds in two palettes, 12 windows, 8 roses
tests
45, all passing today, in about three seconds
The 2D west frontscroll to zoom Walk around and inside, in 3Ddesktop, WASD and drag The contact sheet96 drawings

Still rough

The black rectangles were never settled. The evening ended with a Shadows on/off button to test whether they come from the shadow map, and the session ended before anyone reported back. The seeds change less than the word "seed" promises: on the contact sheet the 38 fronts are hard to tell apart, and the window and rose studies ignore the seed completely. The tests found the cusps of a window swelling outward instead of inward, so with thin mullions the glass pokes out past the jambs. The instanced 3D mode has not been looked at on a screen at all. The stone is plain grey, without any texture. And it is still one building in a folder that was meant for a whole series of awe experiences.

The 3D pictures are the live page in Chrome on this laptop's integrated graphics, with the control panel hidden; the 2D pictures are cropped to the drawing.