SPECIMEN · 006 · THREE.JS
PROJECT LAVOS · SPECIMEN SERIES
Tertia dimensio. THE THIRD DIMENSION · THE STACK · STAGE I · AUTHORING

the volume.

THREE.JS · WEBGL · SCENE GRAPH · 2010 · MIT
Renderer
webgl
Vertices
Triangles
Draw calls
Lights
3 + ambient
FPS
FIG. 1 · ICOSPHERE · FLAT SHADED
three-point light · auto-orbit
DRAG TO ORBIT · SCROLL TO ZOOM θ 0° · φ 0°
§ I

The third axis arrives.

In April 2010, Mr.doob — the engineer Ricardo Cabello — pushed the first version of Three.js to GitHub. The browser had quietly grown a 3D pipeline the year before; WebGL exposed a slim, austere graphics API on top of OpenGL ES 2.0. It was powerful and almost unusable. Three.js wrapped that power in nouns: scene, camera, mesh, light. From this point onward, the web has volume.

Look up. The object you are looking at is a sphere subdivided into twenty triangles, each one a flat plane catching three lights at once. There are 60 vertices, 60 normals, and a few uniform matrices being shipped to the GPU each frame. The object is not stored anywhere as a picture. It is being computed, sixty times a second, from a list of numbers no larger than this paragraph.

There is no third dimension. There is only the math that lets you turn around something flat.

§ II

What you are looking at.

Geometry
Icosahedronr = 1.0 · subdivision 1
Material
MeshStandardflat shaded · roughness 0.42
Lighting
Three-pointkey · fill · rim
Camera
Perspectivefov 35° · near 0.1 · far 100
Pipeline
WebGL 2vertex → fragment
Shading model
Cook-Torrancephysically-based BRDF
Tone-mapping
ACES Filmiclinear → sRGB
Frame budget
~16.6 msat 60 hz

Each frame, the GPU does the same labour: every vertex is multiplied by a model matrix, then a view matrix, then a projection matrix — three matrix multiplications per corner of every triangle. The triangles are then rasterised: scanned across the framebuffer, one pixel at a time, each pixel asking the lights how bright it should be. The illusion of depth is the result of obedient bookkeeping at scale.

§ III

The hard part is the boring part.

Three.js is a scene graph — a tree of nested transforms. Move the parent, the children move with it. A scene graph is older than computers; it is how illustrators have organised drawings for centuries, and how stage designers organise sets. WebGL did not invent it. Three.js did not invent it. They translated it for the browser, with care, and then maintained that translation for fifteen years across an industry that broke things every six months.

That maintenance is the moat. Every native 3D engine you have ever heard of — Unity, Unreal, Blender's viewport — is older and bigger. None of them ship to a billion devices over HTTPS in under a megabyte. The web's 3D library wins on distribution, not on rendering. The pretty things sit on top of the unglamorous fact that the page already loaded.

Distribution is the rendering equation that was never written down.

the third axis.
SPECIMEN 006 · MMXXVI
PROJECTLAVOS-BAUHAUS
../specimens