Display 500+ small mesh's ? huge fps drop

Questions
1

Hi there,

i ve succefully created my landscape, now I am looking to seed it with vegetation

here is the temporary result :
tree

//my basic algorithm :
 foreach  [ array Vegetals ] 
    draw vegetal at position X, Y ,Z 
    a vegatal is 7  THREE.ConeGeometry( 1, 1, 8 );    with  THREE.MeshBasicMaterial( {color: 0xc11149} );



//   the pb is :    with more than 300 vegetals,  the fps drops from 60 to 10 .. (on a gamer geforce)

What is the good way to draw large number of simple objects ?

Note :
I ve change the code to draw them as 1 mesh using this function i found on a forum …my scene as 8 total objects

mergeMeshes (meshArr) {
    var geometry = new THREE.Geometry(),
        materials = [],
        m,
        materialPointer = 0,
        reindex = 0;

    for (var i = 0; i < meshArr.length; i++) {
        m = meshArr[i];

        if (m.material.materials) {
            for (var j = 0; j < m.material.materials.length; j++) {
                materials[materialPointer++] = m.material.materials[j];
            }
        } else if (m.material) {
            materials[materialPointer++] = m.material;
        }

        m.updateMatrix();
        geometry.merge(m.geometry, m.matrix, reindex);
        reindex = materialPointer;
    }
    return new THREE.Mesh(geometry, materials);
};

But it didn’t improve performance as expected

I aim (maybe i wil l fail) to draw 5 000+ vegetals, and they will be a bit more complex than 7 -no texture cones.

Thanks for all advices,

2

Hi! What you’re seeing is that the number of vertices is not the most important thing in graphics — having more small objects means more GPU instructions (or “draw calls”) that cannot be shown as efficiently as one big draw call. Merging geometry or instancing are common ways to improve this. You can find more details and tips in this thread.

3

I’ve tried with a Points system instead, perf are now ok.