Horrible performance to render a large gltf file (11M faces)

Hi everyone, I’m facing a terrible performance issue when I try to load a large mesh.

As you can see in the picture there is a large number of faces (11M) which start to be a big mesh but we have biggers… Please note the poor fps performance in the bottom right corner. I just can’t rotate the camera.
At the moment I’m testing a bit all the 3d framework availables and I want to mention that I don’t have any issue to render this mesh in x3dom or THREE.

In this playground I tried to implement the various optimizations found in the documentation but I still can’t use the viewer.

Hello and welcome!

I didn’t have any issues while putting your model to Sandbox - https://sandbox.babylonjs.com/
Is there any reason for it to be of such a big size (about 400 Mb)? Seems it could be optimized, for example with the help of CLI | glTF-Transform

Hello and welcome to the community!

Have you tried experimenting with the performance priority modes? Optimizing Your Scene | Babylon.js Documentation (babylonjs.com)

I think you have a problem with your browser/computer when rendering this mesh.

It’s only 2 draw calls, so it should be very fast, even for 11M faces: it takes 2.5ms GPU time and ~0ms JS time on my computer:

What’s your GPU? Have you tried in different browsers? Are there any messages in the console log?


Are you sure you have hardware acceleration turned on in your browser settings?

They said they rendered in other frameworks and they didn’t have an issue, so hardware acceleration should be on. :thinking: When you said you had no issue, did you render a minimal scene with Three and x3dom, or did you change any settings there?

It might be helpful to add what’s on this panel on your machine too:

Hello, this is the highest LOD of a part of 3 LODS; the lowest is about 17M and is loaded in first to prevent the user to wait. But the fact is that the highest model in x3dom (we use no LOD simply the biggest model in the x3dom file format) or threejs (with the same LOD system) without optimisation works fine.

Hi @carolhmj, yes if you look at the line bellow n°140 I try some optim I’ve read from this topic.

        //add optimizations
        porsche.doNotSyncBoundingInfo = true;

I also tried to set the scene performance priority

scene.performancePriority = BABYLON.ScenePerformancePriority.Aggressive;

Hi @Pryme8, yes it’s turned on in my chrome dashboard

Hi @carolhmj, as I explained upper in x3dom there is no managing of gltf files but yes it loads the full model 11M of triangles and there is never slownest on none of the computer of my colleagues.
In ThreeJS we implemented the same kind of system as Babylon loading the GLTF file with 3 levels of details. No slowness detected as well without any optimization.

That’s very strange indeed :slight_smile:

Guess what… today I’ve got 60 FPS without changing anything…

I noticed that in the morning everything is ok but later in the day everything goes slow… but only with babylon; never with three of x3dom.

Are you using preview or cdn? or simply testing in the PG? I mean the new server is good but I also experienced some slowdowns from time to time.
You should download the latest cdn version and install it on your server to make your performance checks. Or at least link to cdn.

Edit: I checked it just now on a medium-range GPU and the model shows with a fair and stable framerate limited to 60fps. Nothing special to report here (in my opinion). Except may be that the inter-frame is as expected and below GPU time whereas a former test I did had just a very high and somewhat abnormal inter-frame.

I’m hosting the version 5.54.0 on our webserver.
Back to 6fps in the end of the afternoon. What’s different between now and this morning ?
I had a new test with x3dom; we have no more fps than baylon I confess but when the camera moves it feels more fuild.
In x3dom it’s like skiping frames is allowed; this way the camera is always synchronized with the camera; in babylon it’s like skipping frame is no possible; that means the camera lags behind the mouse.

Time of day shouldn’t have any impact afaik…

Here’s mine 2 minutes ago.

As for the camera movement, 6 fps is tough to get to seem fluid.
But I’m 95% sure it’s due to babylonjs’s default camera controls being hard-coded to expect 60 fps.

Basicly - back when the cameras were first made, they were implemented with no consideration for fps/deltaTime, they go “move by 0.00x” every frame, a bit more complex under the hood ofc, you have speed variables, inertia, and things.
But essencially, this is why they can become very slow the lower fps you have and go zooooooooom if you go on a system that supports 120+ fps

i was going to test it … until I saw how slow its loading? How big is the asset? is this meant for web? Or are you planning to use the engine in some offline tool?

The asset size is 395 Mb.
Also, the server where it is hosted is quite slow.

How do you know where it’s hosted? I only have the PG link.
And yes, the model is oversized for what it shows and the loading time is way too much for the web (in my opinion).
But that doesn’t explain why the FPS would drop from 60 to 10. Which it doesn’t for me in the PG.
When I said the PG server is sometimes slower, it’s essentially for loading times and once loaded I sometimes have a ~10-15% difference in performance. Clearly nothing that could explain such a huge drop.
So, I would say the same as you @labris if it’s hosted on your own server and it drops at a certain time of day, it’s likely because your server does not deliver at this time. You should change for a server located elsewhere (closer to you or closer to your clients) and then one that delivers consistently.

There is the link in PG

 const url = "https://testcricon.s3.amazonaws.com/LOD_high.gltf"

It takes about a minute for me to download. When I drop the file to Sandbox, it is displayed almost instantly, and I don’t see any FPS drops. The other question is what is the reason to have such a big file, but this is other question :slight_smile: