Every 3-D picture on this site — the transformer walkthrough, tensor stacks, data
flowing up through layers — is drawn by one small module, scene3d.js. Scenes are
data with swappable renderers: crisp isometric SVG by default (no library, works
offline, every shape a real inspectable element), plus a hand-rolled WebGL orbit renderer
(scene3d-webgl.js, still zero-dependency) you can switch to below and drag freely.
Same scene data drives both — that's the whole architecture.
You don't draw polygons. You hand the engine a list of typed primitives — slabs (tensor blocks), grids (matrix faces), flows (data arrows), labels — each with 3-D coordinates. The engine projects them to an isometric view, sorts them back-to-front (painter's algorithm), and emits SVG. Below: the exact data on the left, the render it produces on the right. Edit-in-your-head — change a number in the data, and the box moves.
Drag the sliders — the same scene data, re-projected. The engine re-computes depth order every frame so faces never draw in the wrong order.
Four building blocks compose everything. A slab is a shaded box (top face lightest, sides darker — that shading is the whole "3-D" illusion). A stack is a slab repeated along an axis — perfect for transformer layers or a batch. A grid is a matrix face whose cells are coloured by value (reusing the same blue→white→green scale as the rest of the site) — for attention maps and activations. A flow is an arrow between two 3-D points — data moving through the network. Drive them:
Press an experiment above the previous panel, or watch the stack build below.
The scene data is deliberately separate from the renderer. The default is isometric
SVG — dependency-free, works offline forever (SVG is a 20-year-stable standard), crisp native text on
every tensor. When this page first shipped, it promised that a second renderer "could be added later"
consuming the exact same data — and that's now real: scene3d-webgl.js is a
hand-rolled, still-zero-dependency WebGL orbit renderer (drag to fly around, wheel to zoom,
labels stay crisp as a DOM overlay). Flip the toggle in the first panel: not one scene was rewritten.
The durable asset is the scene description, not the pixels.
That's also what makes it a toolkit for future content: any technical idea that's really "boxes and flows" — an architecture from a paper, a pipeline, a data structure — can be expressed as a scene and dropped onto the site as a new page, without hand-drawing a single polygon. The 📄 Illustrated Papers collection is exactly that, generated from declarative storyboards.