Merge pull request #8972 from CesiumGS/webgl2-clipping

Pass internalFormat to gl.texImage2D for WebGL 2
CesiumGS · Jun 19, 2020 · 45fa059 · 45fa059
2 parents 46ed0ca + ac20c7e
commit 45fa059
Show file tree

Hide file tree

Showing 5 changed files with 89 additions and 62 deletions.
diff --git a/CHANGES.md b/CHANGES.md
@@ -16,6 +16,7 @@
 - Fixed artifact for skinned model when log depth is enabled. [#6447](https://github.com/CesiumGS/cesium/issues/6447)
 - Fixed a bug where certain rhumb arc polylines would lead to a crash. [#8787](https://github.com/CesiumGS/cesium/pull/8787)
 - Fixed handling of Label's backgroundColor and backgroundPadding option [#8949](https://github.com/CesiumGS/cesium/8949)
+- Fixed an error of applying clip planes to globe when enabling WebGL 2.0 [#7712](https://github.com/CesiumGS/cesium/issues/7712)
 - Fixed a bug where half-float texture doesn't have correct WebGL 2.0 parameter [#8975](https://github.com/CesiumGS/cesium/pull/8975)
 
 ### 1.70.1 - 2020-06-10

diff --git a/Source/Core/PixelFormat.js b/Source/Core/PixelFormat.js
@@ -369,4 +369,55 @@ PixelFormat.flipY = function (
   return flipped;
 };
 
+/**
+ * @private
+ */
+PixelFormat.toInternalFormat = function (pixelFormat, pixelDatatype, context) {
+  // WebGL 1 require internalFormat to be the same as PixelFormat
+  if (!context.webgl2) {
+    return pixelFormat;
+  }
+
+  // Convert pixelFormat to correct internalFormat for WebGL 2
+  if (pixelFormat === PixelFormat.DEPTH_STENCIL) {
+    return WebGLConstants.DEPTH24_STENCIL8;
+  }
+
+  if (pixelFormat === PixelFormat.DEPTH_COMPONENT) {
+    if (pixelDatatype === PixelDatatype.UNSIGNED_SHORT) {
+      return WebGLConstants.DEPTH_COMPONENT16;
+    } else if (pixelDatatype === PixelDatatype.UNSIGNED_INT) {
+      return WebGLConstants.DEPTH_COMPONENT24;
+    }
+  }
+
+  if (pixelDatatype === PixelDatatype.FLOAT) {
+    switch (pixelFormat) {
+      case PixelFormat.RGBA:
+        return WebGLConstants.RGBA32F;
+      case PixelFormat.RGB:
+        return WebGLConstants.RGB32F;
+      case PixelFormat.RG:
+        return WebGLConstants.RG32F;
+      case PixelFormat.R:
+        return WebGLConstants.R32F;
+    }
+  }
+
+  if (pixelDatatype === PixelDatatype.HALF_FLOAT) {
+    switch (pixelFormat) {
+      case PixelFormat.RGBA:
+        return WebGLConstants.RGBA16F;
+      case PixelFormat.RGB:
+        return WebGLConstants.RGB16F;
+      case PixelFormat.RG:
+        return WebGLConstants.RG16F;
+      case PixelFormat.R:
+        return WebGLConstants.R16F;
+    }
+  }
+
+  return pixelFormat;
+};
+
 export default Object.freeze(PixelFormat);
diff --git a/Source/Renderer/CubeMap.js b/Source/Renderer/CubeMap.js
@@ -74,11 +74,16 @@ function CubeMap(options) {
   }
 
   var size = width;
-  var pixelFormat = defaultValue(options.pixelFormat, PixelFormat.RGBA);
   var pixelDatatype = defaultValue(
     options.pixelDatatype,
     PixelDatatype.UNSIGNED_BYTE
   );
+  var pixelFormat = defaultValue(options.pixelFormat, PixelFormat.RGBA);
+  var internalFormat = PixelFormat.toInternalFormat(
+    pixelFormat,
+    pixelDatatype,
+    context
+  );
 
   //>>includeStart('debug', pragmas.debug);
   if (!defined(width) || !defined(height)) {
@@ -184,7 +189,7 @@ function CubeMap(options) {
       gl.texImage2D(
         target,
         0,
-        pixelFormat,
+        internalFormat,
         size,
         size,
         0,
@@ -201,7 +206,7 @@ function CubeMap(options) {
       gl.texImage2D(
         target,
         0,
-        pixelFormat,
+        internalFormat,
         pixelFormat,
         PixelDatatype.toWebGLConstant(pixelDatatype, context),
         sourceFace
@@ -250,7 +255,7 @@ function CubeMap(options) {
     gl.texImage2D(
       gl.TEXTURE_CUBE_MAP_POSITIVE_X,
       0,
-      pixelFormat,
+      internalFormat,
       size,
       size,
       0,
@@ -261,7 +266,7 @@ function CubeMap(options) {
     gl.texImage2D(
       gl.TEXTURE_CUBE_MAP_NEGATIVE_X,
       0,
-      pixelFormat,
+      internalFormat,
       size,
       size,
       0,
@@ -272,7 +277,7 @@ function CubeMap(options) {
     gl.texImage2D(
       gl.TEXTURE_CUBE_MAP_POSITIVE_Y,
       0,
-      pixelFormat,
+      internalFormat,
       size,
       size,
       0,
@@ -283,7 +288,7 @@ function CubeMap(options) {
     gl.texImage2D(
       gl.TEXTURE_CUBE_MAP_NEGATIVE_Y,
       0,
-      pixelFormat,
+      internalFormat,
       size,
       size,
       0,
@@ -294,7 +299,7 @@ function CubeMap(options) {
     gl.texImage2D(
       gl.TEXTURE_CUBE_MAP_POSITIVE_Z,
       0,
-      pixelFormat,
+      internalFormat,
       size,
       size,
       0,
@@ -305,7 +310,7 @@ function CubeMap(options) {
     gl.texImage2D(
       gl.TEXTURE_CUBE_MAP_NEGATIVE_Z,
       0,
-      pixelFormat,
+      internalFormat,
       size,
       size,
       0,
@@ -335,6 +340,7 @@ function CubeMap(options) {
     texture,
     textureTarget,
     gl.TEXTURE_CUBE_MAP_POSITIVE_X,
+    internalFormat,
     pixelFormat,
     pixelDatatype,
     size,
@@ -347,6 +353,7 @@ function CubeMap(options) {
     texture,
     textureTarget,
     gl.TEXTURE_CUBE_MAP_NEGATIVE_X,
+    internalFormat,
     pixelFormat,
     pixelDatatype,
     size,
@@ -359,6 +366,7 @@ function CubeMap(options) {
     texture,
     textureTarget,
     gl.TEXTURE_CUBE_MAP_POSITIVE_Y,
+    internalFormat,
     pixelFormat,
     pixelDatatype,
     size,
@@ -371,6 +379,7 @@ function CubeMap(options) {
     texture,
     textureTarget,
     gl.TEXTURE_CUBE_MAP_NEGATIVE_Y,
+    internalFormat,
     pixelFormat,
     pixelDatatype,
     size,
@@ -383,6 +392,7 @@ function CubeMap(options) {
     texture,
     textureTarget,
     gl.TEXTURE_CUBE_MAP_POSITIVE_Z,
+    internalFormat,
     pixelFormat,
     pixelDatatype,
     size,
@@ -395,6 +405,7 @@ function CubeMap(options) {
     texture,
     textureTarget,
     gl.TEXTURE_CUBE_MAP_NEGATIVE_Z,
+    internalFormat,
     pixelFormat,
     pixelDatatype,
     size,

diff --git a/Source/Renderer/CubeMapFace.js b/Source/Renderer/CubeMapFace.js
@@ -13,6 +13,7 @@ function CubeMapFace(
   texture,
   textureTarget,
   targetFace,
+  internalFormat,
   pixelFormat,
   pixelDatatype,
   size,
@@ -24,8 +25,9 @@ function CubeMapFace(
   this._texture = texture;
   this._textureTarget = textureTarget;
   this._targetFace = targetFace;
-  this._pixelFormat = pixelFormat;
   this._pixelDatatype = pixelDatatype;
+  this._internalFormat = internalFormat;
+  this._pixelFormat = pixelFormat;
   this._size = size;
   this._preMultiplyAlpha = preMultiplyAlpha;
   this._flipY = flipY;
@@ -109,6 +111,7 @@ CubeMapFace.prototype.copyFrom = function (source, xOffset, yOffset) {
 
   var size = this._size;
   var pixelFormat = this._pixelFormat;
+  var internalFormat = this._internalFormat;
   var pixelDatatype = this._pixelDatatype;
 
   var preMultiplyAlpha = this._preMultiplyAlpha;
@@ -145,7 +148,7 @@ CubeMapFace.prototype.copyFrom = function (source, xOffset, yOffset) {
         gl.texImage2D(
           targetFace,
           0,
-          pixelFormat,
+          internalFormat,
           size,
           size,
           0,
@@ -161,7 +164,7 @@ CubeMapFace.prototype.copyFrom = function (source, xOffset, yOffset) {
         gl.texImage2D(
           targetFace,
           0,
-          pixelFormat,
+          internalFormat,
           pixelFormat,
           PixelDatatype.toWebGLConstant(pixelDatatype, this._context),
           source
@@ -182,7 +185,7 @@ CubeMapFace.prototype.copyFrom = function (source, xOffset, yOffset) {
       gl.texImage2D(
         targetFace,
         0,
-        pixelFormat,
+        internalFormat,
         size,
         size,
         0,

diff --git a/Source/Renderer/Texture.js b/Source/Renderer/Texture.js
@@ -7,7 +7,6 @@ import destroyObject from "../Core/destroyObject.js";
 import DeveloperError from "../Core/DeveloperError.js";
 import CesiumMath from "../Core/Math.js";
 import PixelFormat from "../Core/PixelFormat.js";
-import WebGLConstants from "../Core/WebGLConstants.js";
 import ContextLimits from "./ContextLimits.js";
 import MipmapHint from "./MipmapHint.js";
 import PixelDatatype from "./PixelDatatype.js";
@@ -44,54 +43,14 @@ function Texture(options) {
     options.pixelDatatype,
     PixelDatatype.UNSIGNED_BYTE
   );
-  var internalFormat = pixelFormat;
+  var internalFormat = PixelFormat.toInternalFormat(
+    pixelFormat,
+    pixelDatatype,
+    context
+  );
 
   var isCompressed = PixelFormat.isCompressedFormat(internalFormat);
 
-  if (context.webgl2) {
-    if (pixelFormat === PixelFormat.DEPTH_STENCIL) {
-      internalFormat = WebGLConstants.DEPTH24_STENCIL8;
-    } else if (pixelFormat === PixelFormat.DEPTH_COMPONENT) {
-      if (pixelDatatype === PixelDatatype.UNSIGNED_SHORT) {
-        internalFormat = WebGLConstants.DEPTH_COMPONENT16;
-      } else if (pixelDatatype === PixelDatatype.UNSIGNED_INT) {
-        internalFormat = WebGLConstants.DEPTH_COMPONENT24;
-      }
-    }
-
-    if (pixelDatatype === PixelDatatype.FLOAT) {
-      switch (pixelFormat) {
-        case PixelFormat.RGBA:
-          internalFormat = WebGLConstants.RGBA32F;
-          break;
-        case PixelFormat.RGB:
-          internalFormat = WebGLConstants.RGB32F;
-          break;
-        case PixelFormat.RG:
-          internalFormat = WebGLConstants.RG32F;
-          break;
-        case PixelFormat.R:
-          internalFormat = WebGLConstants.R32F;
-          break;
-      }
-    } else if (pixelDatatype === PixelDatatype.HALF_FLOAT) {
-      switch (pixelFormat) {
-        case PixelFormat.RGBA:
-          internalFormat = WebGLConstants.RGBA16F;
-          break;
-        case PixelFormat.RGB:
-          internalFormat = WebGLConstants.RGB16F;
-          break;
-        case PixelFormat.RG:
-          internalFormat = WebGLConstants.RG16F;
-          break;
-        case PixelFormat.R:
-          internalFormat = WebGLConstants.R16F;
-          break;
-      }
-    }
-  }
-
   //>>includeStart('debug', pragmas.debug);
   if (!defined(width) || !defined(height)) {
     throw new DeveloperError(
@@ -378,6 +337,7 @@ function Texture(options) {
   this._textureFilterAnisotropic = context._textureFilterAnisotropic;
   this._textureTarget = textureTarget;
   this._texture = texture;
+  this._internalFormat = internalFormat;
   this._pixelFormat = pixelFormat;
   this._pixelDatatype = pixelDatatype;
   this._width = width;
@@ -699,6 +659,7 @@ Texture.prototype.copyFrom = function (source, xOffset, yOffset) {
 
   var textureWidth = this._width;
   var textureHeight = this._height;
+  var internalFormat = this._internalFormat;
   var pixelFormat = this._pixelFormat;
   var pixelDatatype = this._pixelDatatype;
 
@@ -741,7 +702,7 @@ Texture.prototype.copyFrom = function (source, xOffset, yOffset) {
         gl.texImage2D(
           target,
           0,
-          pixelFormat,
+          internalFormat,
           textureWidth,
           textureHeight,
           0,
@@ -757,7 +718,7 @@ Texture.prototype.copyFrom = function (source, xOffset, yOffset) {
         gl.texImage2D(
           target,
           0,
-          pixelFormat,
+          internalFormat,
           pixelFormat,
           PixelDatatype.toWebGLConstant(pixelDatatype, context),
           source
@@ -778,7 +739,7 @@ Texture.prototype.copyFrom = function (source, xOffset, yOffset) {
       gl.texImage2D(
         target,
         0,
-        pixelFormat,
+        internalFormat,
         textureWidth,
         textureHeight,
         0,