KTX2Loader: Update to use ktx-parse and BasisTextureLoader.

examples/jsm/loaders/KTX2Loader.js

@@ -1,15 +1,17 @@
 /**
+ * Loader for KTX 2.0 GPU Texture containers.
+ *
+ * KTX 2.0 is a container format for various GPU texture formats. The loader
+ * supports Basis Universal GPU textures, which can be quickly transcoded to
+ * a wide variety of GPU texture compression formats. While KTX 2.0 also allows
+ * other hardware-specific formats, this loader does not yet parse them.
+ *
+ * This loader parses the KTX 2.0 container and then relies on
+ * THREE.BasisTextureLoader to complete the transcoding process.
+ *
  * References:
  * - KTX: http://github.khronos.org/KTX-Specification/
  * - DFD: https://www.khronos.org/registry/DataFormat/specs/1.3/dataformat.1.3.html#basicdescriptor
- *
- * To do:
- * - [ ] High-quality demo
- * - [ ] Documentation
- * - [ ] (Optional) Include BC5
- * - [ ] (Optional) Include EAC RG on mobile (WEBGL_compressed_texture_etc)
- * - [ ] (Optional) Include two-texture output mode (see: clearcoat + clearcoatRoughness)
- * - [ ] (Optional) Support Web Workers, after #18234
  */
 
 import {
@@ -20,30 +22,22 @@ import {
 	LinearFilter,
 	LinearMipmapLinearFilter,
 	MathUtils,
-	RGBAFormat,
-	RGBA_ASTC_4x4_Format,
-	RGBA_BPTC_Format,
-	RGBA_ETC2_EAC_Format,
-	RGBA_PVRTC_4BPPV1_Format,
-	RGBA_S3TC_DXT5_Format,
-	RGB_ETC1_Format,
-	RGB_ETC2_Format,
-	RGB_PVRTC_4BPPV1_Format,
-	RGB_S3TC_DXT1_Format,
 	UnsignedByteType,
 	sRGBEncoding,
 } from '../../../build/three.module.js';
 
+import { BasisTextureLoader } from './BasisTextureLoader.js';
 import { ZSTDDecoder } from '../libs/zstddec.module.js';
+import { read as readKTX } from '../libs/ktx-parse.module.js';
 
-// Data Format Descriptor (DFD) constants.
+// KTX 2.0 constants.
 
-const DFDModel = {
+var DFDModel = {
 	ETC1S: 163,
 	UASTC: 166,
 };
 
-const DFDChannel = {
+var DFDChannel = {
 	ETC1S: {
 		RGB: 0,
 		RRR: 3,
@@ -58,6 +52,14 @@ const DFDChannel = {
 	},
 };
 
+var SupercompressionScheme = {
+	ZSTD: 2
+}
+
+var Transfer = {
+	SRGB: 2
+}
+
 //
 
 class KTX2Loader extends CompressedTextureLoader {
@@ -66,55 +68,53 @@ class KTX2Loader extends CompressedTextureLoader {
 
 		super( manager );
 
-		this.basisModule = null;
-		this.basisModulePending = null;
+		this.basisLoader = new BasisTextureLoader( manager );
+		this.zstd = new ZSTDDecoder();
+
+		this.zstd.init();
+
+		if ( typeof MSC_TRANSCODER !== 'undefined' ) {
+
+			console.warn(
+
+				'THREE.KTX2Loader: Please update to latest "basis_transcoder".'
+				+ ' "msc_basis_transcoder" is no longer supported in three.js r125+.'
 
-		this.transcoderConfig = {};
+			);
+
+		}
 
 	}
 
-	detectSupport( renderer ) {
+	setTranscoderPath ( path ) {
 
-		this.transcoderConfig = {
-			astcSupported: renderer.extensions.has( 'WEBGL_compressed_texture_astc' ),
-			etc1Supported: renderer.extensions.has( 'WEBGL_compressed_texture_etc1' ),
-			etc2Supported: renderer.extensions.has( 'WEBGL_compressed_texture_etc' ),
-			dxtSupported: renderer.extensions.has( 'WEBGL_compressed_texture_s3tc' ),
-			bptcSupported: renderer.extensions.has( 'EXT_texture_compression_bptc' ),
-			pvrtcSupported: renderer.extensions.has( 'WEBGL_compressed_texture_pvrtc' )
-				|| renderer.extensions.has( 'WEBKIT_WEBGL_compressed_texture_pvrtc' )
-		};
+		this.basisLoader.setTranscoderPath( path );
 
 		return this;
 
 	}
 
-	initModule() {
+	setWorkerLimit ( path ) {
 
-		if ( this.basisModulePending ) {
+		this.basisLoader.setWorkerLimit( path );
 
-			return;
-
-		}
+		return this;
 
-		var scope = this;
+	}
 
-		// The Emscripten wrapper returns a fake Promise, which can cause
-		// infinite recursion when mixed with native Promises. Wrap the module
-		// initialization to return a native Promise.
-		scope.basisModulePending = new Promise( function ( resolve ) {
+	detectSupport ( renderer ) {
 
-			MSC_TRANSCODER().then( function ( basisModule ) { // eslint-disable-line no-undef
+		this.basisLoader.detectSupport( renderer );
 
-				scope.basisModule = basisModule;
+		return this;
 
-				basisModule.initTranscoders();
+	}
 
-				resolve();
+	dispose () {
 
-			} );
+		this.basisLoader.dispose();
 
-		} );
+		return this;
 
 	}
 
@@ -131,14 +131,10 @@ class KTX2Loader extends CompressedTextureLoader {
 				.setResponseType( 'arraybuffer' )
 				.load( url, resolve, onProgress, reject );
 
-		} );
+		} )
 
-		// parse() will call initModule() again, but starting the process early
-		// should allow the WASM to load in parallel with the texture.
-		this.initModule();
-
-		Promise.all( [ bufferPending, this.basisModulePending ] )
-			.then( function ( [ buffer ] ) {
+		bufferPending
+			.then( function ( buffer ) {
 
 				scope.parse( buffer, function ( _texture ) {
 
@@ -160,488 +156,126 @@ class KTX2Loader extends CompressedTextureLoader {
 
 		var scope = this;
 
-		// load() may have already called initModule(), but call it again here
-		// in case the user called parse() directly. Method is idempotent.
-		this.initModule();
-
-		this.basisModulePending.then( function () {
-
-			var BasisLzEtc1sImageTranscoder = scope.basisModule.BasisLzEtc1sImageTranscoder;
-			var UastcImageTranscoder = scope.basisModule.UastcImageTranscoder;
-			var TextureFormat = scope.basisModule.TextureFormat;
-
-			var ktx = new KTX2Container( scope.basisModule, buffer );
-
-			// TODO(donmccurdy): Should test if texture is transcodable before attempting
-			// any transcoding. If supercompressionScheme is KTX_SS_BASIS_LZ and dfd
-			// colorModel is ETC1S (163) or if dfd colorModel is UASTCF (166)
-			// then texture must be transcoded.
-			var transcoder = ktx.getTexFormat() === TextureFormat.UASTC4x4
-				? new UastcImageTranscoder()
-				: new BasisLzEtc1sImageTranscoder();
-
-			ktx.initMipmaps( transcoder, scope.transcoderConfig )
-				.then( function () {
-
-					var texture = new CompressedTexture(
-						ktx.mipmaps,
-						ktx.getWidth(),
-						ktx.getHeight(),
-						ktx.transcodedFormat,
-						UnsignedByteType
-					);
-
-					texture.encoding = ktx.getEncoding();
-					texture.premultiplyAlpha = ktx.getPremultiplyAlpha();
-					texture.minFilter = ktx.mipmaps.length === 1 ? LinearFilter : LinearMipmapLinearFilter;
-					texture.magFilter = LinearFilter;
-
-					onLoad( texture );
-
-				} )
-				.catch( onError );
-
-		} );
-
-		return this;
-
-	}
-
-}
-
-class KTX2Container {
-
-	constructor( basisModule, arrayBuffer ) {
-
-		this.basisModule = basisModule;
-		this.arrayBuffer = arrayBuffer;
-
-		this.zstd = new ZSTDDecoder();
-		this.zstd.init();
-
-		this.mipmaps = null;
-		this.transcodedFormat = null;
-
-		// Confirm this is a KTX 2.0 file, based on the identifier in the first 12 bytes.
-		var idByteLength = 12;
-		var id = new Uint8Array( this.arrayBuffer, 0, idByteLength );
-		if ( id[ 0 ] !== 0xAB || // '´'
-				id[ 1 ] !== 0x4B || // 'K'
-				id[ 2 ] !== 0x54 || // 'T'
-				id[ 3 ] !== 0x58 || // 'X'
-				id[ 4 ] !== 0x20 || // ' '
-				id[ 5 ] !== 0x32 || // '2'
-				id[ 6 ] !== 0x30 || // '0'
-				id[ 7 ] !== 0xBB || // 'ª'
-				id[ 8 ] !== 0x0D || // '\r'
-				id[ 9 ] !== 0x0A || // '\n'
-				id[ 10 ] !== 0x1A || // '\x1A'
-				id[ 11 ] !== 0x0A // '\n'
-		) {
-
-			throw new Error( 'THREE.KTX2Loader: Missing KTX 2.0 identifier.' );
-
-		}
-
-		// TODO(donmccurdy): If we need to support BE, derive this from typeSize.
-		var littleEndian = true;
-
-
-		///////////////////////////////////////////////////
-		// Header.
-		///////////////////////////////////////////////////
-
-		var headerByteLength = 17 * Uint32Array.BYTES_PER_ELEMENT;
-		var headerReader = new KTX2BufferReader( this.arrayBuffer, idByteLength, headerByteLength, littleEndian );
-
-		this.header = {
-
-			vkFormat: headerReader.nextUint32(),
-			typeSize: headerReader.nextUint32(),
-			pixelWidth: headerReader.nextUint32(),
-			pixelHeight: headerReader.nextUint32(),
-			pixelDepth: headerReader.nextUint32(),
-			arrayElementCount: headerReader.nextUint32(),
-			faceCount: headerReader.nextUint32(),
-			levelCount: headerReader.nextUint32(),
+		var ktx = readKTX( new Uint8Array( buffer ) );
 
-			supercompressionScheme: headerReader.nextUint32(),
-
-			dfdByteOffset: headerReader.nextUint32(),
-			dfdByteLength: headerReader.nextUint32(),
-			kvdByteOffset: headerReader.nextUint32(),
-			kvdByteLength: headerReader.nextUint32(),
-			sgdByteOffset: headerReader.nextUint64(),
-			sgdByteLength: headerReader.nextUint64(),
-
-		};
-
-		if ( this.header.pixelDepth > 0 ) {
+		if ( ktx.pixelDepth > 0 ) {
 
 			throw new Error( 'THREE.KTX2Loader: Only 2D textures are currently supported.' );
 
 		}
 
-		if ( this.header.arrayElementCount > 1 ) {
+		if ( ktx.layerCount > 1 ) {
 
 			throw new Error( 'THREE.KTX2Loader: Array textures are not currently supported.' );
 
 		}
 
-		if ( this.header.faceCount > 1 ) {
+		if ( ktx.faceCount > 1 ) {
 
 			throw new Error( 'THREE.KTX2Loader: Cube textures are not currently supported.' );
 
 		}
 
+		var dfd = KTX2Utils.getBasicDFD( ktx );
 
-		///////////////////////////////////////////////////
-		// Level index
-		///////////////////////////////////////////////////
-
-		var levelByteLength = this.header.levelCount * 3 * 8;
-		var levelReader = new KTX2BufferReader( this.arrayBuffer, idByteLength + headerByteLength, levelByteLength, littleEndian );
-
-		this.levels = [];
-
-		for ( var i = 0; i < this.header.levelCount; i ++ ) {
-
-			this.levels.push( {
-
-				byteOffset: levelReader.nextUint64(),
-				byteLength: levelReader.nextUint64(),
-				uncompressedByteLength: levelReader.nextUint64(),
-
-			} );
-
-		}
-
-
-		///////////////////////////////////////////////////
-		// Data Format Descriptor (DFD)
-		///////////////////////////////////////////////////
-
-		var dfdReader = new KTX2BufferReader(
-			this.arrayBuffer,
-			this.header.dfdByteOffset,
-			this.header.dfdByteLength,
-			littleEndian
-		);
-
-		const sampleStart = 6;
-		const sampleWords = 4;
-
-		this.dfd = {
-
-			vendorId: dfdReader.skip( 4 /* totalSize */ ).nextUint16(),
-			versionNumber: dfdReader.skip( 2 /* descriptorType */ ).nextUint16(),
-			descriptorBlockSize: dfdReader.nextUint16(),
-			colorModel: dfdReader.nextUint8(),
-			colorPrimaries: dfdReader.nextUint8(),
-			transferFunction: dfdReader.nextUint8(),
-			flags: dfdReader.nextUint8(),
-			texelBlockDimension: {
-				x: dfdReader.nextUint8() + 1,
-				y: dfdReader.nextUint8() + 1,
-				z: dfdReader.nextUint8() + 1,
-				w: dfdReader.nextUint8() + 1,
-			},
-			bytesPlane0: dfdReader.nextUint8(),
-			numSamples: 0,
-			samples: [],
-
-		};
-
-		this.dfd.numSamples = ( this.dfd.descriptorBlockSize / 4 - sampleStart ) / sampleWords;
+		KTX2Utils.createLevels( ktx, this.zstd ).then( function ( levels ) {
 
-		dfdReader.skip( 7 /* bytesPlane[1-7] */ );
+			var basisFormat = dfd.colorModel === DFDModel.UASTC
+				? BasisTextureLoader.BasisFormat.UASTC_4x4
+				: BasisTextureLoader.BasisFormat.ETC1S;
 
-		for ( var i = 0; i < this.dfd.numSamples; i ++ ) {
+			var parseConfig = {
 
-			this.dfd.samples[ i ] = {
-
-				channelID: dfdReader.skip( 3 /* bitOffset + bitLength */ ).nextUint8(),
-				// ... remainder not implemented.
+				levels: levels,
+				width: ktx.pixelWidth,
+				height: ktx.pixelHeight,
+				basisFormat: basisFormat,
+				hasAlpha: KTX2Utils.getAlpha( ktx ),
 
 			};
 
-			dfdReader.skip( 12 /* samplePosition[0-3], lower, upper */ );
-
-		}
-
-		if ( this.header.vkFormat !== 0x00 /* VK_FORMAT_UNDEFINED */ &&
-			 ! ( this.header.supercompressionScheme === 1 /* BasisLZ */ ||
-				this.dfd.colorModel === DFDModel.UASTC ) ) {
-
-			throw new Error( 'THREE.KTX2Loader: Only Basis Universal supercompression is currently supported.' );
-
-		}
-
-
-		///////////////////////////////////////////////////
-		// Key/Value Data (KVD)
-		///////////////////////////////////////////////////
-
-		// Not implemented.
-		this.kvd = {};
-
-
-		///////////////////////////////////////////////////
-		// Supercompression Global Data (SGD)
-		///////////////////////////////////////////////////
-
-		this.sgd = {};
+			if ( basisFormat === BasisTextureLoader.BasisFormat.ETC1S ) {
 
-		if ( this.header.sgdByteLength <= 0 ) return;
+				parseConfig.globalData = ktx.globalData;
 
-		var sgdReader = new KTX2BufferReader(
-			this.arrayBuffer,
-			this.header.sgdByteOffset,
-			this.header.sgdByteLength,
-			littleEndian
-		);
-
-		this.sgd.endpointCount = sgdReader.nextUint16();
-		this.sgd.selectorCount = sgdReader.nextUint16();
-		this.sgd.endpointsByteLength = sgdReader.nextUint32();
-		this.sgd.selectorsByteLength = sgdReader.nextUint32();
-		this.sgd.tablesByteLength = sgdReader.nextUint32();
-		this.sgd.extendedByteLength = sgdReader.nextUint32();
-		this.sgd.imageDescs = [];
-		this.sgd.endpointsData = null;
-		this.sgd.selectorsData = null;
-		this.sgd.tablesData = null;
-		this.sgd.extendedData = null;
+			}
 
-		for ( var i = 0; i < this.header.levelCount; i ++ ) {
+			return scope.basisLoader.parseInternalAsync( parseConfig );
 
-			this.sgd.imageDescs.push( {
+		} ).then( function ( texture ) {
 
-				imageFlags: sgdReader.nextUint32(),
-				rgbSliceByteOffset: sgdReader.nextUint32(),
-				rgbSliceByteLength: sgdReader.nextUint32(),
-				alphaSliceByteOffset: sgdReader.nextUint32(),
-				alphaSliceByteLength: sgdReader.nextUint32(),
+			texture.encoding = dfd.transferFunction === Transfer.SRGB
+				? sRGBEncoding
+				: LinearEncoding;
+			texture.premultiplyAlpha = KTX2Utils.getPremultiplyAlpha( ktx );
 
-			} );
+			onLoad( texture );
 
-		}
-
-		var endpointsByteOffset = this.header.sgdByteOffset + sgdReader.offset;
-		var selectorsByteOffset = endpointsByteOffset + this.sgd.endpointsByteLength;
-		var tablesByteOffset = selectorsByteOffset + this.sgd.selectorsByteLength;
-		var extendedByteOffset = tablesByteOffset + this.sgd.tablesByteLength;
+		} );
 
-		this.sgd.endpointsData = new Uint8Array( this.arrayBuffer, endpointsByteOffset, this.sgd.endpointsByteLength );
-		this.sgd.selectorsData = new Uint8Array( this.arrayBuffer, selectorsByteOffset, this.sgd.selectorsByteLength );
-		this.sgd.tablesData = new Uint8Array( this.arrayBuffer, tablesByteOffset, this.sgd.tablesByteLength );
-		this.sgd.extendedData = new Uint8Array( this.arrayBuffer, extendedByteOffset, this.sgd.extendedByteLength );
+		return this;
 
 	}
 
-	async initMipmaps( transcoder, config ) {
-
-		await this.zstd.init();
-
-		var TranscodeTarget = this.basisModule.TranscodeTarget;
-		var TextureFormat = this.basisModule.TextureFormat;
-		var ImageInfo = this.basisModule.ImageInfo;
-
-		var scope = this;
-
-		var mipmaps = [];
-		var width = this.getWidth();
-		var height = this.getHeight();
-		var texFormat = this.getTexFormat();
-		var hasAlpha = this.getAlpha();
-		var isVideo = false;
-
-		// PVRTC1 transcoders (from both ETC1S and UASTC) only support power of 2 dimensions.
-		var pvrtcTranscodable = MathUtils.isPowerOfTwo( width ) && MathUtils.isPowerOfTwo( height );
-
-		if ( texFormat === TextureFormat.ETC1S ) {
-
-			var numEndpoints = this.sgd.endpointCount;
-			var numSelectors = this.sgd.selectorCount;
-			var endpoints = this.sgd.endpointsData;
-			var selectors = this.sgd.selectorsData;
-			var tables = this.sgd.tablesData;
-
-			transcoder.decodePalettes( numEndpoints, endpoints, numSelectors, selectors );
-			transcoder.decodeTables( tables );
-
-		}
-
-
-		var targetFormat;
-
-		if ( config.astcSupported ) {
-
-			targetFormat = TranscodeTarget.ASTC_4x4_RGBA;
-			this.transcodedFormat = RGBA_ASTC_4x4_Format;
-
-		} else if ( config.bptcSupported && texFormat === TextureFormat.UASTC4x4 ) {
-
-			targetFormat = TranscodeTarget.BC7_M5_RGBA;
-			this.transcodedFormat = RGBA_BPTC_Format;
-
-		} else if ( config.dxtSupported ) {
-
-			targetFormat = hasAlpha ? TranscodeTarget.BC3_RGBA : TranscodeTarget.BC1_RGB;
-			this.transcodedFormat = hasAlpha ? RGBA_S3TC_DXT5_Format : RGB_S3TC_DXT1_Format;
-
-		} else if ( config.pvrtcSupported && pvrtcTranscodable ) {
-
-			targetFormat = hasAlpha ? TranscodeTarget.PVRTC1_4_RGBA : TranscodeTarget.PVRTC1_4_RGB;
-			this.transcodedFormat = hasAlpha ? RGBA_PVRTC_4BPPV1_Format : RGB_PVRTC_4BPPV1_Format;
-
-		} else if ( config.etc2Supported ) {
-
-			targetFormat = hasAlpha ? TranscodeTarget.ETC2_RGBA : TranscodeTarget.ETC1_RGB/* subset of ETC2 */;
-			this.transcodedFormat = hasAlpha ? RGBA_ETC2_EAC_Format : RGB_ETC2_Format;
-
-		} else if ( config.etc1Supported ) {
-
-			targetFormat = TranscodeTarget.ETC1_RGB;
-			this.transcodedFormat = RGB_ETC1_Format;
-
-		} else {
-
-			console.warn( 'THREE.KTX2Loader: No suitable compressed texture format found. Decoding to RGBA32.' );
+}
 
-			targetFormat = TranscodeTarget.RGBA32;
-			this.transcodedFormat = RGBAFormat;
+var KTX2Utils = {
 
-		}
+	createLevels: async function ( ktx, zstd ) {
 
-		if ( ! this.basisModule.isFormatSupported( targetFormat, texFormat ) ) {
+		if ( ktx.supercompressionScheme === SupercompressionScheme.ZSTD ) {
 
-			throw new Error( 'THREE.KTX2Loader: Selected texture format not supported by current transcoder build.' );
+			await zstd.init();
 
 		}
 
-		var imageDescIndex = 0;
-
-		for ( var level = 0; level < this.header.levelCount; level ++ ) {
-
-			var levelWidth = Math.max( 1, Math.floor( width / Math.pow( 2, level ) ) );
-			var levelHeight = Math.max( 1, Math.floor( height / Math.pow( 2, level ) ) );
-
-			var numImagesInLevel = 1; // TODO(donmccurdy): Support cubemaps, arrays and 3D.
-			var imageOffsetInLevel = 0;
-			var imageInfo = new ImageInfo( texFormat, levelWidth, levelHeight, level );
-			var levelByteLength = this.levels[ level ].byteLength;
-			var levelUncompressedByteLength = this.levels[ level ].uncompressedByteLength;
-
-			for ( var imageIndex = 0; imageIndex < numImagesInLevel; imageIndex ++ ) {
+		var levels = [];
+		var width = ktx.pixelWidth;
+		var height = ktx.pixelHeight;
 
-				var result;
-				var encodedData;
+		for ( var levelIndex = 0; levelIndex < ktx.levels.length; levelIndex ++ ) {
 
-				if ( texFormat === TextureFormat.UASTC4x4 ) {
+			var levelWidth = Math.max( 1, Math.floor( width / Math.pow( 2, levelIndex ) ) );
+			var levelHeight = Math.max( 1, Math.floor( height / Math.pow( 2, levelIndex ) ) );
+			var levelData = ktx.levels[ levelIndex ].levelData;
 
-					// UASTC
+			if ( ktx.supercompressionScheme === SupercompressionScheme.ZSTD ) {
 
-					imageInfo.flags = 0;
-					imageInfo.rgbByteOffset = 0;
-					imageInfo.rgbByteLength = levelUncompressedByteLength;
-					imageInfo.alphaByteOffset = 0;
-					imageInfo.alphaByteLength = 0;
-
-					encodedData = new Uint8Array( this.arrayBuffer, this.levels[ level ].byteOffset + imageOffsetInLevel, levelByteLength );
-
-					if ( this.header.supercompressionScheme === 2 /* ZSTD */ ) {
-
-						encodedData = this.zstd.decode( encodedData, levelUncompressedByteLength );
-
-					}
-
-					result = transcoder.transcodeImage( targetFormat, encodedData, imageInfo, 0, hasAlpha, isVideo );
-
-				} else {
-
-					// ETC1S
-
-					var imageDesc = this.sgd.imageDescs[ imageDescIndex ++ ];
-
-					imageInfo.flags = imageDesc.imageFlags;
-					imageInfo.rgbByteOffset = 0;
-					imageInfo.rgbByteLength = imageDesc.rgbSliceByteLength;
-					imageInfo.alphaByteOffset = imageDesc.alphaSliceByteOffset > 0 ? imageDesc.rgbSliceByteLength : 0;
-					imageInfo.alphaByteLength = imageDesc.alphaSliceByteLength;
-
-					encodedData = new Uint8Array( this.arrayBuffer, this.levels[ level ].byteOffset + imageDesc.rgbSliceByteOffset, imageDesc.rgbSliceByteLength + imageDesc.alphaSliceByteLength );
-
-					result = transcoder.transcodeImage( targetFormat, encodedData, imageInfo, 0, isVideo );
-
-				}
-
-				if ( result.transcodedImage === undefined ) {
-
-					throw new Error( 'THREE.KTX2Loader: Unable to transcode image.' );
-
-				}
-
-				// Transcoded image is written in memory allocated by WASM. We could avoid copying
-				// the image by waiting until the image is uploaded to the GPU, then calling
-				// delete(). However, (1) we don't know if the user will later need to re-upload it
-				// e.g. after calling texture.clone(), and (2) this code will eventually be in a
-				// Web Worker, and transferring WASM's memory seems like a very bad idea.
-				var levelData = result.transcodedImage.get_typed_memory_view().slice();
-				result.transcodedImage.delete();
-
-				mipmaps.push( { data: levelData, width: levelWidth, height: levelHeight } );
-				imageOffsetInLevel += levelByteLength;
+				levelData = zstd.decode( levelData, ktx.levels[ levelIndex ].uncompressedByteLength );
 
 			}
 
-		}
-
-		scope.mipmaps = mipmaps;
-
-	}
-
-	getWidth() {
-
-		return this.header.pixelWidth;
-
-	}
-
-	getHeight() {
+			levels.push( {
 
-		return this.header.pixelHeight;
+				index: levelIndex,
+				width: levelWidth,
+				height: levelHeight,
+				data: levelData,
 
-	}
-
-	getEncoding() {
-
-		return this.dfd.transferFunction === 2 /* KHR_DF_TRANSFER_SRGB */
-			? sRGBEncoding
-			: LinearEncoding;
+			} );
 
-	}
+		}
 
-	getTexFormat() {
+		return levels;
 
-		var TextureFormat = this.basisModule.TextureFormat;
+	},
 
-		return this.dfd.colorModel === DFDModel.UASTC ? TextureFormat.UASTC4x4 : TextureFormat.ETC1S;
+	getBasicDFD: function ( ktx ) {
 
-	}
+		// Basic Data Format Descriptor Block is always the first DFD.
+		return ktx.dataFormatDescriptor[ 0 ];
 
-	getAlpha() {
+	},
 
-		var TextureFormat = this.basisModule.TextureFormat;
+	getAlpha: function ( ktx ) {
 
-		// TODO(donmccurdy): Handle all channelIDs (i.e. the R & R+G cases),
-		// choosing appropriate transcode target formats or providing queries
-		// for applications so they know what to do with the content.
+		var dfd = this.getBasicDFD( ktx );
 
-		if ( this.getTexFormat() === TextureFormat.UASTC4x4 ) {
+		// UASTC
 
-			// UASTC
+		if ( dfd.colorModel === DFDModel.UASTC ) {
 
-			if ( ( this.dfd.samples[ 0 ].channelID & 0xF ) === DFDChannel.UASTC.RGBA ) {
+			if ( ( dfd.samples[ 0 ].channelID & 0xF ) === DFDChannel.UASTC.RGBA ) {
 
 				return true;
 
@@ -653,7 +287,8 @@ class KTX2Container {
 
 		// ETC1S
 
-		if ( this.dfd.numSamples === 2 && ( this.dfd.samples[ 1 ].channelID & 0xF ) === DFDChannel.ETC1S.AAA ) {
+		if ( dfd.samples.length === 2
+			&& ( dfd.samples[ 1 ].channelID & 0xF ) === DFDChannel.ETC1S.AAA ) {
 
 			return true;
 
@@ -661,82 +296,15 @@ class KTX2Container {
 
 		return false;
 
-	}
-
-	getPremultiplyAlpha() {
-
-		return !! ( this.dfd.flags & 1 /* KHR_DF_FLAG_ALPHA_PREMULTIPLIED */ );
-
-	}
-
-}
-
-class KTX2BufferReader {
-
-	constructor( arrayBuffer, byteOffset, byteLength, littleEndian ) {
-
-		this.dataView = new DataView( arrayBuffer, byteOffset, byteLength );
-		this.littleEndian = littleEndian;
-		this.offset = 0;
-
-	}
-
-	nextUint8() {
-
-		var value = this.dataView.getUint8( this.offset, this.littleEndian );
-
-		this.offset += 1;
-
-		return value;
-
-	}
-
-	nextUint16() {
-
-		var value = this.dataView.getUint16( this.offset, this.littleEndian );
-
-		this.offset += 2;
-
-		return value;
-
-	}
-
-	nextUint32() {
-
-		var value = this.dataView.getUint32( this.offset, this.littleEndian );
-
-		this.offset += 4;
-
-		return value;
-
-	}
-
-	nextUint64() {
-
-		// https://stackoverflow.com/questions/53103695/
-		var left = this.dataView.getUint32( this.offset, this.littleEndian );
-		var right = this.dataView.getUint32( this.offset + 4, this.littleEndian );
-		var value = this.littleEndian ? left + ( 2 ** 32 * right ) : ( 2 ** 32 * left ) + right;
-
-		if ( ! Number.isSafeInteger( value ) ) {
-
-			console.warn( 'THREE.KTX2Loader: ' + value + ' exceeds MAX_SAFE_INTEGER. Precision may be lost.' );
-
-		}
-
-		this.offset += 8;
-
-		return value;
-
-	}
+	},
 
-	skip( bytes ) {
+	getPremultiplyAlpha: function ( ktx ) {
 
-		this.offset += bytes;
+		var dfd = this.getBasicDFD( ktx );
 
-		return this;
+		return !! ( dfd.flags & 1 /* KHR_DF_FLAG_ALPHA_PREMULTIPLIED */ );
 
-	}
+	},
 
 }
 

examples/webgl_loader_gltf_compressed.html

@@ -14,8 +14,6 @@
 			<a href="https://sketchfab.com/OFFcours1" target="_blank" rel="noopener">Roman Red</a>
 		</div>
 
-		<script src="./js/libs/basis/msc_basis_transcoder.js"></script>
-
 		<script type="module">
 
 			import * as THREE from '../build/three.module.js';
@@ -61,8 +59,12 @@
 				grid.material.transparent = true;
 				scene.add( grid );
 
+				const ktx2Loader = new KTX2Loader()
+					.setTranscoderPath( 'js/libs/basis/' )
+					.detectSupport( renderer );
+
 				const loader = new GLTFLoader().setPath( 'models/gltf/' );
-				loader.setKTX2Loader( new KTX2Loader().detectSupport( renderer ) );
+				loader.setKTX2Loader( ktx2Loader );
 				loader.setMeshoptDecoder( MeshoptDecoder );
 				loader.load( 'coffeemat.glb', function ( gltf ) {
 

examples/webgl_loader_texture_ktx2.html

@@ -14,8 +14,6 @@
 			<a href="https://github.com/binomialLLC/basis_universal" target="_blank">Basis Universal GPU Texture Codec</a>
 		</div>
 
-		<script src="./js/libs/basis/msc_basis_transcoder.js"></script>
-
 		<script type="module">
 
 			import * as THREE from '../build/three.module.js';
@@ -65,6 +63,7 @@
 
 			// Samples: sample_etc1s.ktx2, sample_uastc.ktx2
 			new KTX2Loader()
+				.setTranscoderPath( 'js/libs/basis/' )
 				.detectSupport( renderer )
 				.load( './textures/compressed/sample_uastc.ktx2', ( texture ) => {