mrdoob · Mugen87 · Oct 18, 2022 · Oct 4, 2022 · Oct 4, 2022 · Oct 5, 2022
diff --git a/docs/api/en/textures/CompressedArrayTexture.html b/docs/api/en/textures/CompressedArrayTexture.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<base href="../../../" />
+		<script src="page.js"></script>
+		<link type="text/css" rel="stylesheet" href="page.css" />
+	</head>
+	<body>
+		[page:CompressedTexture] &rarr;
+
+		<h1>[name]</h1>
+
+		<p class="desc">
+		Creates an texture 2D array based on data in compressed form, for example from a [link:https://en.wikipedia.org/wiki/DirectDraw_Surface DDS] file.<br /><br />
+
+
+		For use with the [page:CompressedTextureLoader CompressedTextureLoader].
+		</p>
+
+
+		<h2>Constructor</h2>
+
+
+		<h3>[name]( [param:Array mipmaps], [param:Number width], [param:Number height], [param:Constant format], [param:Constant type] )</h3>
+		<p>
+		[page:Array mipmaps] -- The mipmaps array should contain objects with data, width and height. The mipmaps should be of the correct format and type.<br />
+
+		[page:Number width] -- The width of the biggest mipmap.<br />
+
+		[page:Number height] -- The height of the biggest mipmap.<br />
+
+		[page:Number depth] -- The number of layers of the 2D array texture.<br />
+
+		[page:Constant format] -- The format used in the mipmaps.
+		See [page:Textures ST3C Compressed Texture Formats],
+		[page:Textures PVRTC Compressed Texture Formats] and
+		[page:Textures ETC Compressed Texture Format] for other choices.<br />
+
+		[page:Constant type] -- Default is [page:Textures THREE.UnsignedByteType].
+		See [page:Textures type constants] for other choices.<br />
+
+		</p>
+
+
+		<h2>Properties</h2>
+
+		See the base [page:CompressedTexture CompressedTexture] class for common properties.
+
+		<h3>[property:number wrapR]</h3>
+		<p>
+		This defines how the texture is wrapped in the depth direction.<br />
+		The default is [page:Textures THREE.ClampToEdgeWrapping], where the edge is clamped to the outer edge texels.
+		The other two choices are [page:Textures THREE.RepeatWrapping] and [page:Textures THREE.MirroredRepeatWrapping].
+		See the [page:Textures texture constants] page for details.
+		</p>
+
+		<h3>[property:Boolean isCompressedArrayTexture]</h3>
+		<p>
+			Read-only flag to check if a given object is of type [name].
+		</p>
+
+		<h2>Methods</h2>
+
+		<p>
+		See the base [page:CompressedTexture CompressedTexture] class for common methods.
+		</p>
+
+		<h2>Source</h2>
+
+		<p>
+			[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
+		</p>
+	</body>
+</html>
diff --git a/docs/api/zh/textures/CompressedArrayTexture.html b/docs/api/zh/textures/CompressedArrayTexture.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<base href="../../../" />
+		<script src="page.js"></script>
+		<link type="text/css" rel="stylesheet" href="page.css" />
+	</head>
+	<body>
+		[page:CompressedTexture] &rarr;
+
+		<h1>[name]</h1>
+
+		<p class="desc">
+		Creates an texture 2D array based on data in compressed form, for example from a [link:https://en.wikipedia.org/wiki/DirectDraw_Surface DDS] file.<br /><br />
+
+
+		For use with the [page:CompressedTextureLoader CompressedTextureLoader].
+		</p>
+
+
+		<h2>Constructor</h2>
+
+
+		<h3>[name]( [param:Array mipmaps], [param:Number width], [param:Number height], [param:Constant format], [param:Constant type] )</h3>
+		<p>
+		[page:Array mipmaps] -- The mipmaps array should contain objects with data, width and height. The mipmaps should be of the correct format and type.<br />
+
+		[page:Number width] -- The width of the biggest mipmap.<br />
+
+		[page:Number height] -- The height of the biggest mipmap.<br />
+
+		[page:Number depth] -- The number of layers of the 2D array texture.<br />
+
+		[page:Constant format] -- The format used in the mipmaps.
+		See [page:Textures ST3C Compressed Texture Formats],
+		[page:Textures PVRTC Compressed Texture Formats] and
+		[page:Textures ETC Compressed Texture Format] for other choices.<br />
+
+		[page:Constant type] -- Default is [page:Textures THREE.UnsignedByteType].
+		See [page:Textures type constants] for other choices.<br />
+
+		</p>
+
+
+		<h2>Properties</h2>
+
+		See the base [page:CompressedTexture CompressedTexture] class for common properties.
+
+		<h3>[property:number wrapR]</h3>
+		<p>
+		This defines how the texture is wrapped in the depth direction.<br />
+		The default is [page:Textures THREE.ClampToEdgeWrapping], where the edge is clamped to the outer edge texels.
+		The other two choices are [page:Textures THREE.RepeatWrapping] and [page:Textures THREE.MirroredRepeatWrapping].
+		See the [page:Textures texture constants] page for details.
+		</p>
+
+		<h3>[property:Boolean isCompressedArrayTexture]</h3>
+		<p>
+			Read-only flag to check if a given object is of type [name].
+		</p>
+
+		<h2>Methods</h2>
+
+		<p>
+		See the base [page:CompressedTexture CompressedTexture] class for common methods.
+		</p>
+
+		<h2>Source</h2>
+
+		<p>
+			[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
+		</p>
+	</body>
+</html>
diff --git a/docs/list.json b/docs/list.json
@@ -313,6 +313,7 @@
 			"Textures": {
 				"CanvasTexture": "api/en/textures/CanvasTexture",
 				"CompressedTexture": "api/en/textures/CompressedTexture",
+				"CompressedArrayTexture": "api/en/textures/CompressedArrayTexture",
 				"CubeTexture": "api/en/textures/CubeTexture",
 				"Data3DTexture": "api/en/textures/Data3DTexture",
 				"DataArrayTexture": "api/en/textures/DataArrayTexture",
@@ -814,6 +815,7 @@
 			"纹理贴图": {
 				"CanvasTexture": "api/zh/textures/CanvasTexture",
 				"CompressedTexture": "api/zh/textures/CompressedTexture",
+				"CompressedArrayTexture": "api/zh/textures/CompressedArrayTexture",
 				"CubeTexture": "api/zh/textures/CubeTexture",
 				"DataArrayTexture": "api/zh/textures/DataArrayTexture",
 				"Data3DTexture": "api/zh/textures/Data3DTexture",

diff --git a/examples/files.json b/examples/files.json
@@ -313,6 +313,7 @@
 		"webgl2_multiple_rendertargets",
 		"webgl2_multisampled_renderbuffers",
 		"webgl2_rendertarget_texture2darray",
+		"webgl2_texture2darray_compressed",
 		"webgl2_ubo",
 		"webgl2_volume_cloud",
 		"webgl2_volume_instancing",

diff --git a/examples/jsm/loaders/KTX2Loader.js b/examples/jsm/loaders/KTX2Loader.js
@@ -13,6 +13,7 @@
 
 import {
 	CompressedTexture,
+	CompressedArrayTexture,
 	Data3DTexture,
 	DataTexture,
 	FileLoader,
@@ -35,7 +36,7 @@ import {
 	RGBAFormat,
 	RGFormat,
 	sRGBEncoding,
-	UnsignedByteType
+	UnsignedByteType,
 } from 'three';
 import { WorkerPool } from '../utils/WorkerPool.js';
 import {
@@ -236,16 +237,21 @@ class KTX2Loader extends Loader {
 
 	}
 
-	_createTextureFrom( transcodeResult ) {
+	_createTextureFrom( transcodeResult, container ) {
 
 		const { mipmaps, width, height, format, type, error, dfdTransferFn, dfdFlags } = transcodeResult;
 
 		if ( type === 'error' ) return Promise.reject( error );
 
-		const texture = new CompressedTexture( mipmaps, width, height, format, UnsignedByteType );
+		const texture = container.layerCount > 1
+			? new CompressedArrayTexture( mipmaps, width, height, container.layerCount, format, UnsignedByteType )
+			: new CompressedTexture( mipmaps, width, height, format, UnsignedByteType );
+
+
 		texture.minFilter = mipmaps.length === 1 ? LinearFilter : LinearMipmapLinearFilter;
 		texture.magFilter = LinearFilter;
 		texture.generateMipmaps = false;
+
 		texture.needsUpdate = true;
 		texture.encoding = dfdTransferFn === KHR_DF_TRANSFER_SRGB ? sRGBEncoding : LinearEncoding;
 		texture.premultiplyAlpha = !! ( dfdFlags & KHR_DF_FLAG_ALPHA_PREMULTIPLIED );
@@ -257,7 +263,7 @@ class KTX2Loader extends Loader {
 	/**
 	 * @param {ArrayBuffer} buffer
 	 * @param {object?} config
-	 * @return {Promise<CompressedTexture|DataTexture|Data3DTexture>}
+	 * @return {Promise<CompressedTexture|CompressedArrayTexture|DataTexture|Data3DTexture>}
 	 */
 	_createTexture( buffer, config = {} ) {
 
@@ -270,13 +276,12 @@ class KTX2Loader extends Loader {
 		}
 
 		//
-
 		const taskConfig = config;
 		const texturePending = this.init().then( () => {
 
 			return this.workerPool.postMessage( { type: 'transcode', buffer, taskConfig: taskConfig }, [ buffer ] );
 
-		} ).then( ( e ) => this._createTextureFrom( e.data ) );
+		} ).then( ( e ) => this._createTextureFrom( e.data, container ) );
 
 		// Cache the task result.
 		_taskCache.set( buffer, { promise: texturePending } );
@@ -437,6 +442,7 @@ KTX2Loader.BasisWorker = function () {
 		const basisFormat = ktx2File.isUASTC() ? BasisFormat.UASTC_4x4 : BasisFormat.ETC1S;
 		const width = ktx2File.getWidth();
 		const height = ktx2File.getHeight();
+		const layers = ktx2File.getLayers() || 1;
 		const levels = ktx2File.getLevels();
 		const hasAlpha = ktx2File.getHasAlpha();
 		const dfdTransferFn = ktx2File.getDFDTransferFunc();
@@ -462,30 +468,39 @@ KTX2Loader.BasisWorker = function () {
 
 		for ( let mip = 0; mip < levels; mip ++ ) {
 
-			const levelInfo = ktx2File.getImageLevelInfo( mip, 0, 0 );
-			const mipWidth = levelInfo.origWidth;
-			const mipHeight = levelInfo.origHeight;
-			const dst = new Uint8Array( ktx2File.getImageTranscodedSizeInBytes( mip, 0, 0, transcoderFormat ) );
-
-			const status = ktx2File.transcodeImage(
-				dst,
-				mip,
-				0,
-				0,
-				transcoderFormat,
-				0,
-				- 1,
-				- 1,
-			);
+			const layerMips = [];
+
+			let mipWidth, mipHeight;
+
+			for ( let layer = 0; layer < layers; layer ++ ) {
+
+				const levelInfo = ktx2File.getImageLevelInfo( mip, layer, 0 );
+				mipWidth = levelInfo.origWidth;
+				mipHeight = levelInfo.origHeight;
+				const dst = new Uint8Array( ktx2File.getImageTranscodedSizeInBytes( mip, layer, 0, transcoderFormat ) );
+				const status = ktx2File.transcodeImage(
+					dst,
+					mip,
+					layer,
+					0,
+					transcoderFormat,
+					0,
+					- 1,
+					- 1,
+				);
+
+				if ( ! status ) {
 
-			if ( ! status ) {
+					cleanup();
+					throw new Error( 'THREE.KTX2Loader: .transcodeImage failed.' );
 
-				cleanup();
-				throw new Error( 'THREE.KTX2Loader: .transcodeImage failed.' );
+				}
+
+				layerMips.push( dst );
 
 			}
 
-			mipmaps.push( { data: dst, width: mipWidth, height: mipHeight } );
+			mipmaps.push( { data: concat( layerMips ), width: mipWidth, height: mipHeight } );
 
 		}
 
@@ -612,6 +627,33 @@ KTX2Loader.BasisWorker = function () {
 
 	}
 
+	/** Concatenates N byte arrays. */
+	function concat( arrays ) {
+
+		let totalByteLength = 0;
+
+		for ( const array of arrays ) {
+
+			totalByteLength += array.byteLength;
+
+		}
+
+		const result = new Uint8Array( totalByteLength );
+
+		let byteOffset = 0;
+
+		for ( const array of arrays ) {
+
+			result.set( array, byteOffset );
+
+			byteOffset += array.byteLength;
+
+		}
+
+		return result;
+
+	}
+
 };
 
 //
@@ -673,8 +715,6 @@ async function createDataTexture( container ) {
 
 	}
 
-	//
-
 	const level = container.levels[ 0 ];
 
 	let levelData;
@@ -731,7 +771,6 @@ async function createDataTexture( container ) {
 		view = levelData;
 
 	}
-
 	//
 
 	const texture = pixelDepth === 0

diff --git a/examples/models/gltf/Sougen/body_color.png b/examples/models/gltf/Sougen/body_color.png
diff --git a/examples/models/gltf/Sougen/body_normal.png b/examples/models/gltf/Sougen/body_normal.png
diff --git a/examples/models/gltf/Sougen/color.ktx b/examples/models/gltf/Sougen/color.ktx
diff --git a/examples/models/gltf/Sougen/head_color.png b/examples/models/gltf/Sougen/head_color.png
diff --git a/examples/models/gltf/Sougen/head_normal.png b/examples/models/gltf/Sougen/head_normal.png
diff --git a/examples/models/gltf/Sougen/normal.ktx b/examples/models/gltf/Sougen/normal.ktx
diff --git a/examples/models/gltf/Sougen/sougen.glb b/examples/models/gltf/Sougen/sougen.glb
diff --git a/examples/screenshots/webgl2_texture2darray_compressed.jpg b/examples/screenshots/webgl2_texture2darray_compressed.jpg