Added support for compressed textures to Loader base class. Added compressed textures to JSON loader example.

Also moved "startsWith" and "trim" string shims from OBJMTLLoader into Three.js file and added "endsWith" string shim.

Downside of using compressed textures is that texture.flipY parameter doesn't work, so either textures or UVs need to be flipped somewhere else in the asset pipeline.

This is because WebGL doesn't have access to the content of compressed textures (similar to how automatic mipmaps generation doesn't work with compressed textures, so mipmaps need to be baked in DDS).

See discussion on WebGL mailing list here: https://www.khronos.org/webgl/public-mailing-list/archives/1209/msg00024.html

For the JSON loader OBJ example I just flipped images in Gimp (other option would be to keep images intact and flip UVs in the application after loading geometry).

examples/js/loaders/OBJMTLLoader.js

@@ -488,28 +488,3 @@ THREE.OBJMTLLoader.prototype = {
 	}
 };
 
-// Shims of "startsWith" and "trim" for old browsers
-// not sure we should have this, or at least not have it here
-
-// http://stackoverflow.com/questions/646628/javascript-startswith
-// http://stackoverflow.com/questions/498970/how-do-i-trim-a-string-in-javascript
-
-if ( ! String.prototype.startsWith ) {
-
-    String.prototype.startsWith = function ( str ) {
-
-        return this.slice( 0, str.length ) === str;
-
-    };
-
-}
-
-if ( ! String.prototype.trim ) {
-
-   String.prototype.trim = function () {
-
-	   return this.replace( /^\s+|\s+$/g, "" );
-
-	};
-
-}

examples/webgl_loader_json_objconverter.html

@@ -186,7 +186,7 @@
 					callbackMale   = function( geometry ) { createScene( geometry,  90, FLOOR, 50, 105 ) },
 					callbackFemale = function( geometry ) { createScene( geometry, -80, FLOOR, 50, 0 ) };
 
-				loader.load( "obj/male02/Male02_slim.js", callbackMale );
+				loader.load( "obj/male02/Male02_dds.js", callbackMale );
 				loader.load( "obj/female02/Female02_slim.js", callbackFemale );
 
 				//loader.load( "obj/male02/Male02_bin.js", callbackMale );

src/Three.js

@@ -25,6 +25,45 @@ if ( self.Int32Array === undefined ) {
 
 }
 
+// Shims for "startsWith", "endsWith", and "trim" for browsers where this is not yet implemented
+// not sure we should have this, or at least not have it here
+
+// http://stackoverflow.com/questions/646628/javascript-startswith
+// http://stackoverflow.com/questions/498970/how-do-i-trim-a-string-in-javascript
+// http://wiki.ecmascript.org/doku.php?id=harmony%3astring_extras
+
+if ( ! String.prototype.startsWith ) {
+
+    String.prototype.startsWith = function ( str ) {
+
+        return this.slice( 0, str.length ) === str;
+
+    };
+
+}
+
+if ( ! String.prototype.endsWith ) {
+
+	String.prototype.endsWith = function ( str ) {
+
+		var t = String( str );
+		var index = this.lastIndexOf( t );
+		return index >= 0 && index === this.length - t.length;
+
+	};
+
+}
+
+if ( ! String.prototype.trim ) {
+
+   String.prototype.trim = function () {
+
+	   return this.replace( /^\s+|\s+$/g, "" );
+
+	};
+
+}
+
 // http://paulirish.com/2011/requestanimationframe-for-smart-animating/
 // http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
 

src/loaders/Loader.js

@@ -145,9 +145,23 @@ THREE.Loader.prototype = {
 
 		function create_texture( where, name, sourceFile, repeat, offset, wrap, anisotropy ) {
 
-			var texture = document.createElement( 'canvas' );
+			var isCompressed = sourceFile.toLowerCase().endsWith( ".dds" );
+			var fullPath = texturePath + "/" + sourceFile;
+
+			if ( isCompressed ) {
+
+				var texture = THREE.ImageUtils.loadCompressedTexture( fullPath );
+
+				where[ name ] = texture;
+
+			} else {
+
+				var texture = document.createElement( 'canvas' );
+
+				where[ name ] = new THREE.Texture( texture );
+
+			}
 
-			where[ name ] = new THREE.Texture( texture );
 			where[ name ].sourceFile = sourceFile;
 
 			if( repeat ) {
@@ -183,7 +197,11 @@ THREE.Loader.prototype = {
 
 			}
 
-			load_image( where[ name ], texturePath + "/" + sourceFile );
+			if ( ! isCompressed ) {
+
+				load_image( where[ name ], fullPath );
+
+			}
 
 		}