[SOLVED] Calling pc.prefilterCubemap

Hello,

After looking at the source code of pc.prefilterCubemap, I am still struggling with the usage. I tried like this:

// assume I have all six textures already loaded and put into 'textures' array
// Create a cubemap texture
        var cubemap = new pc.Texture(pc.app.graphicsDevice, {
          cubemap: true,
          rgbm: true 
        });
        
        // set the textures sources into the cubemap
        cubemap.setSource(textures.map(function (texture) {
          return texture.resource.getSource();
        }));
        
        // set as the skybox
        pc.app.scene.ambientLight = new pc.Color(0.5,0.5,0.5);
        pc.app.scene.gammaCorrection = 1;
        pc.app.scene.toneMapping = pc.TONEMAP_ACES;
        pc.app.scene.skyboxIntensity = 0.025;
        pc.app.scene.skyboxMip = 5;
        pc.app.scene.skybox = cubemap;

        pc.prefilterCubemap({
           device: pc.app.graphicsDevice,
           sourceCubemap: cubemap,
           cpuSync: true,
           method: 0
        });

But, I have following errors. Would you give an example how to use it?
ERROR: Failed to compile fragment shader:

1: #version 300 es
2: #define varying in
3: out highp vec4 pc_fragColor;
4: #define gl_FragColor pc_fragColor
5: #define texture2D texture
6: #define textureCube texture
7: #define texture2DProj textureProj
8: #define texture2DLodEXT textureLod
9: #define texture2DProjLodEXT textureProjLod
10: #define textureCubeLodEXT textureLod
11: #define texture2DGradEXT textureGrad
12: #define texture2DProjGradEXT textureProjGrad
13: #define textureCubeGradEXT textureGrad
14: #define GL2
15: precision highp float;
16: #ifdef GL2
17: precision highp sampler2DShadow;
18: #endif
19:
20: vec3 decodeRGBM(vec4 rgbm) {
21: vec3 color = (8.0 * rgbm.a) * rgbm.rgb;
22: return color * color;
23: }
24: vec3 texture2DRGBM(sampler2D tex, vec2 uv) {
25: return decodeRGBM(texture2D(tex, uv));
26: }
27: vec3 textureCubeRGBM(samplerCube tex, vec3 uvw) {
28: return decodeRGBM(textureCube(tex, uvw));
29: }
30: varying vec2 vUv0;
31: uniform samplerCube source;
32: uniform vec4 params;
33: float saturate(float x) {
34: return clamp(x, 0.0, 1.0);
35: }
36: float rnd(vec2 uv) {
37: return fract(sin(dot(uv, vec2(12.9898, 78.233) * 2.0)) * 43758.5453);
38: }
39: const float PI = 3.14159265358979;
40: vec3 hemisphereSample_cos(vec2 uv, mat3 vecSpace, vec3 cubeDir, float gloss) { // cos + lerped cone size (better than just lerped)
41: float phi = uv.y * 2.0 * PI;
42: float cosTheta = sqrt(1.0 - uv.x);
43: float sinTheta = sqrt(1.0 - cosTheta * cosTheta);
44: vec3 sampleDir = vec3(cos(phi) * sinTheta, sin(phi) * sinTheta, cosTheta);
45: return normalize(mix(vecSpace * sampleDir, cubeDir, params.y));
46: }
47: vec3 hemisphereSample_phong(vec2 uv, mat3 vecSpace, vec3 cubeDir, float specPow) {
48: float phi = uv.y * 2.0 * PI;
49: float cosTheta = pow(1.0 - uv.x, 1.0 / (specPow + 1.0));
50: float sinTheta = sqrt(1.0 - cosTheta * cosTheta);
51: vec3 sampleDir = vec3(cos(phi) * sinTheta, sin(phi) * sinTheta, cosTheta);
52: return vecSpace * sampleDir;
53: }
54: mat3 matrixFromVector(vec3 n) { // frisvad
55: float a = 1.0 / (1.0 + n.z);
56: float b = -n.x * n.y * a;
57: vec3 b1 = vec3(1.0 - n.x * n.x * a, b, -n.x);
58: vec3 b2 = vec3(b, 1.0 - n.y * n.y * a, -n.y);
59: return mat3(b1, b2, n);
60: }
61: vec4 encodeRGBM(vec3 color) { // modified RGBM
62: vec4 encoded;
63: encoded.rgb = pow(color.rgb, vec3(0.5));
64: encoded.rgb *= 1.0 / 8.0;
65: encoded.a = saturate( max( max( encoded.r, encoded.g ), max( encoded.b, 1.0 / 255.0 ) ) );
66: encoded.a = ceil(encoded.a * 255.0) / 255.0;
67: encoded.rgb /= encoded.a;
68: return encoded;
69: }
70: void main(void) {
71: vec2 st = vUv0 * 2.0 - 1.0;
72: if (params.w==1.0 || params.w==3.0) {
73: st = 2.0 * floor(gl_FragCoord.xy) / (params.z - 1.0) - 1.0;
74: }
75: float face = params.x;
76: vec3 vec;
77: if (face==0.0) {
78: vec = vec3(1, -st.y, -st.x);
79: } else if (face==1.0) {
80: vec = vec3(-1, -st.y, st.x);
81: } else if (face==2.0) {
82: vec = vec3(st.x, 1, st.y);
83: } else if (face==3.0) {
84: vec = vec3(st.x, -1, -st.y);
85: } else if (face==4.0) {
86: vec = vec3(st.x, -st.y, 1);
87: } else {
88: vec = vec3(-st.x, -st.y, -1);
89: }
90: mat3 vecSpace = matrixFromVector(normalize(vec));
91: vec3 color = vec3(0.0);
92: const int samples = undefined;
93: vec3 vect;
94: for(int i=0; i<samples; i++) {
95: float sini = sin(float(i));
96: float cosi = cos(float(i));
97: float rand = rnd(vec2(sini, cosi));
98: vect = hemisphereSample_cos(vec2(float(i) / float(samples), rand), vecSpace, vec, params.y);
99: color += textureCubeRGBM(source, vect).rgb;
100: }
101: color /= float(samples);
102: gl_FragColor = params.w < 2.0? vec4(color, 1.0) : encodeRGBM(color);
103: }
104:

ERROR: 0:92: ‘undefined’ : undeclared identifier
ERROR: 0:92: ‘const’ : non-matching types for const initializer

ERROR: Failed to link shader program. Error: invalid shaders
[.Offscreen-For-WebGL-000001FFBDE275B0]GL ERROR :GL_INVALID_OPERATION : glDrawArrays: Source and destination textures of the draw are the same.

This is the line that is causing the problems:

$NUMSAMPLES is replaced in the GLSL code here:

This variable comes from the samples property set on the options object passed into the function:

As you can see, you’re not setting samples.

Thank you so much! now, it’s not crying anymore.
I have a real question though. The reason I want to apply prefilterCubemap is a blurred skybox.
I thought having prefilterCubemap set and higher number of pc.app.scene.skyboxMip will do the trick, but it does not make it blurred. Probably, are there more options I missed in prefilterCubemap? Would you give some advice?

Thank you again,

Check out this example to see how to load and set a prefiltered cubemap as the skybox:

Sweet! Thank you so much again.