Merge pull request #7486 from OmarShehata/gltf-webp

Add support for glTF EXT_texture_webp

CHANGES.md

@@ -22,6 +22,7 @@ Change Log
 * Added rhumb line support to `PolygonGeometry`, `PolygonOutlineGeometry`, `PolylineGeometry`, `GroundPolylineGeometry`, and `SimplePolylineGeometry`. [#7492](https://github.com/AnalyticalGraphicsInc/cesium/pull/7492)
 * When using Cesium in Node.js, we now use the combined and minified version for improved performance unless `NODE_ENV` is specifically set to `development`.
 * Improved the performance of `QuantizedMeshTerrainData.interpolateHeight`.  [#7508](https://github.com/AnalyticalGraphicsInc/cesium/pull/7508)
+* Added support for glTF models with WebP textures using the `EXT_texture_webp` extension. [#7486](https://github.com/AnalyticalGraphicsInc/cesium/pull/7486)
 
 ##### Fixes :wrench:
 * Fixed 3D Tiles performance regression. [#7482](https://github.com/AnalyticalGraphicsInc/cesium/pull/7482)

Source/Core/FeatureDetection.js

@@ -1,11 +1,15 @@
 define([
         './defaultValue',
         './defined',
-        './Fullscreen'
+        './Fullscreen',
+        './RuntimeError',
+        '../ThirdParty/when'
     ], function(
         defaultValue,
         defined,
-        Fullscreen) {
+        Fullscreen,
+        RuntimeError,
+        when) {
     'use strict';
     /*global CanvasPixelArray*/
 
@@ -199,6 +203,35 @@ define([
         return supportsImageRenderingPixelated() ? imageRenderingValueResult : undefined;
     }
 
+    var supportsWebpPromise;
+    function supportsWebp() {
+        // From https://developers.google.com/speed/webp/faq#how_can_i_detect_browser_support_for_webp
+        if (defined(supportsWebpPromise)) {
+            return supportsWebpPromise.promise;
+        }
+
+        supportsWebpPromise = when.defer();
+        if (isEdge()) {
+            // Edge's WebP support with WebGL is incomplete.
+            // See bug report: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/19221241/
+            supportsWebpPromise.resolve(false);
+        }
+
+        var image = new Image();
+        image.onload = function () {
+            var success = (image.width > 0) && (image.height > 0);
+            supportsWebpPromise.resolve(success);
+        };
+
+        image.onerror = function () {
+            supportsWebpPromise.resolve(false);
+        };
+
+        image.src = 'data:image/webp;base64,UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA';
+
+        return supportsWebpPromise.promise;
+    }
+
     var typedArrayTypes = [];
     if (typeof ArrayBuffer !== 'undefined') {
         typedArrayTypes.push(Int8Array, Uint8Array, Int16Array, Uint16Array, Int32Array, Uint32Array, Float32Array, Float64Array);
@@ -235,6 +268,7 @@ define([
         hardwareConcurrency : defaultValue(theNavigator.hardwareConcurrency, 3),
         supportsPointerEvents : supportsPointerEvents,
         supportsImageRenderingPixelated: supportsImageRenderingPixelated,
+        supportsWebp: supportsWebp,
         imageRenderingValue: imageRenderingValue,
         typedArrayTypes: typedArrayTypes
     };

Source/Scene/ClassificationModel.js

@@ -261,6 +261,14 @@ define([
         this._rtcCenterEye = undefined; // in eye coordinates
         this._rtcCenter3D = undefined;  // in world coordinates
         this._rtcCenter2D = undefined;  // in projected world coordinates
+
+        this._supportsWebp = undefined;
+
+        var that = this;
+        FeatureDetection.supportsWebp()
+            .then(function(result) {
+                that._supportsWebp = result;
+            });
     }
 
     defineProperties(ClassificationModel.prototype, {
@@ -958,6 +966,10 @@ define([
             return;
         }
 
+        if (!defined(this._supportsWebp)) {
+            return;
+        }
+
         if ((this._state === ModelState.NEEDS_LOAD) && defined(this.gltf)) {
             this._state = ModelState.LOADING;
             if (this._state !== ModelState.FAILED) {
@@ -991,7 +1003,7 @@ define([
             // Transition from LOADING -> LOADED once resources are downloaded and created.
             // Textures may continue to stream in while in the LOADED state.
             if (loadResources.pendingBufferLoads === 0) {
-                ModelUtility.checkSupportedExtensions(this.extensionsRequired);
+                ModelUtility.checkSupportedExtensions(this.extensionsRequired, this._supportsWebp);
 
                 addBuffersToLoadResources(this);
                 parseBufferViews(this);

Source/Scene/Model.js

@@ -686,6 +686,13 @@ define([
         this._useDefaultSpecularMaps = false;
 
         this._shouldRegenerateShaders = false;
+        this._supportsWebp = undefined;
+
+        var that = this;
+        FeatureDetection.supportsWebp()
+            .then(function(result) {
+                that._supportsWebp = result;
+            });
     }
 
     defineProperties(Model.prototype, {
@@ -1652,6 +1659,11 @@ define([
         var uri;
         ForEach.texture(gltf, function(texture, id) {
             var imageId = texture.source;
+
+            if (defined(texture.extensions) && defined(texture.extensions.EXT_texture_webp) && model._supportsWebp) {
+                imageId = texture.extensions.EXT_texture_webp.source;
+            }
+
             var gltfImage = images[imageId];
             var extras = gltfImage.extras;
 
@@ -4296,6 +4308,10 @@ define([
             return;
         }
 
+        if (!defined(this._supportsWebp)) {
+            return;
+        }
+
         var context = frameState.context;
         this._defaultTexture = context.defaultTexture;
 
@@ -4370,7 +4386,7 @@ define([
                 if (!loadResources.initialized) {
                     frameState.brdfLutGenerator.update(frameState);
 
-                    ModelUtility.checkSupportedExtensions(this.extensionsRequired);
+                    ModelUtility.checkSupportedExtensions(this.extensionsRequired, this._supportsWebp);
                     ModelUtility.updateForwardAxis(this);
 
                     // glTF pipeline updates, not needed if loading from cache

Source/Scene/ModelUtility.js

@@ -10,6 +10,7 @@ define([
         '../Core/Matrix3',
         '../Core/Matrix4',
         '../Core/Quaternion',
+        '../Core/FeatureDetection',
         '../Core/RuntimeError',
         '../Core/WebGLConstants',
         '../Renderer/ShaderSource',
@@ -30,6 +31,7 @@ define([
         Matrix3,
         Matrix4,
         Quaternion,
+        FeatureDetection,
         RuntimeError,
         WebGLConstants,
         ShaderSource,
@@ -491,15 +493,20 @@ define([
         'KHR_techniques_webgl' : true,
         'KHR_materials_unlit' : true,
         'KHR_materials_pbrSpecularGlossiness' : true,
-        'WEB3D_quantized_attributes' : true
+        'WEB3D_quantized_attributes' : true,
+        'EXT_texture_webp' : true
     };
 
-    ModelUtility.checkSupportedExtensions = function(extensionsRequired) {
+    ModelUtility.checkSupportedExtensions = function(extensionsRequired, browserSupportsWebp) {
         for (var extension in extensionsRequired) {
             if (extensionsRequired.hasOwnProperty(extension)) {
                 if (!ModelUtility.supportedExtensions[extension]) {
                     throw new RuntimeError('Unsupported glTF Extension: ' + extension);
                 }
+
+                if (extension === 'EXT_texture_webp' && browserSupportsWebp === false) {
+                    throw new RuntimeError('Loaded model requires WebP but browser does not support it.');
+                }
             }
         }
     };

Specs/Core/FeatureDetectionSpec.js

@@ -115,4 +115,11 @@ defineSuite([
             expect(FeatureDetection.imageRenderingValue()).not.toBeDefined();
         }
     });
+
+    it('detects WebP support', function() {
+        return FeatureDetection.supportsWebp()
+            .then(function(supportsWebp) {
+                expect(typeof supportsWebp).toEqual('boolean');
+            });
+    });
 });