glTF DDS extension and fixes (x3dom#1308)

* DDS, test

* mipmaps, changelog

* dds mipmaps fix, typos

* formatting

* meshopt workers once

CHANGELOG.md

@@ -4,7 +4,13 @@
 
 * Features
   * ImageTexture colorSpaceConversion field
-  * support for glTF punctual lights, emissive strength, webp, mesh quantization and meshopt compression extensions
+  * support for glTF extension:
+    * KHR_lights_punctual
+    * KHR_materials_emissive_strength
+    * KHR_mesh_quantization
+    * EXT_texture_webp
+    * EXT_meshopt_compression
+    * MSFT_texture_dds
   * field values from metadata for non-standard nodes
 
 * Improvements
@@ -16,6 +22,7 @@
   * tune PhysicalMaterial for compatible light intensity
 
 * Bugfixes
+  * fix mipmaps for compressed dds
   * allow turntable as initial navigation
 
 ## Version 1.8.3

src/util/DDSLoader.js

@@ -309,6 +309,7 @@ x3dom.DDSLoader._readData = function ( dds, buffer, texture, options )
     dds.width = dds.header.dwWidth;
     dds.height = dds.header.dwHeight;
     dds.generateMipmaps = ( dds.numberOfMipmaps <= 1 && !dds.isCompressed );
+    dds.format.bytesPerElementFactor = 1;
 
     for ( var i = 0; i < dds.numberOfImages; i++ )
     {

src/util/Utils.js

@@ -277,10 +277,10 @@ x3dom.Utils.tryDDSLoading = function ( texture, gl, doc, src, genMipMaps, flipY,
             gl.generateMipmap( dds.type );
         }
 
-        if ( flipY )
-        {
-            gl.pixelStorei( gl.UNPACK_FLIP_Y_WEBGL, false );
-        }
+        // if ( flipY )
+        // {
+        //     gl.pixelStorei( gl.UNPACK_FLIP_Y_WEBGL, false );
+        // }
 
         gl.bindTexture( dds.type, null );
 

src/util/glTF/glTF2Loader.js

@@ -14,15 +14,16 @@ x3dom.glTF2Loader = function ( nameSpace )
         "KHR_materials_emissive_strength",
         "KHR_mesh_quantization",
         "EXT_texture_webp",
-        "EXT_meshopt_compression"
+        "EXT_meshopt_compression",
+        "MSFT_texture_dds"
     ];
     if ( x3dom.DracoDecoderModule )
     {
         this._supportedExtensions.push( "KHR_draco_mesh_compression" );
     }
-    var DecoderWorkers = 2;
-    this._meshoptDecoder = x3dom.MeshoptDecoder;
-    this._meshoptDecoder.ready.then( () => this._meshoptDecoder.useWorkers( DecoderWorkers ) );
+    this.meshoptDecoderWorkers = 2;
+    // this._meshoptDecoder = x3dom.MeshoptDecoder;
+    // this._meshoptDecoder.ready.then( () => this._meshoptDecoder.useWorkers( DecoderWorkers ) );
 };
 
 /**
@@ -777,12 +778,22 @@ x3dom.glTF2Loader.prototype._generateX3DImageTexture = function ( texture, conta
 {
     var image = this._gltf.images[ texture.source ];
 
-    var webpImageUrl = "";
+    var extImageUrl = "";
+    var generateMipMaps = true;
 
-    if ( texture.extensions && texture.extensions.EXT_texture_webp && texture.extensions.EXT_texture_webp.source )
+    if ( texture.extensions )
     {
-        var webpImage = this._gltf.images[ texture.extensions.EXT_texture_webp.source ];
-        webpImageUrl = x3dom.Utils.dataURIToObjectURL( webpImage.uri || "" );
+        if ( texture.extensions.EXT_texture_webp && texture.extensions.EXT_texture_webp.source )
+        {
+            var extImage = this._gltf.images[ texture.extensions.EXT_texture_webp.source ];
+            extImageUrl = x3dom.Utils.dataURIToObjectURL( extImage.uri || "" );
+        }
+        else if ( texture.extensions.MSFT_texture_dds && texture.extensions.MSFT_texture_dds.source )
+        {
+            var extImage = this._gltf.images[ texture.extensions.MSFT_texture_dds.source ];
+            extImageUrl = x3dom.Utils.dataURIToObjectURL( extImage.uri || "" );
+            generateMipMaps = false;
+        }
     }
 
     var imagetexture = document.createElement( "imagetexture" );
@@ -798,17 +809,20 @@ x3dom.glTF2Loader.prototype._generateX3DImageTexture = function ( texture, conta
         imagetexture.setAttribute( "containerField", containerField );
     }
 
-    if ( image.uri != undefined || webpImageUrl.length > 0 )
+    if ( image.uri != undefined || extImageUrl.length > 0 )
     {
-        var MFUrl = webpImageUrl.length ? [ "\"" + webpImageUrl + "\"" ] : [];
-        if ( image.uri ) {MFUrl.push( "\"" + x3dom.Utils.dataURIToObjectURL( image.uri ) + "\"" );}
+        var MFUrl = extImageUrl.length ? [ "\"" + extImageUrl + "\"" ] : [];
+        if ( image.uri )
+        {
+            MFUrl.push( "\"" + x3dom.Utils.dataURIToObjectURL( image.uri ) + "\"" );
+        }
         imagetexture.setAttribute( "url", MFUrl.join( " " ) );
     }
 
     if ( texture.sampler != undefined )
     {
         var sampler = this._gltf.samplers[ texture.sampler ];
-        imagetexture.appendChild( this._createX3DTextureProperties( sampler ) );
+        imagetexture.appendChild( this._createX3DTextureProperties( sampler, generateMipMaps ) );
     }
 
     if ( channel )
@@ -830,7 +844,7 @@ x3dom.glTF2Loader.prototype._generateX3DImageTexture = function ( texture, conta
  * @param {Object} primitive - A glTF sampler node
  * @return {TextureProperties}
  */
-x3dom.glTF2Loader.prototype._createX3DTextureProperties = function ( sampler )
+x3dom.glTF2Loader.prototype._createX3DTextureProperties = function ( sampler, generateMipMaps )
 {
     var textureproperties = document.createElement( "textureproperties" );
 
@@ -840,7 +854,7 @@ x3dom.glTF2Loader.prototype._createX3DTextureProperties = function ( sampler )
     textureproperties.setAttribute( "magnificationFilter", x3dom.Utils.magFilterDicX3D( sampler.magFilter ) );
     textureproperties.setAttribute( "minificationFilter",  x3dom.Utils.minFilterDicX3D( sampler.minFilter ) );
 
-    if ( sampler.minFilter == undefined || ( sampler.minFilter >= 9984 && sampler.minFilter <= 9987 ) )
+    if ( generateMipMaps && ( sampler.minFilter == undefined || ( sampler.minFilter >= 9984 && sampler.minFilter <= 9987 ) ) )
     {
         textureproperties.setAttribute( "generateMipMaps", "true" );
     }
@@ -1424,7 +1438,12 @@ x3dom.glTF2Loader.prototype._meshopt_decodeViewAsync = function ( view, buffers
         var meshopt = view.extensions.EXT_meshopt_compression;
         var source = new Uint8Array( buffers[  meshopt.buffer ] )
             .slice( meshopt.byteOffset, meshopt.byteOffset + meshopt.byteLength );
-        return this._meshoptDecoder.ready.then( () => this._meshoptDecoder.decodeGltfBufferAsync(
+        if ( !x3dom.MeshoptDecoder.created )
+        {
+            x3dom.MeshoptDecoder.useWorkers( this.meshoptDecoderWorkers );
+            x3dom.MeshoptDecoder.created = true;
+        }
+        return x3dom.MeshoptDecoder.ready.then( () => x3dom.MeshoptDecoder.decodeGltfBufferAsync(
             meshopt.count, meshopt.byteStride, source, meshopt.mode, meshopt.filter || "NONE" ) );
     }
     return new Uint8Array( buffers[ view.buffer ] ).slice( view.byteOffset, view.byteOffset + view.byteLength );

test/functional/inline-gltf.html

@@ -482,9 +482,11 @@
             <div class="sidebar-entry" onclick="load('https://raw.githubusercontent.com/CesiumGS/cesium/bd8be76b7707ddb9c858ae39538c18064c218f98/Specs/Data/Models/Box-Textured-Webp/CesiumBoxWebp.gltf','direct','negZ')">Cesium, embedded, webp</div>
             <div class="sidebar-entry" onclick="load('https://raw.githubusercontent.com/zeux/meshoptimizer/master/demo/pirate.glb','direct','negZ')">Pirate, meshopt+quant., glb</div>
             <div class="sidebar-entry" onclick="load('https://assets.babylonjs.com/meshes/Buggy/glTF-MeshOpt/Buggy.gltf','direct','negZ')">BJS Buggy, meshopt+quant., gltf</div>
+            <div class="sidebar-entry" onclick="updateInline('https://raw.githubusercontent.com/Keenuts/glTF-Sample-Models/cube/2.0/CubeDDS/glTF/CubeDDS.gltf')">DDS Texture</div>
+            <div class="sidebar-entry" onclick="updateInline('https://raw.githubusercontent.com/Keenuts/glTF-Sample-Models/cube/2.0/CubeDDS/glTF/CubeDDS.glb')">DDS Texture, binary</div>
 
             <div class="sidebar-header">VR Controller</div>
-            
+
             <div class="sidebar-entry" onclick="updateInline('https://x3dom.org/download/assets/vr/vive.glb')">Vive</div>
             <div class="sidebar-entry" onclick="updateInline('https://x3dom.org/download/assets/vr/oculus-go.glb')">Oculus Go</div>
             <div class="sidebar-entry" onclick="updateInline('https://x3dom.org/download/assets/vr/oculus-left.glb')">Oculus Left</div>

test/regression-suite/test/cases/compressedTexture/compressedTexture.html

@@ -16,7 +16,7 @@
         <transform translation="-2 0 0">
           <shape>
             <appearance>
-              <imageTexture url="lena_dxt5.dds"><imageTexture>
+              <imagetexture url="lena_dxt5.dds"></imagetexture>
             </appearance>
             <box></box>
           </shape>
@@ -32,7 +32,7 @@
         <transform translation="2 0 0">
           <shape>
             <appearance>
-              <imageTexture url="lena_jpeg.jpg"><imageTexture>
+              <imagetexture url="lena_jpeg.jpg"></imagetexture>
             </appearance>
             <box></box>
           </shape>