Merge pull request #12963 from amakaseev/ktx-loader

KTX loader

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 );
 

src/constants.js

@@ -92,15 +92,15 @@ export var LuminanceAlphaFormat = 1025;
 export var RGBEFormat = RGBAFormat;
 export var DepthFormat = 1026;
 export var DepthStencilFormat = 1027;
-export var RGB_S3TC_DXT1_Format = 2001;
-export var RGBA_S3TC_DXT1_Format = 2002;
-export var RGBA_S3TC_DXT3_Format = 2003;
-export var RGBA_S3TC_DXT5_Format = 2004;
-export var RGB_PVRTC_4BPPV1_Format = 2100;
-export var RGB_PVRTC_2BPPV1_Format = 2101;
-export var RGBA_PVRTC_4BPPV1_Format = 2102;
-export var RGBA_PVRTC_2BPPV1_Format = 2103;
-export var RGB_ETC1_Format = 2151;
+export var RGB_S3TC_DXT1_Format = 33776;
+export var RGBA_S3TC_DXT1_Format = 33777;
+export var RGBA_S3TC_DXT3_Format = 33778;
+export var RGBA_S3TC_DXT5_Format = 33779;
+export var RGB_PVRTC_4BPPV1_Format = 35840;
+export var RGB_PVRTC_2BPPV1_Format = 35841;
+export var RGBA_PVRTC_4BPPV1_Format = 35842;
+export var RGBA_PVRTC_2BPPV1_Format = 35843;
+export var RGB_ETC1_Format = 36196;
 export var RGBA_ASTC_4x4_Format = 37808;
 export var RGBA_ASTC_5x4_Format = 37809;
 export var RGBA_ASTC_5x5_Format = 37810;

src/renderers/webgl/WebGLState.js

@@ -491,7 +491,8 @@ function WebGLState( gl, extensions, utils ) {
 
 			if ( extensions.get( 'WEBGL_compressed_texture_pvrtc' ) ||
 			     extensions.get( 'WEBGL_compressed_texture_s3tc' ) ||
-			     extensions.get( 'WEBGL_compressed_texture_etc1' ) ) {
+			     extensions.get( 'WEBGL_compressed_texture_etc1' ) ||
+			     extensions.get( 'WEBGL_compressed_texture_astc' ) ) {
 
 				var formats = gl.getParameter( gl.COMPRESSED_TEXTURE_FORMATS );