A sunlit gothic nave in real stereo 3D: red-cyan glasses, crossed eyes or wiggle.
Every pixel is ray marched twice, once from each eye. The eyes sit a short distance apart and both look through the same window at a convergence distance, an off-axis frustum like stereo cinema, so whatever is at that distance sits on the screen, nearer piers float in front of it and the far end of the nave recedes behind it. The pair is shown as a half-color anaglyph (the left eye's brightness in red, the right eye's color in green and blue), as a cross-eyed side-by-side pair, or as wiggle stereo that flips between the eyes. The church is one bay of signed distance geometry repeated forever: clustered piers, pointed arches made from two intersecting circles, a ribbed vault and lancet windows. Sunlight is computed rather than marched, by following the ray toward the sun through the window and arcade openings and coloring it by the glass it crossed, which is cheap enough to repeat along every view ray for colored shafts in the haze.
Try it. Wear red-cyan glasses (red on the left), or pick cross-eye or wiggle. Drag sideways to turn and up or down to walk, or use the arrow keys. The slider sets the eye separation; space or M switches the stereo mode.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build a red-cyan 3D anaglyph of a ray marched gothic arcade with JavaScript and the HTML canvas element. Put everything in a single index.html file with no libraries or build step, so I can open it directly in a browser.
Start simple:
- Make a canvas that fills the window and resizes with it. Render into a small offscreen canvas (about 200 by 120 pixels) with an ImageData buffer, and draw it scaled up to fill the screen.
- Write a signed distance function for one bay of an arcade and repeat it forever along z with z minus bay length times round(z / bay length): a floor, a row of round columns on each side, and a pointed arch between each pair of columns. A pointed arch opening is a rectangle below the springing line and, above it, the intersection of two circles whose centers sit on the opposite springing points.
- Ray march every pixel twice, once from each eye. Put the eyes a small distance apart along the camera's right vector, and aim both at the same point on a plane a few units ahead, so objects at that distance line up exactly (off-axis stereo).
- Combine the pair into one image: the red channel is the left eye's brightness, and the green and blue channels come from the right eye.
- Walk the camera slowly down the arcade with requestAnimationFrame.
Once that works, make it beautiful:
- Shade with a normal from central differences, ambient occlusion from the step count, and fog with distance.
- Add a window in a side wall and light the floor through it: from each point, follow the ray toward the sun to the window's plane and check whether it lands inside the window.
- Add a slider for the eye separation.
Explain the key ideas in short code comments. When you're done, tell me how to open it and suggest three directions I could take it next, such as colored stained glass light and visible shafts in the haze, a cross-eyed side-by-side mode, or wiggle stereo that flips between the eyes.
