Importing multiple .babylon scenes recursively

[Pab144]

Hey there Babylonians,

How can I go about appending or importing multiple files into my babylon.js scene using something like a for() loop, I have 28 files which add up to a ridiculous 30million plus verts and there is no way I can load them up all at once because i get an "allocation size overflow" error on Firefox, Chrome crashes, and ironically it opens up on MS Edge but runs very slowly.

Because of these errors caused by the 2.0GB size of my .babylon file I decided to break my model into 28 pieces all under 200MB so I could load them individually, using the following code:

            let sections=[
                "background-site", "section-1", "section-2", "section-3",
                "section-4",  "section-5",  "section-6",  "section-7",
                "section-8",  "section-9",  "section-10", "section-11",
                "section-12", "section-13",  "section-14",  "section-15",
                "section-16", "section-17", "section-18", "section-19",
                "section-20", "section-21", "section-22", "section-23",
                "section-24", "section-25", "section-26", "section-27",
                "section-28"
            ];

            for(let i = 0; i < sections.length; i++){
                BABYLON.SceneLoader.ImportMesh("", "assets/site/", sections[i]+".babylon" ,scene);
            }

This works on every browser,  and smoothly too.

Even though this works, it breaks other things in my code like I can't modify the imported model's materials to add lightmaps, I also can't do things like set the target of my camera to the position of one of my models without getting an "undefined" error.

All help is welcomed.

[JohnK]

You can only work on an imported mesh when you know it has loaded and so you need a callback function see https://www.babylonjs-playground.com/#1BAPRM#0

[bghgary]

Loading assets is asynchronous, so you have to wait for the load to complete before you can access the models that are loaded. Using callback functions is difficult as you will need to count the number of callbacks that have completed. This is much easier if you use promises. Here is an example: https://www.babylonjs-playground.com/#U2KKMK#6. In your case, you should create a promises array and store each of the returned promise into that array and then call Promise.all on the array. Like this: https://www.babylonjs-playground.com/#U2KKMK#7

[Pab144]

I'll give promises a try, callbacks might be to cumbersome for this particular problem.

I'll post my results as soon as I have them.

Thank you for the advice gentlemen.

[JCPalmer]

scene.executeWhenReady( () => { console.log('blah'); } );

is also available.  I think it works better with Append() rather than ImportMesh().  This leaves all the accounting to the framework.

Edit:  If you are having problems with memory and want to serialize, then you would want to put the next Append inside of the callback:

const sections=[
                "background-site", "section-1", "section-2", "section-3",
                "section-4",  "section-5",  "section-6",  "section-7",
                "section-8",  "section-9",  "section-10", "section-11",
                "section-12", "section-13",  "section-14",  "section-15",
                "section-16", "section-17", "section-18", "section-19",
                "section-20", "section-21", "section-22", "section-23",
                "section-24", "section-25", "section-26", "section-27",
                "section-28"
            ];
let i = 0;

function loadSection() {
    if (i == sections.length) 
        allLoaded();
    else {
        BABYLON.SceneLoader.Append("", "assets/site/", sections[i]+".babylon" ,scene, () => {
            i += 1;
            loadSection();
        });
    }
}

function allLoaded() {
    // normal post loading
}

// actually start it
loadSection();