Load a model after loading scene.render

Questions
1

Hi,

To cut the loading time when you load the webpage for the first time, I am trying to load assets such as importing videos/models after the scene has been loaded. That is I am first showing simple elements such as sphere and cube, then later I am loading 3D model. Is there a solution that I can achieve with this?

class Playground

    {

        static CreateScene(engine, canvas)

        {
//.....

//Model to load after the scene loads
BABYLON.SceneLoader.ImportMesh("", "Models/", "scene.gltf", scene, function (vpMesh) {  

            var vp = vpMesh[0]; 
            vpMesh.forEach((m) => m.renderingGroupId = 3);
            }, undefined, undefined, '.gltf');

            return scene;

        }
    }
createScene = function () { return Playground.CreateScene(engine, engine.getRenderingCanvas()); }

    var engine;

    try

    {

        engine = createDefaultEngine();

    } catch (e)

    {

        console.log("the available createEngine function failed. Creating the default engine instead");

        engine = createDefaultEngine();

    }

    if (!engine) throw 'engine should not be null.';

    scene = createScene();

    sceneToRender = scene;

    scene.executeWhenReady(() =>

    {

        engine.runRenderLoop(function ()

        {

            if (sceneToRender)

            {

                sceneToRender.render();

            }

        });

    });
2

Hi again, Saif.

Big topic. Many programmers seek this.

I would say… step 1… get to know the BabylonJS “AssetsManager” system. It is very powerful, and more modern than the SceneLoader methods.

What you ask… is sometimes called “progressive loading” or “incremental loading”. Please visit these two links… read what others have asked/done, and maybe borrow some code. :slight_smile:

I see you are working with .gltf, so let’s visit @bghgary’s “progressive loading doc”, too. Unfortunately, all of its demo code uses the older SceneLoader methods.

There is also a doc about “incremental loading”… but again, SceneLoader-based.

SceneLoader methods are not “bad” by any means, but… AssetsManager methods MAY BE more-ready for progressive/incremental loading.

You might wish to pay particular attention to AssetsManager docs… “Task state and error handling” (section 1.2) and “Manager callbacks and observables” (section 1.3).

Ok, that should be plenty of intro-info for incremental/progressive loading. I hope I have been helpful. Stay tuned for more/better replies.

2 Likes
3

Hey thanks! I will check incremental loading. Hopefully will get somewhere. I guess with incremental loading, I can load even other assets such as images and videos? Because loading higher MB files through scene load takes time hence I was looking for now termed as “incremental/progressive” loading.

1 Like
4

@saifshk17, perhaps ImportMeshAsync can help, as shown in Use Promises - Babylon.js Documentation under section Loading two glTF assets in parallel

1 Like
5

Hey,

Could you please help me out here. I could only find incremental scene loading. Babylonjs has also provided tools for this. Unfortunately I cannot find any solution for incremental model(.gltf) loading. Has anyone tried to use SceneLoader.ImportMesh after the scene has been loaded?

6

It seems it works, see this thread:

Instead of using AppendAsync I used ImportMeshAsync:

Give focus to the display area and hit the space bar key to make the glb load.

7

Hey thanks alot! It definitely loads the model. However now it does not load any materials/textures. It was loading when I was using ImportMesh in my code before. Now I am not sure why it does not. I can send the model to you if you would like to see. :zipper_mouth_face:

scene.onKeyboardObservable.add(async(kbInfo) => {
                switch (kbInfo.type) {
                    case BABYLON.KeyboardEventTypes.KEYUP:
                        switch (kbInfo.event.key) {
                            case " ":
                                //await BABYLON.SceneLoader.AppendAsync("", "https://dl.dropbox.com/s/b7bjy69g307d64h/Thonker.glb", scene);
                                await BABYLON.SceneLoader.ImportMeshAsync(null, "Models/", "scene.gltf", scene);

                                break;
                        }
                        break;
                }
            });
8

Loading materials / textures does definitely work:

https://playground.babylonjs.com/#E7LBE5#3

9

Then I guess it is a problem with my model. This is the model I have which I got from TurboSquid for free. It is very strange that it works in my code that I posted above but does not work in the code you gave.

10

I have tested with your model in my local repository and it does work:

image
image540Ă—509 38.4 KB

However, it took some time to download the textures, so make sure you wait enough time.

11

Oh cool! It could be because I was loading other huge stuff as well. Is there a way to add an alert(“completed”) after the model and textures are imported? Sorry for asking these many questions but this is very important for me. Thank you.

12

Add this just before the await BABYLON.SceneLoader.AppendAsync(...) line:

scene.executeWhenReady(() => {
    console.log("ready");
});
13

Evgeni, thank you for all these solutions. I actually found the issue. It is a bug in Babylonjs. When I upload a sprite along, the 3D model with textures do not get uploaded. When I comment out the sprite code, the model with textures get uploaded. I am sure its a bug. I will upload as a separate question.

1 Like