Creating Custom Loading Screens

How To Create a Custom Loading Screen

Starting with Babylon.js 2.3, the loading screen (the screen used when loading assets or a scene) can be changed by the developer.

To create a new loading screen, you will have to create a simple class, implementing the following interface:

interface ILoadingScreen {
  //What happens when loading starts
  displayLoadingUI: () => void;
  //What happens when loading stops
  hideLoadingUI: () => void;
  //default loader support. Optional!
  loadingUIBackgroundColor: string;
  loadingUIText: string;
}

In plain JavaScript, your loader code will look like this:

function CustomLoadingScreen(/* variables needed, for example:*/ text) {
  //init the loader
  this.loadingUIText = text;
}
CustomLoadingScreen.prototype.displayLoadingUI = function () {
  alert(this.loadingUIText);
};
CustomLoadingScreen.prototype.hideLoadingUI = function () {
  alert("Loaded!");
};

In TypeScript, the same code looks like this:

class CustomLoadingScreen implements ILoadingScreen {
  //optional, but needed due to interface definitions
  public loadingUIBackgroundColor: string
  constructor(public loadingUIText: string) {}
  public displayLoadingUI() {
    alert(this.loadingUIText);
  }

  public hideLoadingUI() {
    alert("Loaded!");
  }
}

The usage is the same in both languages:

var loadingScreen = new CustomLoadingScreen("I'm loading!!");
// replace the default loading screen
engine.loadingScreen = loadingScreen;
// show the loading screen
engine.displayLoadingUI();

/*
 * create your scene over here
 */

// hide the loading screen when you want to
engine.hideLoadingUI();

Example

Here is a playground using a custom loading screen:

Custom Loading Screen Example

You might also be interested in a standalone HTML example:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>Babylon.js custom loading screen example</title>
    <script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>
    <script src="https://preview.babylonjs.com/babylon.js"></script>
    <script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.js"></script>

    <style>
      html,
      body {
        overflow: hidden;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }

      #renderCanvas {
        width: 100%;
        height: 100%;
        touch-action: none;
      }

      #loadingScreen {
        position: absolute;
        width: 100%;
        height: 100%;
        color: white;
        font-size: 50px;
        text-align: center;
        background-color: #bb464bcc;
        z-index: 9999;
      }
    </style>
  </head>

  <body>
    <div id="loadingScreen">default div text</div>
    <canvas id="renderCanvas"></canvas>
    <script>
      var canvas = document.getElementById("renderCanvas");
      var engine = new BABYLON.Engine(canvas, true);

      var loadingScreenDiv = window.document.getElementById("loadingScreen");

      function customLoadingScreen() {
        console.log("customLoadingScreen creation");
      }
      customLoadingScreen.prototype.displayLoadingUI = function () {
        console.log("customLoadingScreen loading");
        loadingScreenDiv.innerHTML = "loading";
      };
      customLoadingScreen.prototype.hideLoadingUI = function () {
        console.log("customLoadingScreen loaded");
        loadingScreenDiv.style.display = "none";
      };
      var loadingScreen = new customLoadingScreen();
      engine.loadingScreen = loadingScreen;

      engine.displayLoadingUI();

      var delayCreateScene = function () {
        var scene = new BABYLON.Scene(engine);
        scene.createDefaultCamera(true, true, true);
        BABYLON.ImportMeshAsync("https://models.babylonjs.com/CornellBox/cornellBox.glb", scene).then(function () {
          scene.createDefaultCamera(true, true, true);
          scene.createDefaultEnvironment();
          scene.activeCamera.alpha = Math.PI / 2;

          engine.hideLoadingUI();
        });
        return scene;
      };
      var scene = delayCreateScene();

      engine.runRenderLoop(function () {
        if (scene) {
          scene.render();
        }
      });
      window.addEventListener("resize", function () {
        engine.resize();
      });
    </script>
  </body>
</html>

Getting File Loading Rate

When loading files, you can access the SceneLoaderProgressEvent sent to the onProgress callback.

Example using BABYLON.ImportMeshAsync:

import { ImportMeshAsync } from "@babylonjs/core/Loading/sceneLoader";
ImportMeshAsync("https://models.babylonjs.com/CornellBox/cornellBox.glb", scene, {
    onProgress: function (evt) {
        // onProgress
        var loadedPercent = 0;
        if (evt.lengthComputable) {
            loadedPercent = ((evt.loaded * 100) / evt.total).toFixed();
        }
        else {
            var dlCount = evt.loaded / (1024 * 1024);
            loadedPercent = Math.floor(dlCount * 100.0) / 100.0;
        }
        // assuming "loadingScreenPercent" is an existing html element
        document.getElementById("loadingScreenPercent").innerHTML = loadedPercent;
    },
}).then(function () {
    // onSuccess
    scene.createDefaultCamera(true, true, true);
    scene.activeCamera.alpha = Math.PI / 2;
    engine.hideLoadingUI();
});

File Loading Rate of Multiple Assets

This example expands on the use of SceneLoaderProgressEvent from the previous section to track the loading of multiple assets using different loading methods.

Loading Rate of Multiple Assets

Creating Custom Loading Screens

How To Create a Custom Loading Screen

Example

Getting File Loading Rate

File Loading Rate of Multiple Assets

Related videos