How to improve the rendering performance with huge number of objects?

[zhaolun7]

This is a simulated picture of microscope written by Three.js.
When I did this web page I met a low performance problem of rendering over 20000 or more objects.
The root is that I want to draw many square to represent pixels with different color. Every cell had about 20-30 pixels and a line that presents their border. A canvas had about 500 cells. so the total amount of objects to be rendered is over 10000 in a window. It take over 20 second to render all the things on my laptop.At the final I solved the problem by using projection to project all the cell body to one picture, and using this picture as a transparent texture of the window. so that I only have to render 500 objects. But this way doesn’t solve the root performance problem.

Now I prepare to draw some 3D neuron tissue structure like:

I think I must create a huge number of objects so that I’m very worried about the performance problem.
Can WebGPURender do this ? Or if you also have any advice please tell me. ^^

[Mugen87]

Too much draw calls are problematic for any 3D API so the switch to WebGPU won’t solve your issue. You should consider to merge your individual objects into a single one e.g. via BufferGeometryUtils.mergeBufferGeometries() (see webgl_geometry_minecraft for a complete example). If you need different colors per object, try using a vertex color attribute.