Jump to content

Optimization Issue - Poor Framerate for mesh with huge amount of vertices


Recommended Posts


I do have a mesh with a huge amount of vertices (Meshlab say 1800000 vertices, after unifying duplicates still 304000 vertices). Its stored in an STL File. I import it as a mesh as shown in the example below

It's doing well on a PC with FPS of almost 60fps. But using mobile devices I end up with 10-20 FPS.

So, I am looking for an optimization solution. I read all the HowTo on your Web page. Since its only one model - instancing or cloning does not help.

I thought about using LOD or Auto LOD. But trying that the framerate totally drops. See here (lines 43-45) https://www.babylonjs-playground.com/#XG8RH3#1

From Unity I know that they split or slice models with lots of vertices in slices of max 16k vertices. Is there a way in BabylonJS to split huge meshes into slices of sub-meshes to improve FPS performance?

Another idea is to keep the amount of vertices/triangles for the main areas of the model and decrease it for others. Do you support such a feature?

What would you suggest to improve the performance while keeping the information? I know its a trade-off.

Thx for your hints.

See you

Link to comment
Share on other sites


you can slice your mesh into submeshes with the subMeshes property. By default it contains only one subMesh for the entire mesh. You can call mesh.subdivide(x) to cut your mesh into multiples submeshes:


But the issue is that all your mesh is on the screen so all the vertices has to be rendered.  On mobile it could be interesting to use a simplified version of the mesh perhaps?


Link to comment
Share on other sites

@Deltakosh thx for the fast reply.

Ok - how does babylonJS subdivide the mesh? Horizontally, vertically, ...?

So you think - subdividing does not improve the FPS on mobile since we see all the vertices at once? Did I understand you right? We tried the same STL using Unity on a mobile with FPS up to 60. So they probably have another trick.

Do you think any of the optimization techniques explained on the BabylonJS HowTo (http://doc.babylonjs.com/how_to) would help? Or is reducing the vertices the only thing that helps on mobile?

Whats the amount of vertices/triangles per scene usually lead to a FPS > 50 on mobile based on your experience? One important side note - interaction (zoom, rotate) is important to include. 

Thx in advance


Link to comment
Share on other sites

1. Subdivisions is not topologically done. Here is the code: https://github.com/BabylonJS/Babylon.js/blob/efba84ea2e81e56709bca7d6c99f377fb900b304/src/Mesh/babylon.mesh.ts#L738

2. I think Unity is not rendering the 1.8 Millions vertices :) You should make sure that vertices are dedupped first. 300K vertices is a big number but far more accessible for a low end device

3. On your specific case the only optimization that will work is reducing the number of vertices by merging them. You can use tools like Blender to optimize the mesh and then export a .babylon file

Link to comment
Share on other sites

Thx again. 

Ok - I think I got the main problem. Does babylonJS provide a function to efficiently reduce the vertices by merging?

We receive the data from a laser scanner in a real environment in a resolution we cant change. Our task is to automatically process the data and present it on a pc and and mobile. Zooming in to specific areas of the mesh is important for our customer - so there should be details available on mobile too (at least in interesting areas). Since we need to automatically (without human interaction) process the data the "workaround" using Blender (i already tried it) is not the best solution for our specific problem. 

Does someone have a hint for an automatic / code based vertex reduction?

Otherwise we have to write it by ourself...

Link to comment
Share on other sites

hello this is not a big deal, you provide the list of vertices with mesh.getVerticesData(BABYLON.VertexBuffer.PositionKind)

then the idea is to simply go through this list and deduplicate manually (could be a long process that you may want to do on the back end) in order to update the list of indices (mesh.getIndices())


btw if you are interested to share this code later we could integrate it into the framework

Link to comment
Share on other sites

If you can read python, you might look at the relevant area in the Blender exporter.  Blender stores all vertices.  It is the exporter which goes through each one, sees if it is already recorded, and if so also makes sure the material, normals, UVs, vertex colors, matrix weights & indices match. 

I can also see issues if the mesh has multiple materials.  By the time it is in BJS you already have duplicates for the border verts.  These must not be removed.

Coming from a scanner, it probably means the material, normals, UVs, vertex colors, matrix weights & indices match checking is not required for your case.  You might want to round all your vertices to say 4 decimals before comparing.  This could reduce your count.


Link to comment
Share on other sites

  • 2 weeks later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...