Dynamically loaded texture asset appears whiter when applied to UI

[Christopher_Poole1]

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.

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:

PlayCanvas 3D HTML5 Game Engine

[mvaligursky]

you need to load texture with srgb encoding, see here

Textures | PlayCanvas Developer Site

[Christopher_Poole1]

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' }
);

[mvaligursky]

You’ve spotted a genuine documentation bug — thanks for flagging it.

The manual page is wrong. The texture asset handler doesn’t read an encoding option at all; it reads a srgb boolean. So { encoding: ‘srgb’ } is silently ignored, the texture loads as linear, and that’s exactly why it looks washed out / whiter.

The correct form is:

const asset = new pc.Asset(
    'color',
    'texture',
    { url: 'heart.png' },
    { srgb: true }
);

I’ve opened a PR to fix the docs (including the Japanese translation): Fix incorrect sRGB texture asset option in docs by mvaligursky · Pull Request #1151 · playcanvas/developer-site · GitHub

[Christopher_Poole1]

Glad I could help, and thank you for directing me to the right page in the documentation! My issue is resolved fully now!