An endless dive into a sunlit Menger sponge that never runs out of smaller holes.
This sponge is exactly self-similar about one point, so its distance estimate is simply the deepest square tunnel a point sits in, tested one power of three at a time from the coarsest scale that matters down to the finest a pixel can resolve, with that last level fading in so detail grows instead of popping. Because scaling the world by three leaves it unchanged, the flight path is built once: down a tunnel, along a cross gallery and into a tunnel a third the size, ending exactly where it began at a third of the scale, so looping it is a dive that never ends while the magnification counter climbs. Each frame cone-marches a coarse grid of rays so every pixel's ray can start close to the stone, then shades hits with a tetrahedral normal, a soft sun shadow sized to the surface's own hole, ambient occlusion from step counts and probes, and dusty haze. The renderer splits each frame across a small pool of Web Workers, sizes it to the measured frame time and keeps sharpening while the flight is paused.
Try it. Move the pointer to look around. Drag the slider, or press left and right, to morph the tunnels from square to round vaults to diamonds. Space pauses so the image can sharpen; up and down change speed, and below zero the flight climbs back out.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build a flight through a Menger sponge with JavaScript and the HTML canvas element, ray marched on the CPU. 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 an infinitely repeating Menger sponge: start with a solid, then for each of four or five levels, fold the point into a cell of size 1, 1/3, 1/9 and so on, and carve out the cross of three square tunnels through the middle of the cell. The distance is the largest of the carved depths, positive in the empty tunnels.
- Put the camera in the middle of a tunnel. For each pixel, build a ray from the camera and sphere trace it: step forward by the distance estimate until it is tiny or the ray is too long.
- Shade hits with a normal from central differences of the distance function, a simple light, and fog toward a warm haze color. Darken pixels whose rays took many steps: free ambient occlusion.
- Move the camera forward a little every frame with requestAnimationFrame. Because the sponge repeats, the tunnel never ends.
Once that works, make it beautiful:
- Give it sandstone colors: a warm sun color, a cool fill from above and an orange bounce from below.
- Add a soft shadow toward the sun by marching a second ray and keeping the closest miss, divided by distance.
- Measure how long each frame takes and change the offscreen resolution so it stays smooth.
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 an infinite zoom that dives into ever smaller holes, morphing the tunnels from square to round, or splitting the rendering across Web Workers.
