How do I add a cube map using the pc.Asset API

I have seen a lot of examples around this subject but they all assume a URL to a adds file. All I have is a png file that has the textures of the front, back etc. I know how to add textures to the cubemap… But I don’t yet know how to generate the cubemap from just a single png file… or even 6 different png files without adds file…

As far as I know, CubeMap needs a prefiltered DDS file.
The DDS file can be generated by PlayCanvas Editor.
The following procedure will help you to generate a DDS file.

However, now there is a problem that CubeMap is displayed in low resolution even if you set 6-sided texture with pc.Asset API.

1 Like

@cx20 How do I add this cubemap to a model using the api?

const cubemapAsset = new pc.Asset(
                url: '/',
               rgbm: true,


// Add cubemap to this model such that it's not visible but affects reflections etc.
                    const gltf = new pc.Entity('gltf')
                    gltf.addComponent('model', {
                        type: 'asset',

I think we can add a cubemap to Scene with the following code.

cubemapAsset.ready(function () {
    app.scene.skyboxMip = 1;

The following is the sample code to display the glTF model and the cube map.

Thanks @cx20 but I didn’t mean adding it directly to the scene… I mean more of how to add it directly on the gltf model alone. More of adding it to the material in the editor but using engine api.

@DANIEL_SSEJJEMBA I’m sorry, I don’t have a good idea of what you want to achieve.

Is the question about how to apply IBL to the glTF model instead of how to add Skybox to the Scene? (Unfortunately, I don’t know how to do that.)

yeah… I want to apply IBL to the glTF model

I can see in the editor you can Assigning Cubemaps to Materials by setting it in the environment… I wonder how I can achieve this with the engine api… I assume something like this but not so sure… any ideas @cx20

// Add the loaded scene to the hierarchy
                const gltf = new pc.Entity('gltf')
                gltf.addComponent('model', {
                    type: 'asset',

               gltf.model.material.cubeMap = cubeMapAsset  // Asset goes here

@DANIEL_SSEJJEMBA sorry. There is no good idea.
Probably, since glTF contains multiple materials, it may be possible to find a target material and set a cubemap (IBL).
I found a related thread below, but I’m not sure if it’s helpful.

@cx20 the link helped clarify a lot… do you know how I can access the materials of a gltf model if I know there names… used gltf.model.find('name') and it didn’t work…

@cx20 I tried this and got the materials but I get a webgl warning when I use the cubemap and the asset doesn’t load now… GL_INVALID_OPERATION: Only array uniforms may have count > 1.

this.cubeMap.ready(() => {
     // add cubemap to all model materials
     const matAssets = gltf.model.model.meshInstances
     if (matAssets) {
         matAssets.forEach((matAsset) => {
             const material = matAsset.material

             material.cubeMap = this.cubeMap.resources
             console.log('Found asset', material)

I tried it too and it didn’t work. I don’t know what caused it.

For my usecase, I found a workaround that worked fine… just put the cubemap on the skybox and disabled the skybox layer… worked fine…

1 Like