GLTF model in Babylon.js shows almost triple faces than Blender and Three.js

I create a scene in Sketchup and export to GLTF by Blender.
In Blender and Three.js, platform shows 909776 vertices and 621815 faces.

But in BJS, platform shows 909800 vertices and 1852405 faces.

And this affect FPS, in BJS i only got 15FPS, in three.js it’s faster.

Why? How can i fixed this?

I think your main issue are the 8890 draw calls you are making rather than the number of vertices / faces. Also, 25 lights? 89 Materials? These numbers seem way too big. There is so much room for optimization.

Regarding the different face count, I think this might be an output of how the different frameworks handle the glb format. But I am not an expert here so maybe someone else can provide a better input.

We’d need the model too to understand what’s happening. :slight_smile: If you can’t share it publicly you can DM me or another moderator

Yes, I agree with @carolhmj , hard to be sure with just the information above.
The point is (if I understand correctly) your app for edit is sketch, next you import it in blender and finally you make an export to either three.js or bjs. The numbers you have here make me think that eventually the interpretation of the imported format is different. May be your faces are exported as triangles for BJS and quadrangles for three.js? May be vertices are converted to faces for some unknown reason (but then, I believe the numbers should be higher). May be only some of your meshes are not interpreted correctly on import… Again, we would really need to have the model for any chance to eventually debug this.

By any means, as stated by @Null, the 25 lights!!! are clearly not going to help getting reasonable FPS. Not to mention that these lights will likely not work with materials/shadows.
I don’t think the materials (even with a count of 90) are the biggest issue (although it has an impact on performance for sure). But then, finally, the 3067 meshes in a single scene also seems a bit above reasonable. I wonder what these are?

Edit: Just a thought. May be you could give a try at this (use gltfpack as per post from @bghgary )

triple faces

Seems like your vertices was divied. It may happens while exporting the model (check your export settings). Or this is behaviour from edge splitting, it’s also should be check in the 3d editor.

The lights were disabled.

For now,I think this is just because the counting rules are different between BJS and Three.js、Blender, so this maybe not a problem.
Now i found some glasses affected the FPS. When i disabled the glasses, i got 60 FPS. But i haven’t check the glasses, so i don’t know is there some thing wrong with glasses.

You don’t need to worry about this. This is expected. Pretty much this is due triangulation, where your faces are defined as triangles not quads.

So for a simple cube where you have 8 vertices and 6 faces (quads), when you export it it gets triangulated meaning each of 6 faces is now constructed from 2 triangles (12 triangle faces), each triangle face has 3 vertices, resulting in 12*3 = 36 vertices. So for a cube of 8 vertices, on import you end up with 36 vertices. So for complex meshes this adds up quite a bit and the result you see can seem insane, but it’s expected.

And yeah, for the FPS issue you can look at DrawCalls as someone mentioned above. That’s the main thing you need to look at when dealing with this, and try to decrease that number. Maybe by merging some of the meshes into a single mesh, or by removing unnecessary parts of the scene, if there are any.

Also, there are 25 lights which is a number that probably is not something that can work. Alternatively try to bake light into your meshes using external 3D software, and remove lights from the scene itself.

You can also look at the textures, and check out the resolution on them. If you have 32 textures in the scene and they are like 4k or something (even 2k can be problematic on that number of textures), it will greatly impact the performance of the app

1 Like