@rtzh/engine 0.0.4 → 0.0.5

package/Source/Scene/Cesium3DTileset.js

@@ -63,6 +63,7 @@ import Cesium3DTilesetSkipTraversal from "./Cesium3DTilesetSkipTraversal.js";
 import Ray from "../Core/Ray.js";
 import DynamicEnvironmentMapManager from "./DynamicEnvironmentMapManager.js";
 import ImageryLayerCollection from "./ImageryLayerCollection.js";
+import Cesium3DTileStyle from "./Cesium3DTileStyle.js";
 
 /**
  * @typedef {object} Cesium3DTileset.ConstructorOptions
@@ -949,6 +950,12 @@ function Cesium3DTileset(options) {
    */
   this.debugWireframe = options.debugWireframe ?? false;
 
+  this._wireframeOriginalStyle = undefined;
+  this._wireframeOriginalColorBlendMode = this.colorBlendMode;
+  this._debugWireframeLineWidth = options.debugWireframeLineWidth ?? 1.0;
+  this._debugWireframeMode = options.debugWireframeMode ?? "lines";
+  this._debugWireframeOverlay = options.debugWireframeOverlay ?? false;
+
   // Warning for improper setup of debug wireframe
   if (this.debugWireframe === true && this._enableDebugWireframe === false) {
     oneTimeWarning(
@@ -1092,6 +1099,71 @@ Object.defineProperties(Cesium3DTileset.prototype, {
     },
   },
 
+  /**
+   * This property is for debugging only; it is not optimized for production use.
+   * <p>
+   * The line width to use when rendering the tileset in wireframe mode.
+   * This only applies when <code>debugWireframeMode</code> is set to "barycentric".
+   * For "lines" mode, the line width is limited by the browser's WebGL implementation.
+   * </p>
+   *
+   * @memberof Cesium3DTileset.prototype
+   *
+   * @type {number}
+   * @default 1.0
+   */
+  debugWireframeLineWidth: {
+    get: function () {
+      return this._debugWireframeLineWidth;
+    },
+    set: function (value) {
+      this._debugWireframeLineWidth = value;
+    },
+  },
+
+  /**
+   * This property is for debugging only; it is not optimized for production use.
+   * <p>
+   * The mode to use when rendering the tileset in wireframe mode.
+   * </p>
+   *
+   * @memberof Cesium3DTileset.prototype
+   *
+   * @type {"lines" | "barycentric"}
+   * @default "lines"
+   */
+  debugWireframeMode: {
+    get: function () {
+      return this._debugWireframeMode;
+    },
+    set: function (value) {
+      this._debugWireframeMode = value;
+    },
+  },
+
+  /**
+   * This property is for debugging only; it is not optimized for production use.
+   * <p>
+   * When <code>true</code>, the wireframe color is overlaid on top of the tileset's
+   * original material. When <code>false</code>, the wireframe color replaces the
+   * tileset's original material entirely. Only applies when <code>debugWireframeMode</code>
+   * is set to "barycentric".
+   * </p>
+   *
+   * @memberof Cesium3DTileset.prototype
+   *
+   * @type {boolean}
+   * @default false
+   */
+  debugWireframeOverlay: {
+    get: function () {
+      return this._debugWireframeOverlay;
+    },
+    set: function (value) {
+      this._debugWireframeOverlay = value;
+    },
+  },
+
   /**
    * Gets the tileset's asset object property, which contains metadata about the tileset.
    * <p>
@@ -3929,4 +4001,105 @@ Cesium3DTileset.prototype.isGltfExtensionRequired = function (
  * @param {number} time The time of interpolation generally in the range <code>[0.0, 1.0]</code>.
  * @returns {number} The interpolated value.
  */
+
+/**
+ * Displays the tileset in wireframe mode.
+ * <p>
+ * Only affects this tileset; other tilesets in the scene remain unchanged.
+ * </p>
+ * <p>
+ * For WebGL1 environments using "lines" mode, <code>enableDebugWireframe</code>
+ * must be set to <code>true</code> when the tileset is created, otherwise this method
+ * will have no effect. The "barycentric" mode works without enableDebugWireframe.
+ * </p>
+ *
+ * @param {object} [options] Optional parameters for wireframe display
+ * @param {Color} [options.color=Color.WHITE] A color to apply to all features
+ * @param {Cesium3DTileColorBlendMode} [options.colorBlendMode=Cesium3DTileColorBlendMode.REPLACE] How the color blends with features
+ * @param {"lines" | "barycentric"} [options.mode="lines"] The wireframe rendering mode
+ * @param {boolean} [options.overlay=false] If true, wireframe color is overlaid on top of the tileset's original material (only applies to barycentric mode)
+ * @returns {Cesium3DTileset} This tileset instance, to allow chaining of method calls.
+ *
+ * @see Cesium3DTileset#hideWireframe
+ * @see Cesium3DTileset#toggleWireframe
+ * @see Cesium3DTileset#debugWireframe
+ */
+Cesium3DTileset.prototype.showWireframe = function ({
+  color = Color.WHITE,
+  colorBlendMode = Cesium3DTileColorBlendMode.REPLACE,
+  lineWidth = 1.0,
+  mode = "lines",
+  overlay = false,
+} = {}) {
+  if (!this.debugWireframe) {
+    this._wireframeOriginalStyle = this.style;
+    this._wireframeOriginalColorBlendMode = this.colorBlendMode;
+  }
+
+  this.colorBlendMode = colorBlendMode;
+  this.style = new Cesium3DTileStyle({
+    color: color.toCssColorString(),
+  });
+  this.debugWireframeLineWidth = lineWidth;
+  this.debugWireframeMode = mode;
+  this.debugWireframeOverlay = overlay;
+  this.debugWireframe = true;
+
+  return this;
+};
+
+/**
+ * Hides the tileset's wireframe, restoring it to normal rendering mode.
+ * <p>
+ * Only affects this tileset; other tilesets in the scene remain unchanged.
+ * </p>
+ *
+ * @returns {Cesium3DTileset} This tileset instance, to allow chaining of method calls.
+ *
+ * @see Cesium3DTileset#showWireframe
+ * @see Cesium3DTileset#toggleWireframe
+ * @see Cesium3DTileset#debugWireframe
+ */
+Cesium3DTileset.prototype.hideWireframe = function () {
+  this.debugWireframe = false;
+  this.colorBlendMode = this._wireframeOriginalColorBlendMode;
+  this.style = this._wireframeOriginalStyle;
+
+  return this;
+};
+
+/**
+ * Toggles the tileset's wireframe display state.
+ * <p>
+ * If the tileset is currently in wireframe mode, it will be switched to normal
+ * mode, and vice versa. Only affects this tileset; other tilesets in the scene
+ * remain unchanged.
+ * </p>
+ * <p>
+ * For WebGL1 environments using "lines" mode, <code>enableDebugWireframe</code>
+ * must be set to <code>true</code> when the tileset is created, otherwise enabling
+ * wireframe will have no effect. The "barycentric" mode works without enableDebugWireframe.
+ * </p>
+ *
+ * @param {object} [options] Optional parameters for wireframe display (only applied when switching to wireframe mode)
+ * @param {Color} [options.color=Color.WHITE] A color to apply to all features
+ * @param {Cesium3DTileColorBlendMode} [options.colorBlendMode=Cesium3DTileColorBlendMode.REPLACE] How the color blends with features
+ * @param {"lines" | "barycentric"} [options.mode="lines"] The wireframe rendering mode
+ * @param {boolean} [options.overlay=false] If true, wireframe color is overlaid on top of the tileset's original material (only applies to barycentric mode)
+ * @returns {boolean} <code>true</code> if the tileset is now displayed in
+ *          wireframe mode, <code>false</code> if it is in normal mode.
+ *
+ * @see Cesium3DTileset#showWireframe
+ * @see Cesium3DTileset#hideWireframe
+ * @see Cesium3DTileset#debugWireframe
+ */
+Cesium3DTileset.prototype.toggleWireframe = function (options) {
+  if (this.debugWireframe) {
+    this.hideWireframe();
+  } else {
+    this.showWireframe(options);
+  }
+  return this.debugWireframe;
+};
+
 export default Cesium3DTileset;

package/Source/Scene/Model/BarycentricWireframePipelineStage.js

@@ -0,0 +1,176 @@
+import Buffer from "../../Renderer/Buffer.js";
+import BufferUsage from "../../Renderer/BufferUsage.js";
+import Color from "../../Core/Color.js";
+import ComponentDatatype from "../../Core/ComponentDatatype.js";
+import defined from "../../Core/defined.js";
+import IndexDatatype from "../../Core/IndexDatatype.js";
+import ModelUtility from "./ModelUtility.js";
+import PrimitiveType from "../../Core/PrimitiveType.js";
+import ShaderDestination from "../../Renderer/ShaderDestination.js";
+import VertexAttributeSemantic from "../VertexAttributeSemantic.js";
+
+const BarycentricWireframePipelineStage = {
+  name: "BarycentricWireframePipelineStage",
+};
+
+BarycentricWireframePipelineStage.process = function (
+  renderResources,
+  primitive,
+  frameState,
+) {
+  const shaderBuilder = renderResources.shaderBuilder;
+  const model = renderResources.model;
+
+  const barycentricAttributeLocation = shaderBuilder.addAttribute(
+    "vec3",
+    "a_barycentric",
+  );
+
+  shaderBuilder.addDefine(
+    "HAS_BARYCENTRIC_WIREFRAME",
+    undefined,
+    ShaderDestination.FRAGMENT,
+  );
+
+  if (model.debugWireframeOverlay) {
+    shaderBuilder.addDefine(
+      "WIREFRAME_OVERLAY",
+      undefined,
+      ShaderDestination.FRAGMENT,
+    );
+  }
+
+  shaderBuilder.addVarying("vec3", "v_barycentric");
+
+  shaderBuilder.addUniform(
+    "float",
+    "u_wireframeWidth",
+    ShaderDestination.FRAGMENT,
+  );
+  shaderBuilder.addUniform(
+    "vec4",
+    "u_wireframeColor",
+    ShaderDestination.FRAGMENT,
+  );
+
+  const stageUniforms = renderResources.uniformMap;
+  stageUniforms.u_wireframeWidth = function () {
+    return model.debugWireframeLineWidth ?? 1.0;
+  };
+  stageUniforms.u_wireframeColor = function () {
+    return defined(model.color) ? model.color : Color.WHITE;
+  };
+
+  addBarycentricAttribute(
+    renderResources,
+    primitive,
+    barycentricAttributeLocation,
+    frameState,
+  );
+};
+
+function getOriginalIndices(primitive, indices, frameState) {
+  const positionAttribute = ModelUtility.getAttributeBySemantic(
+    primitive,
+    VertexAttributeSemantic.POSITION,
+  );
+  const vertexCount = positionAttribute.count;
+  const webgl2 = frameState.context.webgl2;
+
+  let originalIndices;
+  if (defined(indices)) {
+    const indicesBuffer = indices.buffer;
+    const indicesCount = indices.count;
+    if (defined(indicesBuffer) && webgl2) {
+      const useUint8Array = indicesBuffer.sizeInBytes === indicesCount;
+      originalIndices = useUint8Array
+        ? new Uint8Array(indicesCount)
+        : IndexDatatype.createTypedArray(vertexCount, indicesCount);
+
+      indicesBuffer.getBufferData(originalIndices);
+    } else {
+      originalIndices = indices.typedArray;
+    }
+  }
+  return originalIndices;
+}
+
+function addBarycentricAttribute(
+  renderResources,
+  primitive,
+  attributeLocation,
+  frameState,
+) {
+  const positionAttribute = ModelUtility.getAttributeBySemantic(
+    primitive,
+    VertexAttributeSemantic.POSITION,
+  );
+  const vertexCount = positionAttribute.count;
+  const indices = renderResources.indices;
+  const originalIndices = getOriginalIndices(primitive, indices, frameState);
+
+  const barycentricValues = new Float32Array(vertexCount * 3);
+
+  if (defined(originalIndices)) {
+    const indexCount = indices.count;
+    const primitiveType = primitive.primitiveType;
+
+    if (PrimitiveType.isTriangles(primitiveType)) {
+      for (let i = 0; i < indexCount; i += 3) {
+        const i0 = originalIndices[i];
+        const i1 = originalIndices[i + 1];
+        const i2 = originalIndices[i + 2];
+
+        barycentricValues[i0 * 3] = 1.0;
+        barycentricValues[i0 * 3 + 1] = 0.0;
+        barycentricValues[i0 * 3 + 2] = 0.0;
+
+        barycentricValues[i1 * 3] = 0.0;
+        barycentricValues[i1 * 3 + 1] = 1.0;
+        barycentricValues[i1 * 3 + 2] = 0.0;
+
+        barycentricValues[i2 * 3] = 0.0;
+        barycentricValues[i2 * 3 + 1] = 0.0;
+        barycentricValues[i2 * 3 + 2] = 1.0;
+      }
+    }
+  } else {
+    for (let i = 0; i < vertexCount; i += 3) {
+      const baseIndex = i * 3;
+      barycentricValues[baseIndex] = 1.0;
+      barycentricValues[baseIndex + 1] = 0.0;
+      barycentricValues[baseIndex + 2] = 0.0;
+
+      barycentricValues[baseIndex + 3] = 0.0;
+      barycentricValues[baseIndex + 4] = 1.0;
+      barycentricValues[baseIndex + 5] = 0.0;
+
+      barycentricValues[baseIndex + 6] = 0.0;
+      barycentricValues[baseIndex + 7] = 0.0;
+      barycentricValues[baseIndex + 8] = 1.0;
+    }
+  }
+
+  const barycentricBuffer = Buffer.createVertexBuffer({
+    context: frameState.context,
+    typedArray: barycentricValues,
+    usage: BufferUsage.STATIC_DRAW,
+  });
+
+  const model = renderResources.model;
+  model._pipelineResources.push(barycentricBuffer);
+
+  const barycentricAttribute = {
+    index: attributeLocation,
+    vertexBuffer: barycentricBuffer,
+    componentsPerAttribute: 3,
+    componentDatatype: ComponentDatatype.FLOAT,
+    offsetInBytes: 0,
+    strideInBytes: 0,
+    normalize: false,
+  };
+
+  renderResources.attributes.push(barycentricAttribute);
+}
+
+export default BarycentricWireframePipelineStage;

package/Source/Scene/Model/Model.js

@@ -1,4 +1,4 @@
-import BoundingSphere from "../../Core/BoundingSphere.js";
+import BoundingSphere from "../../Core/BoundingSphere.js";
 import Cartesian3 from "../../Core/Cartesian3.js";
 import Cartographic from "../../Core/Cartographic.js";
 import Check from "../../Core/Check.js";
@@ -417,6 +417,9 @@ function Model(options) {
   this._enableDebugWireframe = options.enableDebugWireframe ?? false;
   this._enableShowOutline = options.enableShowOutline ?? true;
   this._debugWireframe = options.debugWireframe ?? false;
+  this._debugWireframeLineWidth = options.debugWireframeLineWidth ?? 1.0;
+  this._debugWireframeMode = options.debugWireframeMode ?? "lines";
+  this._debugWireframeOverlay = options.debugWireframeOverlay ?? false;
 
   // Warning for improper setup of debug wireframe
   if (
@@ -1194,7 +1197,8 @@ Object.defineProperties(Model.prototype, {
       if (
         this._debugWireframe === true &&
         this._enableDebugWireframe === false &&
-        this.type === ModelType.GLTF
+        this.type === ModelType.GLTF &&
+        this._debugWireframeMode === "lines"
       ) {
         oneTimeWarning(
           "model-debug-wireframe-ignored",
@@ -1204,6 +1208,80 @@ Object.defineProperties(Model.prototype, {
     },
   },
 
+  /**
+   * This property is for debugging only; it is not optimized for production use.
+   * <p>
+   * The line width to use when rendering the model in wireframe mode.
+   * This only applies when <code>debugWireframeMode</code> is set to "barycentric".
+   * For "lines" mode, the line width is limited by the browser's WebGL implementation.
+   * </p>
+   *
+   * @memberof Model.prototype
+   *
+   * @type {number}
+   * @default 1.0
+   */
+  debugWireframeLineWidth: {
+    get: function () {
+      return this._debugWireframeLineWidth;
+    },
+    set: function (value) {
+      if (this._debugWireframeLineWidth !== value) {
+        this._debugWireframeLineWidth = value;
+        this.resetDrawCommands();
+      }
+    },
+  },
+
+  /**
+   * This property is for debugging only; it is not optimized for production use.
+   * <p>
+   * The mode to use when rendering the model in wireframe mode.
+   * </p>
+   *
+   * @memberof Model.prototype
+   *
+   * @type {"lines" | "barycentric"}
+   * @default "lines"
+   */
+  debugWireframeMode: {
+    get: function () {
+      return this._debugWireframeMode;
+    },
+    set: function (value) {
+      if (this._debugWireframeMode !== value) {
+        this._debugWireframeMode = value;
+        this.resetDrawCommands();
+      }
+    },
+  },
+
+  /**
+   * This property is for debugging only; it is not optimized for production use.
+   * <p>
+   * When <code>true</code>, the wireframe color is overlaid on top of the model's
+   * original material. When <code>false</code>, the wireframe color replaces the
+   * model's original material entirely. Only applies when <code>debugWireframeMode</code>
+   * is set to "barycentric".
+   * </p>
+   *
+   * @memberof Model.prototype
+   *
+   * @type {boolean}
+   * @default false
+   */
+  debugWireframeOverlay: {
+    get: function () {
+      return this._debugWireframeOverlay;
+    },
+    set: function (value) {
+      if (this._debugWireframeOverlay !== value) {
+        this._debugWireframeOverlay = value;
+        this.resetDrawCommands();
+      }
+    },
+  },
+
   /**
    * Whether or not to render the model.
    *
@@ -1868,6 +1946,100 @@ Model.prototype.resetDrawCommands = function () {
   this._drawCommandsBuilt = false;
 };
 
+/**
+ * Displays the model in wireframe mode.
+ * <p>
+ * Only affects this model; other models in the scene remain unchanged.
+ * </p>
+ * <p>
+ * For WebGL1 environments using "lines" mode, <code>enableDebugWireframe</code>
+ * must be set to <code>true</code> when the model is loaded, otherwise this method
+ * will have no effect. The "barycentric" mode works without enableDebugWireframe.
+ * </p>
+ *
+ * @param {object} [options] Optional parameters for wireframe display
+ * @param {Color} [options.color=Color.WHITE] A color to apply to the model while in wireframe mode
+ * @param {ColorBlendMode} [options.colorBlendMode=ColorBlendMode.REPLACE] How the color blends with the model
+ * @param {"lines" | "barycentric"} [options.mode="lines"] The wireframe rendering mode
+ * @param {boolean} [options.overlay=false] If true, wireframe color is overlaid on top of the model's original material (only applies to barycentric mode)
+ * @returns {Model} This model instance, to allow chaining of method calls.
+ *
+ * @see Model#hideWireframe
+ * @see Model#toggleWireframe
+ * @see Model#debugWireframe
+ */
+Model.prototype.showWireframe = function ({
+  color = Color.WHITE,
+  colorBlendMode = ColorBlendMode.REPLACE,
+  lineWidth = 1.0,
+  mode = "lines",
+  overlay = false,
+} = {}) {
+  this.color = Color.clone(color);
+  this.colorBlendMode = colorBlendMode;
+  this.debugWireframeLineWidth = lineWidth;
+  this.debugWireframeMode = mode;
+  this.debugWireframeOverlay = overlay;
+  this._drawCommandsBuilt = false;
+  this.debugWireframe = true;
+  return this;
+};
+
+/**
+ * Hides the model's wireframe, restoring it to normal rendering mode.
+ * <p>
+ * Only affects this model; other models in the scene remain unchanged.
+ * </p>
+ *
+ * @returns {Model} This model instance, to allow chaining of method calls.
+ *
+ * @see Model#showWireframe
+ * @see Model#toggleWireframe
+ * @see Model#debugWireframe
+ */
+Model.prototype.hideWireframe = function () {
+  this.colorBlendMode = ColorBlendMode.HIGHLIGHT;
+  this.color = undefined;
+  this._drawCommandsBuilt = false;
+  this.debugWireframe = false;
+  return this;
+};
+
+/**
+ * Toggles the model's wireframe display state.
+ * <p>
+ * If the model is currently in wireframe mode, it will be switched to normal
+ * mode, and vice versa. Only affects this model; other models in the scene
+ * remain unchanged.
+ * </p>
+ * <p>
+ * For WebGL1 environments using "lines" mode, <code>enableDebugWireframe</code>
+ * must be set to <code>true</code> when the model is loaded, otherwise enabling
+ * wireframe will have no effect. The "barycentric" mode works without enableDebugWireframe.
+ * </p>
+ *
+ * @param {object} [options] Optional parameters for wireframe display (only applied when switching to wireframe mode)
+ * @param {Color} [options.color=Color.WHITE] A color to apply to the model while in wireframe mode
+ * @param {ColorBlendMode} [options.colorBlendMode=ColorBlendMode.REPLACE] How the color blends with the model
+ * @param {"lines" | "barycentric"} [options.mode="lines"] The wireframe rendering mode
+ * @param {boolean} [options.overlay=false] If true, wireframe color is overlaid on top of the model's original material (only applies to barycentric mode)
+ * @returns {boolean} <code>true</code> if the model is now displayed in
+ *          wireframe mode, <code>false</code> if it is in normal mode.
+ *
+ * @see Model#showWireframe
+ * @see Model#hideWireframe
+ * @see Model#debugWireframe
+ */
+Model.prototype.toggleWireframe = function (options) {
+  options = options || {};
+  if (this._debugWireframe) {
+    this.hideWireframe();
+  } else {
+    this.showWireframe(options);
+  }
+  return this._debugWireframe;
+};
+
 const scratchIBLReferenceFrameMatrix4 = new Matrix4();
 const scratchIBLReferenceFrameMatrix3 = new Matrix3();
 const scratchClippingPlanesMatrix = new Matrix4();

package/Source/Scene/Model/Model3DTileContent.js

@@ -1,4 +1,4 @@
-import Color from "../../Core/Color.js";
+import Color from "../../Core/Color.js";
 import combine from "../../Core/combine.js";
 import defined from "../../Core/defined.js";
 import destroyObject from "../../Core/destroyObject.js";
@@ -270,10 +270,24 @@ Model3DTileContent.prototype.update = function (tileset, frameState) {
   model.showCreditsOnScreen = tileset.showCreditsOnScreen;
   model.splitDirection = tileset.splitDirection;
   model.debugWireframe = tileset.debugWireframe;
+  model.debugWireframeLineWidth = tileset.debugWireframeLineWidth;
+  model.debugWireframeMode = tileset.debugWireframeMode;
+  model.debugWireframeOverlay = tileset.debugWireframeOverlay;
   model.showOutline = tileset.showOutline;
   model.outlineColor = tileset.outlineColor;
   model.pointCloudShading = tileset.pointCloudShading;
 
+  // Sync color from tileset style to model for barycentric wireframe shader
+  if (tileset.debugWireframe) {
+    const tilesetStyle = tileset.style;
+    if (defined(tilesetStyle) && defined(tilesetStyle.color)) {
+      const evaluatedColor = tilesetStyle.color.evaluateColor(undefined);
+      if (defined(evaluatedColor)) {
+        model.color = evaluatedColor;
+      }
+    }
+  }
+
   // Updating clipping planes requires more effort because of ownership checks
   const tilesetClippingPlanes = tileset.clippingPlanes;
   model.referenceMatrix = tileset.clippingPlanesOriginMatrix;
@@ -538,6 +552,9 @@ function makeModelOptions(tileset, tile, content, additionalOptions) {
     splitDirection: tileset.splitDirection,
     enableDebugWireframe: tileset._enableDebugWireframe,
     debugWireframe: tileset.debugWireframe,
+    debugWireframeLineWidth: tileset.debugWireframeLineWidth,
+    debugWireframeMode: tileset.debugWireframeMode,
+    debugWireframeOverlay: tileset.debugWireframeOverlay,
     projectTo2D: tileset._projectTo2D,
     enablePick: tileset._enablePick,
     enableShowOutline: tileset._enableShowOutline,

package/Source/Scene/Model/ModelRuntimePrimitive.js

@@ -1,4 +1,4 @@
-import Check from "../../Core/Check.js";
+import Check from "../../Core/Check.js";
 import Frozen from "../../Core/Frozen.js";
 import defined from "../../Core/defined.js";
 import PrimitiveType from "../../Core/PrimitiveType.js";
@@ -30,6 +30,7 @@ import SelectedFeatureIdPipelineStage from "./SelectedFeatureIdPipelineStage.js"
 import SkinningPipelineStage from "./SkinningPipelineStage.js";
 import VerticalExaggerationPipelineStage from "./VerticalExaggerationPipelineStage.js";
 import WireframePipelineStage from "./WireframePipelineStage.js";
+import BarycentricWireframePipelineStage from "./BarycentricWireframePipelineStage.js";
 import oneTimeWarning from "../../Core/oneTimeWarning.js";
 
 /**
@@ -229,11 +230,17 @@ ModelRuntimePrimitive.prototype.configurePipeline = function (frameState) {
   const generateWireframeIndices =
     model.debugWireframe &&
     PrimitiveType.isTriangles(primitive.primitiveType) &&
+    model.debugWireframeMode === "lines" &&
     // Generating index buffers for wireframes is always possible in WebGL2.
     // However, this will only work in WebGL1 if the model was constructed with
     // enableDebugWireframe set to true.
     (model._enableDebugWireframe || useWebgl2);
 
+  const generateBarycentricWireframe =
+    model.debugWireframe &&
+    PrimitiveType.isTriangles(primitive.primitiveType) &&
+    model.debugWireframeMode === "barycentric";
+
   const pointCloudShading = model.pointCloudShading;
   const hasAttenuation =
     defined(pointCloudShading) && pointCloudShading.attenuation;
@@ -263,6 +270,10 @@ ModelRuntimePrimitive.prototype.configurePipeline = function (frameState) {
     pipelineStages.push(WireframePipelineStage);
   }
 
+  if (generateBarycentricWireframe) {
+    pipelineStages.push(BarycentricWireframePipelineStage);
+  }
+
   if (hasClassification) {
     pipelineStages.push(ClassificationPipelineStage);
   }

package/Source/Scene/Model/WireframePipelineStage.js

@@ -36,6 +36,12 @@ WireframePipelineStage.process = function (
   primitive,
   frameState,
 ) {
+  const model = renderResources.model;
+
+  if (model.debugWireframeMode === "barycentric") {
+    return;
+  }
+
   // Applying normal mapping to the lines will result in rendering
   // errors on Linux. This define is added to disable normal
   // mapping in the shader.
@@ -45,8 +51,6 @@ WireframePipelineStage.process = function (
     undefined,
     ShaderDestination.FRAGMENT,
   );
-
-  const model = renderResources.model;
   const wireframeIndexBuffer = createWireframeIndexBuffer(
     primitive,
     renderResources.indices,