@cesium/engine 26.1.0 → 26.2.0

package/Source/Scene/I3SLayer.js

@@ -31,7 +31,7 @@ function I3SLayer(dataProvider, layerData, parent) {
 
   const parentUrl = this._parent.resource.getUrlComponent();
 
-  let tilesetUrl = "";
+  let tilesetUrl;
   if (parentUrl.match(/layers\/\d/)) {
     tilesetUrl = `${parentUrl}`.replace(/\/+$/, "");
   } else {

package/Source/Scene/I3SNode.js

@@ -474,9 +474,9 @@ I3SNode.prototype._create3DTileDefinition = function () {
     }
   }
 
-  let boundingVolume = {};
+  let boundingVolume;
   let position;
-  let span = 0;
+  let span;
   if (defined(obb)) {
     boundingVolume = {
       box: [

package/Source/Scene/ImageryLayerCollection.js

@@ -1,10 +1,14 @@
 import defined from "../Core/defined.js";
+import Cartesian2 from "../Core/Cartesian2.js";
+import Cartographic from "../Core/Cartographic.js";
 import destroyObject from "../Core/destroyObject.js";
 import DeveloperError from "../Core/DeveloperError.js";
 import Event from "../Core/Event.js";
+import GeographicProjection from "../Core/GeographicProjection.js";
 import CesiumMath from "../Core/Math.js";
 import Rectangle from "../Core/Rectangle.js";
 import ImageryLayer from "./ImageryLayer.js";
+import ImageryState from "./ImageryState.js";
 
 /**
  * An ordered collection of imagery layers for rendering raster imagery on a {@link Globe} or {@link Cesium3DTileset}.
@@ -452,6 +456,152 @@ ImageryLayerCollection.prototype.pickImageryLayers = function (ray, scene) {
   return imageryLayers;
 };
 
+const nativeBoundingRectangleScratch = new Rectangle();
+const nativeApplicableRectangleScratch = new Rectangle();
+const southwestNativeScratch = new Cartesian2();
+const northeastNativeScratch = new Cartesian2();
+const southwestCartographicScratch = new Cartographic();
+const northeastCartographicScratch = new Cartographic();
+
+/**
+ * Maps a texture coordinate rectangle (UV space on the primitive) back to a
+ * geographic rectangle, using the primitive cartographic bounds and the
+ * imagery tiling scheme's native coordinates.
+ *
+ * @private
+ */
+
+function computeApplicableGeographicRectangle(
+  cartographicBoundingRectangle,
+  textureCoordinateRectangle,
+  imageryLayer,
+  result,
+) {
+  const tilingScheme = imageryLayer.imageryProvider.tilingScheme;
+  const nativeBoundingRectangle = tilingScheme.rectangleToNativeRectangle(
+    cartographicBoundingRectangle,
+    nativeBoundingRectangleScratch,
+  );
+
+  const epsilon = 1 / 1024; // 1/4 of a pixel in a typical 256x256 tile.
+  const applicableNative = nativeApplicableRectangleScratch;
+  applicableNative.west = CesiumMath.lerp(
+    nativeBoundingRectangle.west,
+    nativeBoundingRectangle.east,
+    textureCoordinateRectangle.minX - epsilon,
+  );
+  applicableNative.east = CesiumMath.lerp(
+    nativeBoundingRectangle.west,
+    nativeBoundingRectangle.east,
+    textureCoordinateRectangle.maxX + epsilon,
+  );
+  applicableNative.south = CesiumMath.lerp(
+    nativeBoundingRectangle.south,
+    nativeBoundingRectangle.north,
+    textureCoordinateRectangle.minY - epsilon,
+  );
+  applicableNative.north = CesiumMath.lerp(
+    nativeBoundingRectangle.south,
+    nativeBoundingRectangle.north,
+    textureCoordinateRectangle.maxY + epsilon,
+  );
+
+  if (!defined(result)) {
+    result = new Rectangle();
+  }
+
+  const projection = tilingScheme.projection;
+  if (projection instanceof GeographicProjection) {
+    result.west = CesiumMath.toRadians(applicableNative.west);
+    result.south = CesiumMath.toRadians(applicableNative.south);
+    result.east = CesiumMath.toRadians(applicableNative.east);
+    result.north = CesiumMath.toRadians(applicableNative.north);
+    return result;
+  }
+
+  southwestNativeScratch.x = applicableNative.west;
+  southwestNativeScratch.y = applicableNative.south;
+  northeastNativeScratch.x = applicableNative.east;
+  northeastNativeScratch.y = applicableNative.north;
+
+  const southwest = projection.unproject(
+    southwestNativeScratch,
+    southwestCartographicScratch,
+  );
+  const northeast = projection.unproject(
+    northeastNativeScratch,
+    northeastCartographicScratch,
+  );
+  result.west = southwest.longitude;
+  result.south = southwest.latitude;
+  result.east = northeast.longitude;
+  result.north = northeast.latitude;
+  return result;
+}
+
+function pickModelFeatures(model, pickedLocation, callback) {
+  const modelImagery = model._modelImagery;
+
+  if (!defined(modelImagery)) {
+    return;
+  }
+
+  const modelPrimitiveImageries = modelImagery._modelPrimitiveImageries;
+
+  if (!defined(modelPrimitiveImageries)) {
+    return;
+  }
+
+  for (let j = 0; j < modelPrimitiveImageries.length; j++) {
+    const modelPrimitiveImagery = modelPrimitiveImageries[j];
+    const coveragesPerLayer = modelPrimitiveImagery._coveragesPerLayer;
+    if (!defined(coveragesPerLayer)) {
+      continue;
+    }
+
+    for (let k = coveragesPerLayer.length - 1; k >= 0; --k) {
+      const coverages = coveragesPerLayer[k];
+
+      for (let l = 0; l < coverages.length; l++) {
+        const coverage = coverages[l];
+        const imagery = coverage.imagery;
+        const imageryLayer = imagery.imageryLayer;
+        const provider = imageryLayer.imageryProvider;
+
+        if (!defined(provider.pickFeatures)) {
+          continue;
+        }
+
+        if (!defined(imagery) || imagery.state !== ImageryState.READY) {
+          continue;
+        }
+
+        if (!Rectangle.contains(imagery.rectangle, pickedLocation)) {
+          continue;
+        }
+
+        const mappedPositions =
+          modelPrimitiveImagery.mappedPositionsForImageryLayer(imageryLayer);
+        const cartographicBoundingRectangle =
+          mappedPositions.cartographicBoundingRectangle;
+
+        const applicableRectangle = computeApplicableGeographicRectangle(
+          cartographicBoundingRectangle,
+          coverage.textureCoordinateRectangle,
+          imageryLayer,
+          applicableRectangleScratch,
+        );
+
+        if (!Rectangle.contains(applicableRectangle, pickedLocation)) {
+          continue;
+        }
+
+        callback(imagery);
+      }
+    }
+  }
+}
+
 /**
  * Asynchronously determines the imagery layer features that are intersected by a pick ray.  The intersected imagery
  * layer features are found by invoking {@link ImageryProvider#pickFeatures} for each imagery layer tile intersected
@@ -485,9 +635,30 @@ ImageryLayerCollection.prototype.pickImageryLayerFeatures = function (
   scene,
 ) {
   // Find the picked location on the globe.
-  const pickedPosition = scene.globe.pick(ray, scene);
+  let pickedPosition;
+
+  if (defined(scene.globe)) {
+    pickedPosition = scene.globe.pick(ray, scene);
+  }
+
+  let pickedModel;
+
   if (!defined(pickedPosition)) {
-    return;
+    const result = scene.pickFromRay(ray);
+
+    if (!defined(result)) {
+      return undefined;
+    }
+
+    pickedPosition = result.position;
+
+    if (!defined(pickedPosition)) {
+      return undefined;
+    }
+
+    if (defined(result.object) && defined(result.object.detail)) {
+      pickedModel = result.object.detail.model;
+    }
   }
 
   const pickedLocation =
@@ -496,7 +667,7 @@ ImageryLayerCollection.prototype.pickImageryLayerFeatures = function (
   const promises = [];
   const imageryLayers = [];
 
-  pickImageryHelper(scene, pickedLocation, true, function (imagery) {
+  function queuePickFeatures(imagery) {
     if (!imagery.imageryLayer.ready) {
       return undefined;
     }
@@ -512,11 +683,24 @@ ImageryLayerCollection.prototype.pickImageryLayerFeatures = function (
       promises.push(promise);
       imageryLayers.push(imagery.imageryLayer);
     }
-  });
+  }
+
+  if (defined(scene.globe)) {
+    pickImageryHelper(scene, pickedLocation, true, function (imagery) {
+      queuePickFeatures(imagery);
+    });
+  }
+
+  if (defined(pickedModel)) {
+    pickModelFeatures(pickedModel, pickedLocation, function (imagery) {
+      queuePickFeatures(imagery);
+    });
+  }
 
   if (promises.length === 0) {
     return undefined;
   }
+
   return Promise.all(promises).then(function (results) {
     const features = [];
     for (let resultIndex = 0; resultIndex < results.length; ++resultIndex) {

package/Source/Scene/IonImageryProvider.js

@@ -26,17 +26,13 @@ import IonImageryProviderFactory from "./IonImageryProviderFactory.js";
  * @alias IonImageryProvider
  * @constructor
  *
- * @param {IonImageryProvider.ConstructorOptions} [options] Object describing initialization options
- *
  * @example
  * const imageryLayer = Cesium.ImageryLayer.fromProviderAsync(Cesium.IonImageryProvider.fromAssetId(3812));
  * viewer.imageryLayers.add(imageryLayer);
  *
  * @see IonImageryProvider.fromAssetId
  */
-function IonImageryProvider(options) {
-  options = options ?? Frozen.EMPTY_OBJECT;
-
+function IonImageryProvider() {
   this._defaultAlpha = undefined;
   this._defaultNightAlpha = undefined;
   this._defaultDayAlpha = undefined;

package/Source/Scene/Label.js

@@ -1282,10 +1282,10 @@ Label.getScreenSpaceBoundingBox = function (
   screenSpacePosition,
   result,
 ) {
-  let x = 0;
-  let y = 0;
-  let width = 0;
-  let height = 0;
+  let x;
+  let y;
+  let width;
+  let height;
   const scale = label.totalScale;
 
   const backgroundBillboard = label._backgroundBillboard;

package/Source/Scene/LabelCollection.js

@@ -335,7 +335,7 @@ function updateBackgroundBillboard(
   // Label is shown and background is hidden - remove the background billboard
   if (label.show && !showBackground) {
     backgroundBillboardCollection.remove(backgroundBillboard);
-    label._backgroundBillboard = backgroundBillboard = undefined;
+    label._backgroundBillboard = undefined;
     return;
   }
 

package/Source/Scene/MVTDataProvider.js

@@ -23,6 +23,7 @@ import defined from "../Core/defined.js";
  * This object is normally not instantiated directly, use {@link MVTDataProvider.fromUrl}.
  * </div>
  *
+ * @extends UrlTemplate3DTilesDataProvider
  * @experimental This feature is not final and is subject to change without Cesium's standard deprecation policy.
  */
 class MVTDataProvider extends UrlTemplate3DTilesDataProvider {
@@ -35,6 +36,7 @@ class MVTDataProvider extends UrlTemplate3DTilesDataProvider {
    * @param {number} [options.maxZoom=14] Maximum zoom level represented in the generated tileset.
    * @param {Rectangle} [options.extent] Optional geographic extent in radians to constrain the generated tile tree.
    * @param {string} [options.featureIdProperty] MVT property name to use as feature ID.
+   * @returns {Promise<MVTDataProvider>}
    */
   static async fromUrl(url, options) {
     return /** @type {Promise<MVTDataProvider>} */ (

package/Source/Scene/Model/B3dmLoader.js

@@ -163,7 +163,6 @@ class B3dmLoader extends ResourceLoader {
 
     const b3dm = B3dmParser.parse(this._arrayBuffer, this._byteOffset);
 
-    let batchLength = b3dm.batchLength;
     const featureTableJson = b3dm.featureTableJson;
     const featureTableBinary = b3dm.featureTableBinary;
     const batchTableJson = b3dm.batchTableJson;
@@ -173,7 +172,7 @@ class B3dmLoader extends ResourceLoader {
       featureTableJson,
       featureTableBinary,
     );
-    batchLength = featureTable.getGlobalProperty("BATCH_LENGTH");
+    const batchLength = featureTable.getGlobalProperty("BATCH_LENGTH");
     // Set batch length.
     this._batchLength = batchLength;
     // Set the RTC Center transform, if present.

package/Source/Scene/Model/EdgeVisibilityPipelineStage.js

@@ -276,15 +276,17 @@ function generateEdgeFaceNormals(edgeIndices, edgeData, edgeVisibility) {
     // No silhouette edges in this primitive, the shader only checks normals for SILHOUETTE edges.
     return edgeFaceNormals;
   }
-  const silhouetteNormalsFloat = new Float32Array(raw.length * 3);
+  // raw is a packed typed array (x0,y0,z0, x1,y1,z1, ...) of float, byte, or
+  // short components. The vectors are normalized below, which cancels the
+  // quantization scale, so raw components can be used directly for all three.
+  const normalCount = raw.length / 3;
+  const silhouetteNormalsFloat = new Float32Array(raw.length);
   const scratchNormal = new Cartesian3();
 
-  for (let i = 0; i < raw.length; i++) {
-    const vec3 = raw[i];
-    // Signed byte → float: map [-128,127] → [-1,1]
-    scratchNormal.x = 2 * ((vec3.x + 128) / 255) - 1;
-    scratchNormal.y = 2 * ((vec3.y + 128) / 255) - 1;
-    scratchNormal.z = 2 * ((vec3.z + 128) / 255) - 1;
+  for (let i = 0; i < normalCount; i++) {
+    scratchNormal.x = raw[i * 3];
+    scratchNormal.y = raw[i * 3 + 1];
+    scratchNormal.z = raw[i * 3 + 2];
 
     if (Cartesian3.magnitudeSquared(scratchNormal) > 0) {
       Cartesian3.normalize(scratchNormal, scratchNormal);
@@ -609,7 +611,7 @@ function collectVertexColors(runtimePrimitive) {
  * @param {number} edgeOtherPosLocation Shader attribute location for the other endpoint position
  * @param {number} edgeOffsetLocation Shader attribute location for edge offset (-1 or +1)
  * @param {VertexColorInfo} [vertexColorInfo] Packed per-vertex colors (optional)
- * @param {Object} edgeVisibility Edge visibility extension object (may contain silhouetteNormals[])
+ * @param {Object} edgeVisibility Edge visibility extension object (may contain silhouetteNormals, a packed typed array of VEC3 components)
  * @param {Float32Array} edgeFaceNormals Packed face normals (6 floats per edge)
  * @param {Object} [cumDistAttribute] Cumulative distance attribute
  * @param {number} [edgeCumDistLocation] Cumulative distance location

package/Source/Scene/Model/I3dmLoader.js

@@ -407,7 +407,7 @@ function createInstances(loader, components, frameState) {
   const featureIdArray = new Float32Array(instancesLength);
 
   const instancePositions = Cartesian3.unpackArray(translationTypedArray);
-  let instancePosition = new Cartesian3();
+  let instancePosition;
 
   const instanceNormalRight = new Cartesian3();
   const instanceNormalUp = new Cartesian3();

package/Source/Scene/Model/InstancingPipelineStage.js

@@ -294,13 +294,13 @@ function getModelMatrixAndNodeTransform(
   const instances = renderResources.runtimeNode.node.instances;
   if (instances.transformInWorldSpace) {
     // Replicate the multiplication order in LegacyInstancingStageVS.
-    modelMatrix = Matrix4.multiplyTransformation(
+    Matrix4.multiplyTransformation(
       model.modelMatrix,
       sceneGraph.components.transform,
       modelMatrix,
     );
 
-    nodeComputedTransform = Matrix4.multiplyTransformation(
+    Matrix4.multiplyTransformation(
       sceneGraph.axisCorrectionMatrix,
       renderResources.runtimeNode.computedTransform,
       nodeComputedTransform,
@@ -308,16 +308,13 @@ function getModelMatrixAndNodeTransform(
   } else {
     // The node transform should be pre-multiplied with the instancing transform.
     modelMatrix = Matrix4.clone(sceneGraph.computedModelMatrix, modelMatrix);
-    modelMatrix = Matrix4.multiplyTransformation(
+    Matrix4.multiplyTransformation(
       modelMatrix,
       renderResources.runtimeNode.computedTransform,
       modelMatrix,
     );
 
-    nodeComputedTransform = Matrix4.clone(
-      Matrix4.IDENTITY,
-      nodeComputedTransform,
-    );
+    Matrix4.clone(Matrix4.IDENTITY, nodeComputedTransform);
   }
 }
 

package/Source/Scene/Model/MaterialPipelineStage.js

@@ -170,13 +170,28 @@ MaterialPipelineStage.process = function (
   const disablePointCloudNormals =
     defined(model.pointCloudShading) && !model.pointCloudShading.normalShading;
 
+  if (defined(material.planarFill)) {
+    processPlanarFill(
+      material.planarFill,
+      primitive,
+      renderResources,
+      frameState,
+    );
+  }
+
+  // When backgroundFill is true (BENTLEY_materials_planar_fill), the primitive
+  // must be unlit so it matches the background color exactly.
+  const hasBackgroundFill =
+    defined(material.planarFill) && material.planarFill.backgroundFill;
+
   // Classification models will be rendered as unlit.
   const lightingOptions = renderResources.lightingOptions;
   if (
     material.unlit ||
     !hasNormals ||
     hasClassification ||
-    disablePointCloudNormals
+    disablePointCloudNormals ||
+    hasBackgroundFill
   ) {
     lightingOptions.lightingModel = LightingModel.UNLIT;
   } else {
@@ -232,6 +247,114 @@ MaterialPipelineStage.process = function (
   }
 };
 
+/**
+ * Add uniforms and defines for the BENTLEY_materials_planar_fill extension.
+ *
+ * Per the BENTLEY_materials_planar_fill spec:
+ * <ul>
+ *   <li>ALL planar primitives must render in front of non-planar (Depth Ordering).</li>
+ *   <li><code>behind</code> fills must render behind coplanar geometry from the SAME
+ *   logical object only (same feature ID from EXT_mesh_features).</li>
+ * </ul>
+ *
+ * Instead of using fixed polygon offset units (which don't scale well with
+ * logarithmic depth), we use proportional depth scaling in the shader.
+ * This approach matches the edge visibility system and scales naturally
+ * at all viewing distances.
+ *
+ * @param {ModelComponents.PlanarFill} planarFill The planar fill properties of the material
+ * @param {ModelComponents.Primitive} primitive The primitive to be rendered
+ * @param {PrimitiveRenderResources} renderResources The render resources for the primitive
+ * @param {FrameState} frameState The frame state.
+ * @private
+ */
+function processPlanarFill(planarFill, primitive, renderResources, frameState) {
+  const { uniformMap, shaderBuilder } = renderResources;
+
+  // Signal to Scene that the planar fill ID framebuffer is needed.
+  frameState.planarFillRequested = true;
+
+  // All planar fills get a proportional depth pull toward camera. Behind fills
+  // additionally sample the planar fill ID texture to test same-feature; if so,
+  // they apply a small proportional push to sit behind non-behind geometry.
+  shaderBuilder.addDefine(
+    "HAS_PLANAR_FILL_DEPTH",
+    undefined,
+    ShaderDestination.FRAGMENT,
+  );
+
+  // Configure background fill for BENTLEY_materials_planar_fill extension.
+  // When backgroundFill is true, the fill is rendered using the view's background color
+  // to create an invisible masking polygon. Lighting is forced to unlit in process().
+  //
+  // NOTE: The wireframeFill property from BENTLEY_materials_planar_fill is intentionally
+  // not handled here. CesiumJS does not yet have a proper wireframe rendering mode
+  // (debugWireframe is not a true wireframe mode), so wireframeFill is loaded as a NO-OP.
+  // When a proper wireframe mode is added to CesiumJS, wireframeFill support should be
+  // implemented here to control fill visibility in that mode. See
+  // https://github.com/CesiumGS/cesium/issues/13620.
+  if (planarFill.backgroundFill) {
+    shaderBuilder.addDefine(
+      "HAS_BACKGROUND_FILL",
+      undefined,
+      ShaderDestination.FRAGMENT,
+    );
+  }
+
+  const hasFeatureIds =
+    defined(primitive.featureIds) && primitive.featureIds.length > 0;
+  if (!hasFeatureIds) {
+    return;
+  }
+
+  // "Same logical object" is implementation-defined per the spec; this
+  // implementation uses the primitive's first feature ID set. Primitives
+  // without feature IDs (checked above) don't participate in the
+  // behind-fill same-object test.
+  const featureIdMember = primitive.featureIds[0].positionalLabel;
+  shaderBuilder.addDefine(
+    "PLANAR_FILL_FEATURE_ID",
+    featureIdMember,
+    ShaderDestination.FRAGMENT,
+  );
+
+  if (planarFill.behind) {
+    // Behind fills READ the planar fill ID texture to test whether the
+    // pixel they cover belongs to the same logical object.
+    shaderBuilder.addDefine(
+      "HAS_PLANAR_FILL_BEHIND",
+      undefined,
+      ShaderDestination.FRAGMENT,
+    );
+  } else {
+    // Non-behind fills WRITE their feature IDs to the planar fill ID
+    // texture in a pre-pass so behind fills can test same-object
+    // coplanarity. Mark this primitive for the pre-pass derived command.
+    renderResources.planarFillIdPass = true;
+
+    // Add a define so that during the pre-pass the shader outputs
+    // the feature ID instead of the normal color.
+    shaderBuilder.addDefine(
+      "HAS_PLANAR_FILL_ID_PASS",
+      undefined,
+      ShaderDestination.FRAGMENT,
+    );
+
+    // Runtime uniform to distinguish the pre-pass from the main pass
+    // (same shader program serves both commands). This default returns false
+    // for the main command; the derived pre-pass command overrides it to
+    // return true (see derivePlanarFillIdCommand in ModelDrawCommand.js).
+    shaderBuilder.addUniform(
+      "bool",
+      "u_isPlanarFillIdPass",
+      ShaderDestination.FRAGMENT,
+    );
+    uniformMap.u_isPlanarFillIdPass = function () {
+      return false;
+    };
+  }
+}
+
 /**
  * Process constant LOD extension for a texture
  *

package/Source/Scene/Model/Model.js

@@ -73,7 +73,7 @@ import ModelImagery from "./ModelImagery.js";
  *  {@link https://github.com/KhronosGroup/glTF/tree/main/extensions/2.0/Vendor/EXT_mesh_gpu_instancing|EXT_mesh_gpu_instancing}
  *  </li>
  *  <li>
- *  {@link https://github.com/KhronosGroup/glTF/pull/2514|EXT_mesh_primitive_restart}
+ *  {@link https://github.com/KhronosGroup/glTF/tree/main/extensions/2.0/Vendor/EXT_mesh_primitive_restart|EXT_mesh_primitive_restart}
  *  </li>
  *  <li>
  *  {@link https://github.com/KhronosGroup/glTF/pull/2479|EXT_mesh_primitive_edge_visibility}
@@ -105,6 +105,10 @@ import ModelImagery from "./ModelImagery.js";
  *  {@link https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_materials_unlit/README.md|KHR_materials_unlit}
  *  </li>
  *  <li>
+ *  {@link https://github.com/KhronosGroup/glTF/pull/2569|KHR_mesh_primitive_restart}
+ *  (requires a WebGL 2 context; behavior on WebGL 1 is undefined)
+ *  </li>
+ *  <li>
  *  {@link https://github.com/KhronosGroup/glTF/tree/main/extensions/2.0/Khronos/KHR_mesh_quantization|KHR_mesh_quantization}
  *  </li>
  *  <li>
@@ -269,6 +273,7 @@ function Model(options) {
    */
   this.referenceMatrix = undefined;
   this._iblReferenceFrameMatrix = Matrix3.clone(Matrix3.IDENTITY); // Derived from reference matrix and the current view matrix
+  this._clippingPlanesMatrix = Matrix4.clone(Matrix4.IDENTITY); // Derived from the reference matrix and the clipping planes' own model matrix
 
   this._resourcesLoaded = false;
   this._drawCommandsBuilt = false;
@@ -380,7 +385,6 @@ function Model(options) {
     this._clippingPlanes = clippingPlanes;
   }
   this._clippingPlanesState = 0; // If this value changes, the shaders need to be regenerated.
-  this._clippingPlanesMatrix = Matrix4.clone(Matrix4.IDENTITY); // Derived from reference matrix and the current view matrix
 
   // If the given clipping polygons don't have an owner, make this model its owner.
   // Otherwise, the clipping polygons are passed down from a tileset.
@@ -2479,16 +2483,10 @@ function updateReferenceMatrices(model, frameState) {
   );
 
   if (model.isClippingEnabled()) {
-    let clippingPlanesMatrix = scratchClippingPlanesMatrix;
-    clippingPlanesMatrix = Matrix4.multiply(
-      context.uniformState.view3D,
+    const clippingPlanesMatrix = Matrix4.multiply(
       referenceMatrix,
-      clippingPlanesMatrix,
-    );
-    clippingPlanesMatrix = Matrix4.multiply(
-      clippingPlanesMatrix,
       model._clippingPlanes.modelMatrix,
-      clippingPlanesMatrix,
+      scratchClippingPlanesMatrix,
     );
     model._clippingPlanesMatrix = Matrix4.inverseTranspose(
       clippingPlanesMatrix,

package/Source/Scene/Model/ModelClippingPlanesPipelineStage.js

@@ -2,6 +2,7 @@ import Cartesian2 from "../../Core/Cartesian2.js";
 import ClippingPlaneCollection from "../ClippingPlaneCollection.js";
 import combine from "../../Core/combine.js";
 import Color from "../../Core/Color.js";
+import Matrix4 from "../../Core/Matrix4.js";
 import ModelClippingPlanesStageFS from "../../Shaders/Model/ModelClippingPlanesStageFS.js";
 import ShaderDestination from "../../Renderer/ShaderDestination.js";
 
@@ -17,6 +18,9 @@ const ModelClippingPlanesPipelineStage = {
 };
 
 const textureResolutionScratch = new Cartesian2();
+const scratchClippingPlanesMatrix = new Matrix4();
+const scratchClippingPlanesMatrix2 = new Matrix4();
+
 /**
  * Process a model. This modifies the following parts of the render resources:
  *
@@ -116,7 +120,30 @@ ModelClippingPlanesPipelineStage.process = function (
       return style;
     },
     model_clippingPlanesMatrix: function () {
-      return model._clippingPlanesMatrix;
+      // The clipping planes matrix is factored into a view-dependent and a
+      // view-independent part:
+      //   inverseTranspose(view3D * reference * clipping)
+      //     = transpose(inverseView3D) * inverseTranspose(reference * clipping).
+      //
+      // The view-dependent part, transpose(inverseView3D), reuses inverseView3D
+      // already maintained on UniformState. Since it uses the active view, this is
+      // also correct in the shadow cast pass, where inverseView3D is the light's
+      // view rather than the camera's. Only a transpose is needed here, no inverse.
+      const inverseViewTranspose = Matrix4.transpose(
+        context.uniformState.inverseView3D,
+        scratchClippingPlanesMatrix,
+      );
+      // The view-independent part, inverseTranspose(reference * clipping), is
+      // computed once per frame in Model.updateReferenceMatrices.
+      //
+      // This recomputes the same product for every primitive of a model within
+      // a pass. If it ever shows up in profiling, see the discussion of
+      // alternatives in https://github.com/CesiumGS/cesium/pull/13388.
+      return Matrix4.multiply(
+        inverseViewTranspose,
+        model._clippingPlanesMatrix,
+        scratchClippingPlanesMatrix2,
+      );
     },
   };