Get updates ↗

3D & rendering

Level of detail in game development

cheap mesh when it is far

Interactive example · scroll or point here to play
03

cheap mesh when it is far

Level of detail, or LOD, swaps a model for a simpler version as it gets farther from the camera. A far object covers only a few pixels, so the extra triangles of the full mesh would not show and only cost GPU time. The rock in the demo drops from 1280 to 80 to 20 triangles as it crosses each distance line.

prompt bit
Add LOD to the props: build three versions at about 100%, 30% and 10% of the triangles, switch between them at set camera distances, and add a 10% hysteresis band so a mesh standing near a threshold does not flicker between levels.

When to use it

Use LOD when a detailed mesh becomes small on screen. The best thresholds depend on projected size, camera field of view, and the silhouettes you need to preserve.

Implementation example

Engine-neutral pseudocode. Adapt the functions and coordinate conventions to your engine.

if distance > farThreshold + margin: level = LOW
else if distance < farThreshold - margin: level = MEDIUM
setVisibleMesh(level)

Common mistakes

A hidden high-detail mesh should not keep running expensive animation or CPU updates. Check shadows and transitions too: a cheap mesh with a very different silhouette can pop visibly.

Further reading

Three.js manual ↗

Maintained by Nicolas Zullo · Follow on X ↗