diff --git a/examples/jsm/loaders/KTX2Loader.js b/examples/jsm/loaders/KTX2Loader.js index f1c2ed359ea799..8f47ca4fcbd2c3 100644 --- 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,17 +865,43 @@ async function createRawTexture( container ) { if ( UNCOMPRESSED_FORMATS.has( FORMAT_MAP[ vkFormat ] ) ) { - texture = container.pixelDepth === 0 - ? new DataTexture( mipmaps, container.pixelWidth, container.pixelHeight ) - : new Data3DTexture( mipmaps, container.pixelWidth, container.pixelHeight, container.pixelDepth ); + if ( container.faceCount === 6 ) { + + texture = new DataCubeTexture( mipmaps ); + + } else if ( container.layerCount > 1 ) { + + texture = new DataArrayTexture( mipmaps, container.pixelWidth, container.pixelHeight, container.layerCount ); + + } else if ( container.pixelDepth === 0 ) { + + texture = new DataTexture( mipmaps, container.pixelWidth, container.pixelHeight ); + + } else { + + texture = new Data3DTexture( mipmaps, 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 CompressedTexture( mipmaps, container.pixelWidth, container.pixelHeight ); + texture = new CompressedArrayTexture( mipmaps, container.pixelWidth, container.pixelHeight, container.layerCount ); + } else if ( container.pixelDepth === 0 ) { + 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 new file mode 100644 index 00000000000000..3de94fc45c6f24 Binary files /dev/null and b/examples/textures/compressed/array_etc1s.ktx2 differ diff --git a/examples/textures/compressed/array_rgba16_linear.ktx2 b/examples/textures/compressed/array_rgba16_linear.ktx2 new file mode 100644 index 00000000000000..e6b4035204315f Binary files /dev/null and b/examples/textures/compressed/array_rgba16_linear.ktx2 differ diff --git a/examples/textures/compressed/array_rgba32_linear.ktx2 b/examples/textures/compressed/array_rgba32_linear.ktx2 new file mode 100644 index 00000000000000..c258565df526fd Binary files /dev/null and b/examples/textures/compressed/array_rgba32_linear.ktx2 differ diff --git a/examples/textures/compressed/array_rgba8.ktx2 b/examples/textures/compressed/array_rgba8.ktx2 new file mode 100644 index 00000000000000..5ec1d3bed7b892 Binary files /dev/null and b/examples/textures/compressed/array_rgba8.ktx2 differ diff --git a/examples/textures/compressed/array_rgba8_linear.ktx2 b/examples/textures/compressed/array_rgba8_linear.ktx2 new file mode 100644 index 00000000000000..e674eac8c1660a Binary files /dev/null and b/examples/textures/compressed/array_rgba8_linear.ktx2 differ diff --git a/examples/textures/compressed/array_uastc.ktx2 b/examples/textures/compressed/array_uastc.ktx2 new file mode 100644 index 00000000000000..f05db3c2090628 Binary files /dev/null and b/examples/textures/compressed/array_uastc.ktx2 differ diff --git a/examples/textures/compressed/cubemap_etc1s.ktx2 b/examples/textures/compressed/cubemap_etc1s.ktx2 new file mode 100644 index 00000000000000..9deb32b04c1ec4 Binary files /dev/null and b/examples/textures/compressed/cubemap_etc1s.ktx2 differ diff --git a/examples/textures/compressed/cubemap_rgba16_linear.ktx2 b/examples/textures/compressed/cubemap_rgba16_linear.ktx2 new file mode 100644 index 00000000000000..65830c5e261347 Binary files /dev/null and b/examples/textures/compressed/cubemap_rgba16_linear.ktx2 differ diff --git a/examples/textures/compressed/cubemap_rgba32_linear.ktx2 b/examples/textures/compressed/cubemap_rgba32_linear.ktx2 new file mode 100644 index 00000000000000..1764712a96343d Binary files /dev/null and b/examples/textures/compressed/cubemap_rgba32_linear.ktx2 differ diff --git a/examples/textures/compressed/cubemap_rgba8.ktx2 b/examples/textures/compressed/cubemap_rgba8.ktx2 new file mode 100644 index 00000000000000..996c3101bfdae9 Binary files /dev/null and b/examples/textures/compressed/cubemap_rgba8.ktx2 differ diff --git a/examples/textures/compressed/cubemap_rgba8_linear.ktx2 b/examples/textures/compressed/cubemap_rgba8_linear.ktx2 new file mode 100644 index 00000000000000..c7eea4c6e19dff Binary files /dev/null and b/examples/textures/compressed/cubemap_rgba8_linear.ktx2 differ diff --git a/examples/textures/compressed/cubemap_uastc.ktx2 b/examples/textures/compressed/cubemap_uastc.ktx2 new file mode 100644 index 00000000000000..35e40250862410 Binary files /dev/null and b/examples/textures/compressed/cubemap_uastc.ktx2 differ diff --git a/examples/webgl_loader_texture_ktx2.html b/examples/webgl_loader_texture_ktx2.html index 5e6307d3342a26..a8569b1c4574be 100644 --- 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 index 58683c1324a45c..776953f9f7757b 100644 --- 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';