Merge pull request #12947 from amakaseev/ktx-loader

KTX texture loader

examples/files.js

@@ -161,6 +161,7 @@ var files = {
 		"webgl_materials_texture_anisotropy",
 		"webgl_materials_texture_canvas",
 		"webgl_materials_texture_compressed",
+		"webgl_materials_texture_ktx",
 		"webgl_materials_texture_filters",
 		"webgl_materials_texture_manualmipmap",
 		"webgl_materials_texture_rotation",

examples/js/loaders/KTXLoader.js

@@ -0,0 +1,172 @@
+/**
+ * @author amakaseev / https://github.com/amakaseev
+ *
+ * for description see https://www.khronos.org/opengles/sdk/tools/KTX/
+ * for file layout see https://www.khronos.org/opengles/sdk/tools/KTX/file_format_spec/
+ *
+ * ported from https://github.com/BabylonJS/Babylon.js/blob/master/src/Tools/babylon.khronosTextureContainer.ts
+ */
+
+
+THREE.KTXLoader = function () {
+
+	this._parser = THREE.KTXLoader.parse;
+
+};
+
+THREE.KTXLoader.prototype = Object.create( THREE.CompressedTextureLoader.prototype );
+THREE.KTXLoader.prototype.constructor = THREE.KTXLoader;
+
+THREE.KTXLoader.parse = function ( buffer, loadMipmaps ) {
+
+	var ktx = new KhronosTextureContainer( buffer, 1 );
+
+	return {
+		mipmaps: ktx.mipmaps( loadMipmaps ),
+		width: ktx.pixelWidth,
+		height: ktx.pixelHeight,
+		format: ktx.glInternalFormat,
+		isCubemap: ktx.numberOfFaces === 6,
+		mipmapCount: ktx.numberOfMipmapLevels
+	};
+
+};
+
+var KhronosTextureContainer = ( function () {
+
+	/**
+	 * @param {ArrayBuffer} arrayBuffer- contents of the KTX container file
+	 * @param {number} facesExpected- should be either 1 or 6, based whether a cube texture or or
+	 * @param {boolean} threeDExpected- provision for indicating that data should be a 3D texture, not implemented
+	 * @param {boolean} textureArrayExpected- provision for indicating that data should be a texture array, not implemented
+	 */
+	function KhronosTextureContainer( arrayBuffer, facesExpected, threeDExpected, textureArrayExpected ) {
+
+		this.arrayBuffer = arrayBuffer;
+
+		// Test that it is a ktx formatted file, based on the first 12 bytes, character representation is:
+		// '´', 'K', 'T', 'X', ' ', '1', '1', 'ª', '\r', '\n', '\x1A', '\n'
+		// 0xAB, 0x4B, 0x54, 0x58, 0x20, 0x31, 0x31, 0xBB, 0x0D, 0x0A, 0x1A, 0x0A
+		var identifier = new Uint8Array( this.arrayBuffer, 0, 12 );
+		if ( identifier[ 0 ] !== 0xAB ||
+			identifier[ 1 ] !== 0x4B ||
+			identifier[ 2 ] !== 0x54 ||
+			identifier[ 3 ] !== 0x58 ||
+			identifier[ 4 ] !== 0x20 ||
+			identifier[ 5 ] !== 0x31 ||
+			identifier[ 6 ] !== 0x31 ||
+			identifier[ 7 ] !== 0xBB ||
+			identifier[ 8 ] !== 0x0D ||
+			identifier[ 9 ] !== 0x0A ||
+			identifier[ 10 ] !== 0x1A ||
+			identifier[ 11 ] !== 0x0A ) {
+
+			console.error( 'texture missing KTX identifier' );
+			return;
+
+		}
+
+		// load the reset of the header in native 32 bit int
+		var header = new Int32Array( this.arrayBuffer, 12, 13 );
+		// determine of the remaining header values are recorded in the opposite endianness & require conversion
+		var oppositeEndianess = header[ 0 ] === 0x01020304;
+		// read all the header elements in order they exist in the file, without modification (sans endainness)
+		this.glType = oppositeEndianess ? this.switchEndainness( header[ 1 ] ) : header[ 1 ]; // must be 0 for compressed textures
+		this.glTypeSize = oppositeEndianess ? this.switchEndainness( header[ 2 ] ) : header[ 2 ]; // must be 1 for compressed textures
+		this.glFormat = oppositeEndianess ? this.switchEndainness( header[ 3 ] ) : header[ 3 ]; // must be 0 for compressed textures
+		this.glInternalFormat = oppositeEndianess ? this.switchEndainness( header[ 4 ] ) : header[ 4 ]; // the value of arg passed to gl.compressedTexImage2D(,,x,,,,)
+		this.glBaseInternalFormat = oppositeEndianess ? this.switchEndainness( header[ 5 ] ) : header[ 5 ]; // specify GL_RGB, GL_RGBA, GL_ALPHA, etc (un-compressed only)
+		this.pixelWidth = oppositeEndianess ? this.switchEndainness( header[ 6 ] ) : header[ 6 ]; // level 0 value of arg passed to gl.compressedTexImage2D(,,,x,,,)
+		this.pixelHeight = oppositeEndianess ? this.switchEndainness( header[ 7 ] ) : header[ 7 ]; // level 0 value of arg passed to gl.compressedTexImage2D(,,,,x,,)
+		this.pixelDepth = oppositeEndianess ? this.switchEndainness( header[ 8 ] ) : header[ 8 ]; // level 0 value of arg passed to gl.compressedTexImage3D(,,,,,x,,)
+		this.numberOfArrayElements = oppositeEndianess ? this.switchEndainness( header[ 9 ] ) : header[ 9 ]; // used for texture arrays
+		this.numberOfFaces = oppositeEndianess ? this.switchEndainness( header[ 10 ] ) : header[ 10 ]; // used for cubemap textures, should either be 1 or 6
+		this.numberOfMipmapLevels = oppositeEndianess ? this.switchEndainness( header[ 11 ] ) : header[ 11 ]; // number of levels; disregard possibility of 0 for compressed textures
+		this.bytesOfKeyValueData = oppositeEndianess ? this.switchEndainness( header[ 12 ] ) : header[ 12 ]; // the amount of space after the header for meta-data
+
+		// Make sure we have a compressed type.  Not only reduces work, but probably better to let dev know they are not compressing.
+		if ( this.glType !== 0 ) {
+
+			console.warn( 'only compressed formats currently supported' );
+			return;
+
+		} else {
+
+			// value of zero is an indication to generate mipmaps @ runtime.  Not usually allowed for compressed, so disregard.
+			this.numberOfMipmapLevels = Math.max( 1, this.numberOfMipmapLevels );
+
+		}
+		if ( this.pixelHeight === 0 || this.pixelDepth !== 0 ) {
+
+			console.warn( 'only 2D textures currently supported' );
+			return;
+
+		}
+		if ( this.numberOfArrayElements !== 0 ) {
+
+			console.warn( 'texture arrays not currently supported' );
+			return;
+
+		}
+		if ( this.numberOfFaces !== facesExpected ) {
+
+			console.warn( 'number of faces expected' + facesExpected + ', but found ' + this.numberOfFaces );
+			return;
+
+		}
+		// we now have a completely validated file, so could use existence of loadType as success
+		// would need to make this more elaborate & adjust checks above to support more than one load type
+		this.loadType = KhronosTextureContainer.COMPRESSED_2D;
+
+	}
+
+	// not as fast hardware based, but will probably never need to use
+	KhronosTextureContainer.prototype.switchEndainness = function ( val ) {
+
+		return ( ( val & 0xFF ) << 24 ) | ( ( val & 0xFF00 ) << 8 ) | ( ( val >> 8 ) & 0xFF00 ) | ( ( val >> 24 ) & 0xFF );
+
+	};
+
+	// return mipmaps for THREE.js
+	KhronosTextureContainer.prototype.mipmaps = function ( loadMipmaps ) {
+
+		var mipmaps = [];
+
+		// initialize width & height for level 1
+		var dataOffset = KhronosTextureContainer.HEADER_LEN + this.bytesOfKeyValueData;
+		var width = this.pixelWidth;
+		var height = this.pixelHeight;
+		var mipmapCount = loadMipmaps ? this.numberOfMipmapLevels : 1;
+
+		for ( var level = 0; level < mipmapCount; level ++ ) {
+
+			var imageSize = new Int32Array( this.arrayBuffer, dataOffset, 1 )[ 0 ]; // size per face, since not supporting array cubemaps
+			for ( var face = 0; face < this.numberOfFaces; face ++ ) {
+
+				var byteArray = new Uint8Array( this.arrayBuffer, dataOffset + 4, imageSize );
+
+				mipmaps.push( { "data": byteArray, "width": width, "height": height } );
+
+				dataOffset += imageSize + 4; // size of the image + 4 for the imageSize field
+				dataOffset += 3 - ( ( imageSize + 3 ) % 4 ); // add padding for odd sized image
+
+			}
+			width = Math.max( 1.0, width * 0.5 );
+			height = Math.max( 1.0, height * 0.5 );
+
+		}
+
+		return mipmaps;
+
+	};
+
+	KhronosTextureContainer.HEADER_LEN = 12 + ( 13 * 4 ); // identifier + header elements (not including key value meta-data pairs)
+	// load types
+	KhronosTextureContainer.COMPRESSED_2D = 0; // uses a gl.compressedTexImage2D()
+	KhronosTextureContainer.COMPRESSED_3D = 1; // uses a gl.compressedTexImage3D()
+	KhronosTextureContainer.TEX_2D = 2; // uses a gl.texImage2D()
+	KhronosTextureContainer.TEX_3D = 3; // uses a gl.texImage3D()
+
+	return KhronosTextureContainer;
+
+}() );

examples/webgl_materials_texture_ktx.html

@@ -0,0 +1,144 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>three.js webgl - materials - compressed textures</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+    <style>
+        body {
+            margin: 0px;
+            background-color: #050505;
+            color: #fff;
+            overflow: hidden;
+        }
+
+        a { color: #e00 }
+
+        #info {
+            position: absolute;
+            top: 0px; width: 100%;
+            color: #ffffff;
+            padding: 5px;
+            font-family:Monospace;
+            font-size:13px;
+            text-align:center;
+            z-index:1000;
+        }
+    </style>
+</head>
+<body>
+
+<div id="info">
+    <a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl - compressed KTX textures -
+    <a href="http://opengameart.org/node/10505">Khronos Texture</a> is a lightweight file format for OpenGL
+</div>
+
+<script src="../build/three.js"></script>
+<script src="js/loaders/KTXLoader.js"></script>
+
+<script src="js/Detector.js"></script>
+
+<script>
+
+	if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
+
+	var camera, scene, renderer;
+	var meshes = [];
+
+	init();
+	animate();
+
+	function init() {
+
+		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 );
+
+		/*
+        This is how compressed textures are supposed to be used:
+
+        DXT1 - RGB - opaque textures
+        DXT3 - RGBA - transparent textures with sharp alpha transitions
+        DXT5 - RGBA - transparent textures with full alpha range
+        */
+
+		var loader = new THREE.KTXLoader();
+
+		var map1 = loader.load( 'textures/compressed/disturb_rgb.ktx' );
+
+		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;
+		} );
+
+		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 } );
+
+
+		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 );
+
+		mesh = new THREE.Mesh( geometry, material3 );
+		mesh.position.x = 200;
+		mesh.position.y = 200;
+		scene.add( mesh );
+		meshes.push( mesh );
+
+
+		renderer = new THREE.WebGLRenderer( { antialias: true } );
+		renderer.setPixelRatio( window.devicePixelRatio );
+		renderer.setSize( window.innerWidth, window.innerHeight );
+		document.body.appendChild( renderer.domElement );
+
+		window.addEventListener( 'resize', onWindowResize, false );
+
+	}
+
+	function onWindowResize() {
+
+		camera.aspect = window.innerWidth / window.innerHeight;
+		camera.updateProjectionMatrix();
+
+		renderer.setSize( window.innerWidth, window.innerHeight );
+
+	}
+
+	function animate() {
+
+		requestAnimationFrame( animate );
+
+		var time = Date.now() * 0.001;
+
+		for ( var i = 0; i < meshes.length; i ++ ) {
+
+			var mesh = meshes[ i ];
+			mesh.rotation.x = time;
+			mesh.rotation.y = time;
+
+		}
+
+		renderer.render( scene, camera );
+
+	}
+
+</script>
+
+</body>
+</html>

src/renderers/webgl/WebGLUtils.js

@@ -2,7 +2,7 @@
  * @author thespite / http://www.twitter.com/thespite
  */
 
-import { MaxEquation, MinEquation, RGB_ETC1_Format, RGBA_PVRTC_2BPPV1_Format, RGBA_PVRTC_4BPPV1_Format, RGB_PVRTC_2BPPV1_Format, RGB_PVRTC_4BPPV1_Format, RGBA_S3TC_DXT5_Format, RGBA_S3TC_DXT3_Format, RGBA_S3TC_DXT1_Format, RGB_S3TC_DXT1_Format, SrcAlphaSaturateFactor, OneMinusDstColorFactor, DstColorFactor, OneMinusDstAlphaFactor, DstAlphaFactor, OneMinusSrcAlphaFactor, SrcAlphaFactor, OneMinusSrcColorFactor, SrcColorFactor, OneFactor, ZeroFactor, ReverseSubtractEquation, SubtractEquation, AddEquation, DepthFormat, DepthStencilFormat, LuminanceAlphaFormat, LuminanceFormat, RGBAFormat, RGBFormat, AlphaFormat, HalfFloatType, FloatType, UnsignedIntType, IntType, UnsignedShortType, ShortType, ByteType, UnsignedInt248Type, UnsignedShort565Type, UnsignedShort5551Type, UnsignedShort4444Type, UnsignedByteType, LinearMipMapLinearFilter, LinearMipMapNearestFilter, LinearFilter, NearestMipMapLinearFilter, NearestMipMapNearestFilter, NearestFilter, MirroredRepeatWrapping, ClampToEdgeWrapping, RepeatWrapping } from '../../constants.js';
+import { MaxEquation, MinEquation, RGBA_ASTC_4x4_Format, RGBA_ASTC_5x4_Format, RGBA_ASTC_5x5_Format, RGBA_ASTC_6x5_Format, RGBA_ASTC_6x6_Format, RGBA_ASTC_8x5_Format, RGBA_ASTC_8x6_Format, RGBA_ASTC_8x8_Format, RGBA_ASTC_10x5_Format, RGBA_ASTC_10x6_Format, RGBA_ASTC_10x8_Format, RGBA_ASTC_10x10_Format, RGBA_ASTC_12x10_Format, RGBA_ASTC_12x12_Format, RGB_ETC1_Format, RGBA_PVRTC_2BPPV1_Format, RGBA_PVRTC_4BPPV1_Format, RGB_PVRTC_2BPPV1_Format, RGB_PVRTC_4BPPV1_Format, RGBA_S3TC_DXT5_Format, RGBA_S3TC_DXT3_Format, RGBA_S3TC_DXT1_Format, RGB_S3TC_DXT1_Format, SrcAlphaSaturateFactor, OneMinusDstColorFactor, DstColorFactor, OneMinusDstAlphaFactor, DstAlphaFactor, OneMinusSrcAlphaFactor, SrcAlphaFactor, OneMinusSrcColorFactor, SrcColorFactor, OneFactor, ZeroFactor, ReverseSubtractEquation, SubtractEquation, AddEquation, DepthFormat, DepthStencilFormat, LuminanceAlphaFormat, LuminanceFormat, RGBAFormat, RGBFormat, AlphaFormat, HalfFloatType, FloatType, UnsignedIntType, IntType, UnsignedShortType, ShortType, ByteType, UnsignedInt248Type, UnsignedShort565Type, UnsignedShort5551Type, UnsignedShort4444Type, UnsignedByteType, LinearMipMapLinearFilter, LinearMipMapNearestFilter, LinearFilter, NearestMipMapLinearFilter, NearestMipMapNearestFilter, NearestFilter, MirroredRepeatWrapping, ClampToEdgeWrapping, RepeatWrapping } from '../../constants.js';
 
 function WebGLUtils( gl, extensions ) {