[SOLVED] How to get asset.ready() called when all the resources data for this asset are loaded

Help & Support
1

I’m loading a model asset linked with materials with this:

var asset = this.app.assets.get(id_of_my_asset);
app.assets.load(asset);

asset.ready(function (asset) {
    //Model ready but not materials (textures still loading)

    //If I show my model here, I will see standard material (grey) 
    //for few seconds until my materials are completely loaded.
});

I want to fire an event when my model is completely ready with his materials and textures.

I can probably achieved that by unlinking my materials from my model in the editor, load them manually and assign them to my model all by code, but I want to avoid this solution because this will force me to establish the links outside of the editor (like in my own database).

Is there another way to do that?

Thank you.

Untitled-1

2

You can tag assets in the registry and search the registry by tag.

This way, you can load all the assets in a loop and use similar code to this project sample here: https://developer.playcanvas.com/en/tutorials/load-assets-with-a-progress-bar/

3

In your example, materials and textures are tagged, but loading a material will automatically load the textures, so asking to load the same textures will not result in a double loading for textures?

4

PlayCanvas has protection on ‘double loads’ IIRC. One of the benefits for using the asset and registry system.

1 Like
5

For the benefit of future readers, here’s my working solution without tags:

ModelLoader.prototype.initialize = function() {
    this.assetsToLoad = [];
};

//Spawn object function

var self = this;
self.loadingBar.enabled = true;
var asset = this.app.assets.get(id_of_model);
app.assets.load(asset);

asset.ready(function (asset) {
    for (var i in asset.data.mapping)
    {
        var asset_mat = self.app.assets.get(asset.data.mapping[i].material);
            
        if(asset_mat !== null)
        {
            self.assetsToLoad.push(asset_mat);
            
            var id_diffuseMap = asset_mat._data.diffuseMap;
            var id_normalMap = asset_mat._data.normalMap;
           var id_opacityMap = asset_mat._data.opacityMap;
            
            var asset_diffuseMap = self.app.assets.get(id_diffuseMap);
            var asset_normalMap = self.app.assets.get(id_normalMap);
            var asset_opacityMap = self.app.assets.get(id_opacityMap);

            if(asset_diffuseMap != null) self.assetsToLoad.push(asset_diffuseMap);
            if(asset_normalMap != null) self.assetsToLoad.push(asset_normalMap);
            if(asset_opacityMap != null) self.assetsToLoad.push(asset_opacityMap);
        }
    }     
});

ModelLoader.prototype.update = function(dt) {
    if(this.assetsToLoad.length > 0)
    {
        this.checkIfLoaded();
    }
};

ModelLoader.prototype.checkIfLoaded = function () {
 
    var nbLoaded = 0;

    for (var i in this.assetsToLoad)
    {  
        if(this.assetsToLoad[i].loaded)
        {
            nbLoaded++;
        }
    }
    
    if(nbLoaded == this.assetsToLoad.length)
    {
        //All assets are loaded
        this.loadingBar.enabled = false;
        
        //Empty array of assets to load
        this.assetsToLoad = [];
    }
};