Add support for GLTF extension: EXT_mesh_primitive_edge_visibility

CHANGES.md

@@ -15,6 +15,7 @@
 
 #### Additions :tada:
 
+- Added support for the [EXT_mesh_primitive_edge_visibility](https://github.com/KhronosGroup/glTF/pull/2479) glTF extension. [#12765](https://github.com/CesiumGS/cesium/issues/12765)
 - Adds an async factory method for the Material class that allows callers to wait on resource loading. [#10566](https://github.com/CesiumGS/cesium/issues/10566)
 
 ## 1.133.1 - 2025-09-08

CONTRIBUTORS.md

@@ -102,6 +102,7 @@ See [CONTRIBUTING.md](CONTRIBUTING.md) for details on how to contribute to Cesiu
   - [Paul Connelly](https://github.com/pmconne)
   - [Jason Crow](https://github.com/jason-crow)
   - [Erin Ingram](https://github.com/eringram)
+  - [Daniel Zhong](https://github.com/danielzhong)
   - [Mark Schlosser](https://github.com/markschlosseratbentley)
 - [Flightradar24 AB](https://www.flightradar24.com)
   - [Aleksei Kalmykov](https://github.com/kalmykov)

Specs/getWebGLStub.js

@@ -154,6 +154,11 @@ const instancedArraysStub = {
   vertexAttribDivisorANGLE: noop,
 };
 
+// WEBGL_draw_buffers
+const drawBuffersStub = {
+  drawBuffersWEBGL: noop,
+};
+
 function noop() {}
 
 function createStub() {
@@ -208,6 +213,11 @@ function getExtensionStub(name) {
     return {};
   }
 
+  // EdgeFramebuffer and other MRT features require draw buffers
+  if (name === "WEBGL_draw_buffers") {
+    return drawBuffersStub;
+  }
+
   // No other extensions are stubbed.
   return null;
 }

packages/engine/Source/Renderer/AutomaticUniforms.js

@@ -161,6 +161,67 @@ const AutomaticUniforms = {
     },
   }),
 
+  /**
+   * An automatic GLSL uniform representing a texture containing edge IDs
+   * from the 3D Tiles edge rendering pass. Used for edge detection and
+   * avoiding z-fighting between edges and surfaces.
+   *
+   * @example
+   * // GLSL declaration
+   * uniform sampler2D czm_edgeIdTexture;
+   *
+   * // Get the edge ID at the current fragment
+   * vec2 coords = gl_FragCoord.xy / czm_viewport.zw;
+   * vec4 edgeId = texture(czm_edgeIdTexture, coords);
+   */
+  czm_edgeIdTexture: new AutomaticUniform({
+    size: 1,
+    datatype: WebGLConstants.SAMPLER_2D,
+    getValue: function (uniformState) {
+      return uniformState.edgeIdTexture;
+    },
+  }),
+
+  /**
+   * An automatic GLSL uniform containing the edge color texture.
+   * This texture contains the edge content rendered during the CESIUM_3D_TILE_EDGES pass.
+   *
+   * @example
+   * // GLSL declaration
+   * uniform sampler2D czm_edgeColorTexture;
+   *
+   * // Sample the edge color at the current fragment
+   * vec2 coords = gl_FragCoord.xy / czm_viewport.zw;
+   * vec4 edgeColor = texture(czm_edgeColorTexture, coords);
+   */
+  czm_edgeColorTexture: new AutomaticUniform({
+    size: 1,
+    datatype: WebGLConstants.SAMPLER_2D,
+    getValue: function (uniformState) {
+      return uniformState.edgeColorTexture;
+    },
+  }),
+
+  /**
+   * An automatic GLSL uniform containing the packed depth texture produced by the
+   * edge visibility pass. The depth is packed via czm_packDepth and should be
+   * unpacked with czm_unpackDepth.
+   *
+   * @example
+   * // GLSL declaration
+   * uniform sampler2D czm_edgeDepthTexture;
+   *
+   * vec2 coords = gl_FragCoord.xy / czm_viewport.zw;
+   * float d = czm_unpackDepth(texture(czm_edgeDepthTexture, coords));
+   */
+  czm_edgeDepthTexture: new AutomaticUniform({
+    size: 1,
+    datatype: WebGLConstants.SAMPLER_2D,
+    getValue: function (uniformState) {
+      return uniformState.edgeDepthTexture;
+    },
+  }),
+
   /**
    * An automatic GLSL uniform representing a 4x4 model transformation matrix that
    * transforms model coordinates to world coordinates.

packages/engine/Source/Renderer/Pass.js

@@ -15,14 +15,15 @@ const Pass = {
   COMPUTE: 1,
   GLOBE: 2,
   TERRAIN_CLASSIFICATION: 3,
-  CESIUM_3D_TILE: 4,
-  CESIUM_3D_TILE_CLASSIFICATION: 5,
-  CESIUM_3D_TILE_CLASSIFICATION_IGNORE_SHOW: 6,
-  OPAQUE: 7,
-  TRANSLUCENT: 8,
-  VOXELS: 9,
-  GAUSSIAN_SPLATS: 10,
-  OVERLAY: 11,
-  NUMBER_OF_PASSES: 12,
+  CESIUM_3D_TILE_EDGES: 4,
+  CESIUM_3D_TILE: 5,
+  CESIUM_3D_TILE_CLASSIFICATION: 6,
+  CESIUM_3D_TILE_CLASSIFICATION_IGNORE_SHOW: 7,
+  OPAQUE: 8,
+  TRANSLUCENT: 9,
+  VOXELS: 10,
+  GAUSSIAN_SPLATS: 11,
+  OVERLAY: 12,
+  NUMBER_OF_PASSES: 13,
 };
 export default Object.freeze(Pass);

packages/engine/Source/Renderer/UniformState.js

@@ -25,6 +25,18 @@ function UniformState() {
    * @type {Texture}
    */
   this.globeDepthTexture = undefined;
+  /**
+   * @type {Texture}
+   */
+  this.edgeIdTexture = undefined;
+  /**
+   * @type {Texture}
+   */
+  this.edgeColorTexture = undefined;
+  /**
+   * @type {Texture}
+   */
+  this.edgeDepthTexture = undefined; // packed depth color attachment from edge pass
   /**
    * @type {number}
    */

packages/engine/Source/Scene/EdgeFramebuffer.js

@@ -0,0 +1,245 @@
+import defined from "../Core/defined.js";
+import destroyObject from "../Core/destroyObject.js";
+import PixelFormat from "../Core/PixelFormat.js";
+import Color from "../Core/Color.js";
+import PixelDatatype from "../Renderer/PixelDatatype.js";
+import FramebufferManager from "../Renderer/FramebufferManager.js";
+import ClearCommand from "../Renderer/ClearCommand.js";
+
+/**
+ * Creates and manages framebuffers for edge visibility rendering.
+ *
+ * @param {Object} options Object with the following properties:
+ *
+ * @alias EdgeFramebuffer
+ * @constructor
+ *
+ * @private
+ */
+function EdgeFramebuffer(options) {
+  options = options || {};
+
+  // Create framebuffer manager with multiple render targets (MRT)
+  // Color attachment 0: edge color output (visualization / debug)
+  // Color attachment 1: R: edge type, G: featureId (metadata / ids)
+  // Color attachment 2: packed depth (czm_packDepth) for edge fragments
+  this._framebufferManager = new FramebufferManager({
+    colorAttachmentsLength: 3, // MRT: Color + ID + Depth (packed RGBA)
+    createColorAttachments: true,
+    depthStencil: true,
+    supportsDepthTexture: true,
+    color: true,
+  });
+
+  this._framebuffer = undefined;
+  this._colorTexture = undefined;
+  this._idTexture = undefined;
+  this._depthTexture = undefined; // packed depth color attachment (location = 2)
+  this._depthStencilTexture = undefined;
+
+  this._clearCommand = new ClearCommand({
+    color: new Color(0.0, 0.0, 0.0, 0.0),
+    depth: 1.0,
+    stencil: 0,
+    owner: this,
+  });
+}
+
+Object.defineProperties(EdgeFramebuffer.prototype, {
+  /**
+   * Gets the framebuffer for edge rendering.
+   * @memberof EdgeFramebuffer.prototype
+   * @type {Framebuffer}
+   * @readonly
+   */
+  framebuffer: {
+    get: function () {
+      return this._framebuffer;
+    },
+  },
+
+  /**
+   * Gets the color texture.
+   * @memberof EdgeFramebuffer.prototype
+   * @type {Texture}
+   * @readonly
+   */
+  colorTexture: {
+    get: function () {
+      return this._colorTexture;
+    },
+  },
+
+  /**
+   * Gets the ID texture.
+   * @memberof EdgeFramebuffer.prototype
+   * @type {Texture}
+   * @readonly
+   */
+  idTexture: {
+    get: function () {
+      return this._idTexture;
+    },
+  },
+
+  /**
+   * Gets the packed depth texture written during the edge pass.
+   * @memberof EdgeFramebuffer.prototype
+   * @type {Texture}
+   * @readonly
+   */
+  depthTexture: {
+    get: function () {
+      return this._depthTexture;
+    },
+  },
+
+  /**
+   * Gets the depth-stencil texture.
+   * @memberof EdgeFramebuffer.prototype
+   * @type {Texture}
+   * @readonly
+   */
+  depthStencilTexture: {
+    get: function () {
+      return this._depthStencilTexture;
+    },
+  },
+});
+
+/**
+ * Updates the framebuffer.
+ *
+ * @param {Context} context The context.
+ * @param {Viewport} viewport The viewport.
+ * @param {boolean} hdr Whether HDR is enabled.
+ * @param {Texture} [existingColorTexture] Optional existing color texture to reuse.
+ * @param {Texture} [existingDepthTexture] Optional existing depth texture to reuse.
+ *
+ * @returns {boolean} True if the framebuffer was updated; otherwise, false.
+ */
+EdgeFramebuffer.prototype.update = function (
+  context,
+  viewport,
+  hdr,
+  existingColorTexture,
+  existingDepthTexture,
+) {
+  const width = viewport.width;
+  const height = viewport.height;
+
+  const pixelDatatype = hdr
+    ? context.halfFloatingPointTexture
+      ? PixelDatatype.HALF_FLOAT
+      : PixelDatatype.FLOAT
+    : PixelDatatype.UNSIGNED_BYTE;
+
+  const changed = this._framebufferManager.update(
+    context,
+    width,
+    height,
+    1, // No MSAA
+    pixelDatatype,
+    PixelFormat.RGBA,
+  );
+
+  // Always assign framebuffer if FramebufferManager has one
+  if (this._framebufferManager.framebuffer) {
+    this._framebuffer = this._framebufferManager.framebuffer;
+
+    // Get the textures from the framebuffer manager or use existing ones
+    this._colorTexture = defined(existingColorTexture)
+      ? existingColorTexture
+      : this._framebufferManager.getColorTexture(0); // Color attachment 0
+    this._idTexture = this._framebufferManager.getColorTexture(1); // Color attachment 1: ID texture
+    this._depthTexture = this._framebufferManager.getColorTexture(2); // Color attachment 2: packed depth
+    this._depthStencilTexture = defined(existingDepthTexture)
+      ? existingDepthTexture
+      : this._framebufferManager.getDepthStencilTexture();
+  }
+
+  return changed;
+};
+
+/**
+ * Clears the framebuffer using ClearCommand.
+ * @deprecated Use getClearCommand() instead for proper MRT clearing.
+ *
+ * @param {Context} context The context.
+ * @param {PassState} passState The pass state.
+ * @param {Color} clearColor The clear color.
+ */
+EdgeFramebuffer.prototype.clear = function (context, passState, clearColor) {
+  const clearCommand = this.getClearCommand(clearColor);
+  clearCommand.execute(context, passState);
+};
+
+/**
+ * Gets the clear command for this framebuffer.
+ *
+ * @param {Color} [clearColor] The clear color to use. If undefined, uses the default.
+ * @returns {ClearCommand} The clear command.
+ */
+EdgeFramebuffer.prototype.getClearCommand = function (clearColor) {
+  this._clearCommand.framebuffer = this._framebuffer;
+
+  if (defined(clearColor)) {
+    Color.clone(clearColor, this._clearCommand.color);
+  }
+
+  return this._clearCommand;
+};
+
+/**
+ * Gets the edge framebuffer, creating it if necessary.
+ *
+ * @param {Context} context The context.
+ * @param {Viewport} viewport The viewport.
+ * @param {Texture} [existingColorTexture] Optional existing color texture to reuse.
+ * @param {Texture} [existingDepthTexture] Optional existing depth texture to reuse.
+ *
+ * @returns {Framebuffer} The edge framebuffer.
+ */
+EdgeFramebuffer.prototype.getFramebuffer = function (
+  context,
+  viewport,
+  existingColorTexture,
+  existingDepthTexture,
+) {
+  this.update(
+    context,
+    viewport,
+    false,
+    existingColorTexture,
+    existingDepthTexture,
+  );
+  return this._framebuffer;
+};
+
+/**
+ * Returns true if this object was destroyed; otherwise, false.
+ *
+ * @returns {boolean} True if this object was destroyed; otherwise, false.
+ */
+EdgeFramebuffer.prototype.isDestroyed = function () {
+  return false;
+};
+
+/**
+ * Destroys the WebGL resources held by this object.  Destroying an object allows for deterministic
+ * release of WebGL resources, instead of relying on the garbage collector to destroy this object.
+ * <br /><br />
+ * Once an object is destroyed, it should not be used; calling any function other than
+ * <code>isDestroyed</code> will result in a {@link DeveloperError} exception.  Therefore,
+ * assign the return value (<code>undefined</code>) to the object as done in the example.
+ *
+ * @exception {DeveloperError} This object was destroyed, i.e., destroy() was called.
+ */
+EdgeFramebuffer.prototype.destroy = function () {
+  this._framebufferManager =
+    this._framebufferManager && this._framebufferManager.destroy();
+  this._clearCommand = undefined;
+  return destroyObject(this);
+};
+
+export default EdgeFramebuffer;