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.
@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,
})
@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
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',
asset,
})
gltf.model.material.cubeMap = cubeMapAsset // Asset goes here
gltf.model.material.update()
@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
console.log(matAssets)
if (matAssets) {
matAssets.forEach((matAsset) => {
const material = matAsset.material
material.cubeMap = this.cubeMap.resources
material.update()
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…
Your solution worked.
Thanks!
Please help … When I download the “prefiltered cubemap” it gives me a “zip” file full of folders including png and json.
How on earth do I set this as the asset? It’s a folder.