Equivalent for the three.js CompressedTexture

magicfelix · December 30, 2021, 5:01pm

What is the BabylonJs equivalent for the three.js Texture Type of:

CompressedTexture( mipmaps : Array, width : Number, height : Number, format : Constant, type : Constant, mapping : Constant, wrapS : Constant, wrapT : Constant, magFilter : Constant, minFilter : Constant, anisotropy : Number )

Is it RawTexture?
I receive an Int8Array and need to generate a texture from it.
The texture is encoded as RGB_S3TC_DXT1 or RGBA_ASTC_8x8 format.

here is the concrete implementation I have to translate:

new THREE.CompressedTexture(null, textureSizeX, textureSizeY,
THREE.RGB_S3TC_DXT1_Format, THREE.UnsignedByteType, THREE.UVMapping,
THREE.ClampToEdgeWrapping, THREE.ClampToEdgeWrapping,
THREE.LinearFilter, THREE.LinearFilter)

Thanks

Evgeni_Popov · December 31, 2021, 10:10am

You will need to create a RawTexture and then use engine._uploadCompressedDataToTextureDirectly to update the texture with compressed data.

That’s what the KTX2 loader is doing:

github.com

BabylonJS/Babylon.js/blob/master/src/Misc/khronosTextureContainer2.ts#L284

    
      
                      throw new Error("KTX2 container - could not transcode one of the image");

                  }

          

                  if (data.transcodedFormat === 0x8058 /* RGBA8 */) {

                      // uncompressed RGBA

                      internalTexture.width = mipmap.width; // need to set width/height so that the call to _uploadDataToTextureDirectly uses the right dimensions

                      internalTexture.height = mipmap.height;

          

                      this._engine._uploadDataToTextureDirectly(internalTexture, mipmap.data, 0, t, undefined, true);

                  } else {

                      this._engine._uploadCompressedDataToTextureDirectly(internalTexture, data.transcodedFormat, mipmap.width, mipmap.height, mipmap.data, 0, t);

                  }

              }

          

              internalTexture._extension = ".ktx2";

              internalTexture.width = data.mipmaps[0].width;

              internalTexture.height = data.mipmaps[0].height;

              internalTexture.isReady = true;

          

              this._engine._bindTextureDirectly(oglTexture2D, null);

          }

The signature of the function is:

github.com

BabylonJS/Babylon.js/blob/d9457c9f840a62c6fbdec32226ec80d18333608e/src/Engines/thinEngine.ts#L4015

    
      
                  gl.texParameteri(target, gl.TEXTURE_COMPARE_FUNC, Constants.LEQUAL);

                  gl.texParameteri(target, gl.TEXTURE_COMPARE_MODE, gl.NONE);

              }

              else {

                  gl.texParameteri(target, gl.TEXTURE_COMPARE_FUNC, comparisonFunction);

                  gl.texParameteri(target, gl.TEXTURE_COMPARE_MODE, gl.COMPARE_REF_TO_TEXTURE);

              }

          }

          

          /** @hidden */

          public _uploadCompressedDataToTextureDirectly(texture: InternalTexture, internalFormat: number, width: number, height: number, data: ArrayBufferView, faceIndex: number = 0, lod: number = 0) {

              var gl = this._gl;

          

              var target = gl.TEXTURE_2D;

              if (texture.isCube) {

                  target = gl.TEXTURE_CUBE_MAP_POSITIVE_X + faceIndex;

              }

          

              if (texture._useSRGBBuffer) {

                  switch (internalFormat) {

                      case Constants.TEXTUREFORMAT_COMPRESSED_RGBA_BPTC_UNORM:

internalFormat is the format of the compressed texture. We have a list of predefined values for some formats:

github.com

BabylonJS/Babylon.js/blob/master/src/Engines/constants.ts#L176-L192

    
      
          public static readonly TEXTUREFORMAT_COMPRESSED_RGBA_BPTC_UNORM = 36492;

          /** Compressed BC6 unsigned float */

          public static readonly TEXTUREFORMAT_COMPRESSED_RGB_BPTC_UNSIGNED_FLOAT = 36495;

          /** Compressed BC6 signed float */

          public static readonly TEXTUREFORMAT_COMPRESSED_RGB_BPTC_SIGNED_FLOAT = 36494;

          /** Compressed BC3 */

          public static readonly TEXTUREFORMAT_COMPRESSED_RGBA_S3TC_DXT5 = 33779;

          /** Compressed BC2 */

          public static readonly TEXTUREFORMAT_COMPRESSED_RGBA_S3TC_DXT3 = 33778;

          /** Compressed BC1 (RGBA) */

          public static readonly TEXTUREFORMAT_COMPRESSED_RGBA_S3TC_DXT1 = 33777;

          /** Compressed BC1 (RGB) */

          public static readonly TEXTUREFORMAT_COMPRESSED_RGB_S3TC_DXT1 = 33776;

          /** Compressed ASTC 4x4 */

          public static readonly TEXTUREFORMAT_COMPRESSED_RGBA_ASTC_4x4 = 37808;

          /**  Compressed ETC1 (RGB) */

          public static readonly TEXTUREFORMAT_COMPRESSED_RGB_ETC1_WEBGL = 36196;

If your format is not in the list, you will need to find the right value. For eg, RGBA_ASTC_8x8 is 0x93B7 (see qopengltexture.h source code [qtbase/src/gui/opengl/qopengltexture.h] - Woboq Code Browser).

@sebavan Maybe we could provide on RawTexture a method to update compressed data?

Evgeni_Popov · December 31, 2021, 10:21am

I think that for WebGL you will also need to call engine._bindTextureDirectly(engine._gl.TEXTURE_2D, texture, true); before calling _uploadCompressedDataToTextureDirectly and engine._bindTextureDirectly(engine._gl.TEXTURE_2D, null); after.

magicfelix · January 1, 2022, 5:53pm

Thanks @Evgeni_Popov. Your solution works! Would love to see a more straight forward solution to update the compressed data like you suggested.

sebavan · January 3, 2022, 5:13pm

@magicfelix can you provide a sample code in the PG ? I ll use it to add a special update function for compressed texture.

Topic		Replies	Views
Texture compression formate for desktops, specifically osx? Questions	18	1517	December 3, 2019
Supporting BC5 and BC7 device specific compression formats Feature requests	37	1928	January 26, 2023
Using S3TC textures Questions	1	302	November 22, 2020
Compressed Textures not working Bugs	9	334	October 26, 2023
BabylonJS Vram usage versus Unity Questions	107	6830	June 18, 2019

Equivalent for the three.js CompressedTexture

Related topics