Load meshes progressively

[r3dwolf]

Hello,

I have to load a file composed of several concatenated mesh file.
I need the meshes to be progressively displayed as soon as they are available , how can I do?

[JCPalmer]

Have you tried

BABYLON.SceneLoader.ShowLoadingScreen = False;

?

Edit: Also make sure you start your renderloop, before starting the SceneLoader.Append()

[JohnK]

Have you had a look at the  assetsManager API

Provided the meshes are named you can load each mesh from the same file with separate tasks.

You might also be interested in this topic where imported meshes are stored in an array.

[r3dwolf]

Thanks @JCPalmer and @JonhK

Obviously I disabled the loading screen and started the rendering cycle, but the meshes were still displayed only once the whole file had been processed.

Unfortunately it is not a .babylon file but a custom file that must be read sequentially.

I solved the problem by using an async function with a wait function (Promise) of 1ms each cycle(mesh)

[JCPalmer]

This might also have to do with textures which are done after geometry.  One other way to create the effect is to not start the render loop till ready, disable all meshes (in Blender you can disable in the .babylon file).  When everything is ready, start the render loop which enables one mesh disabled per render.  When none still disabled found, stop checking.

var allLoaded = false;
engine.runRenderLoop(function () {
     if (!allLoaded){
         var foundDisabled = true;
         for (var i = 0, n = scene.meshes.length; i < n; i++){
             if (!scene.meshes[i].isEnabled) {
                 scene.meshes[i].setEnabled = true;
                 foundDisabled  = true;
                 break;
             }
         }
         allLoaded = !foundDisabled;
     }
     scene.render();
});

 

[Boz]

Don't you want to initialize foundDisabled to false ? Nice answer anyway

[r3dwolf]

Thanks, @JCPalmer, that solution may be good in some cases but it is an aesthetic solution.

With the async function the meshes are loaded as soon as they are processed and therefore there is a perception of higher loading speed , which was my goal.

function sleep(ms) {
        return new Promise(resolve => setTimeout(resolve, ms));
    }

    async function MeshManagerLoadMeshes(binaryBuffer) {
        while (binaryBuffer.offset < binaryBuffer.buffer.length) {
            <read and parse mesh>
            await sleep(1);
        }
    }