KTX2Loader: Add support for u8, f16, and f32 array and cube textures …

…(WIP)
donmccurdy · Sep 6, 2023 · 53cf86d · 53cf86d
1 parent 64876c9
commit 53cf86d
Show file tree

Hide file tree

Showing 15 changed files with 79 additions and 19 deletions.
diff --git a/examples/jsm/loaders/KTX2Loader.js b/examples/jsm/loaders/KTX2Loader.js
@@ -16,6 +16,8 @@ import {
 	CompressedArrayTexture,
 	CompressedCubeTexture,
 	Data3DTexture,
+	DataArrayTexture,
+	DataCubeTexture,
 	DataTexture,
 	DisplayP3ColorSpace,
 	FileLoader,
@@ -796,7 +798,6 @@ async function createRawTexture( container ) {
 
 	const mipmaps = [];
 
-
 	for ( let levelIndex = 0; levelIndex < container.levels.length; levelIndex ++ ) {
 
 		const levelWidth = Math.max( 1, container.pixelWidth >> levelIndex );
@@ -864,15 +865,43 @@ async function createRawTexture( container ) {
 
 	if ( UNCOMPRESSED_FORMATS.has( FORMAT_MAP[ vkFormat ] ) ) {
 
-		texture = container.pixelDepth === 0
-		? new DataTexture( mipmaps[ 0 ].data, container.pixelWidth, container.pixelHeight )
-		: new Data3DTexture( mipmaps[ 0 ].data, container.pixelWidth, container.pixelHeight, container.pixelDepth );
+		if ( container.faceCount === 6 ) {
+
+			texture = new DataCubeTexture( mipmaps[ 0 ].data );
+
+		} else if ( container.layerCount > 1 ) {
+
+			texture = new DataArrayTexture( mipmaps[ 0 ].data, container.pixelWidth, container.pixelHeight, container.layerCount );
+
+		} else if ( container.pixelDepth === 0 ) {
+
+			texture = new DataTexture( mipmaps[ 0 ].data, container.pixelWidth, container.pixelHeight );
+
+		} else {
+
+			texture = new Data3DTexture( mipmaps[ 0 ].data, container.pixelWidth, container.pixelHeight, container.pixelDepth );
+
+		}
 
 	} else {
 
-		if ( container.pixelDepth > 0 ) throw new Error( 'THREE.KTX2Loader: Unsupported pixelDepth.' );
+		if ( container.faceCount === 6 ) {
+
+			texture = new CompressedCubeTexture( mipmaps );
+
+		} else if ( container.layerCount > 1 ) {
+
+			texture = new CompressedArrayTexture( mipmaps, container.pixelWidth, container.pixelHeight, container.layerCount );
+
+		} else if ( container.pixelDepth === 0 ) {
 
-		texture = new CompressedTexture( mipmaps, container.pixelWidth, container.pixelHeight );
+			texture = new CompressedTexture( mipmaps, container.pixelWidth, container.pixelHeight );
+
+		} else {
+
+			throw new Error( 'THREE.KTX2Loader: Unsupported pixelDepth.' );
+
+		}
 
 	}
 

diff --git a/examples/textures/compressed/array_etc1s.ktx2 b/examples/textures/compressed/array_etc1s.ktx2
diff --git a/examples/textures/compressed/array_rgba16_linear.ktx2 b/examples/textures/compressed/array_rgba16_linear.ktx2
diff --git a/examples/textures/compressed/array_rgba32_linear.ktx2 b/examples/textures/compressed/array_rgba32_linear.ktx2
diff --git a/examples/textures/compressed/array_rgba8.ktx2 b/examples/textures/compressed/array_rgba8.ktx2
diff --git a/examples/textures/compressed/array_rgba8_linear.ktx2 b/examples/textures/compressed/array_rgba8_linear.ktx2
diff --git a/examples/textures/compressed/array_uastc.ktx2 b/examples/textures/compressed/array_uastc.ktx2
diff --git a/examples/textures/compressed/cubemap_etc1s.ktx2 b/examples/textures/compressed/cubemap_etc1s.ktx2
diff --git a/examples/textures/compressed/cubemap_rgba16_linear.ktx2 b/examples/textures/compressed/cubemap_rgba16_linear.ktx2
diff --git a/examples/textures/compressed/cubemap_rgba32_linear.ktx2 b/examples/textures/compressed/cubemap_rgba32_linear.ktx2
diff --git a/examples/textures/compressed/cubemap_rgba8.ktx2 b/examples/textures/compressed/cubemap_rgba8.ktx2
diff --git a/examples/textures/compressed/cubemap_rgba8_linear.ktx2 b/examples/textures/compressed/cubemap_rgba8_linear.ktx2
diff --git a/examples/textures/compressed/cubemap_uastc.ktx2 b/examples/textures/compressed/cubemap_uastc.ktx2
diff --git a/examples/webgl_loader_texture_ktx2.html b/examples/webgl_loader_texture_ktx2.html
@@ -35,17 +35,30 @@
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
-			let camera, scene, renderer, controls, loader, material;
+			let camera, scene, renderer, controls, loader, plane, cube, material;
 
 			const SAMPLES = {
-				'BasisU ETC1S': '2d_etc1s.ktx2',
-				'BasisU UASTC': '2d_uastc.ktx2',
-				'RGBA8 sRGB': '2d_rgba8.ktx2',
-				'RGBA8 Linear': '2d_rgba8_linear.ktx2',
-				// 'RGBA8 Display P3': '2d_rgba8_displayp3.ktx2',
-				'RGBA16 Linear': '2d_rgba16_linear.ktx2',
-				'RGBA32 Linear': '2d_rgba32_linear.ktx2',
-				'ASTC 6x6 (mobile)': '2d_astc_6x6.ktx2',
+				// 2D
+				'2D / BasisU ETC1S': '2d_etc1s.ktx2',
+				'2D / BasisU UASTC': '2d_uastc.ktx2',
+				'2D / RGBA8 sRGB': '2d_rgba8.ktx2',
+				'2D / RGBA8 Linear': '2d_rgba8_linear.ktx2',
+				// '2D / RGBA8 Display P3': '2d_rgba8_displayp3.ktx2',
+				'2D / RGBA16 Linear': '2d_rgba16_linear.ktx2',
+				'2D / RGBA32 Linear': '2d_rgba32_linear.ktx2',
+				'2D / ASTC 6x6 (mobile)': '2d_astc_6x6.ktx2',
+
+				// Cube
+				'Cube / RGBA8 sRGB': 'cubemap_rgba8.ktx2',
+				'Cube / RGBA8 Linear': 'cubemap_rgba8_linear.ktx2',
+				'Cube / RGBA16 Linear': 'cubemap_rgba16_linear.ktx2',
+				'Cube / RGBA32 Linear': 'cubemap_rgba32_linear.ktx2',
+
+				// Array
+				'Array / RGBA8 sRGB': 'array_rgba8.ktx2',
+				'Array / RGBA8 Linear': 'array_rgba8_linear.ktx2',
+				'Array / RGBA16 Linear': 'array_rgba16_linear.ktx2',
+				'Array / RGBA32 Linear': 'array_rgba32_linear.ktx2',
 			};
 
 			const FORMAT_LABELS = {
@@ -100,15 +113,19 @@
 
 				controls = new OrbitControls( camera, renderer.domElement );
 
-				// PlaneGeometry UVs assume flipY=true, which compressed textures don't support.
-				const geometry = flipY( new THREE.PlaneGeometry() );
+				// Default UVs assume flipY=true, which compressed textures don't support.
+				const planeGeometry = flipY( new THREE.PlaneGeometry() );
+				const cubeGeometry = flipY( new THREE.BoxGeometry() );
 				material = new THREE.MeshBasicMaterial( {
 					color: 0xFFFFFF,
 					side: THREE.DoubleSide,
 					transparent: true,
 				} );
-				const mesh = new THREE.Mesh( geometry, material );
-				scene.add( mesh );
+				plane = new THREE.Mesh( planeGeometry, material );
+				cube = new THREE.Mesh( cubeGeometry, material );
+				cube.visible = false;
+				scene.add( plane );
+				scene.add( cube );
 
 				loader = new KTX2Loader()
 					.setTranscoderPath( 'jsm/libs/basis/' )
@@ -150,10 +167,23 @@
 
 					const texture = await loader.loadAsync( `./textures/compressed/${path}` );
 					texture.minFilter = THREE.NearestMipmapNearestFilter;
+					texture.needsUpdate = true;
+
+					if ( path.startsWith( 'cube' )  ) {
+
+						texture.mapping = THREE.CubeUVReflectionMapping;
+
+					}
+
+					scene.background = null;
 
 					material.map = texture;
 					material.needsUpdate = true;
 
+					plane.visible = path.startsWith( '2d' );
+					cube.visible = path.startsWith( 'cube' ) || path.startsWith( 'array' );
+
+					console.info( `class: ${ texture.constructor.name }` );
 					console.info( `format: ${ FORMAT_LABELS[ texture.format ] }` );
 					console.info( `type: ${ TYPE_LABELS[ texture.type ] }` );
 					console.info( `colorSpace: ${ texture.colorSpace }` );

diff --git a/src/Three.js b/src/Three.js
@@ -31,6 +31,7 @@ export { FramebufferTexture } from './textures/FramebufferTexture.js';
 export { Source } from './textures/Source.js';
 export { DataTexture } from './textures/DataTexture.js';
 export { DataArrayTexture } from './textures/DataArrayTexture.js';
+export { DataCubeTexture } from './textures/DataCubeTexture.js';
 export { Data3DTexture } from './textures/Data3DTexture.js';
 export { CompressedTexture } from './textures/CompressedTexture.js';
 export { CompressedArrayTexture } from './textures/CompressedArrayTexture.js';