Setting up scene's skybox with a prefiltered cubemap

Help & Support
1

I have 6 JPG images for a skybox cubemap and 1 pre-filtered PNG image downloaded from the PlayCanvas editor. I’m trying to replicate in code a pre-filtered cubemap like you have in the editor. I tried the following but it’s ignoring the 6 high-res images and producing a blurry skybox.

const cubemapAsset = new pc.Asset("skybox-cubemap", "cubemap", {
    url: "assets/sky-cube_prefiltered.png"
}, {
    textures: [
        "assets/sky-cube_posx.jpg",
        "assets/sky-cube_negx.jpg",
        "assets/sky-cube_posy.jpg",
        "assets/sky-cube_negy.jpg",
        "assets/sky-cube_posz.jpg",
        "assets/sky-cube_negz.jpg",
    ],
    magFilter: 1,
    minFilter: 5,
    anisotropy: 1,
    prefiltered: "sky-cube_prefiltered.png"
});
cubemapAsset.once("load", function(asset) {
    app.scene.setSkybox(cubemapAsset.resources);
});
app.assets.add(cubemapAsset);
app.assets.load(cubemapAsset);
2

@slimbuck - It’d be good to have an engine example for this I think.

1 Like
3

try adding

     cubemapAsset.loadFaces = true;
4

That worked thanks! I found I also had to wrap the texture image urls in texture assets:

const urls = [
    "assets/sky-cube_posx.jpg",
    "assets/sky-cube_negx.jpg",
    "assets/sky-cube_posy.jpg",
    "assets/sky-cube_negy.jpg",
    "assets/sky-cube_posz.jpg",
    "assets/sky-cube_negz.jpg",
];
const textureAssetIds = [];
for (let i = 0; i < 6; i++) {
    const textureAsset = new pc.Asset(`skybox-texture-${i}`, 'texture', {
        url: urls[i]
    });
    textureAssetIds.push(textureAsset.id);
    app.assets.add(textureAsset);
    app.assets.load(textureAsset);
}
const cubemapAsset = new pc.Asset('skybox-cubemap', 'cubemap', {
    url: "assets/sky-cube_prefiltered.png"
}, {
    textures: textureAssetIds,
    magFilter: 1,
    minFilter: 5,
    anisotropy: 1
});
cubemapAsset.loadFaces = true;
cubemapAsset.once("load", function(asset) {
    app.scene.setSkybox(cubemapAsset.resources);
});
app.assets.add(cubemapAsset);
app.assets.load(cubemapAsset);
1 Like