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

Help & Support
1

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…

2

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
3

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

const cubemapAsset = new pc.Asset(
            'background',
            'cubemap',
            {
                url: '/helipad.dds',
            },
            {
               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',
                        asset,
                    })
4

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

app.assets.add(cubemapAsset);
app.assets.load(cubemapAsset);
cubemapAsset.ready(function () {
    app.scene.skyboxMip = 1;
    app.scene.setSkybox(cubemapAsset.resources);
});

The following is the sample code to display the glTF model and the cube map.
https://cx20.github.io/jsdo.it-archives/cx20/Q3iT/index.js

5

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.

6

@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.)

7

yeah… I want to apply IBL to the glTF model

8

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',
                    asset,
                }) 

               gltf.model.material.cubeMap = cubeMapAsset  // Asset goes here
               gltf.model.material.update()
9

@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.

10

@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…

11

@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
     console.log(matAssets)
     if (matAssets) {
         matAssets.forEach((matAsset) => {
             const material = matAsset.material

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

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

13

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