@cesium/engine 8.0.0 → 9.1.0

package/Source/Scene/Globe.js

@@ -28,7 +28,6 @@ import ImageryLayerCollection from "./ImageryLayerCollection.js";
 import QuadtreePrimitive from "./QuadtreePrimitive.js";
 import SceneMode from "./SceneMode.js";
 import ShadowMode from "./ShadowMode.js";
-import deprecationWarning from "../Core/deprecationWarning.js";
 
 /**
  * The globe rendered in the scene, including its terrain ({@link Globe#terrainProvider})
@@ -341,10 +340,6 @@ function Globe(ellipsoid) {
    */
   this.atmosphereBrightnessShift = 0.0;
 
-  this._terrainExaggerationChanged = false;
-  this._terrainExaggeration = 1.0;
-  this._terrainExaggerationRelativeHeight = 0.0;
-
   /**
    * Whether to show terrain skirts. Terrain skirts are geometry extending downwards from a tile's edges used to hide seams between neighboring tiles.
    * Skirts are always hidden when the camera is underground or translucency is enabled.
@@ -454,6 +449,20 @@ Object.defineProperties(Globe.prototype, {
       this._surface.tileProvider.clippingPlanes = value;
     },
   },
+  /**
+   * A property specifying a {@link ClippingPolygonCollection} used to selectively disable rendering inside or outside a list of polygons.
+   *
+   * @memberof Globe.prototype
+   * @type {ClippingPolygonCollection}
+   */
+  clippingPolygons: {
+    get: function () {
+      return this._surface.tileProvider.clippingPolygons;
+    },
+    set: function (value) {
+      this._surface.tileProvider.clippingPolygons = value;
+    },
+  },
   /**
    * A property specifying a {@link Rectangle} used to limit globe rendering to a cartographic area.
    * Defaults to the maximum extent of cartographic coordinates.
@@ -523,68 +532,6 @@ Object.defineProperties(Globe.prototype, {
       return this._terrainProviderChanged;
     },
   },
-  /**
-   * A scalar used to exaggerate the terrain. Defaults to <code>1.0</code> (no exaggeration).
-   * A value of <code>2.0</code> scales the terrain by 2x.
-   * A value of <code>0.0</code> makes the terrain completely flat.
-   * Note that terrain exaggeration will not modify any other primitive as they are positioned relative to the ellipsoid.
-   *
-   * @memberof Globe.prototype
-   * @type {number}
-   * @default 1.0
-   *
-   * @deprecated
-   */
-  terrainExaggeration: {
-    get: function () {
-      deprecationWarning(
-        "Globe.terrainExaggeration",
-        "Globe.terrainExaggeration was deprecated in CesiumJS 1.113.  It will be removed in CesiumJS 1.116. Use Scene.verticalExaggeration instead."
-      );
-      return this._terrainExaggeration;
-    },
-    set: function (value) {
-      deprecationWarning(
-        "Globe.terrainExaggeration",
-        "Globe.terrainExaggeration was deprecated in CesiumJS 1.113.  It will be removed in CesiumJS 1.116. Use Scene.verticalExaggeration instead."
-      );
-      if (value !== this._terrainExaggeration) {
-        this._terrainExaggeration = value;
-        this._terrainExaggerationChanged = true;
-      }
-    },
-  },
-  /**
-   * The height from which terrain is exaggerated. Defaults to <code>0.0</code> (scaled relative to ellipsoid surface).
-   * Terrain that is above this height will scale upwards and terrain that is below this height will scale downwards.
-   * Note that terrain exaggeration will not modify any other primitive as they are positioned relative to the ellipsoid.
-   * If {@link Globe#terrainExaggeration} is <code>1.0</code> this value will have no effect.
-   *
-   * @memberof Globe.prototype
-   * @type {number}
-   * @default 0.0
-   *
-   * @deprecated
-   */
-  terrainExaggerationRelativeHeight: {
-    get: function () {
-      deprecationWarning(
-        "Globe.terrainExaggerationRelativeHeight",
-        "Globe.terrainExaggerationRelativeHeight was deprecated in CesiumJS 1.113.  It will be removed in CesiumJS 1.116. Use Scene.verticalExaggerationRelativeHeight instead."
-      );
-      return this._terrainExaggerationRelativeHeight;
-    },
-    set: function (value) {
-      deprecationWarning(
-        "Globe.terrainExaggerationRelativeHeight",
-        "Globe.terrainExaggerationRelativeHeight was deprecated in CesiumJS 1.113.  It will be removed in CesiumJS 1.116. Use Scene.verticalExaggerationRelativeHeight instead."
-      );
-      if (value !== this._terrainExaggerationRelativeHeight) {
-        this._terrainExaggerationRelativeHeight = value;
-        this._terrainExaggerationChanged = true;
-      }
-    },
-  },
   /**
    * Gets an event that's raised when the length of the tile load queue has changed since the last render frame.  When the load queue is empty,
    * all terrain and imagery for the current view have been loaded.  The event passes the new length of the tile load queue.

package/Source/Scene/GlobeSurfaceShaderSet.js

@@ -10,13 +10,15 @@ function GlobeSurfaceShader(
   flags,
   material,
   shaderProgram,
-  clippingShaderState
+  clippingShaderState,
+  clippingPolygonShaderState
 ) {
   this.numberOfDayTextures = numberOfDayTextures;
   this.flags = flags;
   this.material = material;
   this.shaderProgram = shaderProgram;
   this.clippingShaderState = clippingShaderState;
+  this.clippingPolygonShaderState = clippingPolygonShaderState;
 }
 
 /**
@@ -60,6 +62,31 @@ function getPositionMode(sceneMode) {
   return positionMode;
 }
 
+function getPolygonClippingFunction(context) {
+  // return a noop for webgl1
+  if (!context.webgl2) {
+    return `void clipPolygons(highp sampler2D clippingDistance, int regionsLength, vec2 clippingPosition, int regionIndex) {
+    }`;
+  }
+
+  return `void clipPolygons(highp sampler2D clippingDistance, int regionsLength, vec2 clippingPosition, int regionIndex) {
+    czm_clipPolygons(clippingDistance, regionsLength, clippingPosition, regionIndex);
+  }`;
+}
+
+function getUnpackClippingFunction(context) {
+  // return a noop for webgl1
+  if (!context.webgl2) {
+    return `vec4 unpackClippingExtents(highp sampler2D extentsTexture, int index) {
+      return vec4();
+    }`;
+  }
+
+  return `vec4 unpackClippingExtents(highp sampler2D extentsTexture, int index) {
+    return czm_unpackClippingExtents(extentsTexture, index);
+  }`;
+}
+
 function get2DYPositionFraction(useWebMercatorProjection) {
   const get2DYPositionFractionGeographicProjection =
     "float get2DYPositionFraction(vec2 textureCoordinates) { return get2DGeographicYPositionFraction(textureCoordinates); }";
@@ -95,6 +122,8 @@ GlobeSurfaceShaderSet.prototype.getShaderProgram = function (options) {
   const enableFog = options.enableFog;
   const enableClippingPlanes = options.enableClippingPlanes;
   const clippingPlanes = options.clippingPlanes;
+  const enableClippingPolygons = options.enableClippingPolygons;
+  const clippingPolygons = options.clippingPolygons;
   const clippedByBoundaries = options.clippedByBoundaries;
   const hasImageryLayerCutout = options.hasImageryLayerCutout;
   const colorCorrect = options.colorCorrect;
@@ -152,16 +181,17 @@ GlobeSurfaceShaderSet.prototype.getShaderProgram = function (options) {
     (quantization << 18) |
     (applySplit << 19) |
     (enableClippingPlanes << 20) |
-    (cartographicLimitRectangleFlag << 21) |
-    (imageryCutoutFlag << 22) |
-    (colorCorrect << 23) |
-    (highlightFillTile << 24) |
-    (colorToAlpha << 25) |
-    (hasGeodeticSurfaceNormals << 26) |
-    (hasExaggeration << 27) |
-    (showUndergroundColor << 28) |
-    (translucent << 29) |
-    (applyDayNightAlpha << 30);
+    (enableClippingPolygons << 21) |
+    (cartographicLimitRectangleFlag << 22) |
+    (imageryCutoutFlag << 23) |
+    (colorCorrect << 24) |
+    (highlightFillTile << 25) |
+    (colorToAlpha << 26) |
+    (hasGeodeticSurfaceNormals << 27) |
+    (hasExaggeration << 28) |
+    (showUndergroundColor << 29) |
+    (translucent << 30) |
+    (applyDayNightAlpha << 31);
 
   let currentClippingShaderState = 0;
   if (defined(clippingPlanes) && clippingPlanes.length > 0) {
@@ -169,13 +199,23 @@ GlobeSurfaceShaderSet.prototype.getShaderProgram = function (options) {
       ? clippingPlanes.clippingPlanesState
       : 0;
   }
+
+  let currentClippingPolygonsShaderState = 0;
+  if (defined(clippingPolygons) && clippingPolygons.length > 0) {
+    currentClippingPolygonsShaderState = enableClippingPolygons
+      ? clippingPolygons.clippingPolygonsState
+      : 0;
+  }
+
   let surfaceShader = surfaceTile.surfaceShader;
   if (
     defined(surfaceShader) &&
     surfaceShader.numberOfDayTextures === numberOfDayTextures &&
     surfaceShader.flags === flags &&
     surfaceShader.material === this.material &&
-    surfaceShader.clippingShaderState === currentClippingShaderState
+    surfaceShader.clippingShaderState === currentClippingShaderState &&
+    surfaceShader.clippingPolygonShaderState ===
+      currentClippingPolygonsShaderState
   ) {
     return surfaceShader.shaderProgram;
   }
@@ -190,16 +230,25 @@ GlobeSurfaceShaderSet.prototype.getShaderProgram = function (options) {
   if (
     !defined(surfaceShader) ||
     surfaceShader.material !== this.material ||
-    surfaceShader.clippingShaderState !== currentClippingShaderState
+    surfaceShader.clippingShaderState !== currentClippingShaderState ||
+    surfaceShader.clippingPolygonShaderState !==
+      currentClippingPolygonsShaderState
   ) {
     // Cache miss - we've never seen this combination of numberOfDayTextures and flags before.
     const vs = this.baseVertexShaderSource.clone();
     const fs = this.baseFragmentShaderSource.clone();
 
+    // Need to go before GlobeFS
     if (currentClippingShaderState !== 0) {
       fs.sources.unshift(
         getClippingFunction(clippingPlanes, frameState.context)
-      ); // Need to go before GlobeFS
+      );
+    }
+
+    // Need to go before GlobeFS
+    if (currentClippingPolygonsShaderState !== 0) {
+      fs.sources.unshift(getPolygonClippingFunction(frameState.context));
+      vs.sources.unshift(getUnpackClippingFunction(frameState.context));
     }
 
     vs.defines.push(quantizationDefine);
@@ -292,6 +341,22 @@ GlobeSurfaceShaderSet.prototype.getShaderProgram = function (options) {
       fs.defines.push("ENABLE_CLIPPING_PLANES");
     }
 
+    if (enableClippingPolygons) {
+      fs.defines.push("ENABLE_CLIPPING_POLYGONS");
+      vs.defines.push("ENABLE_CLIPPING_POLYGONS");
+
+      if (clippingPolygons.inverse) {
+        fs.defines.push("CLIPPING_INVERSE");
+      }
+
+      fs.defines.push(
+        `CLIPPING_POLYGON_REGIONS_LENGTH ${clippingPolygons.extentsCount}`
+      );
+      vs.defines.push(
+        `CLIPPING_POLYGON_REGIONS_LENGTH ${clippingPolygons.extentsCount}`
+      );
+    }
+
     if (colorCorrect) {
       fs.defines.push("COLOR_CORRECT");
     }
@@ -377,7 +442,8 @@ GlobeSurfaceShaderSet.prototype.getShaderProgram = function (options) {
       flags,
       this.material,
       shader,
-      currentClippingShaderState
+      currentClippingShaderState,
+      currentClippingPolygonsShaderState
     );
   }
 

package/Source/Scene/GlobeSurfaceTileProvider.js

@@ -38,6 +38,7 @@ import RenderState from "../Renderer/RenderState.js";
 import VertexArray from "../Renderer/VertexArray.js";
 import BlendingState from "./BlendingState.js";
 import ClippingPlaneCollection from "./ClippingPlaneCollection.js";
+import ClippingPolygonCollection from "./ClippingPolygonCollection.js";
 import DepthFunction from "./DepthFunction.js";
 import GlobeSurfaceTile from "./GlobeSurfaceTile.js";
 import ImageryLayer from "./ImageryLayer.js";
@@ -170,6 +171,13 @@ function GlobeSurfaceTileProvider(options) {
    */
   this._clippingPlanes = undefined;
 
+  /**
+   * A property specifying a {@link ClippingPolygonCollection} used to selectively disable rendering inside or outside a list of polygons.
+   * @type {ClippingPolygonCollection}
+   * @private
+   */
+  this._clippingPolygons = undefined;
+
   /**
    * A property specifying a {@link Rectangle} used to selectively limit terrain and imagery rendering.
    * @type {Rectangle}
@@ -290,7 +298,7 @@ Object.defineProperties(GlobeSurfaceTileProvider.prototype, {
     },
   },
   /**
-   * The {@link ClippingPlaneCollection} used to selectively disable rendering the tileset.
+   * The {@link ClippingPlaneCollection} used to selectively disable rendering.
    *
    * @type {ClippingPlaneCollection}
    *
@@ -304,6 +312,22 @@ Object.defineProperties(GlobeSurfaceTileProvider.prototype, {
       ClippingPlaneCollection.setOwner(value, this, "_clippingPlanes");
     },
   },
+
+  /**
+   * The {@link ClippingPolygonCollection} used to selectively disable rendering inside or outside a list of polygons.
+   *
+   * @type {ClippingPolygonCollection}
+   *
+   * @private
+   */
+  clippingPolygons: {
+    get: function () {
+      return this._clippingPolygons;
+    },
+    set: function (value) {
+      ClippingPolygonCollection.setOwner(value, this, "_clippingPolygons");
+    },
+  },
 });
 
 function sortTileImageryByLayerIndex(a, b) {
@@ -391,6 +415,14 @@ GlobeSurfaceTileProvider.prototype.beginUpdate = function (frameState) {
   if (defined(clippingPlanes) && clippingPlanes.enabled) {
     clippingPlanes.update(frameState);
   }
+
+  // update clipping polygons
+  const clippingPolygons = this._clippingPolygons;
+  if (defined(clippingPolygons) && clippingPolygons.enabled) {
+    clippingPolygons.update(frameState);
+    clippingPolygons.queueCommands(frameState);
+  }
+
   this._usedDrawCommands = 0;
 
   this._hasLoadedTilesThisFrame = false;
@@ -657,6 +689,11 @@ function isUndergroundVisible(tileProvider, frameState) {
     return true;
   }
 
+  const clippingPolygons = tileProvider._clippingPolygons;
+  if (defined(clippingPolygons) && clippingPolygons.enabled) {
+    return true;
+  }
+
   if (
     !Rectangle.equals(
       tileProvider.cartographicLimitRectangle,
@@ -775,6 +812,16 @@ GlobeSurfaceTileProvider.prototype.computeTileVisibility = function (
     }
   }
 
+  const clippingPolygons = this._clippingPolygons;
+  if (defined(clippingPolygons) && clippingPolygons.enabled) {
+    const polygonIntersection = clippingPolygons.computeIntersectionWithBoundingVolume(
+      tileBoundingRegion
+    );
+    tile.isClipped = polygonIntersection !== Intersect.OUTSIDE;
+    // Polygon clipping intersections are determined by outer rectangles, therefore we cannot
+    // preemptively determine if a tile is completely clipped or not here.
+  }
+
   let visibility;
   const intersection = cullingVolume.computeVisibility(boundingVolume);
 
@@ -1364,6 +1411,8 @@ GlobeSurfaceTileProvider.prototype.isDestroyed = function () {
 GlobeSurfaceTileProvider.prototype.destroy = function () {
   this._tileProvider = this._tileProvider && this._tileProvider.destroy();
   this._clippingPlanes = this._clippingPlanes && this._clippingPlanes.destroy();
+  this._clippingPolygons =
+    this._clippingPolygons && this._clippingPolygons.destroy();
   this._removeLayerAddedListener =
     this._removeLayerAddedListener && this._removeLayerAddedListener();
   this._removeLayerRemovedListener =
@@ -1755,6 +1804,21 @@ function createTileUniformMap(frameState, globeSurfaceTileProvider) {
       style.alpha = this.properties.clippingPlanesEdgeWidth;
       return style;
     },
+    u_clippingDistance: function () {
+      const texture =
+        globeSurfaceTileProvider._clippingPolygons.clippingTexture;
+      if (defined(texture)) {
+        return texture;
+      }
+      return frameState.context.defaultTexture;
+    },
+    u_clippingExtents: function () {
+      const texture = globeSurfaceTileProvider._clippingPolygons.extentsTexture;
+      if (defined(texture)) {
+        return texture;
+      }
+      return frameState.context.defaultTexture;
+    },
     u_minimumBrightness: function () {
       return frameState.fog.minimumBrightness;
     },
@@ -2039,6 +2103,8 @@ const surfaceShaderSetOptionsScratch = {
   enableFog: undefined,
   enableClippingPlanes: undefined,
   clippingPlanes: undefined,
+  enableClippingPolygons: undefined,
+  clippingPolygons: undefined,
   clippedByBoundaries: undefined,
   hasImageryLayerCutout: undefined,
   colorCorrect: undefined,
@@ -2166,6 +2232,13 @@ function addDrawCommandsForTile(tileProvider, tile, frameState) {
   ) {
     --maxTextures;
   }
+  if (
+    defined(tileProvider.clippingPolygons) &&
+    tileProvider.clippingPolygons.enabled
+  ) {
+    --maxTextures;
+    --maxTextures;
+  }
 
   maxTextures -= globeTranslucencyState.numberOfTextureUniforms;
 
@@ -2726,6 +2799,11 @@ function addDrawCommandsForTile(tileProvider, tile, frameState) {
       uniformMapProperties.clippingPlanesEdgeWidth = clippingPlanes.edgeWidth;
     }
 
+    // update clipping polygons
+    const clippingPolygons = tileProvider._clippingPolygons;
+    const clippingPolygonsEnabled =
+      defined(clippingPolygons) && clippingPolygons.enabled && tile.isClipped;
+
     surfaceShaderSetOptions.numberOfDayTextures = numberOfDayTextures;
     surfaceShaderSetOptions.applyBrightness = applyBrightness;
     surfaceShaderSetOptions.applyContrast = applyContrast;
@@ -2738,6 +2816,8 @@ function addDrawCommandsForTile(tileProvider, tile, frameState) {
     surfaceShaderSetOptions.enableFog = applyFog;
     surfaceShaderSetOptions.enableClippingPlanes = clippingPlanesEnabled;
     surfaceShaderSetOptions.clippingPlanes = clippingPlanes;
+    surfaceShaderSetOptions.enableClippingPolygons = clippingPolygonsEnabled;
+    surfaceShaderSetOptions.clippingPolygons = clippingPolygons;
     surfaceShaderSetOptions.hasImageryLayerCutout = applyCutout;
     surfaceShaderSetOptions.colorCorrect = colorCorrect;
     surfaceShaderSetOptions.highlightFillTile = highlightFillTile;

package/Source/Scene/Label.js

@@ -85,6 +85,36 @@ function parseFont(label) {
   label._lineHeight = fontInfo.lineHeight;
 }
 
+/**
+ * @typedef {object} Label.ConstructorOptions
+ *
+ * Initialization options for the Label constructor
+ *
+ * @property {Cartesian3} position The cartesian position of the label.
+ * @property {string} [id] A user-defined object to return when the label is picked with {@link Scene#pick}.
+ * @property {boolean} [show=true] Determines if this label will be shown.
+ * @property {string} [text] A string specifying the text of the label.
+ * @property {string} [font='30px sans-serif'] A string specifying the font used to draw this label. Fonts are specified using the same syntax as the CSS 'font' property.
+ * @property {LabelStyle} [style=LabelStyle.FILL] A {@link LabelStyle} specifying the style of the label.
+ * @property {number} [scale=1.0] A number specifying the uniform scale that is multiplied with the label size.
+ * @property {boolean} [showBackground=false] Determines if a background behind this label will be shown.
+ * @property {Color} [backgroundColor=new Color(0.165, 0.165, 0.165, 0.8)] A {@link Color} specifying the background color of the label.
+ * @property {Cartesian2} [backgroundPadding=new Cartesian2(7, 5)] A {@link Cartesian2} Specifying the horizontal and vertical background padding in pixels.
+ * @property {Cartesian2} [pixelOffset=Cartesian2.ZERO] A {@link Cartesian2} specifying the pixel offset in screen space from the origin of this label.
+ * @property {Cartesian3} [eyeOffset=Cartesian3.ZERO] A {@link Cartesian3} specifying the 3D Cartesian offset applied to this label in eye coordinates.
+ * @property {HorizontalOrigin} [horizontalOrigin=HorizontalOrigin.CENTER] A {@link HorizontalOrigin} specifying the horizontal origin of this label.
+ * @property {VerticalOrigin} [verticalOrigin=VerticalOrigin.CENTER] A {@link VerticalOrigin} specifying the vertical origin of this label.
+ * @property {HeightReference} [heightReference=HeightReference.NONE] A {@link HeightReference} specifying the height reference of this label.
+ * @property {Color} [fillColor=Color.WHITE] A {@link Color} specifying the fill color of the label.
+ * @property {Color} [outlineColor=Color.BLACK] A {@link Color} specifying the outline color of the label.
+ * @property {number} [outlineWidth=1.0] A number specifying the outline width of the label.
+ * @property {NearFarScalar} [translucencyByDistance] A {@link NearFarScalar} specifying near and far translucency properties of the label based on the label's distance from the camera.
+ * @property {NearFarScalar} [pixelOffsetScaleByDistance] A {@link NearFarScalar} specifying near and far pixel offset scaling properties of the label based on the label's distance from the camera.
+ * @property {NearFarScalar} [scaleByDistance] A {@link NearFarScalar} specifying near and far scaling properties of the label based on the label's distance from the camera.
+ * @property {DistanceDisplayCondition} [distanceDisplayCondition] A {@link DistanceDisplayCondition} specifying at what distance from the camera that this label will be displayed.
+ * @property {number} [disableDepthTestDistance] A number specifying the distance from the camera at which to disable the depth test to, for example, prevent clipping against terrain.
+ */
+
 /**
  * <div class="notice">
  * Create labels by calling {@link LabelCollection#add}. Do not call the constructor directly.
@@ -94,6 +124,9 @@ function parseFont(label) {
  * @internalConstructor
  * @class
  *
+ * @param {Label.ConstructorOptions} options Object describing initialization options
+ * @param {LabelCollection} labelCollection Instance of LabelCollection
+ *
  * @exception {DeveloperError} translucencyByDistance.far must be greater than translucencyByDistance.near
  * @exception {DeveloperError} pixelOffsetScaleByDistance.far must be greater than pixelOffsetScaleByDistance.near
  * @exception {DeveloperError} distanceDisplayCondition.far must be greater than distanceDisplayCondition.near

package/Source/Scene/LabelCollection.js

@@ -710,7 +710,7 @@ Object.defineProperties(LabelCollection.prototype, {
  * Creates and adds a label with the specified initial properties to the collection.
  * The added label is returned so it can be modified or removed from the collection later.
  *
- * @param {object} [options] A template describing the label's properties as shown in Example 1.
+ * @param {Label.ConstructorOptions} [options] A template describing the label's properties as shown in Example 1.
  * @returns {Label} The label that was added to the collection.
  *
  * @performance Calling <code>add</code> is expected constant time.  However, the collection's vertex buffer
@@ -755,6 +755,7 @@ Object.defineProperties(LabelCollection.prototype, {
  *   font : '24px Helvetica',
  * });
  *
+ *
  * @see LabelCollection#remove
  * @see LabelCollection#removeAll
  */

package/Source/Scene/Model/Model.js

@@ -17,6 +17,7 @@ import Resource from "../../Core/Resource.js";
 import RuntimeError from "../../Core/RuntimeError.js";
 import Pass from "../../Renderer/Pass.js";
 import ClippingPlaneCollection from "../ClippingPlaneCollection.js";
+import ClippingPolygonCollection from "../ClippingPolygonCollection.js";
 import ColorBlendMode from "../ColorBlendMode.js";
 import GltfLoader from "../GltfLoader.js";
 import HeightReference, {
@@ -147,6 +148,7 @@ import pickModel from "./pickModel.js";
  * @privateParam {boolean} [options.showOutline=true] Whether to display the outline for models using the {@link https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Vendor/CESIUM_primitive_outline|CESIUM_primitive_outline} extension. When true, outlines are displayed. When false, outlines are not displayed.
  * @privateParam {Color} [options.outlineColor=Color.BLACK] The color to use when rendering outlines.
  * @privateParam {ClippingPlaneCollection} [options.clippingPlanes] The {@link ClippingPlaneCollection} used to selectively disable rendering the model.
+ * @privateParam {ClippingPolygonCollection} [options.clippingPolygons] The {@link ClippingPolygonCollection} used to selectively disable rendering the model.
  * @privateParam {Cartesian3} [options.lightColor] The light color when shading the model. When <code>undefined</code> the scene's light color is used instead.
  * @privateParam {ImageBasedLighting} [options.imageBasedLighting] The properties for managing image-based lighting on this model.
  * @privateParam {boolean} [options.backFaceCulling=true] Whether to cull back-facing geometry. When true, back face culling is determined by the material's doubleSided property; when false, back face culling is disabled. Back faces are not culled if the model's color is translucent.
@@ -370,6 +372,20 @@ function Model(options) {
   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.
+  const clippingPolygons = options.clippingPolygons;
+  if (defined(clippingPolygons) && clippingPolygons.owner === undefined) {
+    ClippingPolygonCollection.setOwner(
+      clippingPolygons,
+      this,
+      "_clippingPolygons"
+    );
+  } else {
+    this._clippingPolygons = clippingPolygons;
+  }
+  this._clippingPolygonsState = 0; // If this value changes, the shaders need to be regenerated.
+
   this._lightColor = Cartesian3.clone(options.lightColor);
 
   this._imageBasedLighting = defined(options.imageBasedLighting)
@@ -1303,6 +1319,26 @@ Object.defineProperties(Model.prototype, {
     },
   },
 
+  /**
+   * The {@link ClippingPolygonCollection} used to selectively disable rendering the model.
+   *
+   * @memberof Model.prototype
+   *
+   * @type {ClippingPolygonCollection}
+   */
+  clippingPolygons: {
+    get: function () {
+      return this._clippingPolygons;
+    },
+    set: function (value) {
+      if (value !== this._clippingPolygons) {
+        // Handle destroying old clipping polygons, new clipping polygons ownership
+        ClippingPolygonCollection.setOwner(value, this, "_clippingPolygons");
+        this.resetDrawCommands();
+      }
+    },
+  },
+
   /**
    * The light color when shading the model. When <code>undefined</code> the scene's light color is used instead.
    * <p>
@@ -1801,6 +1837,7 @@ Model.prototype.update = function (frameState) {
   updateSilhouette(this, frameState);
   updateSkipLevelOfDetail(this, frameState);
   updateClippingPlanes(this, frameState);
+  updateClippingPolygons(this, frameState);
   updateSceneMode(this, frameState);
   updateFog(this, frameState);
   updateVerticalExaggeration(this, frameState);
@@ -1987,6 +2024,24 @@ function updateClippingPlanes(model, frameState) {
   }
 }
 
+function updateClippingPolygons(model, frameState) {
+  // Update the clipping polygon collection / state for this model to detect any changes.
+  let currentClippingPolygonsState = 0;
+  if (model.isClippingPolygonsEnabled()) {
+    if (model._clippingPolygons.owner === model) {
+      model._clippingPolygons.update(frameState);
+      model._clippingPolygons.queueCommands(frameState);
+    }
+    currentClippingPolygonsState =
+      model._clippingPolygons.clippingPolygonsState;
+  }
+
+  if (currentClippingPolygonsState !== model._clippingPolygonsState) {
+    model.resetDrawCommands();
+    model._clippingPolygonsState = currentClippingPolygonsState;
+  }
+}
+
 function updateSceneMode(model, frameState) {
   if (frameState.mode !== model._sceneMode) {
     if (model._projectTo2D) {
@@ -2537,6 +2592,21 @@ Model.prototype.pick = function (
   );
 };
 
+/**
+ * Gets whether or not clipping polygons are enabled for this model.
+ *
+ * @returns {boolean} <code>true</code> if clipping polygons are enabled for this model, <code>false</code>.
+ * @private
+ */
+Model.prototype.isClippingPolygonsEnabled = function () {
+  const clippingPolygons = this._clippingPolygons;
+  return (
+    defined(clippingPolygons) &&
+    clippingPolygons.enabled &&
+    clippingPolygons.length !== 0
+  );
+};
+
 /**
  * Returns true if this object was destroyed; otherwise, false.
  * <br /><br />
@@ -2606,6 +2676,17 @@ Model.prototype.destroy = function () {
   }
   this._clippingPlanes = undefined;
 
+  // Only destroy the ClippingPolygonCollection if this is the owner.
+  const clippingPolygonCollection = this._clippingPolygons;
+  if (
+    defined(clippingPolygonCollection) &&
+    !clippingPolygonCollection.isDestroyed() &&
+    clippingPolygonCollection.owner === this
+  ) {
+    clippingPolygonCollection.destroy();
+  }
+  this._clippingPolygons = undefined;
+
   // Only destroy the ImageBasedLighting if this is the owner.
   if (
     this._shouldDestroyImageBasedLighting &&
@@ -2689,6 +2770,7 @@ Model.prototype.destroyModelResources = function () {
  * @param {boolean} [options.showOutline=true] Whether to display the outline for models using the {@link https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Vendor/CESIUM_primitive_outline|CESIUM_primitive_outline} extension. When true, outlines are displayed. When false, outlines are not displayed.
  * @param {Color} [options.outlineColor=Color.BLACK] The color to use when rendering outlines.
  * @param {ClippingPlaneCollection} [options.clippingPlanes] The {@link ClippingPlaneCollection} used to selectively disable rendering the model.
+ * @param {ClippingPolygonCollection} [options.clippingPolygons] The {@link ClippingPolygonCollection} used to selectively disable rendering the model.
  * @param {Cartesian3} [options.lightColor] The light color when shading the model. When <code>undefined</code> the scene's light color is used instead.
  * @param {ImageBasedLighting} [options.imageBasedLighting] The properties for managing image-based lighting on this model.
  * @param {boolean} [options.backFaceCulling=true] Whether to cull back-facing geometry. When true, back face culling is determined by the material's doubleSided property; when false, back face culling is disabled. Back faces are not culled if the model's color is translucent.
@@ -3051,6 +3133,7 @@ function makeModelOptions(loader, modelType, options) {
     showOutline: options.showOutline,
     outlineColor: options.outlineColor,
     clippingPlanes: options.clippingPlanes,
+    clippingPolygons: options.clippingPolygons,
     lightColor: options.lightColor,
     imageBasedLighting: options.imageBasedLighting,
     backFaceCulling: options.backFaceCulling,