Three.js Instancing - How does it work?

Each Mesh has a geometry and a material. Usually, Mesh has a specific geometry representing, ex. a single character, a chest, a car etc. Rendering such a Mesh requires moving its vertices and material to the GPU - and each Mesh has to be done separately (ie. each mesh causes a “draw call”.)

Now imagine you have 10 models of the same character. Instead of creating 10 separate meshes and 10 separate draw calls - create a single mesh, and duplicate its vertices 10 times. Then, to each of these duplicates (that are all within a single geometry) apply a separate transformation matrix - making it look as if there’s 10 independent meshes.

That way you get an effect of having multiple meshes within a single draw call.