How do I apply gamma correct to CubeMap textures?

cx20 · September 9, 2020, 3:35pm

I previously tried CubeMap with a 6-sided jpeg texture.

However, the overall background appears to be dark.

I expect the following results

Probably because the color profile embedded in the jpeg is not referenced.
I would like to manually gamma correct the texture, but I couldn’t figure out how to do it. I’d be happy to get some advice.

Leonidas · September 9, 2020, 4:48pm

Hmm, that’s a good question, calling @slimbuck, he may know how to do this.

slimbuck · September 10, 2020, 1:51pm

Hi @cx20,

When I load the JPG in the browser it looks gamma correct so I don’t believe that’s the issue. I guess another setting must be off. Can you share code for me to take a look?

Thanks!

cx20 · September 10, 2020, 2:23pm

Hi @slimbuck Thank you for your reply.

The code to display the current CubeMap is as follows

github.com

cx20/gltf-test/blob/d3567ee29cd15ad2aac4073e745abfa0dca96df1/examples/playcanvas/index.js#L67-L97


let cubemapAsset = new pc.Asset('papermill', 'cubemap', {

    url: "../../textures/dds/papermill.dds"

}, {

    "textures": [

        "../../textures/papermill/specular/specular_right_0.jpg",

        "../../textures/papermill/specular/specular_left_0.jpg",

        "../../textures/papermill/specular/specular_top_0.jpg",

        "../../textures/papermill/specular/specular_bottom_0.jpg",

        "../../textures/papermill/specular/specular_front_0.jpg",

        "../../textures/papermill/specular/specular_back_0.jpg",

    ],

    "magFilter": 1,

    "minFilter": 5,

    "anisotropy": 1,

    "name": "Papermill",

    // 1. rgbm specification of cubemap is changed to default

    // https://forum.playcanvas.com/t/how-to-dynamically-configure-skybox-with-javascript/12980/8

    //"rgbm": true,

    "prefiltered": "papermill.dds"

});

This file has been truncated. show original

slimbuck · September 11, 2020, 11:19am

Hi @cx20,

Sorry for my slow response.

Turns out you’re right! The JPG’s color profile is completely ignored by the engine. This appears to be a WebGL option which we set at https://github.com/playcanvas/engine/blob/master/src/graphics/device.js#L965.

I will investigate further why this is disabled, but for now I suggest re-saving the images with a plain old sRGB color profile instead. (GIMP’s built in sRGB profile seems to work fine).

Thanks!

slimbuck · September 11, 2020, 12:46pm

FYI: https://github.com/playcanvas/engine/issues/2424

cx20 · September 11, 2020, 3:21pm

I noticed a high quality HDR file in the following repository and decided to export it to JPG again using GIMP from there.

Below are links to new samples and display results. I think it’s much better than before.

PlayCanvas + new CubeMap result: