Level Of Detail

Level of Detail or LOD is a performance-improving technique where the complexity of an object’s geometry decreases when it is further from the camera. Objects that are further away are less complex because finer details will probably go unnoticed to the viewer.

The performance boost comes from the fact that lower-quality versions of the object take less time to render.

Tip

Sometimes, when the object is very far away from the camera, a sprite is used. See the billboarding article for details.

Usage

Conveniently three.js has built-in support for LOD.

import { LOD } from "three";

1. Create the LOD instance.

   const lod = new LOD();

2. Add levels to the LOD instance.

   const meshLowDetail = new Mesh(geometryLow, material);
   const meshMidDetail = new Mesh(geometryMid, material);
   const meshHighDetail = new Mesh(geometryHigh, material);
   lod
     .addLevel(meshLowDetail, distanceLow)
     .addLevel(meshMidDetail, distanceMid)
     .addLevel(meshHighDetail, distanceHigh);

3. Add the LOD instance to the scene.

   scene.add(lod);

Resources

• three.js LOD docs