Add .dds support to GLTFLoader. Add new Boombox gltf with .dds image files. Add dds boombox to gltf extensions example.

examples/js/loaders/GLTFLoader.js

@@ -120,7 +120,6 @@ THREE.GLTFLoader = ( function () {
 				return;
 
 			}
-
 			if ( json.extensionsUsed ) {
 
 				if ( json.extensionsUsed.indexOf( EXTENSIONS.KHR_LIGHTS ) >= 0 ) {
@@ -147,6 +146,12 @@ THREE.GLTFLoader = ( function () {
 
 				}
 
+				if ( json.extensionsUsed.indexOf( EXTENSIONS.MSFT_TEXTURE_DDS ) >= 0 ) {
+
+					extensions[ EXTENSIONS.MSFT_TEXTURE_DDS ] = "MSFT_texture_dds";
+
+				}
+
 			}
 
 			console.time( 'GLTFLoader' );
@@ -224,7 +229,8 @@ THREE.GLTFLoader = ( function () {
 		KHR_DRACO_MESH_COMPRESSION: 'KHR_draco_mesh_compression',
 		KHR_LIGHTS: 'KHR_lights',
 		KHR_MATERIALS_PBR_SPECULAR_GLOSSINESS: 'KHR_materials_pbrSpecularGlossiness',
-		KHR_MATERIALS_UNLIT: 'KHR_materials_unlit'
+		KHR_MATERIALS_UNLIT: 'KHR_materials_unlit',
+		MSFT_TEXTURE_DDS: 'MSFT_texture_dds'
 	};
 
 	/**
@@ -1780,7 +1786,6 @@ THREE.GLTFLoader = ( function () {
 	 * @return {Promise<THREE.Texture>}
 	 */
 	GLTFParser.prototype.loadTexture = function ( textureIndex ) {
-
 		var parser = this;
 		var json = this.json;
 		var options = this.options;
@@ -1789,7 +1794,21 @@ THREE.GLTFLoader = ( function () {
 		var URL = window.URL || window.webkitURL;
 
 		var textureDef = json.textures[ textureIndex ];
-		var source = json.images[ textureDef.source ];
+
+		var textureExtensions = textureDef.extensions || {};
+
+		var source;
+		if ( textureExtensions[ EXTENSIONS.MSFT_TEXTURE_DDS ] ) {
+
+			var DDSLoader = new THREE.DDSLoader;
+			source = json.images[ textureExtensions[ EXTENSIONS.MSFT_TEXTURE_DDS ].source ];
+
+		} else {
+
+			source = json.images[ textureDef.source ];
+
+		}
+
 		var sourceURI = source.uri;
 		var isObjectURL = false;
 
@@ -1812,7 +1831,15 @@ THREE.GLTFLoader = ( function () {
 
 			// Load Texture resource.
 
-			var loader = THREE.Loader.Handlers.get( sourceURI ) || textureLoader;
+			if ( textureExtensions[ EXTENSIONS.MSFT_TEXTURE_DDS ] ) {
+
+				var loader = DDSLoader;
+
+			} else {
+
+				var loader = THREE.Loader.Handlers.get( sourceURI ) || textureLoader;
+
+			}
 
 			return new Promise( function ( resolve, reject ) {
 
@@ -1834,7 +1861,11 @@ THREE.GLTFLoader = ( function () {
 
 			if ( textureDef.name !== undefined ) texture.name = textureDef.name;
 
-			texture.format = textureDef.format !== undefined ? WEBGL_TEXTURE_FORMATS[ textureDef.format ] : THREE.RGBAFormat;
+			if ( ! textureExtensions[ EXTENSIONS.MSFT_TEXTURE_DDS ] ) {
+
+				texture.format = textureDef.format !== undefined ? WEBGL_TEXTURE_FORMATS[ textureDef.format ] : THREE.RGBAFormat;
+
+			}
 
 			if ( textureDef.internalFormat !== undefined && texture.format !== WEBGL_TEXTURE_FORMATS[ textureDef.internalFormat ] ) {
 

examples/models/gltf/BoomBox/glTF-dds/BoomBox.gltf

@@ -0,0 +1,237 @@
+{
+  "accessors": [
+    {
+      "bufferView": 0,
+      "componentType": 5126,
+      "count": 3575,
+      "type": "VEC2",
+      "max": [
+        0.9999003,
+        -0.0221377648
+      ],
+      "min": [
+        0.0006585993,
+        -0.996773958
+      ]
+    },
+    {
+      "bufferView": 1,
+      "componentType": 5126,
+      "count": 3575,
+      "type": "VEC3",
+      "max": [
+        1.0,
+        1.0,
+        0.9999782
+      ],
+      "min": [
+        -1.0,
+        -1.0,
+        -0.9980823
+      ]
+    },
+    {
+      "bufferView": 2,
+      "componentType": 5126,
+      "count": 3575,
+      "type": "VEC4",
+      "max": [
+        1.0,
+        0.9999976,
+        1.0,
+        1.0
+      ],
+      "min": [
+        -0.9991289,
+        -0.999907851,
+        -1.0,
+        1.0
+      ]
+    },
+    {
+      "bufferView": 3,
+      "componentType": 5126,
+      "count": 3575,
+      "type": "VEC3",
+      "max": [
+        0.009921154,
+        0.00977163,
+        0.0100762453
+      ],
+      "min": [
+        -0.009921154,
+        -0.00977163,
+        -0.0100762453
+      ]
+    },
+    {
+      "bufferView": 4,
+      "componentType": 5123,
+      "count": 18108,
+      "type": "SCALAR",
+      "max": [
+        3574
+      ],
+      "min": [
+        0
+      ]
+    }
+  ],
+  "asset": {
+    "generator": "glTF Tools for Unity",
+    "version": "2.0"
+  },
+  "bufferViews": [
+    {
+      "buffer": 0,
+      "byteLength": 28600
+    },
+    {
+      "buffer": 0,
+      "byteOffset": 28600,
+      "byteLength": 42900
+    },
+    {
+      "buffer": 0,
+      "byteOffset": 71500,
+      "byteLength": 57200
+    },
+    {
+      "buffer": 0,
+      "byteOffset": 128700,
+      "byteLength": 42900
+    },
+    {
+      "buffer": 0,
+      "byteOffset": 171600,
+      "byteLength": 36216
+    }
+  ],
+  "buffers": [
+    {
+      "uri": "BoomBox.bin",
+      "byteLength": 207816
+    }
+  ],
+  "images": [
+    {
+      "uri": "BoomBox_baseColor.png"
+    },
+    {
+      "uri": "BoomBox_occlusionRoughnessMetallic.png"
+    },
+    {
+      "uri": "BoomBox_normal.png"
+    },
+    {
+      "uri": "BoomBox_emissive.png"
+    },
+    {
+      "uri": "BoomBox_baseColor.dds"
+    },
+    {
+      "uri": "BoomBox_occlusionRoughnessMetallic.dds"
+    },
+    {
+      "uri": "BoomBox_normal.dds"
+    },
+    {
+      "uri": "BoomBox_emissive.dds"
+    }
+  ],
+  "meshes": [
+    {
+      "primitives": [
+        {
+          "attributes": {
+            "TEXCOORD_0": 0,
+            "NORMAL": 1,
+            "TANGENT": 2,
+            "POSITION": 3
+          },
+          "indices": 4,
+          "material": 0
+        }
+      ],
+      "name": "BoomBox"
+    }
+  ],
+  "materials": [
+    {
+      "pbrMetallicRoughness": {
+        "baseColorTexture": {
+          "index": 0
+        },
+        "metallicRoughnessTexture": {
+          "index": 1
+        }
+      },
+      "normalTexture": {
+        "index": 2
+      },
+      "occlusionTexture": {
+        "index": 1
+      },
+      "emissiveFactor": [
+        1.0,
+        1.0,
+        1.0
+      ],
+      "emissiveTexture": {
+        "index": 3
+      },
+      "name": "BoomBox_Mat"
+    }
+  ],
+  "nodes": [
+    {
+      "mesh": 0,
+      "name": "BoomBox"
+    }
+  ],
+  "scene": 0,
+  "scenes": [
+    {
+      "nodes": [
+        0
+      ]
+    }
+  ],
+  "textures": [
+    {
+      "source": 0,
+      "extensions": {
+        "MSFT_texture_dds": {
+            "source": 4
+        }
+    }
+    },
+    {
+      "source": 1,
+      "extensions": {
+        "MSFT_texture_dds": {
+            "source": 5
+        }
+    }
+    },
+    {
+      "source": 2,
+      "extensions": {
+        "MSFT_texture_dds": {
+            "source": 6
+        }
+    }
+    },
+    {
+      "source": 3,
+      "extensions": {
+        "MSFT_texture_dds": {
+            "source": 7
+        }
+    }
+    }
+  ],
+  "extensionsUsed": [
+    "MSFT_texture_dds"
+  ]
+}

examples/webgl_loader_gltf_extensions.html

@@ -53,8 +53,9 @@
 		<script src="js/libs/dat.gui.min.js"></script>
 		<script src="js/controls/OrbitControls.js"></script>
 		<script src="js/loaders/DRACOLoader.js"></script>
+		<script src="js/loaders/DDSLoader.js"></script>
 		<script src="js/loaders/GLTFLoader.js"></script>
-
+		
 		<script>
 			var orbitControls;
 			var container, camera, scene, renderer, loader;
@@ -71,7 +72,7 @@
 					cameraPos: new THREE.Vector3( 0.02, 0.01, 0.03 ),
 					objectRotation: new THREE.Euler( 0, Math.PI, 0 ),
 					addLights: true,
-					extensions: [ 'glTF', 'glTF-pbrSpecularGlossiness', 'glTF-Binary' ],
+					extensions: [ 'glTF', 'glTF-pbrSpecularGlossiness', 'glTF-Binary', 'glTF-dds'],
 					addEnvMap: true
 				},
 				'Bot Skinned': {