Three.js Demos
Three.js Demos

Instancing vs BatchedMesh Benchmark (r183 roadmap)

Split-screen benchmark comparing `InstancedMesh` and `BatchedMesh` with synchronized animation, live update timings, and draw-call counters at high instance counts.

Key topics: three.js instancedmesh, batchedmesh, performance benchmark, draw calls, r183

What this code does

- Benchmark Layout: left viewport renders `InstancedMesh`; right viewport renders `BatchedMesh` using equivalent scene conditions.
- High-Count Stress: GUI lets you scale instance count up to thousands to expose update and submission differences.
- Live Telemetry: per-side overlay reports FPS, CPU update cost, and renderer draw-call count in real time.
- Split Rendering: scissor/viewport rendering keeps both techniques visible in one frame for immediate comparison.
- Practical Decision-Making: helps choose batching strategy based on animation update cost and scene composition needs.

Related Demos

Continue Learning

Browse Three.js Tutorials

JavaScript Implementation

ES6+ 
const instanced = new THREE.InstancedMesh(geometry, material, count)

const batched = new THREE.BatchedMesh(
  count,
  maxVertexCount,
  maxIndexCount,
  material
)

// Add one geometry and many instances.
const geometryId = batched.addGeometry(geometry)
for (let i = 0; i < count; i++) {
  const instanceId = batched.addInstance(geometryId)
  batched.setMatrixAt(instanceId, matrix)
}
← Back