How to know when the scene is truly ready

Questions
1

Hello everyone!

I don’t understand how to detect when the scene is truly ready. Until now I used the executeWhenReady method of the scene to hide my loading screen, but since recently I have been experiencing unwanted behavior as in an imported object would not be displayed immediately when hiding the loading screen.

I have reproduced it in this PG:

When I run it, the loading screen fades out and about 50% of the time the object does not render immediately, even though its shadow is visible.

Here is a small screen cap showing it:

In the video I hide the loading screen at the end of the success callback but putting it in the executeWhenReady callback did not change anything unfortunately.

Using the assets manager onFinish callback does not do the trick either :confused:

Does anyone know what I am missing?

2

Try using one of the async SceneLoader methods, like ImportMeshAsync and awaiting it.

1 Like
3

I changed the PG to use await with ImportMeshAsync but I am seeing the same behavior unfortunately :thinking:

4

Hi, here is an example of importing glb/gltf file. I use “await” to ensure the file is loaded and ready before removing the loading screen:

// your class (I'm using webpack)...
async loadMyMesh(name, folder, file){
    this.engine.displayLoadingUI();
    
    const {meshes} = await SceneLoader.ImportMeshAsync(
        name,
        folder+"/",
        file,
        this.scene,
        function (event){ //on progress
            let loadedPercent = 0;
            if   (event.lengthComputable) { //if get any valid percentage value
                loadedPercent = (event.loaded * 100 / event.total).toFixed();
            } else { //suppose you're using Database for scene optimizing, your event.lengthComputable will be false, so set 100% loaded
                const dlCount = event.loaded / (1024 * 1024);
                loadedPercent = Math.floor(dlCount * 100.0) / 100.0;
            }
            // --rest of your code ... such as updating loading screen progress bar //--
            console.log(loadedPercent)
        }
    )
    this.engine.hideLoadingUI(); //the "await" above ensures this line will wait before being executed

    return {meshes: meshes};
}

// --call it//--
this.loadMyMesh("room", "./folder/room", "room.glb")
// ...your class (I'm using webpack)

Hope it helps.

2 Likes
5

I see you are not using executeWhenReady and simply awaiting the glb loading. I replicated it here without the progress callback:

Unfortunately the issue is still there. Interestingly enough, I get no issue with Firefox, it only happens with Chromium browsers

6

Could be parallel shader compilation. Try disabling it? (Might not be a good fix though?)

7

I don’t reproduce your behavior, but try to set the second parameter of executeWhenReady to true.

1 Like
8

Just tried it on Opera and Edge, works fine too. I don’t have Chrome to test it.

I see you call engine.hideLoadingUI(); after your environment. Not that the loading screen could, sometime, be hidden before rendering the environment, because the “await” only applies on the model loading.
Try defining a function and setting the await on that function, and all your codes “mesh, envi…” into the function.

9

Alright I tested it on the same computer on Windows 11 and there was no bug either! I guess this is a problem scpecific to the linux version of chromium browsers.

I tried both disabling parallel shader compilation and use the second parameter of executeWhenReady but it did not solve this bug on linux.

This is probably not solvable by javascript code alone so I will close this topic I guess, thank you for searching with me!