WebGPU and CompressedArrayTexture

Questions
, ,
1

Just trying to extract the first texture from the CompressedArrayTexture and set it as a background.

  • Using the spiritedaway.ktx2 example from three.js repository
  • Using modified decompress function from WebGL and WebGPU TextureUtils

WebGL works fine and here is the modified fragmentShader part:

          fragmentShader: !texture.isCompressedArrayTexture ?
          `
          uniform sampler2D blitTexture; 
          varying vec2 vUv;

          void main(){ 
          gl_FragColor = vec4(vUv.xy, 0., 1.0);

          #ifdef IS_SRGB
          gl_FragColor = sRGBTransferOETF( texture2D( blitTexture, vUv) );
          #else
          gl_FragColor = texture2D( blitTexture, vUv);
          #endif
          }` 
          :
          `
          uniform sampler2DArray blitTexture;
          varying vec2 vUv;

          void main(){
          gl_FragColor = vec4(vUv.xy, 0., 1.0);

          vec4 color = texture( blitTexture, vec3(vUv, 0.));
          gl_FragColor = vec4( color.rgb + .1, 1.0 );
          }`

WebGPU doesn’t work and only produces colorful rainbow instead of the texture

        if (!blitTexture.isCompressedArrayTexture) {
          material.fragmentNode = texture( blitTexture_clone, uv().flipY() );
        } else {
          const color = vec4( texture( blitTexture_clone, vec3( uv(), 0. ) ) );
          material.fragmentNode = vec4( uv().xy, 0., 1.0 );
          material.fragmentNode.add( vec4( color.rgb.add( .1 ), 1.0 ) );
        }

Not really sure how to properly convert the bottom part of the WebGL fragmentShader to WebGPU TSL.

How could it distinguish between uniform sampler2D blitTexture and uniform sampler2DArray blitTexture?

Any help or suggestion will be appreciated.

2

For those who might need something like this in the future, the WebGPU solution appears to be rather simple and it has also suggested a simplified WebGL shader code:

WebGL

          void main(){
          gl_FragColor = vec4(vUv.xy, 0., 1.0);
          gl_FragColor = texture( blitTexture, vec3(vUv, 0));
          }`

WebGPU

        if (!blitTexture.isCompressedArrayTexture) {
          material.fragmentNode = texture( blitTexture_clone, uv().flipY() );
        } else {
          material.fragmentNode = texture( blitTexture_clone, uv().flipY() ).depth( 0 );
        }
1 Like