ThreeJS Vertices and Faces optimization

Question

I have a BufferGeometry where say.., it has vertices ,faces and draw count of 967 , 210 and 1. Now when I increase the instance of geometry to 100 the respective vertices, faces and draw count are 9670, 2000 and 1. The draw call remains the same where the vertices and faces of the buffergeometry are doubling with the rate of the instance.

So, when ever I have some geometry with 15 thousand instances in it with vertices of above 1000 for a single buffergeoemtry the values are raising very high which inturn my browser is getting crashed and the basic orbit controls functionalities are lagging.

I just render the attributes in Interleavebuffer where I get the data from Revit / CAD Team.

The thing is why should the vertices count should increase since they are only instances and I though draw call may influence most in performance while the vertices/ faces also plays a major role in optimization.

Can anyone suggest me with the above concern. Thanks in advance.

Answer 1

Yes, the number of draw calls can have a major impact on the performance of a WebGL app. Using instanced rendering is one possible approach to lower the number of draw calls and thus improve performance.

However, instanced rendering does not lower the amount of vertices that have to be processed in the vertex shader. In some sense, you just lower the amount of communication that happens between the CPU and GPU (since you can tell the GPU with a single WebGL draw command to render many instances). But it's not possible to save processing time in the shaders.