Three.js Instanced Crowds

What this builds

A production instanced-mesh system that renders thousands of identical-geometry objects in a single draw call, with per-instance position, rotation, scale, color, and custom shader attributes. The finished system supports dynamic instance counts, frustum-aware rendering, LOD switching, and full disposal.

• InstancedMesh with typed-array-driven transforms updated per frame
• Per-instance color and custom attributes via InstancedBufferAttribute
• Dynamic instance show/hide without rebuilding the mesh
• LOD integration: swap geometry detail by camera distance
• Frustum culling at the instance level for open-world scenes
• Full disposal of geometry, material, and attribute buffers

When to use / when not to

• Use when you have 50+ visually identical objects that differ only in transform, color, or a small set of per-instance parameters.
• Use for crowd simulation, vegetation scattering, debris fields, architectural repeated elements, data visualization with thousands of glyphs.
• Do NOT use for 5-10 unique meshes. Individual meshes at that count are cheaper to manage and simpler to interact with. The overhead of instancing (attribute setup, matrix management) is not worth it below ~30 instances.
• Do NOT use when every object has unique geometry. Instancing requires shared geometry; if shapes differ, use BatchedMesh (Three.js r159+) or merge geometries manually.
• For point-sprite particles (no mesh shape, just dots/quads), see webgl-particle-systems. Instancing is for shaped meshes (cubes, trees, characters).