Levels of Detail

Levels of Detail (LOD) is a technique used to optimize performance by reducing the complexity of meshes as they move farther from the camera. In Babylon.js, LOD allows you to display simplified versions of a mesh when it is far away, improving rendering performance without sacrificing visual quality up close.

In the example below, you’ll find four toruses, each with different colors and segmentations. Use the camera to zoom in and out to observe how the level of detail on each torus changes as you adjust the view.

useEffect(() => {
  knot0Ref.current!.addLODLevel(5, knot1Ref.current);
  knot0Ref.current!.addLODLevel(8, knot2Ref.current);
  knot0Ref.current!.addLODLevel(11, knot3Ref.current);
  knot0Ref.current!.addLODLevel(14, null);
}, []);
 
// ...
 
<>
  <torusKnot ref={knot0Ref} name='knot-0' options={{ radius: 0.5, tube: 0.2, radialSegments: 128, tubularSegments: 64, p: 2, q: 3 }}>
    <standardMaterial name='knot-0-mat' diffuseColor={Color3.Red()} />
  </torusKnot>
  <torusKnot ref={knot1Ref} name='knot-1' options={{ radius: 0.5, tube: 0.2, radialSegments: 48, tubularSegments: 16, p: 2, q: 3 }}>
    <standardMaterial name='knot-1-mat' diffuseColor={Color3.Green()} />
  </torusKnot>
  <torusKnot ref={knot2Ref} name='knot-2' options={{ radius: 0.5, tube: 0.2, radialSegments: 24, tubularSegments: 12, p: 2, q: 3 }}>
    <standardMaterial name='knot-2-mat' diffuseColor={Color3.Blue()} />
  </torusKnot>
  <torusKnot ref={knot3Ref} name='knot-3' options={{ radius: 0.5, tube: 0.2, radialSegments: 18, tubularSegments: 8, p: 2, q: 3 }}>
    <standardMaterial name='knot-3-mat' diffuseColor={Color3.Yellow()} />
  </torusKnot>
</>

By default, instances will use LOD defined on root mesh. You do not have to specify custom behaviour for instances.

Learn More

For properties and additional context, please refer to Babylon.js documentation: https://doc.babylonjs.com/features/featuresDeepDive/mesh/LOD.

Curves Gizmo