08 What Three.js writes for you

Instancing: ten thousand in one draw call

The same boxes, drawn as separate meshes and as one InstancedMesh.

Drawing

Per side20

2100

Explanation

Drag the underlined numbers left and right

const mesh = new THREE.InstancedMesh(  geometry, material, );for (let i = 0; i < count; i++) {  matrix.setPosition(x, 0, z);  mesh.setMatrixAt(i, matrix);}scene.add(mesh); // 1 draw call

draw calls–· triangles–

draw callEach time the CPU asks the GPU to draw a batch of triangles. More calls, busier CPU.

JS side

Every Mesh is one draw call; an InstancedMesh draws thousands of copies in a single call.

Try it

With “Separate meshes”, raise the count and watch draw calls grow
Switch to InstancedMesh: draw calls drop to 1