Experience a continuous zoom animation from everyday scale down to subatomic scale.
Study how a deterministic, state-driven rendering pipeline is structured for a scripted 3D scene.
Use as a reference for organizing per-level render functions that mirror a scene's traversal order.
| victortaelin/infiniroom | achrefelouafi/basicproceduralbuilding | acoyfellow/tuiport | |
|---|---|---|---|
| Stars | 16 | 16 | 16 |
| Language | TypeScript | TypeScript | TypeScript |
| Setup difficulty | easy | moderate | moderate |
| Complexity | 3/5 | 3/5 | 4/5 |
| Audience | developer | developer | developer |
Figures from each repo's GitHub metadata at analysis time.
Infinizoom is a browser experience built around one continuous zoom animation, about 40 seconds long, that takes you from a room, into a laptop, through its processor down to individual components, and all the way to the scale of a quark, spanning seventeen orders of magnitude in scale. At one point during the ride, near the laptop, the path forks and you can choose to head into the screen instead, traveling through the display panel, down to a single pixel, through the OLED layers, to an individual light emitting molecule, before rejoining the same path down toward the atomic scale. You control it with the W and S keys to ride forward and backward along the path, A and D to pick a direction at the fork, and the mouse to look around, with a click to lock the pointer for full 360 degree looking. There are also debug options that let you jump the camera to a specific point in the timeline, choose a fork branch, and set the mouse position directly through the page address, along with a script that can take automated screenshots at specific points for testing. Under the hood, the whole thing is designed around a very small piece of state, just the current time in the sequence, which fork was taken, and the raw input, with every frame calculated fresh from that state and the system clock rather than accumulated over time. The rendering code is organized as one function per file for each level of the zoom, called directly by its parent, so the order in which functions call each other mirrors the order you travel through the scene. A separate file holds shared constants used both for drawing the scene and for planning the path through it, and everything on screen is drawn using instanced object pools for performance. To run it, you start a local server with a single bun command and open the page in a browser. The rendering library, three.js, is loaded from a public content delivery network rather than installed as a dependency, and is the only outside resource the project needs.
A browser experience with one continuous 40-second zoom animation from a room down to a quark, spanning seventeen orders of magnitude.
Mainly TypeScript. The stack also includes TypeScript, three.js, Bun.
Setup difficulty is rated easy, with roughly 5min to a first successful run.
Mainly developer.
This repo across BitVibe Labs
Verify against the repo before relying on details.