How to set cubemap without .dds file (engine only)

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

cp9

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.