Loading progress for import mesh

[Merfoo]

So I'm importing the Viper ship from the Viper ship example on babylonjs.com for  a project of mine and it sorta takes a while to load on older machines, like about 30 - 60 secs. Is there a way to get the progress of the mesh import so that I can make a loading bar or perhaps something similar to that? 

[Temechon]

Hi Merfoo !

 

Of course it's possible

 

Look at this function : 

BABYLON.SceneLoader.Load(Scenename, name.babylon, engine, function1, function2);

The parameter function1 will be a function called when your scene is loaded, but I guess you know that.

However, I guess you don't know about function2 !

 

function2 is called during the loading of your model, and I bet it do exactly what you need

 

You can call it like that : 

function (evt) {      if (evt.lengthComputable) {           loadingText.innerHTML = "Loading, please wait..." + (evt.loaded * 100 / evt.total).toFixed() + "%";      } else {           dlCount = evt.loaded / (1024 * 1024);           loadingText.innerHTML = "Loading, please wait..." + Math.floor(dlCount * 100.0) / 100.0 + " MB already loaded.";      }})

evt.loaded and evt.total will give you the amount of your scene that has been loaded.

 

Here is a complete example from www.babylonjs.com (copyright @Deltakosh) : 

            BABYLON.SceneLoader.Load("Scenes/" + name + "/", name + incremental + ".babylon", engine, // function1function (newScene) {                scene = newScene;                scene.executeWhenReady(function () {                    if (scene.activeCamera) {                        scene.activeCamera.attachControl(canvas);                        if (newScene.activeCamera.keysUp) {                            newScene.activeCamera.keysUp.push(90); // Z                            newScene.activeCamera.keysUp.push(87); // W                            newScene.activeCamera.keysDown.push(83); // S                            newScene.activeCamera.keysLeft.push(65); // A                            newScene.activeCamera.keysLeft.push(81); // Q                            newScene.activeCamera.keysRight.push(69); // E                            newScene.activeCamera.keysRight.push(68); // D                        }                    }                    if (then) {                        then();                    }                    // UI                    restoreUI();                });            }, // function2function (evt) {                if (evt.lengthComputable) {                    loadingText.innerHTML = "Loading, please wait..." + (evt.loaded * 100 / evt.total).toFixed() + "%";                } else {                    dlCount = evt.loaded / (1024 * 1024);                    loadingText.innerHTML = "Loading, please wait..." + Math.floor(dlCount * 100.0) / 100.0 + " MB already loaded.";                }            });        };

Don't hesitate to ask if you need more information

 

Cheers !

[Merfoo]

Thank you! I did not know those functions had another optional parameter.

[kaz2057]

I use this script to see my scene loading but I have just white canvas without any progress information.

I missing something?

P.S: I advice to pin this thread because it is very important

    <canvas id="renderCanvas"></canvas>    <script>        if (BABYLON.Engine.isSupported()) {            var canvas = document.getElementById("renderCanvas");            var engine = new BABYLON.Engine(canvas, true);             BABYLON.SceneLoader.Load("", "cube.babylon", engine, function (scene) {                 scene.executeWhenReady(function () {                                        // Creating a omnidirectional light                    var light0 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 0, 10), scene);                     // Create Camera                    var camera = new BABYLON.ArcRotateCamera("Camera", 0.0, 0, 0.0, new BABYLON.Vector3(0, 0, 0), scene);                    scene.activeCamera = camera;                                        // Attach camera to canvas inputs                    scene.activeCamera.attachControl(canvas);                     // Once the scene is loaded, just register a render loop to render it                    engine.runRenderLoop(function() {                        scene.render();                    });                });            }, function (evt) {                // To do: give progress feedback to user                if (evt.lengthComputable) {                    loadingText.innerHTML = "Loading, please wait..." + (evt.loaded * 100 / evt.total).toFixed() + "%";                } else {                    dlCount = evt.loaded / (1024 * 1024);                    loadingText.innerHTML = "Loading, please wait..." + Math.floor(dlCount * 100.0) / 100.0 + " MB already loaded.";                }            });        }    </script>

[kaz2057]

Any help?

[Temechon]

Can you please share your whole html file or a live example ?

 

Thanks

[DeathSoul]

Hey !

I come back here, hoping it's not too late to get an answer 

I want to get a nanobar from nanobar.js to load when I'm loading my scene, I've got no idea how to do, what to put in the function 2, being totally newbie to babylon.js !

 

Can anyone help me please ?

[Flomotion]

Hi,

check this discussion:

 

[DeathSoul]

Thank you very much Flomotion, 

I understand better how to set my loading screen !