Poor performance creating scene with large number of meshes

I am writing a visualisation tool for viewing CNC machine cutting paths. I realise this is an incredibly basic use of BABYLON, but it is very useful as an interactive visualisation aid.

This approach worked very well when viewing an overall cutting path split into a limited number of groups with a Mesh for each group. However, I now want users to be able to interactively select a subsection of the cutting path. To do this, I am drawing a line between each point along the path where the machine head travels, creating a new mesh for each step with the Mesh.CreateLines method. I then use a jquery slider to define the visible range, toggling the mesh enabled status to hide it.

I am running into performance issues with more complex examples. The read-world scenarios which I am looking at have >200k steps, hence I need to add 200k meshes with this approach. With increased numbers of meshes, the creation of the scene appears to get exponentially slower; with 1.5k meshes the creation time is approximately .5 seconds, with 15k meshes it’s approximately 15 seconds and it gets worse from there.

I have put a simplified example of the code here: https://playground.babylonjs.com/#W3YSHN#2

I haven’t done any formal profiling, but when I pause the javascript debugger in chrome it is always in the function _markAllSubMeshesAsDirty. This function iterates across all the meshes in the scene; it is called every time CreateLines is called, presumably getting slower every time, explaining the exponential drop in performance. Incidentally, the dirty call is made in linesMesh.ts:113 setting a material (to undefined), which in turn sets a fill mode, which then calls this.markAsDirty(Material.MiscDirtyFlag);.this seems as though it could be redundant.

I have tried a range of different performance improvement steps like setting blockfreeActiveMeshesAndRenderingGroups, blockMaterialDirtyMechanism and freezeActiveMeshes with no luck; enabling BABYLON.ScenePerformancePriority.Aggressive seems to lead to redrawing issues.

Can anyone suggest any which I could try to deal with this problem? I suspect if I could stop the markAsDirty being called until after my initialisation it would resolve this bottleneck.

I have some other ideas about how I could structure this problem but they end up a lot more complex to code, and I would like to avoid this if I can.

1 Like

Hi @gcode and welcome to the community.

When your users chooses a subsection of the path what will they be allowed to do with that subsection.

My first thoughts, without fully knowing your use case, is for a particular subsection to use the path data points to delete and recreate your path as a split path rather than using lots of meshes.

i.e. path points [p0, p1, p2, …pn]

User wants subsection pr to pt with r < t < n

CreateLinesSystem using [p0 …p(t - 1)], [pr…pt], [p(t + 1)…pn ]


Hi John,

Thanks for getting back to me! That sounds very promising.

I’m just looking at line systems now. I’m hoping to work out some way of toggling the visibility of segments within the lines system; if I can I think it will be perfect. I can see how to set them to be updatable, just trying to work out how to update them.

Thanks again!

I have done a quick proof of concept and a slight variant of your suggested approach seems to work in a reasonably responsive manner: https://playground.babylonjs.com/#Y7CS4N#302.

Thanks again for your help!


You might also consider Enabling performance priority mode or freeze meshes to see if that helps!