@cesium/engine 26.2.0 → 26.3.1-wasm.0

package/Source/Scene/CreditDisplay.js

@@ -162,6 +162,29 @@ function styleLightboxContainer(that) {
   }
 }
 
+/**
+ * Wraps a callback so that it also runs when a keyboard user activates an element
+ * with <code>Enter</code> or <code>Space</code>. Elements exposed as <code>role="button"</code>
+ * are expected to respond to both keys, which anchors without an <code>href</code> do not do natively.
+ *
+ * @param {Function} callback The function to invoke when the element is activated.
+ * @returns {Function} A <code>keydown</code> handler.
+ *
+ * @private
+ */
+function activateOnKeydown(callback) {
+  return function (event) {
+    if (event.key !== "Enter" && event.key !== " ") {
+      return;
+    }
+    // Prevent Space from scrolling the page and stop the event from also
+    // reaching the overlay, which would immediately close the lightbox again.
+    event.preventDefault();
+    event.stopPropagation();
+    callback();
+  };
+}
+
 function appendCss(container) {
   const style = /*css*/ `
 .cesium-credit-lightbox-overlay {
@@ -237,6 +260,12 @@ function appendCss(container) {
   color: ${highlightColor};
 }
 
+.cesium-credit-expand-link:focus-visible,
+.cesium-credit-lightbox-close:focus-visible {
+  outline: 2px solid ${highlightColor};
+  outline-offset: 2px;
+}
+
 .cesium-credit-text {
   color: ${textColor};
 }
@@ -312,6 +341,9 @@ function CreditDisplay(container, delimiter, viewport) {
 
   const lightboxCredits = document.createElement("div");
   lightboxCredits.className = "cesium-credit-lightbox";
+  lightboxCredits.setAttribute("role", "dialog");
+  lightboxCredits.setAttribute("aria-modal", "true");
+  lightboxCredits.setAttribute("aria-label", "Data attribution");
   lightbox.appendChild(lightboxCredits);
 
   function hideLightbox(event) {
@@ -322,6 +354,14 @@ function CreditDisplay(container, delimiter, viewport) {
   }
   lightbox.addEventListener("click", hideLightbox, false);
 
+  function hideLightboxOnEscape(event) {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      that.hideLightbox();
+    }
+  }
+  lightbox.addEventListener("keydown", hideLightboxOnEscape, false);
+
   const title = document.createElement("div");
   title.className = "cesium-credit-lightbox-title";
   title.textContent = "Data provided by:";
@@ -329,8 +369,12 @@ function CreditDisplay(container, delimiter, viewport) {
 
   const closeButton = document.createElement("a");
   closeButton.onclick = this.hideLightbox.bind(this);
+  closeButton.onkeydown = activateOnKeydown(this.hideLightbox.bind(this));
   closeButton.innerHTML = "&times;";
   closeButton.className = "cesium-credit-lightbox-close";
+  closeButton.setAttribute("role", "button");
+  closeButton.setAttribute("tabindex", "0");
+  closeButton.setAttribute("aria-label", "Close data attribution");
   lightboxCredits.appendChild(closeButton);
 
   const creditList = document.createElement("ul");
@@ -349,7 +393,12 @@ function CreditDisplay(container, delimiter, viewport) {
   const expandLink = document.createElement("a");
   expandLink.className = "cesium-credit-expand-link";
   expandLink.onclick = this.showLightbox.bind(this);
+  expandLink.onkeydown = activateOnKeydown(this.showLightbox.bind(this));
   expandLink.textContent = "Data attribution";
+  expandLink.setAttribute("role", "button");
+  expandLink.setAttribute("tabindex", "0");
+  expandLink.setAttribute("aria-haspopup", "dialog");
+  expandLink.setAttribute("aria-expanded", "false");
   container.appendChild(expandLink);
 
   appendCss(container);
@@ -364,7 +413,9 @@ function CreditDisplay(container, delimiter, viewport) {
   this._creditList = creditList;
   this._lightbox = lightbox;
   this._hideLightbox = hideLightbox;
+  this._hideLightboxOnEscape = hideLightboxOnEscape;
   this._expandLink = expandLink;
+  this._closeButton = closeButton;
   this._expanded = false;
   this._staticCredits = [];
   this._cesiumCredit = cesiumCredit;
@@ -492,6 +543,9 @@ CreditDisplay.prototype.removeStaticCredit = function (credit) {
 CreditDisplay.prototype.showLightbox = function () {
   this._lightbox.style.display = "block";
   this._expanded = true;
+  this._expandLink.setAttribute("aria-expanded", "true");
+  // Move focus into the dialog so keyboard users can reach its contents.
+  this._closeButton.focus();
 };
 
 /**
@@ -500,6 +554,9 @@ CreditDisplay.prototype.showLightbox = function () {
 CreditDisplay.prototype.hideLightbox = function () {
   this._lightbox.style.display = "none";
   this._expanded = false;
+  this._expandLink.setAttribute("aria-expanded", "false");
+  // Restore focus to the element that opened the dialog.
+  this._expandLink.focus();
 };
 
 /**
@@ -581,6 +638,11 @@ CreditDisplay.prototype.endFrame = function () {
  */
 CreditDisplay.prototype.destroy = function () {
   this._lightbox.removeEventListener("click", this._hideLightbox, false);
+  this._lightbox.removeEventListener(
+    "keydown",
+    this._hideLightboxOnEscape,
+    false,
+  );
 
   this.container.removeChild(this._cesiumCreditContainer);
   this.container.removeChild(this._screenContainer);

package/Source/Scene/GaussianSplatPrimitive.js

@@ -35,6 +35,7 @@ import SplitDirection from "./SplitDirection.js";
 import destroyObject from "../Core/destroyObject.js";
 import ContextLimits from "../Renderer/ContextLimits.js";
 import Transforms from "../Core/Transforms.js";
+import getTimestamp from "../Core/getTimestamp.js";
 
 const scratchMatrix4A = new Matrix4();
 const scratchMatrix4C = new Matrix4();
@@ -144,12 +145,114 @@ const SnapshotState = {
  * @private
  */
 
-// Two stable frames avoids rebuilding during brief selected-tile jitter.
-const DEFAULT_STABLE_FRAMES = 2;
-// If selection keeps changing, force a rebuild after ~0.5s at 60fps to guarantee progress.
-// Lower values react faster but can thrash on noisy LOD transitions.
-// Higher values reduce rebuild churn but keep stale snapshots visible longer.
-const DEFAULT_MAX_SNAPSHOT_STALL_FRAMES = 30;
+// A snapshot rebuild re-aggregates every selected tile and re-uploads the
+// splat textures. Each rebuild is a burst of main-thread and GPU work, so the
+// scheduler waits for the selected tile set to settle before starting one.
+//
+// Both values below were tuned by hand on one dev machine. They have not been
+// measured across hardware or network speeds (coming shortly).
+
+// How long the selected tile set must stay unchanged, with no tiles decoding
+// or downloading, before a rebuild may start.
+const DEFAULT_SNAPSHOT_DEBOUNCE_MILLISECONDS = 500;
+
+// Upper bound on how long a pending rebuild can wait while the selection keeps
+// changing. Once passed, a rebuild is forced unless a committed snapshot
+// already covers most of the selected tiles (see the overlap check in
+// SnapshotRebuildScheduler.update).
+const DEFAULT_MAX_SNAPSHOT_WAIT_MILLISECONDS = 2000;
+
+class SnapshotRebuildScheduler {
+  constructor() {
+    this._selectedTileSet = new Set();
+    this._selectionChangedTime = undefined;
+    this._pendingSince = undefined;
+    this._lastRebuildTileSet = undefined;
+  }
+
+  get isPending() {
+    return defined(this._pendingSince);
+  }
+
+  hasSelectedTile(tile) {
+    return this._selectedTileSet.has(tile);
+  }
+
+  update(
+    timestamp,
+    {
+      selectedTiles,
+      rebuildRequested,
+      isBootstrap,
+      tilesLoaded,
+      tilesInFlight = false,
+      hasCommittedSnapshot = false,
+    },
+  ) {
+    if (selectedTiles.length === 0) {
+      this.clear();
+      return false;
+    }
+
+    const selectedTilesChanged = haveSelectedTilesChanged(
+      this._selectedTileSet,
+      selectedTiles,
+    );
+    if (selectedTilesChanged) {
+      this._selectedTileSet = new Set(selectedTiles);
+      this._selectionChangedTime = timestamp;
+    }
+
+    if (
+      (selectedTilesChanged || rebuildRequested || isBootstrap) &&
+      !this.isPending
+    ) {
+      this._pendingSince = timestamp;
+    }
+
+    if (!this.isPending) {
+      return false;
+    }
+
+    const selectionIsStable =
+      !tilesInFlight &&
+      defined(this._selectionChangedTime) &&
+      timestamp - this._selectionChangedTime >=
+        DEFAULT_SNAPSHOT_DEBOUNCE_MILLISECONDS;
+
+    let tileOverlap = 0;
+    if (defined(this._lastRebuildTileSet)) {
+      for (const tile of this._selectedTileSet) {
+        if (this._lastRebuildTileSet.has(tile)) {
+          tileOverlap++;
+        }
+      }
+      tileOverlap /= this._selectedTileSet.size;
+    }
+
+    const deadlineReached =
+      timestamp - this._pendingSince >=
+        DEFAULT_MAX_SNAPSHOT_WAIT_MILLISECONDS &&
+      // If the committed snapshot still covers at least half of the selected
+      // tiles, the stale view is close enough to keep showing. Skip the forced
+      // rebuild and wait for the selection to settle or for tilesLoaded.
+      (!hasCommittedSnapshot || tileOverlap < 0.5);
+
+    return isBootstrap || tilesLoaded || selectionIsStable || deadlineReached;
+  }
+
+  markRebuildStarted() {
+    this._lastRebuildTileSet = new Set(this._selectedTileSet);
+    this._pendingSince = undefined;
+  }
+
+  clear() {
+    this._selectedTileSet.clear();
+    this._selectionChangedTime = undefined;
+    this._pendingSince = undefined;
+  }
+}
+
 // Minimum delay between steady re-sort requests once the camera is moving.
 const DEFAULT_SORT_MIN_FRAME_INTERVAL = 3;
 // ~0.5 degree camera direction change threshold before triggering steady re-sort.
@@ -236,23 +339,18 @@ function markSteadySortStart(primitive, frameState) {
 }
 
 /**
- * Checks whether the set of currently selected tiles differs from the set
- * recorded on the primitive. This is used to detect LOD transitions that
- * require a snapshot rebuild.
- *
- * @param {GaussianSplatPrimitive} primitive The splat primitive.
- * @param {Cesium3DTile[]} selectedTiles The tiles selected this frame.
- * @returns {boolean} {@code true} if the tile set has changed.
+ * @param {Set<Cesium3DTile>} previousTiles The prior selected tile set.
+ * @param {Cesium3DTile[]} selectedTiles The current selected tiles.
+ * @returns {boolean} Whether the tile set changed.
  * @private
  */
-function haveSelectedTilesChanged(primitive, selectedTiles) {
-  const prevSet = primitive._selectedTileSet;
-  if (!defined(prevSet) || prevSet.size !== selectedTiles.length) {
+function haveSelectedTilesChanged(previousTiles, selectedTiles) {
+  if (previousTiles.size !== selectedTiles.length) {
     return true;
   }
 
   for (let i = 0; i < selectedTiles.length; i++) {
-    if (!prevSet.has(selectedTiles[i])) {
+    if (!previousTiles.has(selectedTiles[i])) {
       return true;
     }
   }
@@ -868,9 +966,7 @@ function GaussianSplatPrimitive(options) {
    * @private
    */
   this._scratchAggregateShBuffer = undefined;
-  this._selectedTilesStableFrames = 0;
-  this._needsSnapshotRebuild = false;
-  this._snapshotRebuildStallFrames = 0;
+  this._snapshotRebuildScheduler = new SnapshotRebuildScheduler();
 
   /**
    * The previous view matrix used to determine if the primitive needs to be updated.
@@ -957,7 +1053,6 @@ function GaussianSplatPrimitive(options) {
    * @private
    */
   this.selectedTileLength = 0;
-  this._selectedTileSet = new Set();
 
   /**
    * Indicates whether or not the primitive is ready for use.
@@ -1096,6 +1191,7 @@ Object.defineProperties(GaussianSplatPrimitive.prototype, {
     get: function () {
       return (
         !this._dirty &&
+        !this._snapshotRebuildScheduler.isPending &&
         (!defined(this._pendingSnapshot) ||
           this._pendingSnapshot.state === SnapshotState.READY)
       );
@@ -1197,14 +1293,15 @@ GaussianSplatPrimitive.prototype.isDestroyed = function () {
 };
 
 /**
- * Event callback for when a tile is loaded.
- * This method is called when a tile is loaded and the primitive needs to be updated.
- * It sets the dirty flag to true, indicating that the primitive needs to be rebuilt.
+ * Marks the primitive dirty when a selected tile loads new content.
+ * Loads outside the selected set do not affect the current snapshot.
  * @param {Cesium3DTile} tile
  * @private
  */
 GaussianSplatPrimitive.prototype.onTileLoad = function (tile) {
-  this._dirty = true;
+  if (this._snapshotRebuildScheduler.hasSelectedTile(tile)) {
+    this._dirty = true;
+  }
 };
 
 /**
@@ -1711,43 +1808,32 @@ GaussianSplatPrimitive.prototype.update = function (frameState) {
     return;
   }
 
+  const selectedTiles = tileset._selectedTiles;
+  const hasSelectedTiles = selectedTiles.length !== 0;
+  const statistics = tileset.statistics;
+  const isBootstrap =
+    !defined(this._snapshot) &&
+    !defined(this._pendingSnapshot) &&
+    !defined(this._drawCommand);
+  const allowSnapshotRebuild = this._snapshotRebuildScheduler.update(
+    getTimestamp(),
+    {
+      selectedTiles: selectedTiles,
+      rebuildRequested: this._dirty,
+      isBootstrap: isBootstrap,
+      tilesLoaded: tileset.tilesLoaded,
+      tilesInFlight:
+        defined(statistics) &&
+        (statistics.numberOfTilesProcessing > 0 ||
+          statistics.numberOfPendingRequests > 0),
+      hasCommittedSnapshot: defined(this._snapshot),
+    },
+  );
+
   if (this._sorterState === GaussianSplatSortingState.IDLE) {
-    const selectedTilesChanged =
-      tileset._selectedTiles.length !== 0 &&
-      haveSelectedTilesChanged(this, tileset._selectedTiles);
-    if (tileset._selectedTiles.length === 0) {
-      this._selectedTilesStableFrames = 0;
-      this._needsSnapshotRebuild = false;
-      this._snapshotRebuildStallFrames = 0;
-    } else if (selectedTilesChanged) {
-      this._selectedTilesStableFrames = 0;
-    } else {
-      this._selectedTilesStableFrames++;
-    }
-    if (selectedTilesChanged || this._dirty) {
-      this._needsSnapshotRebuild = true;
-    }
-    const isStable = this._selectedTilesStableFrames >= DEFAULT_STABLE_FRAMES;
-    const isBootstrap =
-      !defined(this._snapshot) &&
-      !defined(this._pendingSnapshot) &&
-      !defined(this._drawCommand);
-    // This prevents an indefinite wait if selected tiles never settle completely.
-    // In practice, this is the upper bound on "wait-for-stability" before forcing
-    // a rebuild to avoid visible starvation.
-    if (this._needsSnapshotRebuild && tileset._selectedTiles.length !== 0) {
-      this._snapshotRebuildStallFrames++;
-    } else {
-      this._snapshotRebuildStallFrames = 0;
-    }
-    const allowRebuild =
-      isStable ||
-      isBootstrap ||
-      this._snapshotRebuildStallFrames >= DEFAULT_MAX_SNAPSHOT_STALL_FRAMES;
     const hasPendingWork =
       this._dirty ||
-      this._needsSnapshotRebuild ||
-      selectedTilesChanged ||
+      this._snapshotRebuildScheduler.isPending ||
       defined(this._pendingSnapshot) ||
       defined(this._pendingSortPromise) ||
       !defined(this._drawCommand);
@@ -1759,10 +1845,11 @@ GaussianSplatPrimitive.prototype.update = function (frameState) {
     }
 
     if (
-      tileset._selectedTiles.length !== 0 &&
-      this._needsSnapshotRebuild &&
-      allowRebuild
+      hasSelectedTiles &&
+      this._snapshotRebuildScheduler.isPending &&
+      allowSnapshotRebuild
     ) {
+      this._snapshotRebuildScheduler.markRebuildStarted();
       this._splatDataGeneration++;
       this._activeSort = undefined;
       this._sorterPromise = undefined;
@@ -1971,11 +2058,8 @@ GaussianSplatPrimitive.prototype.update = function (frameState) {
         state: SnapshotState.BUILDING,
       };
 
-      this.selectedTileLength = tileset._selectedTiles.length;
-      this._selectedTileSet = new Set(tileset._selectedTiles);
+      this.selectedTileLength = selectedTiles.length;
       this._dirty = false;
-      this._needsSnapshotRebuild = false;
-      this._snapshotRebuildStallFrames = 0;
     }
 
     if (defined(this._pendingSnapshot)) {
@@ -2144,4 +2228,7 @@ GaussianSplatPrimitive.prototype.update = function (frameState) {
   this._dirty = false;
 };
 
+// For testing.
+GaussianSplatPrimitive._SnapshotRebuildScheduler = SnapshotRebuildScheduler;
+
 export default GaussianSplatPrimitive;

package/Source/Scene/GeoJsonPrimitive.js

@@ -1,8 +1,5 @@
 // @ts-check
 
-/** @import {GeoJson, GeoJsonFeature, GeoJsonGeometry, GeoJsonPosition} from "../Core/globalTypes.js"; */
-/** @import FrameState from "./FrameState.js"; */
-
 import Cartesian2 from "../Core/Cartesian2.js";
 import Cartesian3 from "../Core/Cartesian3.js";
 import Check from "../Core/Check.js";
@@ -11,6 +8,7 @@ import destroyObject from "../Core/destroyObject.js";
 import DeveloperError from "../Core/DeveloperError.js";
 import Ellipsoid from "../Core/Ellipsoid.js";
 import Frozen from "../Core/Frozen.js";
+import HeightReference, { isHeightReferenceClamp } from "./HeightReference.js";
 import PolygonPipeline from "../Core/PolygonPipeline.js";
 import Resource from "../Core/Resource.js";
 import RuntimeError from "../Core/RuntimeError.js";
@@ -20,6 +18,13 @@ import BufferPolygon from "./BufferPolygon.js";
 import BufferPolygonCollection from "./BufferPolygonCollection.js";
 import BufferPolyline from "./BufferPolyline.js";
 import BufferPolylineCollection from "./BufferPolylineCollection.js";
+import assert from "../Core/assert.js";
+import oneTimeWarning from "../Core/oneTimeWarning.js";
+
+/** @import FrameState from "./FrameState.js"; */
+/** @import Scene from "./Scene.js"; */
+/** @import {GeoJson, GeoJsonFeature, GeoJsonGeometry, GeoJsonPosition} from "../Core/globalTypes.js"; */
+/** @import VectorProvider from "../Core/VectorProvider.js"; */
 
 /**
  * @typedef {object} GeoJsonPrimitiveConstructorOptions
@@ -29,6 +34,9 @@ import BufferPolylineCollection from "./BufferPolylineCollection.js";
  * @property {boolean} [allowPicking=true]
  * @property {boolean} [show=true]
  * @property {function(number, object, Record<string, unknown>):object} [pickObjectFactory]
+ * @property {HeightReference} [heightReference=HeightReference.NONE] Allows clamping (draping)
+ *  polylines and polygons on terrain and 3D Tiles. Point clamping is not currently supported.
+ * @property {Scene} [scene] Required for primitives that use a clamping {@link HeightReference}.
  */
 
 /**
@@ -41,14 +49,36 @@ import BufferPolylineCollection from "./BufferPolylineCollection.js";
  * added directly to {@link Scene#primitives}.
  *
  * @example
+ * // Load GeoJSON
  * const loader = await Cesium.GeoJsonPrimitive.fromUrl("./data.geojson");
  * viewer.scene.primitives.add(loader);
  *
+ * @example
+ * // Access GeoJSON features and properties
  * loader.points;     // BufferPointCollection | undefined
  * loader.polylines;  // BufferPolylineCollection | undefined
  * loader.polygons;   // BufferPolygonCollection | undefined
  * loader.ids;        // source feature IDs
  * loader.properties; // source feature properties
+ *
+ * @example
+ * // Style GeoJSON
+ * const material = new Cesium.BufferPolylineMaterial({
+ *   color: Cesium.Color.RED,
+ *   width: 4,
+ * });
+ *
+ * const polyline = new Cesium.BufferPolyline();
+ * const count = primitive.polylines.primitiveCount;
+ * for (let i = 0; i < count; i++) {
+ *   primitive.polylines.get(i, polyline);
+ *
+ *   const properties = primitive.getProperties(polyline.featureId);
+ *   if (properties.myCustomProperty === true) {
+ *     polyline.setMaterial(material);
+ *   }
+ * }
+ *
  * @experimental This feature is not final and is subject to change without Cesium's standard deprecation policy.
  */
 class GeoJsonPrimitive {
@@ -59,9 +89,7 @@ class GeoJsonPrimitive {
     options = options ?? Frozen.EMPTY_OBJECT;
 
     //>>includeStart('debug', pragmas.debug);
-    if (!defined(options.geoJson)) {
-      throw new DeveloperError("options.geoJson is required.");
-    }
+    Check.defined("geoJson", options.geoJson);
     //>>includeEnd('debug');
 
     const parseResult = parseGeoJson(/** @type {GeoJson} */ (options.geoJson));
@@ -86,35 +114,62 @@ class GeoJsonPrimitive {
     this._polylines = undefined;
     this._polygons = undefined;
 
+    /**
+     * @type {HeightReference}
+     * @private
+     */
+    this._heightReference = options.heightReference ?? HeightReference.NONE;
+
+    /**
+     * @type {Scene|undefined}
+     * @private
+     */
+    this._scene = options.scene;
+
+    const heightReference = this._heightReference;
+    const scene = this._scene;
+
+    //>>includeStart('debug', pragmas.debug);
+    assert(
+      !isHeightReferenceClamp(heightReference) || defined(scene),
+      "Clamped HeightReference requires `options.scene`.",
+    );
+    //>>includeEnd('debug');
+
     if (parseResult.pointCount > 0) {
-      /** @type {Record<string, unknown>} */
-      const pointOptions = {
+      //>>includeStart('debug', pragmas.debug);
+      if (isHeightReferenceClamp(heightReference)) {
+        oneTimeWarning(
+          "geojson-heightref",
+          "Clamped HeightReference unsupported on BufferPointCollection.",
+        );
+      }
+      //>>includeEnd('debug');
+
+      this._points = new BufferPointCollection({
         primitiveCountMax: parseResult.pointCount,
         allowPicking: allowPicking,
-      };
-      this._points = new BufferPointCollection(pointOptions);
+      });
     }
 
     if (parseResult.polylineCount > 0) {
-      /** @type {Record<string, unknown>} */
-      const polylineOptions = {
+      this._polylines = new BufferPolylineCollection({
         primitiveCountMax: parseResult.polylineCount,
         vertexCountMax: parseResult.polylineVertexCount,
         allowPicking: allowPicking,
-      };
-      this._polylines = new BufferPolylineCollection(polylineOptions);
+        heightReference,
+      });
     }
 
     if (parseResult.polygonCount > 0) {
-      /** @type {Record<string, unknown>} */
-      const polygonOptions = {
+      this._polygons = new BufferPolygonCollection({
         primitiveCountMax: parseResult.polygonCount,
         vertexCountMax: parseResult.polygonVertexCount,
         holeCountMax: parseResult.polygonHoleCount,
         triangleCountMax: parseResult.polygonTriangleCount,
         allowPicking: allowPicking,
-      };
-      this._polygons = new BufferPolygonCollection(polygonOptions);
+        heightReference,
+      });
     }
 
     const scratch = new Cartesian3();
@@ -338,30 +393,65 @@ class GeoJsonPrimitive {
       return;
     }
 
-    if (defined(this._points)) {
-      this._points.update(frameState);
+    const points = this._points;
+    const polylines = this._polylines;
+    const polygons = this._polygons;
+    const frameNumber = frameState.frameNumber;
+    const heightReference = this._heightReference;
+
+    const vectorProvider = isHeightReferenceClamp(heightReference)
+      ? // @ts-expect-error Missing types, non-ES6 class.
+        /** @type {VectorProvider} */ (this._scene.vectorProvider)
+      : null;
+
+    if (defined(points)) {
+      points.update(frameState);
     }
-    if (defined(this._polylines)) {
-      this._polylines.update(frameState);
+
+    if (defined(polylines)) {
+      if (defined(vectorProvider)) {
+        vectorProvider.markForFrame(polylines, frameNumber, heightReference);
+      } else {
+        polylines.update(frameState);
+      }
     }
-    if (defined(this._polygons)) {
-      this._polygons.update(frameState);
+
+    if (defined(polygons)) {
+      if (defined(vectorProvider)) {
+        vectorProvider.markForFrame(polygons, frameNumber, heightReference);
+      } else {
+        polygons.update(frameState);
+      }
     }
   }
 
   destroy() {
+    const vectorProvider = isHeightReferenceClamp(this._heightReference)
+      ? // @ts-expect-error Missing types, non-ES6 class.
+        /** @type {VectorProvider} */ (this._scene.vectorProvider)
+      : null;
+
     if (this._points) {
       this._points.destroy();
       this._points = undefined;
     }
+
     if (this._polylines) {
+      if (defined(vectorProvider)) {
+        vectorProvider.remove(this._polylines);
+      }
       this._polylines.destroy();
       this._polylines = undefined;
     }
+
     if (this._polygons) {
+      if (defined(vectorProvider)) {
+        vectorProvider.remove(this._polygons);
+      }
       this._polygons.destroy();
       this._polygons = undefined;
     }
+
     return destroyObject(this);
   }