bytev-charts/lib/plugin/three.js/examples/js/loaders/KTXLoader.js

基于echarts和JavaScript及ES6封装的一个可以直接调用的图表组件库，内置主题设计，简单快捷，且支持用户自定义配置； npm 安装方式: npm install bytev-charts 若启动提示还需额外install插件,则运行 npm install @babel/runtime-corejs2 即可;

import "core-js/modules/es.array.iterator.js";
import "core-js/modules/es.array-buffer.slice.js";
import "core-js/modules/es.object.to-string.js";
import "core-js/modules/es.typed-array.uint8-array.js";
import "core-js/modules/es.typed-array.copy-within.js";
import "core-js/modules/es.typed-array.every.js";
import "core-js/modules/es.typed-array.fill.js";
import "core-js/modules/es.typed-array.filter.js";
import "core-js/modules/es.typed-array.find.js";
import "core-js/modules/es.typed-array.find-index.js";
import "core-js/modules/es.typed-array.for-each.js";
import "core-js/modules/es.typed-array.includes.js";
import "core-js/modules/es.typed-array.index-of.js";
import "core-js/modules/es.typed-array.iterator.js";
import "core-js/modules/es.typed-array.join.js";
import "core-js/modules/es.typed-array.last-index-of.js";
import "core-js/modules/es.typed-array.map.js";
import "core-js/modules/es.typed-array.reduce.js";
import "core-js/modules/es.typed-array.reduce-right.js";
import "core-js/modules/es.typed-array.reverse.js";
import "core-js/modules/es.typed-array.set.js";
import "core-js/modules/es.typed-array.slice.js";
import "core-js/modules/es.typed-array.some.js";
import "core-js/modules/es.typed-array.sort.js";
import "core-js/modules/es.typed-array.subarray.js";
import "core-js/modules/es.typed-array.to-locale-string.js";
import "core-js/modules/es.typed-array.to-string.js";
import "core-js/modules/es.typed-array.uint32-array.js";
import "core-js/modules/es.data-view.js";
import "core-js/modules/es.typed-array.int32-array.js";
import _Object$assign from "@babel/runtime-corejs2/core-js/object/assign";
import _Object$create from "@babel/runtime-corejs2/core-js/object/create";
console.warn("THREE.KTXLoader: As part of the transition to ES6 Modules, the files in 'examples/js' were deprecated in May 2020 (r117) and will be deleted in December 2020 (r124). You can find more information about developing using ES6 Modules in https://threejs.org/docs/#manual/en/introduction/Installation.");
/**
 * for description see https://www.khronos.org/opengles/sdk/tools/KTX/
 * for file layout see https://www.khronos.org/opengles/sdk/tools/KTX/file_format_spec/
 *
 * ported from https://github.com/BabylonJS/Babylon.js/blob/master/src/Tools/babylon.khronosTextureContainer.ts
 */

THREE.KTXLoader = function (manager) {
  THREE.CompressedTextureLoader.call(this, manager);
};

THREE.KTXLoader.prototype = _Object$assign(_Object$create(THREE.CompressedTextureLoader.prototype), {
  constructor: THREE.KTXLoader,
  parse: function parse(buffer, loadMipmaps) {
    var ktx = new KhronosTextureContainer(buffer, 1);
    return {
      mipmaps: ktx.mipmaps(loadMipmaps),
      width: ktx.pixelWidth,
      height: ktx.pixelHeight,
      format: ktx.glInternalFormat,
      isCubemap: ktx.numberOfFaces === 6,
      mipmapCount: ktx.numberOfMipmapLevels
    };
  }
});

var KhronosTextureContainer = function () {
  /**
   * @param {ArrayBuffer} arrayBuffer- contents of the KTX container file
   * @param {number} facesExpected- should be either 1 or 6, based whether a cube texture or or
   * @param {boolean} threeDExpected- provision for indicating that data should be a 3D texture, not implemented
   * @param {boolean} textureArrayExpected- provision for indicating that data should be a texture array, not implemented
   */
  function KhronosTextureContainer(arrayBuffer, facesExpected
  /*, threeDExpected, textureArrayExpected */
  ) {
    this.arrayBuffer = arrayBuffer; // Test that it is a ktx formatted file, based on the first 12 bytes, character representation is:
    // '´', 'K', 'T', 'X', ' ', '1', '1', 'ª', '\r', '\n', '\x1A', '\n'
    // 0xAB, 0x4B, 0x54, 0x58, 0x20, 0x31, 0x31, 0xBB, 0x0D, 0x0A, 0x1A, 0x0A

    var identifier = new Uint8Array(this.arrayBuffer, 0, 12);

    if (identifier[0] !== 0xAB || identifier[1] !== 0x4B || identifier[2] !== 0x54 || identifier[3] !== 0x58 || identifier[4] !== 0x20 || identifier[5] !== 0x31 || identifier[6] !== 0x31 || identifier[7] !== 0xBB || identifier[8] !== 0x0D || identifier[9] !== 0x0A || identifier[10] !== 0x1A || identifier[11] !== 0x0A) {
      console.error('texture missing KTX identifier');
      return;
    } // load the reset of the header in native 32 bit uint


    var dataSize = Uint32Array.BYTES_PER_ELEMENT;
    var headerDataView = new DataView(this.arrayBuffer, 12, 13 * dataSize);
    var endianness = headerDataView.getUint32(0, true);
    var littleEndian = endianness === 0x04030201;
    this.glType = headerDataView.getUint32(1 * dataSize, littleEndian); // must be 0 for compressed textures

    this.glTypeSize = headerDataView.getUint32(2 * dataSize, littleEndian); // must be 1 for compressed textures

    this.glFormat = headerDataView.getUint32(3 * dataSize, littleEndian); // must be 0 for compressed textures

    this.glInternalFormat = headerDataView.getUint32(4 * dataSize, littleEndian); // the value of arg passed to gl.compressedTexImage2D(,,x,,,,)

    this.glBaseInternalFormat = headerDataView.getUint32(5 * dataSize, littleEndian); // specify GL_RGB, GL_RGBA, GL_ALPHA, etc (un-compressed only)

    this.pixelWidth = headerDataView.getUint32(6 * dataSize, littleEndian); // level 0 value of arg passed to gl.compressedTexImage2D(,,,x,,,)

    this.pixelHeight = headerDataView.getUint32(7 * dataSize, littleEndian); // level 0 value of arg passed to gl.compressedTexImage2D(,,,,x,,)

    this.pixelDepth = headerDataView.getUint32(8 * dataSize, littleEndian); // level 0 value of arg passed to gl.compressedTexImage3D(,,,,,x,,)

    this.numberOfArrayElements = headerDataView.getUint32(9 * dataSize, littleEndian); // used for texture arrays

    this.numberOfFaces = headerDataView.getUint32(10 * dataSize, littleEndian); // used for cubemap textures, should either be 1 or 6

    this.numberOfMipmapLevels = headerDataView.getUint32(11 * dataSize, littleEndian); // number of levels; disregard possibility of 0 for compressed textures

    this.bytesOfKeyValueData = headerDataView.getUint32(12 * dataSize, littleEndian); // the amount of space after the header for meta-data
    // Make sure we have a compressed type.  Not only reduces work, but probably better to let dev know they are not compressing.

    if (this.glType !== 0) {
      console.warn('only compressed formats currently supported');
      return;
    } else {
      // value of zero is an indication to generate mipmaps @ runtime.  Not usually allowed for compressed, so disregard.
      this.numberOfMipmapLevels = Math.max(1, this.numberOfMipmapLevels);
    }

    if (this.pixelHeight === 0 || this.pixelDepth !== 0) {
      console.warn('only 2D textures currently supported');
      return;
    }

    if (this.numberOfArrayElements !== 0) {
      console.warn('texture arrays not currently supported');
      return;
    }

    if (this.numberOfFaces !== facesExpected) {
      console.warn('number of faces expected' + facesExpected + ', but found ' + this.numberOfFaces);
      return;
    } // we now have a completely validated file, so could use existence of loadType as success
    // would need to make this more elaborate & adjust checks above to support more than one load type


    this.loadType = KhronosTextureContainer.COMPRESSED_2D;
  } // return mipmaps for THREE.js


  KhronosTextureContainer.prototype.mipmaps = function (loadMipmaps) {
    var mipmaps = []; // initialize width & height for level 1

    var dataOffset = KhronosTextureContainer.HEADER_LEN + this.bytesOfKeyValueData;
    var width = this.pixelWidth;
    var height = this.pixelHeight;
    var mipmapCount = loadMipmaps ? this.numberOfMipmapLevels : 1;

    for (var level = 0; level < mipmapCount; level++) {
      var imageSize = new Int32Array(this.arrayBuffer, dataOffset, 1)[0]; // size per face, since not supporting array cubemaps

      dataOffset += 4; // size of the image + 4 for the imageSize field

      for (var face = 0; face < this.numberOfFaces; face++) {
        var byteArray = new Uint8Array(this.arrayBuffer, dataOffset, imageSize);
        mipmaps.push({
          "data": byteArray,
          "width": width,
          "height": height
        });
        dataOffset += imageSize;
        dataOffset += 3 - (imageSize + 3) % 4; // add padding for odd sized image
      }

      width = Math.max(1.0, width * 0.5);
      height = Math.max(1.0, height * 0.5);
    }

    return mipmaps;
  };

  KhronosTextureContainer.HEADER_LEN = 12 + 13 * 4; // identifier + header elements (not including key value meta-data pairs)
  // load types

  KhronosTextureContainer.COMPRESSED_2D = 0; // uses a gl.compressedTexImage2D()

  KhronosTextureContainer.COMPRESSED_3D = 1; // uses a gl.compressedTexImage3D()

  KhronosTextureContainer.TEX_2D = 2; // uses a gl.texImage2D()

  KhronosTextureContainer.TEX_3D = 3; // uses a gl.texImage3D()

  return KhronosTextureContainer;
}();