'ImportMeshAsync' with 'Promise.all 'sometimes returns promise before all meshes are ready; Best practice?

Hi,
I am updating one of my oldest demo project and decided to change the loading sequence, but I’m facing some issues. Sometimes (rarely) a mesh is not yet loaded while the promise is done. Is it because I’m loading these async? What would be the best method relying on Promise.all + then to load multiple meshes in the scene. Should I load them with import (no async)? Should I set a timeout before continuing with ‘then’? Thx in advance for your invaluable input on this…

That’s odd. The promise should resolve only when the mesh has done loading. How do you add the promises to the array you provide to Promise.all ?

Thanks for your answer.
It’s something like this (with more meshes). Hope I didn’t break anything from the code while copying it and removing all that’s in between :wink:

Promise.all([
BABYLON.SceneLoader.ImportMeshAsync(["snowroof"], "scenes/rocks/", "snowroof.obj", scene, function (meshes, particleSystems, skeletons) {}),

BABYLON.SceneLoader.ImportMeshAsync(["snowroof1"], "scenes/rocks/", "snowroof1.obj", scene, function (meshes, particleSystems, skeletons) {}),

//on last import (the biggest one)
BABYLON.SceneLoader.ImportMeshAsync(["Eiche-Winter", "Eiche-Leafs"], "scenes/trees/", "Baum-Eiche-18m_export_optimized5.obj", scene, 
    function (evt) {
        console.log("object is loading");
        // 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;
        }
        // loading screens
        _loadedPercent = loadedPercent;

        document.getElementById("loadingPercent2").style = "width : "+loadedPercent+"%";
        document.getElementById("loadingPercent2").innerHTML = loadedPercent;

        //console.log(loadedPercent);
        _loadedPercent = loadedPercent;
        loadingScreenChange();
    }

//* * * END OF :: IMPORT ALL MESHES * * * 

).then(function (meshes, particleSystems, skeletons) {   
//some more code to run after promise

//////  - - - > SCENE READY - LOADING SCREEN  
    scene.onReadyObservable.addOnce(()=>{
        setTimeout(()=>{
            console.log("is ready");
            engine.hideLoadingUI()}, 100)            
        });

///// END OF :: PROMISES (object constructor) - START OF :: THEN (finalizing scene, loading external scripts) ///////////

})
    ]).then(() => {  
        console.log ("promises are done");
//more code and promises…

Edit: Now that a read the ‘short version’ something seems incorrect (unless I have missed some other imbricated parts relying on another promise. Let me check this once more…

That seems syntactically correct. There is no need to provide the on-progress function unles you need it, but other than that, this should work.

What exactly doesn’t work in this example?

Eventually one of the meshes that is close in weight to the last one trigerring the onprogress function is not loaded (does not accept transformation) happening a few lines later. As I said, it happens only very rarely (but it does). May be I should add a timeout to make sure?
Edit: The onprogress function is here to switch to a second loading screen… just another fancy idea of mine :wink: Could actually get rid of this.

does that mean that it doesn’t load, or that it loads to the scene but is not displayed correctly (i.e. - not in the right position?)

Sorry (it was meaning that it does not accept transformation because is not yet loaded). Just my broken english again :wink:
But then, forget it. My apologies. This was likely just another crap post of mine :pleading_face:.

I believe I found the error. Told ya something felt weird in this short version of the code pasted above.
If you look at it and understand that loaded meshes transformation is done after the first ‘then’ (where it says ‘//some more code to run after promise’, you’ll likely understand that this ‘then’ is the following of my ‘hideLoadingUI’ function (not the promise). The promise is lower down. So, I moved my code there (where it should be) and apparently I’m not experiencing this problem anymore. Amazing, when you do things right, it works. It’s just Magic :wink: :magic_wand:

2 Likes