Edge cases of merging and instancing
The first line is a real error from three.js, followed by what mergeGeometries returns.
Each mesh costs one draw call. When many objects share a shape and a material, InstancedMesh, BatchedMesh or merged geometry send them in one call. The counts prove it.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 4 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
A scene has 300 identical lamp posts and 300 trees from 3 different models, all with one material each. Name the draw-call count if you use plain meshes, and the best arrangement.
mergeGeometries returns null. Give two likely causes.
Explain it without notes
When would you choose BatchedMesh over InstancedMesh, and what does it cost?
Why does a merged mesh draw the same number of triangles as 1000 meshes, but cost less?
Console
Nothing logged yet.Expected console output
THREE.BufferGeometryUtils: .mergeGeometries() failed with geometry at index 1. All geometries must have compatible attributes; make sure index attribute exists among all geometries, or in none of them.
merge box + bare: null
merged, two materials 2 draw calls, 24 triangles
InstancedMesh, count 1000 1 draw calls, 12000 triangles
InstancedMesh, count 500 1 draw calls, 6000 triangles
InstancedMesh, count 0 0 draw calls, 0 triangles
moved instances, old bounding sphere 0 draw calls, 0 triangles
after computeBoundingSphere() 1 draw calls, 12000 triangles