Engineering notes
This site
A WebGL hall drawn over a server-rendered page, which stays the page when the hall cannot draw.
How it works
- The server renders a plain document: the name, one article per project, the contact. The room is drawn over it and binds its camera to that document's scroll, so the camera is a pure function of scroll position.
- The products on the slabs are live DOM, not screenshots: two hand-built reproductions and one film of the real site, hung in the 3D scene with CSS3DRenderer. The WebGL slab under each wears a small baked capture that only the floor's reflection ever shows.
- One floor shader lights any number of exhibits: the bays go in as a uniform array with a fixed pool of seven rect lights, so the program never recompiles, and frames are drawn only when something changes.
Decisions
- Every shader is compiled behind the loader, including the reflection's off-screen blur targets, which a scene compile misses. Before that, the first scroll froze the page for over a second.
- No WebGL, a lost context and a failed shader all end in the same state: the exhibits stand unlit and the walk still works. Without JavaScript, the document is the page.
- Phones draw each surface at half size with CSS zoom: at 3× one layer was 13 megapixels, and Safari reloaded the tab.
Evidence
- A scripted browser pass checks every build: the server HTML, no JavaScript, no WebGL, the keyboard walk, phone layouts and accessibility on every page.
Still open
- Touch and trackpad scrolling are tuned on one iPhone and Windows; other phones and a Mac trackpad are still to check.
Built by
One developer. AI coding agents write code under rules checked into each repo; I review and own every change.