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

[ziguri]

Hi,

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

[GameMonetize]

Hello,

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:

https://www.babylonjs-playground.com/#XG8RH3#2

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?

 

[ziguri]

@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

 

[GameMonetize]

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

[Convergence]

I agree with Deltakosh, I think these kinds of details are much better done using bump or parralax mapping, since the overall shape looks fairly simple.  Many of the details would be lost on mobile anyway.

[ziguri]

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...

[GameMonetize]

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

[JCPalmer]

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.

 

[JohnK]

This does some minimising of vertices  http://doc.babylonjs.com/samples/minimise_vertices read warning at end. 

Even if it does not do what you want it might give you a start on writing your own.

[ziguri]

I just want to send you a brief thx for all the hints. We are on the right track and think BabylonJS will be the right framework to work within our environment.

I will keep you updated how we solve this issue.

Thx to all!