Merge pull request #9624 from CesiumGS/texture-encoding-gltf-bug

Add option to ignore colorspace information in texture images

Author: lilleyse

CHANGES.md

@@ -10,6 +10,7 @@
 - Added checks for supported 3D Tiles extensions. [#9552](https://github.com/CesiumGS/cesium/issues/9552)
 - Added documentation clarifying that the `outlineWidth` property will be ignored on all major browsers on Windows platforms. [#9600](https://github.com/CesiumGS/cesium/pull/9600)
 - Added documentation for `KmlTour`, `KmlTourFlyTo`, and `KmlTourWait`. Added documentation and a `kmlTours` getter to `KmlDataSource`. Removed references to `KmlTourSoundCues`. [#8073](https://github.com/CesiumGS/cesium/issues/8073)
+- Added option to ignore extraneous colorspace information in glTF textures and `ImageBitmap`. [#9624](https://github.com/CesiumGS/cesium/pull/9624)
 
 ##### Fixes :wrench:
 

Source/Core/Resource.js

@@ -379,6 +379,7 @@ Resource.supportsImageBitmapOptions = function () {
       return createImageBitmap(blob, {
         imageOrientation: "flipY",
         premultiplyAlpha: "none",
+        colorSpaceConversion: "none",
       });
     })
     .then(function (imageBitmap) {
@@ -856,6 +857,7 @@ Resource.fetchBlob = function (options) {
  * @param {Boolean} [options.preferBlob=false] If true, we will load the image via a blob.
  * @param {Boolean} [options.preferImageBitmap=false] If true, image will be decoded during fetch and an <code>ImageBitmap</code> is returned.
  * @param {Boolean} [options.flipY=false] If true, image will be vertically flipped during decode. Only applies if the browser supports <code>createImageBitmap</code>.
+ * @param {Boolean} [options.skipColorSpaceConversion=false] If true, any custom gamma or color profiles in the image will be ignored. Only applies if the browser supports <code>createImageBitmap</code>.
  * @returns {Promise.<ImageBitmap>|Promise.<HTMLImageElement>|undefined} a promise that will resolve to the requested data when loaded. Returns undefined if <code>request.throttle</code> is true and the request does not have high enough priority.
  *
  *
@@ -880,9 +882,12 @@ Resource.prototype.fetchImage = function (options) {
   var preferImageBitmap = defaultValue(options.preferImageBitmap, false);
   var preferBlob = defaultValue(options.preferBlob, false);
   var flipY = defaultValue(options.flipY, false);
+  var skipColorSpaceConversion = defaultValue(
+    options.skipColorSpaceConversion,
+    false
+  );
 
   checkAndResetRequest(this.request);
-
   // We try to load the image normally if
   // 1. Blobs aren't supported
   // 2. It's a data URI
@@ -897,6 +902,7 @@ Resource.prototype.fetchImage = function (options) {
     return fetchImage({
       resource: this,
       flipY: flipY,
+      skipColorSpaceConversion: skipColorSpaceConversion,
       preferImageBitmap: preferImageBitmap,
     });
   }
@@ -925,6 +931,7 @@ Resource.prototype.fetchImage = function (options) {
         return Resource.createImageBitmapFromBlob(blob, {
           flipY: flipY,
           premultiplyAlpha: false,
+          skipColorSpaceConversion: skipColorSpaceConversion,
         });
       }
       var blobUrl = window.URL.createObjectURL(blob);
@@ -935,6 +942,7 @@ Resource.prototype.fetchImage = function (options) {
       return fetchImage({
         resource: generatedBlobResource,
         flipY: flipY,
+        skipColorSpaceConversion: skipColorSpaceConversion,
         preferImageBitmap: false,
       });
     })
@@ -976,12 +984,13 @@ Resource.prototype.fetchImage = function (options) {
  * @param {Resource} [options.resource] Resource object that points to an image to fetch.
  * @param {Boolean} [options.preferImageBitmap] If true, image will be decoded during fetch and an <code>ImageBitmap</code> is returned.
  * @param {Boolean} [options.flipY] If true, image will be vertically flipped during decode. Only applies if the browser supports <code>createImageBitmap</code>.
- *
+ * @param {Boolean} [options.skipColorSpaceConversion=false] If true, any custom gamma or color profiles in the image will be ignored. Only applies if the browser supports <code>createImageBitmap</code>.
  * @private
  */
 function fetchImage(options) {
   var resource = options.resource;
   var flipY = options.flipY;
+  var skipColorSpaceConversion = options.skipColorSpaceConversion;
   var preferImageBitmap = options.preferImageBitmap;
 
   var request = resource.request;
@@ -1000,6 +1009,7 @@ function fetchImage(options) {
       crossOrigin,
       deferred,
       flipY,
+      skipColorSpaceConversion,
       preferImageBitmap
     );
 
@@ -1026,6 +1036,7 @@ function fetchImage(options) {
         return fetchImage({
           resource: resource,
           flipY: flipY,
+          skipColorSpaceConversion: skipColorSpaceConversion,
           preferImageBitmap: preferImageBitmap,
         });
       }
@@ -1050,12 +1061,14 @@ function fetchImage(options) {
  * @param {Request} [options.request] A Request object that will be used. Intended for internal use only.
  * @param {Boolean} [options.preferBlob=false]  If true, we will load the image via a blob.
  * @param {Boolean} [options.preferImageBitmap=false] If true, image will be decoded during fetch and an <code>ImageBitmap</code> is returned.
+ * @param {Boolean} [options.skipColorSpaceConversion=false] If true, any custom gamma or color profiles in the image will be ignored. Only applies when requesting an image and the browser supports <code>createImageBitmap</code>.
  * @returns {Promise.<ImageBitmap>|Promise.<HTMLImageElement>|undefined} a promise that will resolve to the requested data when loaded. Returns undefined if <code>request.throttle</code> is true and the request does not have high enough priority.
  */
 Resource.fetchImage = function (options) {
   var resource = new Resource(options);
   return resource.fetchImage({
     flipY: options.flipY,
+    skipColorSpaceConversion: options.skipColorSpaceConversion,
     preferBlob: options.preferBlob,
     preferImageBitmap: options.preferImageBitmap,
   });
@@ -1888,6 +1901,7 @@ Resource._Implementations.createImage = function (
   crossOrigin,
   deferred,
   flipY,
+  skipColorSpaceConversion,
   preferImageBitmap
 ) {
   var url = request.url;
@@ -1940,6 +1954,7 @@ Resource._Implementations.createImage = function (
           return Resource.createImageBitmapFromBlob(blob, {
             flipY: flipY,
             premultiplyAlpha: false,
+            skipColorSpaceConversion: skipColorSpaceConversion,
           });
         })
         .then(deferred.resolve);
@@ -1956,10 +1971,15 @@ Resource.createImageBitmapFromBlob = function (blob, options) {
   Check.defined("options", options);
   Check.typeOf.bool("options.flipY", options.flipY);
   Check.typeOf.bool("options.premultiplyAlpha", options.premultiplyAlpha);
+  Check.typeOf.bool(
+    "options.skipColorSpaceConversion",
+    options.skipColorSpaceConversion
+  );
 
   return createImageBitmap(blob, {
     imageOrientation: options.flipY ? "flipY" : "none",
     premultiplyAlpha: options.premultiplyAlpha ? "premultiply" : "none",
+    colorSpaceConversion: options.skipColorSpaceConversion ? "none" : "default",
   });
 };
 

Source/Core/loadImageFromTypedArray.js

@@ -12,6 +12,10 @@ function loadImageFromTypedArray(options) {
   var format = options.format;
   var request = options.request;
   var flipY = defaultValue(options.flipY, false);
+  var skipColorSpaceConversion = defaultValue(
+    options.skipColorSpaceConversion,
+    false
+  );
   //>>includeStart('debug', pragmas.debug);
   Check.typeOf.object("uint8Array", uint8Array);
   Check.typeOf.string("format", format);
@@ -29,6 +33,7 @@ function loadImageFromTypedArray(options) {
           Resource.createImageBitmapFromBlob(blob, {
             flipY: flipY,
             premultiplyAlpha: false,
+            skipColorSpaceConversion: skipColorSpaceConversion,
           })
         );
       }
@@ -41,6 +46,7 @@ function loadImageFromTypedArray(options) {
 
       return resource.fetchImage({
         flipY: flipY,
+        skipColorSpaceConversion: skipColorSpaceConversion,
       });
     })
     .then(function (result) {

Source/Renderer/CubeMap.js

@@ -148,6 +148,10 @@ function CubeMap(options) {
     pixelFormat === PixelFormat.RGB ||
     pixelFormat === PixelFormat.LUMINANCE;
   var flipY = defaultValue(options.flipY, true);
+  var skipColorSpaceConversion = defaultValue(
+    options.skipColorSpaceConversion,
+    false
+  );
 
   var gl = context._gl;
   var textureTarget = gl.TEXTURE_CUBE_MAP;
@@ -156,7 +160,13 @@ function CubeMap(options) {
   gl.activeTexture(gl.TEXTURE0);
   gl.bindTexture(textureTarget, texture);
 
-  function createFace(target, sourceFace, preMultiplyAlpha, flipY) {
+  function createFace(
+    target,
+    sourceFace,
+    preMultiplyAlpha,
+    flipY,
+    skipColorSpaceConversion
+  ) {
     var arrayBufferView = sourceFace.arrayBufferView;
     if (!defined(arrayBufferView)) {
       arrayBufferView = sourceFace.bufferView;
@@ -173,6 +183,15 @@ function CubeMap(options) {
 
     gl.pixelStorei(gl.UNPACK_ALIGNMENT, unpackAlignment);
 
+    if (skipColorSpaceConversion) {
+      gl.pixelStorei(gl.UNPACK_COLORSPACE_CONVERSION_WEBGL, gl.NONE);
+    } else {
+      gl.pixelStorei(
+        gl.UNPACK_COLORSPACE_CONVERSION_WEBGL,
+        gl.BROWSER_DEFAULT_WEBGL
+      );
+    }
+
     if (defined(arrayBufferView)) {
       gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
       gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
@@ -219,37 +238,43 @@ function CubeMap(options) {
       gl.TEXTURE_CUBE_MAP_POSITIVE_X,
       source.positiveX,
       preMultiplyAlpha,
-      flipY
+      flipY,
+      skipColorSpaceConversion
     );
     createFace(
       gl.TEXTURE_CUBE_MAP_NEGATIVE_X,
       source.negativeX,
       preMultiplyAlpha,
-      flipY
+      flipY,
+      skipColorSpaceConversion
     );
     createFace(
       gl.TEXTURE_CUBE_MAP_POSITIVE_Y,
       source.positiveY,
       preMultiplyAlpha,
-      flipY
+      flipY,
+      skipColorSpaceConversion
     );
     createFace(
       gl.TEXTURE_CUBE_MAP_NEGATIVE_Y,
       source.negativeY,
       preMultiplyAlpha,
-      flipY
+      flipY,
+      skipColorSpaceConversion
     );
     createFace(
       gl.TEXTURE_CUBE_MAP_POSITIVE_Z,
       source.positiveZ,
       preMultiplyAlpha,
-      flipY
+      flipY,
+      skipColorSpaceConversion
     );
     createFace(
       gl.TEXTURE_CUBE_MAP_NEGATIVE_Z,
       source.negativeZ,
       preMultiplyAlpha,
-      flipY
+      flipY,
+      skipColorSpaceConversion
     );
   } else {
     gl.texImage2D(

Source/Renderer/CubeMapFace.js

@@ -54,11 +54,12 @@ Object.defineProperties(CubeMapFace.prototype, {
 
 /**
  * Copies texels from the source to the cubemap's face.
- *
- * @param {Object} source The source ImageData, HTMLImageElement, HTMLCanvasElement, HTMLVideoElement, or an object with a width, height, and typed array as shown in the example.
- * @param {Number} [xOffset=0] An offset in the x direction in the cubemap where copying begins.
- * @param {Number} [yOffset=0] An offset in the y direction in the cubemap where copying begins.
- *
+ * @param {Object} options Object with the following properties:
+ * @param {Object} options.source The source {@link ImageData}, {@link HTMLImageElement}, {@link HTMLCanvasElement}, {@link HTMLVideoElement},
+ *                              or an object with a width, height, and arrayBufferView properties.
+ * @param {Number} [options.xOffset=0] An offset in the x direction in the cubemap where copying begins.
+ * @param {Number} [options.yOffset=0] An offset in the y direction in the cubemap where copying begins.
+ * @param {Boolean} [options.skipColorSpaceConversion=false] If true, any custom gamma or color profiles in the texture will be ignored.
  * @exception {DeveloperError} xOffset must be greater than or equal to zero.
  * @exception {DeveloperError} yOffset must be greater than or equal to zero.
  * @exception {DeveloperError} xOffset + source.width must be less than or equal to width.
@@ -73,31 +74,39 @@ Object.defineProperties(CubeMapFace.prototype, {
  *   height : 1
  * });
  * cubeMap.positiveX.copyFrom({
- *   width : 1,
- *   height : 1,
- *   arrayBufferView : new Uint8Array([255, 0, 0, 255])
+ *   source: {
+ *     width : 1,
+ *     height : 1,
+ *     arrayBufferView : new Uint8Array([255, 0, 0, 255])
+ *   }
  * });
  */
-CubeMapFace.prototype.copyFrom = function (source, xOffset, yOffset) {
-  xOffset = defaultValue(xOffset, 0);
-  yOffset = defaultValue(yOffset, 0);
+CubeMapFace.prototype.copyFrom = function (options) {
+  //>>includeStart('debug', pragmas.debug);
+  Check.defined("options", options);
+  //>>includeEnd('debug');
+
+  var xOffset = defaultValue(options.xOffset, 0);
+  var yOffset = defaultValue(options.yOffset, 0);
 
   //>>includeStart('debug', pragmas.debug);
-  Check.defined("source", source);
+  Check.defined("options.source", options.source);
   Check.typeOf.number.greaterThanOrEquals("xOffset", xOffset, 0);
   Check.typeOf.number.greaterThanOrEquals("yOffset", yOffset, 0);
-  if (xOffset + source.width > this._size) {
+  if (xOffset + options.source.width > this._size) {
     throw new DeveloperError(
-      "xOffset + source.width must be less than or equal to width."
+      "xOffset + options.source.width must be less than or equal to width."
     );
   }
-  if (yOffset + source.height > this._size) {
+  if (yOffset + options.source.height > this._size) {
     throw new DeveloperError(
-      "yOffset + source.height must be less than or equal to height."
+      "yOffset + options.source.height must be less than or equal to height."
     );
   }
   //>>includeEnd('debug');
 
+  var source = options.source;
+
   var gl = this._context._gl;
   var target = this._textureTarget;
   var targetFace = this._targetFace;
@@ -116,6 +125,10 @@ CubeMapFace.prototype.copyFrom = function (source, xOffset, yOffset) {
 
   var preMultiplyAlpha = this._preMultiplyAlpha;
   var flipY = this._flipY;
+  var skipColorSpaceConversion = defaultValue(
+    options.skipColorSpaceConversion,
+    false
+  );
 
   var unpackAlignment = 4;
   if (defined(arrayBufferView)) {
@@ -128,6 +141,15 @@ CubeMapFace.prototype.copyFrom = function (source, xOffset, yOffset) {
 
   gl.pixelStorei(gl.UNPACK_ALIGNMENT, unpackAlignment);
 
+  if (skipColorSpaceConversion) {
+    gl.pixelStorei(gl.UNPACK_COLORSPACE_CONVERSION_WEBGL, gl.NONE);
+  } else {
+    gl.pixelStorei(
+      gl.UNPACK_COLORSPACE_CONVERSION_WEBGL,
+      gl.BROWSER_DEFAULT_WEBGL
+    );
+  }
+
   var uploaded = false;
   if (!this._initialized) {
     if (xOffset === 0 && yOffset === 0 && width === size && height === size) {