Create a preloader

Questions
1

Hi people,

I have 2 heavy things in my scene, a 3D model and an image. First the smaller images load and then the heavier models load. Is there a way to assign a preloader so that the app only loads when everything else has been loaded?

<!DOCTYPE html>

<title>Babylon.js</title>

<!-- Babylon.js -->
<script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>
<script src="https://preview.babylonjs.com/ammo.js"></script>
<script src="https://preview.babylonjs.com/cannon.js"></script>
<script src="https://preview.babylonjs.com/Oimo.js"></script>
<script src="https://preview.babylonjs.com/libktx.js"></script>
<script src="https://preview.babylonjs.com/earcut.min.js"></script>
<script src="https://preview.babylonjs.com/babylon.js"></script>
<script src="https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>
<script src="https://preview.babylonjs.com/materialsLibrary/babylonjs.materials.min.js"></script>
<script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js"></script>
<script src="https://preview.babylonjs.com/postProcessesLibrary/babylonjs.postProcess.min.js"></script>
<script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.js"></script>
<script src="https://preview.babylonjs.com/serializers/babylonjs.serializers.min.js"></script>
<script src="https://preview.babylonjs.com/gui/babylon.gui.min.js"></script>
<script src="https://cdn.babylonjs.com/loaders/"></script>
<style>
    html,
    body {
        overflow: hidden;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }

#renderCanvas {
    width: 100%;
    height: 100%;
    touch-action: none;
}
</style>
</head>
    <body>
        <canvas id="renderCanvas"></canvas>
        <script>
        var canvas = document.getElementById("renderCanvas");

    var engine = null;
        var scene = null;
        var sceneToRender = null;
        var createDefaultEngine = function () { return new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true }); };
    class Playground
    {
        static CreateScene(engine, canvas)
        {
        BABYLON.SceneLoader.ImportMesh("", "Models/", "scene.gltf", scene, function (vpMesh) {  

         }, undefined, undefined, '.gltf');
        var Lamp = new BABYLON.SpriteManager("Lamp", "RoomTexture/Lampe.png", 51, 98, scene);

            var spriteLamp = new BABYLON.Sprite("spriteLamp", Lamp);
            spriteLamp.position.x = 900;
            spriteLamp.position.y = -60;
            spriteLamp.position.z = -1200;

            spriteLamp.size = 220;

            spriteLamp.renderingGroupId = 3;
            Lamp.renderingGroupId = 3;
            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

    engine.runRenderLoop(function ()

    {

        if (sceneToRender)

        {

            sceneToRender.render();

        }

    });

    // Resize

    window.addEventListener("resize", function ()

    {

        engine.resize();

    });

</script>
`Preformatted text`
2

Hello, I’m not sure to understand

What do you want to delay load? The js files or your scene?

3

Sorry, what I meant was, I want to delay it. As in, I only want the user to see the scene once everything in the scene has been loaded. The includes images, meshes etc. So due to this I want to implement a preloader.

4

oh so you can probably rely on:

scene.executeWhenReady(() => {
.. start rendering here
});
5

Thanks, where should I paste this? Could you please show me in a sample background player?
Also can you suggest a preloader example that I use along with this?

6

Can you share your current code somewhere?

7

I will try to add it to Playground, it will take some time. In the meanwhile I have added the whole code here, where should I implement your solution?

8

I got it, i added your solution as:

scene.executeWhenReady(() => {
    engine.runRenderLoop(function ()
    {
        if (sceneToRender)
        {
            sceneToRender.render();
        }
    });
});

Now I have to create a preloader showing percentage of completion. Is there a way to achieve this?

9

I’d use an Asset Manager. It has an onProgress callback that you can use to update a loading bar on screen Load Files with Assets Manager - Babylon.js Documentation

10

This way is interesting if there are a lot of smaller files equal in size.
What if I have a more complex model with a larger size. Is there a way to present the actual progress based on x kb/ total kb loaded?

Thanks
Pieter