THREE.JS / FOUNDATIONS 20

Choose the right draw strategy.

The same crowd of objects can be rendered as ordinary meshes, one geometry repeated with InstancedMesh, or mixed geometries packed into BatchedMesh. The counters below expose a useful caveat: object packing and draw-call reduction are related, but the renderer reports them differently across WebGPU and WebGL2.

logical visible
—
draw calls
—
triangles
—
GPU geometries
—
Initializing —

Allocating three render strategies…

Click an object to inspect its instance ID.

Drag to orbit · click an object to pick · press R to reset

Continue to WebXR lab
LAB 20 / BATCHING