[SOLVED] Manually loading an asset (texture)

Help & Support
1

Hi, I’m pulling a base64 texture from my database and have figured out how to load this correctly. However, I am using a texture that includes ambient occlusion, metalness and glossiness on its R, G, B channels so I am reusing one texture.
So I figured I’d add it to assets list/registry and detect when it would be loaded and call the callback to apply the texture on my material like this.

const existingAsset = this.app.assets.find(id, 'texture');
if(existingAsset){
    console.log('waiting for', id, 'to load');
    existingAsset.once('load', function (asset){
        console.log('load existing'); //this never fires
        callback(asset.resource);
    });
}else{
    //create asset
    const asset = new pc.Asset(id, "texture", {
        url: "",
    });
    this.app.assets.add(asset);

    //after getting http request result 

    //setup playcanvas texture
    var tex = new pc.Texture(self.app.graphicsDevice, {
        mipmaps: false,
        flipY: false
    });
    tex.minFilter = pc.FILTER_LINEAR;
    tex.magFilter = pc.FILTER_LINEAR;
    tex.addressU = pc.ADDRESS_CLAMP_TO_EDGE;
    tex.addressV = pc.ADDRESS_CLAMP_TO_EDGE;

    //add img tag with base64 url
    var img = document.createElement('img');
    img.src = response;
    img.crossOrigin = 'anonymous';
    img.onload = function(e) {
        tex.setSource(img);

        //add to registry asset                    
        asset.resource = tex;
        asset.loaded = true;
        console.log('loaded', id);
        if(callback) callback(tex); //this always fires correctly
    };
}

So what should be happening is that the asset calls the load callback, but I guess it doesn’t work when you just set the asset.loaded to true… Is there a better way or workaround for this?

2

Hi @Ivolutio,

So, take a look at the following post on how you normally use the asset.ready() callback and the this.app.assets.load() method to start loading an asset:

But since you are doing the loading yourself, and not using the internal resource loaders, I’d say you only need to replace this line:

asset.loaded = true;

With this:

asset.fire('loaded', asset);

So basically you replicate what Playcanvas does internally, firing the event yourself.

1 Like
3

Works perfect indeed, thanks a lot!

1 Like