A ray traced village panorama that curls into a tiny planet, a fisheye or a camera view.
A small ray tracer first renders a full 360 degree equirectangular panorama from the middle of a procedural village: gabled houses with windows, a church, a windmill whose sails keep turning, trees, planters, a river with rippled reflections under a bridge, hills, haze and clouds, all made of convex polyhedra and spheres with sun shadows. Rays are culled by longitude bins for the camera and by a sun-aligned grid for shadows, and the panorama is traced progressively over the first seconds. Every screen pixel is then mapped back to a direction through one continuous family of projections: equirectangular, Mercator and stereographic strips share their slope at the horizon, so they blend, and bending the stereographic strip into a ring gives the tiny planet. From there a general perspective projection viewed from distance d behind the sphere slides to an ordinary rectilinear camera (d = 0) or a fisheye (d above 1), with closed form sines and cosines and a polynomial atan keeping the per pixel remap fast.
Try it. Drag sideways to spin the world and down to tilt it: from the tiny planet the view swings up to the horizon, and keeps going into the rabbit hole of sky. Use the slider (or the left and right arrow keys) to morph between Mercator, equirectangular, tiny planet, fisheye and rectilinear. Up and down arrows tilt, U looks straight up and R resets.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build a "tiny planet" panorama viewer with JavaScript and the HTML canvas element, where a 360 degree scene curls into a little globe. 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, stays sharp on high-DPI screens (scale by devicePixelRatio), and resizes with the window.
- Generate a 1024 x 512 equirectangular panorama in code: each pixel is a direction (longitude across, latitude down). Ray trace a tiny scene from a camera 1.7 units above the ground: a ground plane with a checkered or cobbled pattern, a ring of colored boxes for houses, spheres for trees, and a sky gradient. Add sun shadows by casting one more ray toward the sun.
- Trace it a few rows per frame so the page never freezes, and show the progress.
- Draw the view by inverse mapping: for every screen pixel, work out its direction and look up the panorama. Start with stereographic projection centered straight down: a pixel at distance r from the center looks at angle theta = 2 atan(r / 2f) from the nadir, in the direction of its screen angle. That is the tiny planet.
- Let dragging rotate the sphere before the lookup, so the planet spins and tilts.
Once that works, make it beautiful:
- Add other mappings: the flat equirectangular strip, rectilinear (theta = atan(r / f)) and a fisheye, and a slider that blends between them smoothly.
- Render into a smaller offscreen canvas and scale it up, with bilinear lookups, so it stays at 60 fps.
- Add houses with gabled roofs and windows, a river with reflections and some drifting clouds.
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 animating the strip curling into the planet, adding a rabbit hole view looking straight up, or loading a real photo panorama.
