THREE ROUTES TO A 3D WORLD
Same puzzle, same keyboard, same gold. Only the world changes. Nothing here is wired to the real game: it is a lab page for choosing a direction, and the shipping game in www/ is untouched.
Recommendation. Build A across all five worlds first. It reuses every piece of art, cuts the bundle from 300 MB to a few MB, and the scene-lit UI is most of the felt upgrade. Then take B's diegetic puzzle idea into A one world at a time (the wax tablet in Rome first), because the object is what makes it feel made rather than skinned. Spike C for one day before deciding whether it ever matters.
LOOK TARGETS
Stills generated with the same image model the Watch site uses, to show what B and C are aiming at. They are direction, not assets.
HOW THE DEMOS WERE MADE
Depth maps came from Depth Anything V2 (small), run on the Mac's CPU in about ten seconds per frame. The Rome frame is at 2 s of tiro_library_runway_dperfect_loop_v2.mp4.
A is one full-screen shader: each pixel is shifted by its depth times the tilt, near pixels most. A brightness term centred on the candle breathes with the flame value, and the same value is written to a CSS variable so the panel border, its glow and the key tops flicker with it.
B is a three.js scene. The rendered set is a plane displaced by its depth map with real normals, so the candle's point light rakes across it. The tablet is boxes and a canvas texture; the vowel gaps are an emissive map. The camera orbits slowly and follows a drag.
C is the same displaced plane as B but from the capture-style still, deeper, with the camera free to dolly into the room. The POINTS button shows the geometry as a cloud, which is roughly what a splat is under the surface. The stretched edges you can see on a big move are exactly what a real splat removes.
D runs the same depth model on all 372 frames of the Rome loop at 720×1280, normalised to one global range so the brightness does not pump, lightly smoothed frame to frame, and packed beside the colour in one MP4 (colour left, depth right) so sync is free. The shader is A's, reading the left half for colour and the right half for depth. The MP4 is the whole cost.
E is D with the edge problem fixed. A video matting model (Robust Video Matting) cut Tiro out of all 372 frames in 17 seconds, and that matte travels as a third panel of the video beside the colour and the depth, so Tiro keeps his own per-pixel depth: a flat card for him made his hands float off the desk. The image model painted Tiro out of one frame to make a clean plate of the room, which registered to the original within a pixel, and the clean plate got its own depth map. The shader draws the room with a small parallax and Tiro over it with a larger one, so a tilt reveals real room behind his cheek. The LAYERS button drops back to the flat loop.
The picture reacts, the panel does not. Typing PRIAM fills the gaps and, in A, flares the candle and throws embers. The panel and keys stay still: they are interface laid over the world, and lighting them from the room read as fake.
WHAT A REAL BUILD ADDS
A: four more depth maps (one per world), the plate cut into three planes where a subject overlaps the panel, particles per world (embers, light beams, CRT flicker, disco haze, studio dust), and camera moves on every screen transition instead of cross-fades.
B: five rooms in Blender, baked lighting, the actor plates keyed and placed, one diegetic puzzle object per world, and a 60 fps budget on an iPhone 11.
C: a one-day spike: generate or capture one room as a splat, load it in a web splat renderer on an iPhone, and measure frame rate and file size before anything else.
Abjad 3D Lab · built 4 September 2026 · lives at lab/3d-routes/ in the Abjad 2026 repo