Hi, Is there any way using prefilter in code?
I usually use the .dds file that I downloaded
If I can use prefilter in code, I don’t think I need to go through the editor to prefilter and download
please let me know if there is a way not to use .dds file
or way to get code generated .dds file…
Thanks
Here is the relevant engine method, I haven’t tested it myself let us know if it works for you:
Here is some code from the editor on how it uses the method:
cubemap = new pc.Texture(app.graphicsDevice, {
cubemap: true,
rgbm: false,
fixCubemapSeams: true,
format: textures[0].format,
width: textures[0].width,
height: textures[0].height
});
cubemap.addressU = pc.ADDRESS_CLAMP_TO_EDGE;
cubemap.addressV = pc.ADDRESS_CLAMP_TO_EDGE;
cubemap._levels[0] = [ textures[0]._levels[0],
textures[1]._levels[0],
textures[2]._levels[0],
textures[3]._levels[0],
textures[4]._levels[0],
textures[5]._levels[0] ];
// prefilter cubemap
var options = {
device: app.graphicsDevice,
sourceCubemap: cubemap,
method: 1,
samples: 4096,
cpuSync: true,
filteredFixed: [],
filteredFixedRgbm: [],
singleFilteredFixedRgbm: true
};
pc.prefilterCubemap(options);
this.hdr3 = {
name: 'white-dom',
ddsPath: 'assets/Helipad/Helipad.dds',
textures: [
'assets/common/hdr/university/nx.png',
'assets/common/hdr/university/px.png',
'assets/common/hdr/university/py.png', // FIX IT
'assets/common/hdr/university/ny.png', // FIX IT
'assets/common/hdr/university/nz.png',
'assets/common/hdr/university/pz.png'
]
};
this.textureAssets = [];
for (let i = 0; i < this.hdr3.textures.length; i++) {
const image = new Image();
image.crossOrigin = 'anonymous';
const that = this;
image.onload = function(){
const texture = new pc.Texture(that.app.graphicsDevice);
texture.setSource(image);
that.textureAssets.push(texture);
if(that.textureAssets.length === 6){
const maybecubemap = new pc.Texture(that.app.graphicsDevice, {
cubemap: true,
rgbm: false,
fixCubemapSeams: true,
format: that.textureAssets[0].format,
width: that.textureAssets[0].width,
height: that.textureAssets[0].height
});
maybecubemap.addressU = pc.ADDRESS_CLAMP_TO_EDGE;
maybecubemap.addressV = pc.ADDRESS_CLAMP_TO_EDGE;
maybecubemap._levels[0] = [
that.textureAssets[0]._levels[0],
that.textureAssets[1]._levels[0],
that.textureAssets[2]._levels[0],
that.textureAssets[3]._levels[0],
that.textureAssets[4]._levels[0],
that.textureAssets[5]._levels[0]
];
// prefilter cubemap
const options = {
device: that.app.graphicsDevice,
sourceCubemap: maybecubemap,
method: 1,
samples: 4096,
cpuSync: true,
filteredFixed: [],
filteredFixedRgbm: [],
singleFilteredFixedRgbm: true
};
const tAssets = [];
for (let i = 0; i < that.hdr3.textures.length; i++) {
const asset = new pc.Asset(that.hdr3.name + '-' + i, 'texture', {url: that.hdr3.textures[i]});
that.app.assets.add(asset);
tAssets.push(asset.id);
}
const cmap = new pc.Asset
(
that.hdr3.name,
'cubemap',
{url: that.hdr3.ddsPath}, //I want to ignore this!!.
{
anisotropy: Number(1),
rgbm: true,
textures: tAssets
}
);
that.app.scene.skyboxIntensity = Number(1);
that.app.scene.gammaCorrection = pc.GAMMA_SRGB;
that.app.setSkybox(cmap);
console.log(maybecubemap);
console.log(options);
pc.prefilterCubemap(options); //I don't know, Is it works? how to check
//that.app.scene.skyboxModel._skyboxCubeMap = options; //Cannot set property!!
//that.app.scene.skyboxModel._skyboxCubeMap = maybecubemap; //Cannot set property!!
console.log(that.app.scene); //nothing change
}
};
image.src = this.hdr3.textures[i];
}
This is my code.
Model’s reflection did not change.
Hi @Leonidas, Thank you for always helping.
I’ve used the code that you refer, then the texture is made.
But the prefilterCubemap function is just a texture-making function for material (https://developer.playcanvas.com/en/api/pc.StandardMaterial.html#cubeMap.)
I want to load this texture and apply setSkybox. I don’t know what to do after that.
Maybe… It need to make the texture into asset, because that texture is _dds of cubemap asset
Thanks
+The code I did…
const cubemap = new pc.Texture(app.graphicsDevice, {
cubemap: true,
rgbm: false,
fixCubemapSeams: true,
format: textureAssets[0].format,
width: textureAssets[0].width,
height: textureAssets[0].height
});
cubemap.addressU = pc.ADDRESS_CLAMP_TO_EDGE;
cubemap.addressV = pc.ADDRESS_CLAMP_TO_EDGE;
cubemap._levels[0] = [
textureAssets[0]._resources[0]._levels[0],
textureAssets[1]._resources[0]._levels[0],
textureAssets[2]._resources[0]._levels[0],
textureAssets[3]._resources[0]._levels[0],
textureAssets[4]._resources[0]._levels[0],
textureAssets[5]._resources[0]._levels[0]
];
// prefilter cubemap
const options = {
device: app.graphicsDevice,
sourceCubemap: cubemap,
method: 1,
samples: 4096,
cpuSync: true,
filteredFixed: [],
filteredFixedRgbm: [],
singleFilteredFixedRgbm: true
};
const cubemapTexture = pc.prefilterCubemap(options); // add return at pc.prefilterCubemap
const cmap = new pc.Asset('cubemapAsset', 'cubemap');
cmap._data = {
anisotropy: 1,
magFilter: 1,
minFilter: 5,
rgbm: true,
textures: textureAssets,
};
cmap._dds = cubemapTexture;
cmap._levelsEvents = textureAssets;
pc.app.assets.load(cmap);
pc.app.scene.skyboxIntensity = 1;
pc.app.scene.exposure = 1;
pc.app.scene.gammaCorrection = pc.GAMMA_SRGB;
pc.app.scene.toneMapping = pc.TONEMAP_ACES;
pc.app.setSkybox(cmap);
Hi @Jinwoo_Choi,
Not sure what’s the correct way of doing that then, would you like to raise a question in the engine repo?
Someone may be able to step in and provide some insight on how the engine is doing this.