Instancing
Drawing thousands of copies of one mesh in a single draw call, each copy with its own position, rotation, scale, and color.
See it
What it is
The GPU is fast at drawing; it is slow at being told what to draw. Ten thousand separate trees means ten thousand draw calls, and the CPU chokes long before the GPU breaks a sweat. Instancing flips it: upload one mesh and one material, then hand the GPU a buffer of per-copy data (a transform matrix each, optionally a color), and say 'draw this 10,000 times'. One draw call. In three.js that's InstancedMesh; in react-three-fiber it's the Instances and Instance components.
Reach for it whenever a scene repeats geometry: grass, crowds, bricks, particles, stars, a wall of product cards, the same chair 400 times. The win is enormous and it is the first optimization to try when a scene with lots of identical objects stutters.
Gotcha: instances share one material, so per-instance variation has to ride along as instance attributes (instanceColor, or a custom attribute you read in the shader). Two other traps: frustum culling now works on the whole instanced batch, not per instance, so a batch spread across the world is never culled; and after moving an instance you must set instanceMatrix.needsUpdate = true or nothing visibly changes.
Ask AI for it
Render 5,000 copies of this mesh using GPU instancing instead of individual objects. In three.js use a single InstancedMesh (or react-three-fiber's Instances/Instance), one shared geometry and one shared material. Position each instance with a Matrix4 via setMatrixAt, vary them with per-instance color through setColorAt, and set instanceMatrix.needsUpdate after any change. Target one draw call for the whole field and keep 60fps.