Using InstancedMesh in Three.js to cut draw calls for repeated parts
Building repeated geometry such as pergola louvres or fence slats with one Mesh per part can drag frame rates down on mid-range phones, since each object costs a separate draw call per frame. The author reports a configurator running at 12 FPS that reached a steady 60 FPS after switching the 40 louvres to a single InstancedMesh. The approach requires calling updateMatrix before setMatrixAt and setting instanceMatrix.needsUpdate after changing transforms, with per-instance colours handled through setColorAt and instanceColor.needsUpdate. The author suggests the technique pays off for roughly 100 to 200 or more repeated objects, or for objects updated every frame, while plain meshes are simpler below that threshold.
This is an AI-generated summary. ShortSingh links to the original source for the complete article.


Discussion (0)
Log in to join the discussion and vote.
Log in