Core Idea
Every triangle is transformed and rasterized every frame, whether it ends up covering a hundred pixels or a hundredth of one. Level of Detail stores the same object at several triangle budgets and swaps them by camera distance. Toggle it above and watch the counter, not the spheres: the geometry falls by an order of magnitude, and if you can see where, press “reveal tiers” — the tints show what your eye couldn’t.
Pixels Are the Budget
The reason the swap is invisible is projection: screen size falls off as 1/distance, so a far object is paying full geometry price for a stamp-sized patch of screen.
Drag the sphere outward and read the strip: by the time it covers a dozen pixels, thousands of triangles are being spent on detail the display physically cannot show. The right level of detail is set by pixels covered, not by the object — which is why meshes’ “smoothness is a budget” gets a second dimension here: the budget shrinks with distance. (Texturing’s mipmaps are exactly the same idea for texels.)
The Pop
Swapping meshes at a hard distance threshold has one famous artifact: an object sitting on the boundary flickers between tiers as the camera breathes. The standard fixes:
- Hysteresis — promote to a finer tier at a nearer distance than you demote (the hero does this; park a sphere on a boundary and it won’t shimmer),
- Cross-fade — briefly blend the two tiers instead of cutting.
The Ladder’s Last Rungs
Below the coarsest mesh the ladder keeps going. A billboard/impostor replaces geometry entirely with a camera-facing image of the object — the classic distant-tree trick. And the cheapest tier of all is not drawing: frustum culling skips everything outside the camera’s view volume before a single vertex is transformed. An unculled, un-LOD’d forest of hundreds of thousands of triangles is the classic self-inflicted vertex-bound frame.
Which Budget This Buys Back
LOD is specifically the triangle lever — one of three independent budgets on the GPU-bound frame:
| Lever | Buys back |
|---|---|
| LOD / culling | triangles (vertex-bound relief) |
| instancing & merging | draw calls (CPU relief) |
| DPR cap, cheaper materials | pixels (fill relief) |
Diagnose first: if capping DPR barely moves the frame time, the wall is geometry — that’s when LOD is the right next lever.
In Three.js the mechanism is built in:
const lod = new THREE.LOD()
lod.addLevel(highMesh, 0) // use up close
lod.addLevel(midMesh, 12) // beyond 12 units
lod.addLevel(lowMesh, 28)Connections
LOD is the distance dimension of the triangle budget meshes establishes, justified by projection’s 1/d shrink and aimed at the vertex half of the CPU/GPU frame. It composes with, not replaces, the other levers: draw-call batching for CPU relief, mobile optimization’s fill tactics for pixel relief, and texturing’s mipmaps doing the same distance-scaling for image data.