Multiple meshes. How can it be optimized?


I’ve to display a warehouse with 7340 locations (see picture). Each location is generated in my program using Php and each mesh is defined like this:

box[376258] = BABYLON.MeshBuilder.CreateBox('RS1||376258|4S|.|005|00|E1', { height: 2.4000000, width: 1.2100000, depth: 0.85, topBaseAt: 0 }); box[376258].position = new BABYLON.Vector3(3.10,1.2,14.40);

Is there any way to improve the rendering speed?

Many thanks.


If all boxes have the same dimensions you may use Instances or even Thin Instances as described here - Instances | Babylon.js Documentation
(I would recommend to start with ‘usual’ Instances since they are simpler).
It also may depend on boxes materials. How much of them do you need for your app?
So, the first thing is to reduce draw calls number with instancing where possible.
Currently your PG example has too much draw calls (3077)

I believe it should be possible to reduce this number ten times or even more.

Then you may continue with other optimizations like here - Optimizing Your Scene | Babylon.js Documentation


Many thanks for your answer. I’ll try and let you know about the progresses.


Don’t hesitate to ask questions! :slight_smile:

1 Like