Loading Rate Percent Ends Early

Questions
1

Hello all!

I added a loading percentage rate to my project following this tutorial: https://doc.babylonjs.com/how_to/creating_a_custom_loading_screen, but for whatever reason the model loads at around 23% instead of 100% which would be ideal. Any ideas on how to get to 100%?
Link to project: https://zealous-swartz-f91b02.netlify.com/

Here is the code which imports the mesh:

const house = BABYLON.SceneLoader.ImportMesh(
    null,
    "./models/",
    "house.glb",
    scene,
    function(scene) {
        // Adds collisions
        scene.forEach(mesh => {
            mesh.checkCollisions = true;
        });
        // Removes the loading screen
        removeLoadingScreen();
    },
    function(evt) {
        // onProgress
        var loadedPercent = 0;
        if (evt.lengthComputable) {
            loadedPercent = ((evt.loaded * 100) / evt.total).toFixed();
        } else {
            var dlCount = evt.loaded / (1024 * 1024);
            loadedPercent = Math.floor(dlCount * 100.0) / 100.0;
        }
        // assuming "loadingScreenPercent" is an existing html element
        document.getElementById(
            "loading-percent"
        ).textContent = `${loadedPercent}%`;
    }
);
2

Hello and welcome! this seems correct.

Can your repro in the playground?

Doc to help: Using External Assets - Babylon.js Documentation

1 Like
3

Thanks for your help. Here is the full import code in the playground: Babylon.js Playground. The interesting thing is that it works fine in Firefox if you clear the cache but in other browsers it always loads at around 23% instead of 100%.

4

Also, this may or may not be related but in Firefox the percentage rate integers are whole (100%) while in Chrome they are floating point. Ex (23.63%)

5

It seems that you have an error in your PG (check the console)

1 Like
6

The reason for 23% percent is because it’s going down the else case in your if statement if (evt.lengthComputable) and your glb is approx 23MB. I’m not sure why the event is returning lengthComputable as false. In your PG, lengthComputable is always true. My guess is it has something to do with the server.

7

Apparently, this is due to the file being gzipped on the server. See here: javascript - Why is ProgressEvent.lengthComputable false? - Stack Overflow

8

@bghgary @Deltakosh
Thanks for all your help, I suppose I need to either find a way to disable gzipping and/or lower the file size of the model.

2 Likes
9

You maybe can try getting the content length a different way or hard code it if you know the exact size. Right now, the else case of the if statement is assuming the content is 100MB.