Auto Level of Detail
Auto Level of Detail automatically manages the complexity of a mesh as it moves closer to or farther from the camera. Babylon.js can dynamically switch between high and low-resolution meshes to balance performance and visual fidelity.
In the following example, there are four spheres. As you zoom in and out with the camera, you’ll notice how the level of detail on each sphere changes accordingly.
const settings: Array<ISimplificationSettings> = [
{ quality: 1, distance: 3 },
{ quality: 0.5, distance: 4 },
{ quality: 0.3, distance: 5 },
{ quality: 0.1, distance: 6 },
];
useEffect(() => {
sphereRef1.current?.simplify(settings, true, SimplificationType.QUADRATIC);
sphereRef2.current?.simplify(settings, true, SimplificationType.QUADRATIC);
sphereRef3.current?.simplify(settings, true, SimplificationType.QUADRATIC);
sphereRef4.current?.simplify(settings, true, SimplificationType.QUADRATIC);
}, []);
// ...
<>
<sphere ref={sphereRef1} name='sphere-1' position={new Vector3(-1.8, 0, 0)}>
<standardMaterial name='sphere-1-mat' diffuseColor={Color3.Red()} wireframe />
</sphere>
<sphere ref={sphereRef2} name='sphere-2' position={new Vector3(-0.6, 0, 0)}>
<standardMaterial name='sphere-2-mat'>
<texture kind='diffuseTexture' url={`${process.env.NEXT_PUBLIC_BABYLON_PLAYGROUND_URL}/textures/misc.jpg`} />
</standardMaterial>
</sphere>
<sphere ref={sphereRef3} name='sphere-3' position={new Vector3(0.6, 0, 0)}>
<standardMaterial name='sphere-3-mat'>
<texture kind='diffuseTexture' url={`${process.env.NEXT_PUBLIC_BABYLON_PLAYGROUND_URL}/textures/misc.jpg`} vOffset={0.1} uOffset={0.4} />
</standardMaterial>
</sphere>
<sphere ref={sphereRef4} name='sphere-4' position={new Vector3(1.8, 0, 0)}>
<standardMaterial name='sphere-4-mat' backFaceCulling={false}>
<texture kind='diffuseTexture' url={`${process.env.NEXT_PUBLIC_BABYLON_PLAYGROUND_URL}/textures/tree.png`} hasAlpha />
</standardMaterial>
</sphere>
</>
Learn More
For properties and additional context, please refer to Babylon.js documentation: https://doc.babylonjs.com/features/featuresDeepDive/mesh/simplifyingMeshes.
