@rtzh/engine 0.0.3 → 0.0.5

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,

package/Source/Shaders/Model/ModelFS.glsl

@@ -128,6 +128,18 @@ void main()
     // When not picking metadata END
     //========================================================================
 
+    #ifdef HAS_BARYCENTRIC_WIREFRAME
+    vec3 d = fwidth(v_barycentric);
+    vec3 a3 = smoothstep(vec3(0.0), d * u_wireframeWidth, v_barycentric);
+    float edge = min(min(a3.x, a3.y), a3.z);
+
+    #ifdef WIREFRAME_OVERLAY
+    color.rgb = mix(u_wireframeColor.rgb, color.rgb, edge);
+    #else
+    color = mix(u_wireframeColor, color, edge);
+    #endif
+    #endif
+
     out_FragColor = color;
 }
 

package/Source/Shaders/Model/ModelFS.js

@@ -128,6 +128,18 @@ void main()\n\
     #endif\n\
     // When not picking metadata END\n\
     //========================================================================\n\
+\n\
+    #ifdef HAS_BARYCENTRIC_WIREFRAME\n\
+    vec3 d = fwidth(v_barycentric);\n\
+    vec3 a3 = smoothstep(vec3(0.0), d * u_wireframeWidth, v_barycentric);\n\
+    float edge = min(min(a3.x, a3.y), a3.z);\n\
+\n\
+    #ifdef WIREFRAME_OVERLAY\n\
+    color.rgb = mix(u_wireframeColor.rgb, color.rgb, edge);\n\
+    #else\n\
+    color = mix(u_wireframeColor, color, edge);\n\
+    #endif\n\
+    #endif\n\
 \n\
     out_FragColor = color;\n\
 }\n\

package/Source/Shaders/Model/ModelVS.glsl

@@ -158,4 +158,8 @@ void main()
     #ifdef HAS_POINT_CLOUD_SHOW_STYLE
     v_pointCloudShow = show;
     #endif
+
+    #ifdef HAS_BARYCENTRIC_WIREFRAME
+    v_barycentric = a_barycentric;
+    #endif
 }

package/Source/Shaders/Model/ModelVS.js

@@ -159,5 +159,9 @@ void main()\n\
     #ifdef HAS_POINT_CLOUD_SHOW_STYLE\n\
     v_pointCloudShow = show;\n\
     #endif\n\
+\n\
+    #ifdef HAS_BARYCENTRIC_WIREFRAME\n\
+    v_barycentric = a_barycentric;\n\
+    #endif\n\
 }\n\
 ";

package/index.d.ts

@@ -29492,6 +29492,32 @@ export class Cesium3DTileset {
      * Function for examining vector lines as they are being streamed.
      */
     examineVectorLinesFunction: (...params: any[]) => any;
+    /**
+     * 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>
+     */
+    debugWireframeLineWidth: number;
+    /**
+     * 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>
+     */
+    debugWireframeMode: "lines" | "barycentric";
+    /**
+     * 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>
+     */
+    debugWireframeOverlay: boolean;
     /**
      * Gets the tileset's asset object property, which contains metadata about the tileset.
     <p>
@@ -29906,6 +29932,63 @@ export class Cesium3DTileset {
      * @returns The height of the cartographic or undefined if it could not be found.
      */
     getHeight(cartographic: Cartographic, scene: Scene): number | undefined;
+    /**
+     * 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 [options] - Optional parameters for wireframe display
+     * @param [options.color = Color.WHITE] - A color to apply to all features
+     * @param [options.colorBlendMode = Cesium3DTileColorBlendMode.REPLACE] - How the color blends with features
+     * @param [options.mode = "lines"] - The wireframe rendering mode
+     * @param [options.overlay = false] - If true, wireframe color is overlaid on top of the tileset's original material (only applies to barycentric mode)
+     * @returns This tileset instance, to allow chaining of method calls.
+     */
+    showWireframe(options?: {
+        color?: Color;
+        colorBlendMode?: Cesium3DTileColorBlendMode;
+        mode?: "lines" | "barycentric";
+        overlay?: boolean;
+    }): Cesium3DTileset;
+    /**
+     * 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 This tileset instance, to allow chaining of method calls.
+     */
+    hideWireframe(): Cesium3DTileset;
+    /**
+     * 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 [options] - Optional parameters for wireframe display (only applied when switching to wireframe mode)
+     * @param [options.color = Color.WHITE] - A color to apply to all features
+     * @param [options.colorBlendMode = Cesium3DTileColorBlendMode.REPLACE] - How the color blends with features
+     * @param [options.mode = "lines"] - The wireframe rendering mode
+     * @param [options.overlay = false] - If true, wireframe color is overlaid on top of the tileset's original material (only applies to barycentric mode)
+     * @returns <code>true</code> if the tileset is now displayed in
+             wireframe mode, <code>false</code> if it is in normal mode.
+     */
+    toggleWireframe(options?: {
+        color?: Color;
+        colorBlendMode?: Cesium3DTileColorBlendMode;
+        mode?: "lines" | "barycentric";
+        overlay?: boolean;
+    }): boolean;
 }
 
 /**
@@ -38688,6 +38771,32 @@ export class Model {
     </p>
      */
     debugWireframe: boolean;
+    /**
+     * 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>
+     */
+    debugWireframeLineWidth: number;
+    /**
+     * 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>
+     */
+    debugWireframeMode: "lines" | "barycentric";
+    /**
+     * 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>
+     */
+    debugWireframeOverlay: boolean;
     /**
      * Whether or not to render the model.
      */
@@ -38863,6 +38972,63 @@ export class Model {
     to re-evaluate the style in the next frame the model is visible.
      */
     makeStyleDirty(): void;
+    /**
+     * 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 [options] - Optional parameters for wireframe display
+     * @param [options.color = Color.WHITE] - A color to apply to the model while in wireframe mode
+     * @param [options.colorBlendMode = ColorBlendMode.REPLACE] - How the color blends with the model
+     * @param [options.mode = "lines"] - The wireframe rendering mode
+     * @param [options.overlay = false] - If true, wireframe color is overlaid on top of the model's original material (only applies to barycentric mode)
+     * @returns This model instance, to allow chaining of method calls.
+     */
+    showWireframe(options?: {
+        color?: Color;
+        colorBlendMode?: ColorBlendMode;
+        mode?: "lines" | "barycentric";
+        overlay?: boolean;
+    }): Model;
+    /**
+     * 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 This model instance, to allow chaining of method calls.
+     */
+    hideWireframe(): Model;
+    /**
+     * 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 [options] - Optional parameters for wireframe display (only applied when switching to wireframe mode)
+     * @param [options.color = Color.WHITE] - A color to apply to the model while in wireframe mode
+     * @param [options.colorBlendMode = ColorBlendMode.REPLACE] - How the color blends with the model
+     * @param [options.mode = "lines"] - The wireframe rendering mode
+     * @param [options.overlay = false] - If true, wireframe color is overlaid on top of the model's original material (only applies to barycentric mode)
+     * @returns <code>true</code> if the model is now displayed in
+             wireframe mode, <code>false</code> if it is in normal mode.
+     */
+    toggleWireframe(options?: {
+        color?: Color;
+        colorBlendMode?: ColorBlendMode;
+        mode?: "lines" | "barycentric";
+        overlay?: boolean;
+    }): boolean;
     /**
      * Called when {@link Viewer} or {@link CesiumWidget} render the scene to
     get the draw commands needed to render this primitive.