Instancing Mesh LOD

This section covers how to apply LOD to Instancing Mesh, which renders massive amounts of objects. LOD for InstancingMesh calculates the distance for each instance in parallel inside the GPU Shader, so there is almost no CPU overhead even when applying LOD to tens of thousands of objects.

1. How it Works

When LOD is registered to an InstancingMesh, Sub Draw Calls equal to the number of LODs may be created internally. However, through rendering pipeline optimization, the GPU determines the camera distance of each instance and references the appropriate geometry buffer for drawing.

2. Usage

Use LODManager.addLOD just like a regular Mesh.

import * as RedGPU from "https://redcamel.github.io/RedGPU/dist/index.js";

// 1. Create InstancingMesh (Base: Sphere High Poly)
const instancedMesh = new RedGPU.Display.InstancingMesh(
    redGPUContext, 
    10000, 10000, 
    new RedGPU.Primitive.Sphere(redGPUContext, 2, 32, 32), 
    material
);

// 2. Add LOD Levels
// The GPU calculates the distance for each instance and applies the geometry below.
instancedMesh.LODManager.addLOD(20, new RedGPU.Primitive.Sphere(redGPUContext, 2, 8, 8));
instancedMesh.LODManager.addLOD(40, new RedGPU.Primitive.Box(redGPUContext, 3, 3, 3));

scene.addChild(instancedMesh);

3. Live Example: 2,000 LOD Cubes

Observe how 2,000 objects change shape depending on their distance from the camera. If you zoom in/out, distant objects are displayed as Boxes, and close objects as Spheres.

Key Summary

• GPU Acceleration: Since the GPU determines the distance without CPU calculation, there is almost no performance degradation even with massive amounts of objects.
• Memory Saving: Using low-resolution models for distant objects dramatically reduces vertex processing costs.