Dynamically loaded texture asset appears whiter when applied to UI

Help & Support
, ,
1

Below you can see 2 ui image elements, both using the same png except the one on the left was imported into the PlayCanvas editor and the one on the right was imported at runtime. Below them is the same example except this time they are textures applied to diffuse maps of 3D models (no noticeable issues there so the issue is unique to ui image elements).

I know there must be some sort of import setting I need to use to configure the asset after grabbing it, but I don’t know the specifics.

image
image1040×671 96.9 KB

Here is the code I’m using. Standard loadDataFromUrl stuff. I also tried creating an Image then setting the source of a Texture to that image and was getting the same issue.

    this.app.assets.loadFromUrl(this.imageURL, 'texture', ((err, asset) => {
        if (err) { 
            console.error('Failed to load texture:', err); 
            return; 
        }
        let aspectRatio = asset.resource.height / asset.resource.width;
        let width = this.imageElement.element.width;
        let height = width * aspectRatio;
        this.imageElement.element.height = height
        this.imageElement.element.textureAsset = asset;

        let material = this.image3DObject.render.material;
        material.diffuseMap = asset.resource;
        material.update();
    }).bind(this));

Project example here:

2

you need to load texture with srgb encoding, see here

3

This method seems to work:

const texture = new pc.Texture(app.graphicsDevice, {
    name: 'color-texture',
    width: 512,
    height: 512,
    format: pc.PIXELFORMAT_SRGBA8
});

but this method does not:

new pc.Asset(
    'color',
    'texture',
    { url: 'heart.png' },
    { encoding: 'srgb' }
);