How to dynamically configure Skybox with JavaScript?

cx20 · May 4, 2020, 4:40pm

I tried to configure Skybox with PlayCanvas.
However, it will be displayed with a low resolution texture.
Probably because 6 textures are not loaded. How can I configure a high resolution Skybox?

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",
    "rgbm": true,
    "prefiltered": "papermill.dds"
});

PlayCanvas + Skybox result:

I was expecting the following results.

Three.js + Skybox result:

Leonidas · May 4, 2020, 4:52pm

Hi @cx20,

I think you just need to configure your scene skyboxMip level, to use the base level:

this.app.scene.skyboxMip = 0;

https://developer.playcanvas.com/en/api/pc.Scene.html#skyboxMip

cx20 · May 4, 2020, 5:19pm

Thank you for your advice. But when I tried it locally, the background was dark and Skybox was not displayed. Is it used incorrectly?

cubemapAsset.ready(function () {
    app.scene.gammaCorrection = pc.GAMMA_SRGB;
    app.scene.toneMapping = pc.TONEMAP_ACES;
    //app.scene.skyboxMip = 1;
    app.scene.skyboxMip = 0;
    app.scene.setSkybox(cubemapAsset.resources);
    app.renderNextFrame = true;
});

slimbuck · May 4, 2020, 5:52pm

Hi @cx20,

This is actually a known issue and one that we hope to fix soon. Please see https://github.com/playcanvas/engine/issues/1902.

Thanks!

cx20 · May 4, 2020, 5:55pm

Thank you for the information. I will try again when it is fixed.

cx20 · August 9, 2020, 2:07am

@Leonidas @slimbuck Sorry for the late confirmation of the fix. I changed the skyboxMip to 0 again and confirmed that the background did not get dark.

cubemapAsset.ready(function () {
    app.scene.gammaCorrection = pc.GAMMA_SRGB;
    app.scene.toneMapping = pc.TONEMAP_ACES;
    //app.scene.skyboxMip = 1;
    app.scene.skyboxMip = 0;
    app.scene.setSkybox(cubemapAsset.resources);
    app.renderNextFrame = true;
});

PlayCanvas + Skybox result:

However, it seems that the texture displayed by Skybox is not a jpeg assigned to 6 sides but a DDS file. How can I increase the resolution of Skybox a little more? I want to assign a 512x512 texture to the 6 sides of Skybox.

slimbuck · August 10, 2020, 8:32am

Hi @cx20,

There is an unfortunate quirk with cubemap loading. To have the system load the faces you must also set a loadFaces property on the cubemap asset.

After constructing the cubemap asset, do cubemapAsset.loadFaces = true; then kick off asset load.

If that doesn’t work for you please let me know!

cx20 · August 10, 2020, 11:50am

@slimbuck I tried cubemapAsset.loadFaces = true;
The texture of Jpeg is loaded on the 6 sides, but I think it is too bright than expected.

PlayCanvas + Skybox result:

Am I using the wrong texture?

slimbuck · August 10, 2020, 12:19pm

Hi @cx20,

Looks like you are setting the texture type to ‘rgbm’ and should probably be set to ‘default’.

‘rgbm’ format is for HDR and stores a lighting scalar in the alpha channel which maps up to 8.0. In this case the jpg loads with alpha of 1.0 and so the image is 8x too bright.

cx20 · August 10, 2020, 12:44pm

When I commented out the rgbm settings, I think the overly bright background has been improved. However, it looks like green has been added to the model.

slimbuck · August 10, 2020, 1:19pm

@cx20 in that case, in cubemapAsset.ready try setting cubemapAsset.resources[0].type = "rgbm".

That will set the prefiltered lighting environment to rgbm but leave the faces default.

slimbuck · August 10, 2020, 1:24pm

@cx20 Oh gosh, I meant the other way around. Leave resource[0] as ‘default’ and set the rest (resource[1]…resource[6]) to ‘rgbm’.

This is so extremely confusing. We will hopefully be integrating the new cubemap prelighting functionality which generates the data at runtime instead (this is what’s done in playcanvas-viewer at https://github.com/playcanvas/playcanvas-viewer/blob/master/src/viewer.js#L212).

slimbuck · August 10, 2020, 2:03pm

@cx20 I just want to mention that it’s odd your prefiltered lighting dds is RGBM when your 6 faces aren’t. Usually they have the same type.

cx20 · August 10, 2020, 3:39pm

@slimbuck Thanks! I think the display of the sample has been improved.

PlayCanvas + Skybox result:

I’m trying out Cubemap and IBL samples with some libraries in gltf-test.

If possible, I would like to make Cubemap/IBL samples as recommended by each library.
PlayCanvas Viewer seems to use HDR file for Cubemap/IBL, so I would like to use it, but I don’t know how to do it. I would appreciate any advice on how to use HDR files.