KTXLoader.js 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197
  1. import {
  2. CompressedTextureLoader
  3. } from 'three';
  4. /**
  5. * A loader for the KTX texture compression format.
  6. *
  7. * References:
  8. * - [The KTX File Format and Tools]{@link https://www.khronos.org/opengles/sdk/tools/KTX/}
  9. * - [Babylon.JS khronosTextureContainer.ts]{@link https://github.com/BabylonJS/Babylon.js/blob/master/src/Misc/khronosTextureContainer.ts}
  10. *
  11. * ```js
  12. * const loader = new KTXLoader();
  13. *
  14. * const map = loader.load( 'textures/compressed/lensflare_ASTC8x8.ktx' )
  15. * map.colorSpace = THREE.SRGBColorSpace; // only for color textures
  16. * ```
  17. *
  18. * @augments CompressedTextureLoader
  19. * @three_import import { KTXLoader } from 'three/addons/loaders/KTXLoader.js';
  20. */
  21. class KTXLoader extends CompressedTextureLoader {
  22. /**
  23. * Constructs a new KTX loader.
  24. *
  25. * @param {LoadingManager} [manager] - The loading manager.
  26. */
  27. constructor( manager ) {
  28. super( manager );
  29. }
  30. /**
  31. * Parses the given KTX texture data.
  32. *
  33. * @param {ArrayBuffer} buffer - The raw texture data.
  34. * @param {boolean} loadMipmaps - Whether to load mipmaps or not.
  35. * @return {CompressedTextureLoader~TexData} An object representing the parsed texture data.
  36. */
  37. parse( buffer, loadMipmaps ) {
  38. const ktx = new KhronosTextureContainer( buffer, 1 );
  39. return {
  40. mipmaps: ktx.mipmaps( loadMipmaps ),
  41. width: ktx.pixelWidth,
  42. height: ktx.pixelHeight,
  43. format: ktx.glInternalFormat,
  44. isCubemap: ktx.numberOfFaces === 6,
  45. mipmapCount: ktx.numberOfMipmapLevels
  46. };
  47. }
  48. }
  49. const HEADER_LEN = 12 + ( 13 * 4 ); // identifier + header elements (not including key value meta-data pairs)
  50. // load types
  51. const COMPRESSED_2D = 0; // uses a gl.compressedTexImage2D()
  52. //const COMPRESSED_3D = 1; // uses a gl.compressedTexImage3D()
  53. //const TEX_2D = 2; // uses a gl.texImage2D()
  54. //const TEX_3D = 3; // uses a gl.texImage3D()
  55. class KhronosTextureContainer {
  56. /**
  57. * @private
  58. * @param {ArrayBuffer} arrayBuffer - contents of the KTX container file
  59. * @param {number} facesExpected - should be either 1 or 6, based whether a cube texture or or
  60. * @param {boolean} threeDExpected - provision for indicating that data should be a 3D texture, not implemented
  61. * @param {boolean} textureArrayExpected - provision for indicating that data should be a texture array, not implemented
  62. */
  63. constructor( arrayBuffer, facesExpected /*, threeDExpected, textureArrayExpected */ ) {
  64. this.arrayBuffer = arrayBuffer;
  65. // Test that it is a ktx formatted file, based on the first 12 bytes, character representation is:
  66. // '´', 'K', 'T', 'X', ' ', '1', '1', 'ª', '\r', '\n', '\x1A', '\n'
  67. // 0xAB, 0x4B, 0x54, 0x58, 0x20, 0x31, 0x31, 0xBB, 0x0D, 0x0A, 0x1A, 0x0A
  68. const identifier = new Uint8Array( this.arrayBuffer, 0, 12 );
  69. if ( identifier[ 0 ] !== 0xAB ||
  70. identifier[ 1 ] !== 0x4B ||
  71. identifier[ 2 ] !== 0x54 ||
  72. identifier[ 3 ] !== 0x58 ||
  73. identifier[ 4 ] !== 0x20 ||
  74. identifier[ 5 ] !== 0x31 ||
  75. identifier[ 6 ] !== 0x31 ||
  76. identifier[ 7 ] !== 0xBB ||
  77. identifier[ 8 ] !== 0x0D ||
  78. identifier[ 9 ] !== 0x0A ||
  79. identifier[ 10 ] !== 0x1A ||
  80. identifier[ 11 ] !== 0x0A ) {
  81. console.error( 'texture missing KTX identifier' );
  82. return;
  83. }
  84. // load the reset of the header in native 32 bit uint
  85. const dataSize = Uint32Array.BYTES_PER_ELEMENT;
  86. const headerDataView = new DataView( this.arrayBuffer, 12, 13 * dataSize );
  87. const endianness = headerDataView.getUint32( 0, true );
  88. const littleEndian = endianness === 0x04030201;
  89. this.glType = headerDataView.getUint32( 1 * dataSize, littleEndian ); // must be 0 for compressed textures
  90. this.glTypeSize = headerDataView.getUint32( 2 * dataSize, littleEndian ); // must be 1 for compressed textures
  91. this.glFormat = headerDataView.getUint32( 3 * dataSize, littleEndian ); // must be 0 for compressed textures
  92. this.glInternalFormat = headerDataView.getUint32( 4 * dataSize, littleEndian ); // the value of arg passed to gl.compressedTexImage2D(,,x,,,,)
  93. this.glBaseInternalFormat = headerDataView.getUint32( 5 * dataSize, littleEndian ); // specify GL_RGB, GL_RGBA, GL_ALPHA, etc (un-compressed only)
  94. this.pixelWidth = headerDataView.getUint32( 6 * dataSize, littleEndian ); // level 0 value of arg passed to gl.compressedTexImage2D(,,,x,,,)
  95. this.pixelHeight = headerDataView.getUint32( 7 * dataSize, littleEndian ); // level 0 value of arg passed to gl.compressedTexImage2D(,,,,x,,)
  96. this.pixelDepth = headerDataView.getUint32( 8 * dataSize, littleEndian ); // level 0 value of arg passed to gl.compressedTexImage3D(,,,,,x,,)
  97. this.numberOfArrayElements = headerDataView.getUint32( 9 * dataSize, littleEndian ); // used for texture arrays
  98. this.numberOfFaces = headerDataView.getUint32( 10 * dataSize, littleEndian ); // used for cubemap textures, should either be 1 or 6
  99. this.numberOfMipmapLevels = headerDataView.getUint32( 11 * dataSize, littleEndian ); // number of levels; disregard possibility of 0 for compressed textures
  100. this.bytesOfKeyValueData = headerDataView.getUint32( 12 * dataSize, littleEndian ); // the amount of space after the header for meta-data
  101. // Make sure we have a compressed type. Not only reduces work, but probably better to let dev know they are not compressing.
  102. if ( this.glType !== 0 ) {
  103. console.warn( 'only compressed formats currently supported' );
  104. return;
  105. } else {
  106. // value of zero is an indication to generate mipmaps @ runtime. Not usually allowed for compressed, so disregard.
  107. this.numberOfMipmapLevels = Math.max( 1, this.numberOfMipmapLevels );
  108. }
  109. if ( this.pixelHeight === 0 || this.pixelDepth !== 0 ) {
  110. console.warn( 'only 2D textures currently supported' );
  111. return;
  112. }
  113. if ( this.numberOfArrayElements !== 0 ) {
  114. console.warn( 'texture arrays not currently supported' );
  115. return;
  116. }
  117. if ( this.numberOfFaces !== facesExpected ) {
  118. console.warn( 'number of faces expected' + facesExpected + ', but found ' + this.numberOfFaces );
  119. return;
  120. }
  121. // we now have a completely validated file, so could use existence of loadType as success
  122. // would need to make this more elaborate & adjust checks above to support more than one load type
  123. this.loadType = COMPRESSED_2D;
  124. }
  125. mipmaps( loadMipmaps ) {
  126. const mipmaps = [];
  127. // initialize width & height for level 1
  128. let dataOffset = HEADER_LEN + this.bytesOfKeyValueData;
  129. let width = this.pixelWidth;
  130. let height = this.pixelHeight;
  131. const mipmapCount = loadMipmaps ? this.numberOfMipmapLevels : 1;
  132. for ( let level = 0; level < mipmapCount; level ++ ) {
  133. const imageSize = new Int32Array( this.arrayBuffer, dataOffset, 1 )[ 0 ]; // size per face, since not supporting array cubemaps
  134. dataOffset += 4; // size of the image + 4 for the imageSize field
  135. for ( let face = 0; face < this.numberOfFaces; face ++ ) {
  136. const byteArray = new Uint8Array( this.arrayBuffer, dataOffset, imageSize );
  137. mipmaps.push( { 'data': byteArray, 'width': width, 'height': height } );
  138. dataOffset += imageSize;
  139. dataOffset += 3 - ( ( imageSize + 3 ) % 4 ); // add padding for odd sized image
  140. }
  141. width = Math.max( 1.0, width * 0.5 );
  142. height = Math.max( 1.0, height * 0.5 );
  143. }
  144. return mipmaps;
  145. }
  146. }
  147. export { KTXLoader };