Dynamic Texture & loading Screen

[Ariel Yust]

Hey, I'm making a big project using babylon.js and I'm looking for information about

creating loading screen for loading textures (*.png files)

 

this is my function for loading textures inside a material

function loadTexture(fileName, backFaceCulling, hasAlpha, opacityPath) {        var m = new BABYLON.StandardMaterial(fileName, scene);        var texture = new BABYLON.Texture(fileName, scene);        //texture.anisotropicFilteringLevel = 0;                if (opacityPath != null) {            m.opacityTexture = new BABYLON.Texture(opacityPath, scene);        }        m.diffuseTexture = texture;        m.backFaceCulling = backFaceCulling;        m.diffuseTexture.hasAlpha = hasAlpha;        return m;    }

the problem is that when I load the texture from the URL, I don't know when will it finish loading the image...

is there a way to get an event ? and also to know how much data have been loaded ?

does it load it dynamically and show it in the scene ? how the whole loading thing works ? 

 

I'm searching for answers for a whole day without success - need help asap   

 

Thank you...

 

[Xanmia]

There is probably a better way to do it, there always is  

 

    var textureLoad = new Image();    textureLoad.onload = function () {                 //fires when image is fully loaded            };     textureLoad.src = "images.png";

Then you should be able to use that image source for your textures.

[Ariel Yust]

I created an asynchronous event based system, just like LazyLoad.js, that loads babylon files, scripts and images thanks for the right solution! =]

[gwenael]

Maybe this will help you

BABYLON.Engine.prototype.createTexture

It calls 'BABYLON.Tools.LoadFile' or 'BABYLON.Tools.LoadImage' depending on 'isDDS' boolean. Both functions take callbacks as arguments.

 

Here's the code for LoadImage:

BABYLON.Tools.LoadImage = function (url, onload, onerror, database) {          var img = new Image();        img.crossOrigin = 'anonymous';        img.onload = function () {            onload(img);        };        img.onerror = function (err) {            onerror(img, err);        };        var noIndexedDB = function () {            img.src = url;        };        var loadFromIndexedDB = function () {            database.loadImageFromDB(url, img);        };        if (database && database.enableTexturesOffline && BABYLON.Database.isUASupportingBlobStorage) {            database.openAsync(loadFromIndexedDB, noIndexedDB);        }        else {            if (url.indexOf("file:") === -1) {                noIndexedDB();            }            else {                try {                    var textureName = url.substring(5);                    var blobURL;                    try {                        blobURL = URL.createObjectURL(BABYLON.FilesTextures[textureName], { oneTimeOnly: true });                    }                    catch (ex) {                        // Chrome doesn't support oneTimeOnly parameter                        blobURL = URL.createObjectURL(BABYLON.FilesTextures[textureName]);                    }                    img.src = blobURL;                }                catch (e) {                    console.log("Error while trying to load texture: " + textureName);                    img.src = null;                }            }        }        return img;    };

You'll notice that it uses what Xanmia posted:

var img = new Image();        img.crossOrigin = 'anonymous';        img.onload = function () {            onload(img);        };

In conclusion you can use BABYLON.Tools.LoadImage with your own callbacks