KTXLoader.js 6.7 KB

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