Example: ktx-loader, added DXT, ETC1, PVR and ASTC textures

examples/webgl_loader_texture_ktx.html

@@ -40,6 +40,21 @@
 
 <script>
 
+	/*
+    This is how compressed textures are supposed to be used:
+
+    best for desktop:
+    BC1(DXT1) - opaque textures
+    BC3(DXT5) - transparent textures with full alpha range
+
+    best for iOS:
+    PVR2, PVR4 - opaque textures or alpha
+
+    best for Android:
+    ETC1 - opaque textures
+    ASTC_4x4, ASTC8x8 - transparent textures with full alpha range
+    */
+
 	if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
 	var camera, scene, renderer;
@@ -50,62 +65,98 @@
 
 	function init() {
 
+		renderer = new THREE.WebGLRenderer( { antialias: true } );
+		renderer.setPixelRatio( window.devicePixelRatio );
+		renderer.setSize( window.innerWidth, window.innerHeight );
+		document.body.appendChild( renderer.domElement );
+
+		var formats = {};
+		formats.pvrtc = renderer.extensions.get( 'WEBGL_compressed_texture_pvrtc' );
+		formats.s3tc = renderer.extensions.get( 'WEBGL_compressed_texture_s3tc' );
+		formats.etc1 = renderer.extensions.get( 'WEBGL_compressed_texture_etc1' );
+		formats.astc = renderer.extensions.get( 'WEBGL_compressed_texture_astc' );
+
 		camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 2000 );
 		camera.position.z = 1000;
 
 		scene = new THREE.Scene();
 
 		var geometry = new THREE.BoxGeometry( 200, 200, 200 );
+		var material1, material2;
 
-		/*
-        This is how compressed textures are supposed to be used:
+		// TODO: add cubemap support
+		var loader = new THREE.KTXLoader();
 
-        DXT1 - RGB - opaque textures
-        DXT3 - RGBA - transparent textures with sharp alpha transitions
-        DXT5 - RGBA - transparent textures with full alpha range
-        */
+		if ( formats.pvrtc ) {
 
-		var loader = new THREE.KTXLoader();
+			material1 = new THREE.MeshBasicMaterial( {
+				map: loader.load( 'textures/compressed/disturb_PVR2bpp.ktx' )
+			} );
+			material2 = new THREE.MeshBasicMaterial( {
+				map: loader.load( 'textures/compressed/lensflare_PVR4bpp.ktx' ),
+				depthTest: false,
+				transparent: true,
+				side: THREE.DoubleSide
+			} );
 
-		var map1 = loader.load( 'textures/compressed/disturb_rgb.ktx' );
+			meshes.push( new THREE.Mesh( geometry, material1 ) );
+			meshes.push( new THREE.Mesh( geometry, material2 ) );
 
-		var map2 = loader.load( 'textures/compressed/disturb_rgba.ktx' );
+		}
 
-		// TODO: fix cubemap support in disturb_cube.ktx
-		var cubemap = loader.load( 'textures/compressed/disturb_rgb.ktx', function ( texture ) {
-			texture.magFilter = THREE.LinearFilter;
-			texture.minFilter = THREE.LinearFilter;
-			texture.mapping = THREE.CubeReflectionMapping;
-		} );
+		if ( formats.s3tc ) {
 
-		var material1 = new THREE.MeshBasicMaterial( { map: map1 } );
-		var material2 = new THREE.MeshBasicMaterial( { map: map1 } );
-		var material3 = new THREE.MeshBasicMaterial( { map: map2, alphaTest: 0.5, side: THREE.DoubleSide } );
+			material1 = new THREE.MeshBasicMaterial( {
+				map: loader.load( 'textures/compressed/disturb_BC1.ktx' )
+			} );
+			material2 = new THREE.MeshBasicMaterial( {
+				map: loader.load( 'textures/compressed/lensflare_BC3.ktx' ),
+				depthTest: false,
+				transparent: true,
+				side: THREE.DoubleSide
+			} );
 
+			meshes.push( new THREE.Mesh( geometry, material1 ) );
+			meshes.push( new THREE.Mesh( geometry, material2 ) );
 
-		var mesh = new THREE.Mesh( new THREE.TorusGeometry( 100, 50, 32, 16 ), material1 );
-		mesh.position.x = -200;
-		mesh.position.y = -200;
-		scene.add( mesh );
-		meshes.push( mesh );
+		}
 
-		mesh = new THREE.Mesh( geometry, material2 );
-		mesh.position.x = -200;
-		mesh.position.y = 200;
-		scene.add( mesh );
-		meshes.push( mesh );
+		if ( formats.etc1 ) {
 
-		mesh = new THREE.Mesh( geometry, material3 );
-		mesh.position.x = 200;
-		mesh.position.y = 200;
-		scene.add( mesh );
-		meshes.push( mesh );
+			material1 = new THREE.MeshBasicMaterial( {
+				map: loader.load( 'textures/compressed/disturb_ETC1.ktx' )
+			} );
 
+			meshes.push( new THREE.Mesh( geometry, material1 ) );
 
-		renderer = new THREE.WebGLRenderer( { antialias: true } );
-		renderer.setPixelRatio( window.devicePixelRatio );
-		renderer.setSize( window.innerWidth, window.innerHeight );
-		document.body.appendChild( renderer.domElement );
+		}
+
+		if ( formats.astc ) {
+
+			material1 = new THREE.MeshBasicMaterial( {
+				map: loader.load( 'textures/compressed/disturb_ASTC4x4.ktx' )
+			} );
+			material2 = new THREE.MeshBasicMaterial( {
+				map: loader.load( 'textures/compressed/lensflare_ASTC8x8.ktx' ),
+				depthTest: false,
+				transparent: true,
+				side: THREE.DoubleSide
+			} );
+
+			meshes.push( new THREE.Mesh( geometry, material1 ) );
+			meshes.push( new THREE.Mesh( geometry, material2 ) );
+
+		}
+
+		var x = - meshes.length / 2 * 150;
+		for ( var i = 0; i < meshes.length; ++ i, x += 300 ) {
+
+			var mesh = meshes[ i ];
+			mesh.position.x = x;
+			mesh.position.y = 0;
+			scene.add( mesh );
+
+		}
 
 		window.addEventListener( 'resize', onWindowResize, false );