Add various KTX2 samples.

examples/webgl_loader_texture_ktx2.html

@@ -33,8 +33,47 @@
 
 			import { KTX2Loader } from 'three/addons/loaders/KTX2Loader.js';
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
-
-			let camera, scene, renderer, controls;
+			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
+
+			let camera, scene, renderer, controls, loader, material;
+
+			const SAMPLES = {
+				'BasisU ETC1S': '2d_etc1s.ktx2',
+				'BasisU UASTC': '2d_uastc.ktx2',
+				'RGBA8 sRGB': '2d_rgba8.ktx2',
+				'RGBA8 Linear': '2d_rgba8_linear.ktx2',
+				'RGBA16 Linear': '2d_rgba16_linear.ktx2',
+				'RGBA32 Linear': '2d_rgba32_linear.ktx2',
+				'ASTC 6x6 (mobile)': '2d_astc_6x6.ktx2',
+			};
+
+			const FORMAT_LABELS = {
+				[ THREE.RGBAFormat ]: 'RGBA',
+				[ THREE.RGBA_BPTC_Format ]: 'RGBA_BPTC',
+				[ THREE.RGBA_ASTC_4x4_Format ]: 'RGBA_ASTC_4x4',
+				[ THREE.RGB_S3TC_DXT1_Format ]: 'RGB_S3TC_DXT1',
+				[ THREE.RGBA_S3TC_DXT5_Format ]: 'RGBA_S3TC_DXT5',
+				[ THREE.RGB_PVRTC_4BPPV1_Format ]: 'RGB_PVRTC_4BPPV1',
+				[ THREE.RGBA_PVRTC_4BPPV1_Format ]: 'RGBA_PVRTC_4BPPV1',
+				[ THREE.RGB_ETC1_Format ]: 'RGB_ETC1',
+				[ THREE.RGB_ETC2_Format ]: 'RGB_ETC2',
+				[ THREE.RGBA_ETC2_EAC_Format ]: 'RGB_ETC2_EAC',
+			};
+
+			const TYPE_LABELS = {
+				[ THREE.UnsignedByteType ]: 'UnsignedByteType',
+				[ THREE.ByteType ]: 'ByteType',
+				[ THREE.ShortType ]: 'ShortType',
+				[ THREE.UnsignedShortType ]: 'UnsignedShortType',
+				[ THREE.IntType ]: 'IntType',
+				[ THREE.UnsignedIntType ]: 'UnsignedIntType',
+				[ THREE.FloatType ]: 'FloatType',
+				[ THREE.HalfFloatType ]: 'HalfFloatType',
+			};
+
+			const params = {
+				sample: Object.values( SAMPLES )[ 0 ],
+			};
 
 			init().then( animate );
 
@@ -54,61 +93,31 @@
 				scene.background = new THREE.Color( 0x202020 );
 
 				camera = new THREE.PerspectiveCamera( 60, width / height, 0.1, 100 );
-				camera.position.set( 2, 1.5, 1 );
+				camera.position.set( 0, 0, 2.5 );
 				camera.lookAt( scene.position );
 				scene.add( camera );
 
 				controls = new OrbitControls( camera, renderer.domElement );
-				controls.autoRotate = true;
 
 				// PlaneGeometry UVs assume flipY=true, which compressed textures don't support.
 				const geometry = flipY( new THREE.PlaneGeometry() );
-				const material = new THREE.MeshBasicMaterial( {
+				material = new THREE.MeshBasicMaterial( {
 					color: 0xFFFFFF,
-					side: THREE.DoubleSide
+					side: THREE.DoubleSide,
+					transparent: true,
 				} );
 				const mesh = new THREE.Mesh( geometry, material );
 				scene.add( mesh );
 
-				const formatStrings = {
-					[ THREE.RGBAFormat ]: 'RGBA32',
-					[ THREE.RGBA_BPTC_Format ]: 'RGBA_BPTC',
-					[ THREE.RGBA_ASTC_4x4_Format ]: 'RGBA_ASTC_4x4',
-					[ THREE.RGB_S3TC_DXT1_Format ]: 'RGB_S3TC_DXT1',
-					[ THREE.RGBA_S3TC_DXT5_Format ]: 'RGBA_S3TC_DXT5',
-					[ THREE.RGB_PVRTC_4BPPV1_Format ]: 'RGB_PVRTC_4BPPV1',
-					[ THREE.RGBA_PVRTC_4BPPV1_Format ]: 'RGBA_PVRTC_4BPPV1',
-					[ THREE.RGB_ETC1_Format ]: 'RGB_ETC1',
-					[ THREE.RGB_ETC2_Format ]: 'RGB_ETC2',
-					[ THREE.RGBA_ETC2_EAC_Format ]: 'RGB_ETC2_EAC',
-				};
-
-				// Samples: sample_etc1s.ktx2, sample_uastc.ktx2, sample_uastc_zstd.ktx2
-				const loader = new KTX2Loader()
+				loader = new KTX2Loader()
 					.setTranscoderPath( 'jsm/libs/basis/' )
 					.detectSupport( renderer );
 
+				const gui = new GUI();
 
-				try {
+				gui.add( params, 'sample', SAMPLES ).onChange( loadTexture );
 
-					const texture = await loader.loadAsync( './textures/compressed/sample_uastc_zstd.ktx2' );
-
-					console.info( `transcoded to ${formatStrings[ texture.format ]}` );
-
-					material.map = texture;
-					material.transparent = true;
-
-					material.needsUpdate = true;
-
-				} catch ( e ) {
-
-					console.error( e );
-
-				} finally {
-
-					loader.dispose();
-
-				}
+				await loadTexture( params.sample );
 
 
 			}
@@ -134,6 +143,30 @@
 
 			}
 
+			async function loadTexture( path ) {
+
+				try {
+
+					const texture = await loader.loadAsync( `./textures/compressed/${path}` );
+					texture.minFilter = THREE.NearestMipmapNearestFilter;
+
+					material.map = texture;
+					material.needsUpdate = true;
+
+					console.info( `format: ${ FORMAT_LABELS[ texture.format ] }` );
+					console.info( `type: ${ TYPE_LABELS[ texture.type ] }` );
+
+				} catch ( e ) {
+
+					console.error( e );
+
+				}
+
+				// NOTE: Call `loader.dispose()` when finished loading textures.
+
+
+			}
+
 			/** Correct UVs to be compatible with `flipY=false` textures. */
 			function flipY( geometry ) {