UI splashscreen while loading CreateGroundFromHeightMap

[conic79]

     Is there a way to show the UI spash screen when loading the CreateGroundFromHeightMap function. My height map is large and takes some

time to load. I was wondering how to get the UI spash screen to appear while the browser loads the heightmap. I am using typescript, and I have

trying wrapping the method in this.scene.executeWhenready() around:

BABYLON.Mesh.CreateGroundFromHeightMap("terrain", "heightmaps/lake-taupo-15m-dem.png", 2000, 2000, 1500, 0, 100, this.scene, false);    

but it says addMesh() is undefined. I tryied using

        var imageTask = this.assetsManager.addImageTask("image task", "heightmaps/lake-taupo-15m-dem.png");
            imageTask.onSuccess = function(task) {
               BABYLON.Mesh.CreateGroundFromHeightMap("terrain",task.url, 2000, 2000, 1500, 0, 100, this.scene, false);  
            }

but I get the same error. 

[dbawel]

@conic79 -

First of all, I would setup your "splash screen" media in you html file and not in your babylon scene - such as loading a video in the example below:

<video id='some_document_ID' loop>
  <source src="./file.mp4" type="video/mp4" >
</video>

But don't initialize your scene until your assets are loaded and/or whatever conditions need to be met. Your issue is that you are initializing your scene and attempting to register a function after initialzation. Instead, wrapping this into a function is the simplest method such as the following:

Set your scene variables to call in a function after the loader has completed loading all assets:

    var canvas          = document.getElementById("game");
    var engine          = new BABYLON.Engine(canvas, true);
    var scene           = new BABYLON.Scene(engine);
    var camera          = null;

 

Then define the AssetsManager:

var loader = new BABYLON.AssetsManager(scene);

//load your assets

//Wrap your scene in a function to call once you assets are loaded such as:

loader.onFinish = function() {

        init3d(scene, canvas); //this is a function to call which initializes the scene AFTER your assets are loaded and/or other conditions are met

//other stuff if necessary

};

 

Now set a function to initialize your scene:

function init3d (scene, canvas) {  

//define scene

};

 

Alternatively, you can use a RegisterBeforeRender function, but the above method provides far more flexability - your choice.

DB

[conic79]

Thanks for your help!