Process notes

Getting three subjects small enough to open in a browser

Notes on how this study was built: retopologised geometry, baked PBR atlases, animation authored to be scrubbed rather than played, and the texture work that took the house from something a browser struggles with to something it opens in a second. Every number below is measured from the files in this repository.

Where the weight went

The house started life as JavaScript — every surface painting its own canvas texture at page load. That is a fine way to run a scene and a poor way to hand one to a browser cold.

102 → 6Materials

149 → 3Textures

15.4 → 1.4Megabytes

44,622Triangles, unchanged

The three subjects

One building and two hand-sized instruments, so the same process gets tested at both ends of its range. The instruments are shown as stills on transparent film; the house is shown as its live viewer draws it, for the reason at the foot of this page.

House — three storeys

6.4 × 13.3 m · 17 rooms · open the live viewer →

Triangles: 44,622
Packed GLB: 1.40 MB
Locators: 12 (4 moving)
Clips: 3

A1 — reflectance meter

112 × 56 mm · strip reader · live segment readout

Triangles: 37,312
Packed GLB: 1.65 MB
Locators: 7 (3 moving)
Clips: 3

C2 — capillary sampler

⌀16 × 120 mm · pen-format sampler

Triangles: 40,148
Packed GLB: 1.63 MB
Locators: 9 (5 moving)
Clips: 3

Scrub, don't play

Every clip is driven from scroll position, never from a clock. That constraint decides how the animation has to be authored, and these are the rules that fell out of it.

Clamped handlesNo keyframe overshoot, so a button pressed to 0.9 mm never dips past its stop on a paused frame.
Integer keysA scrubber quantising to frames lands on poses, not on interpolations between them.
Self-contained clipsEvery clip keys every animated channel, so any clip fully determines the pose from any starting state.
Discrete eventsThe lancet's throw is keyed STEP, so no scrub position can catch a needle half-deployed.
Anchored calloutsLocators are parented to the parts they name — a label on a door leaf swings with the door.
Live displayThe meter's readout is a texture on its own emissive material, held out of the baked atlas so its state can be driven from scroll position.

Open the live scroll study

Texture budget

Map	Codec	Source	Packed
Base colour, 2048²	ETC1S, sRGB	1.00 MB	0.30 MB
ORM, 2048²	ETC1S, linear	0.90 MB	0.23 MB
Normal, 2048² → 1024²	UASTC, linear	1.06 MB	0.19 MB
House GLB	+ Draco, edgebreaker	7.65 MB	1.40 MB

Normals get UASTC and everything else ETC1S. ETC1S packs to a shared endpoint palette and treats channels together, which is fine for a photograph and ruinous for a vector field. ORM is encoded linear, because roughness and metallic are values rather than colours.

What I'd still change

A single atlas is the wrong call for a building

The measurements say so plainly: unwrapping the house's 163 objects covers 15.5% of the sheet, against 68.4% for the meter. Thousands of small islands each need a gutter, and the gutters end up costing more area than the islands do. Wall finishes smear at close range as a result.

A better packer wouldn't fix it — tiling materials instead of a unique atlas would. That needs one change further upstream: the viewer paints a fresh random canvas per surface, so near-identical materials end up with non-identical textures and nothing can deduplicate them. At product scale the two instruments don't run into this at all.

So the house page opens the live viewer rather than the baked file. The baked GLB exists and every figure above is measured from it, but the generated build is the better artefact today and there is no reason to show the weaker one.

Modelling, motion, pipeline and interface by Vishal Singh.