@cesium/engine 26.2.0 → 26.3.1-wasm.0

package/Source/Scene/GlobeSurfaceShaderSet.js

@@ -82,6 +82,7 @@ class GlobeSurfaceShader {
  * @property {boolean} [hasExaggeration]
  * @property {boolean} [showUndergroundColor]
  * @property {boolean} [translucent]
+ * @property {boolean} [vectorAntialias]
  * @private
  */
 
@@ -141,6 +142,12 @@ class GlobeSurfaceShaderSet {
     const translucent = options.translucent;
     const vectorData = surfaceTile.vectorData;
     const hasVectorLayer = vectorData?.show;
+    const hasVectorPolylines = hasVectorLayer && vectorData.hasPolylines;
+    const hasVectorPolygons = hasVectorLayer && vectorData.hasPolygons;
+    const vectorAntialias = hasVectorLayer && options.vectorAntialias;
+    const vectorWidthInMeters = hasVectorPolylines && vectorData.hasMeterWidths;
+    const vectorMixedWidthUnits =
+      vectorWidthInMeters && vectorData.hasPixelWidths;
 
     let quantization = 0;
     let quantizationDefine = "";
@@ -205,7 +212,12 @@ class GlobeSurfaceShaderSet {
         (+translucent << 31)) >>>
         0) +
       (applyDayNightAlpha ? 0x100000000 : 0) +
-      (hasVectorLayer ? 0x200000000 : 0);
+      (hasVectorLayer ? 0x200000000 : 0) +
+      (hasVectorPolylines ? 0x400000000 : 0) +
+      (hasVectorPolygons ? 0x800000000 : 0) +
+      (vectorAntialias ? 0x1000000000 : 0) +
+      (vectorWidthInMeters ? 0x2000000000 : 0) +
+      (vectorMixedWidthUnits ? 0x4000000000 : 0);
 
     let currentClippingShaderState = 0;
     // @ts-expect-error Missing types.
@@ -263,12 +275,6 @@ class GlobeSurfaceShaderSet {
         );
       }
 
-      // Need to go before GlobeFS
-      if (currentClippingPolygonsShaderState !== 0) {
-        fs.sources.unshift(getPolygonClippingFunction(frameState.context));
-        vs.sources.unshift(getUnpackClippingFunction(frameState.context));
-      }
-
       vs.defines.push(quantizationDefine);
       fs.defines.push(
         `TEXTURE_UNITS ${numberOfDayTextures}`,
@@ -364,20 +370,10 @@ class GlobeSurfaceShaderSet {
 
       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(
-          // @ts-expect-error Missing types.
-          `CLIPPING_POLYGON_REGIONS_LENGTH ${clippingPolygons.extentsCount}`,
-        );
-        vs.defines.push(
-          // @ts-expect-error Missing types.
-          `CLIPPING_POLYGON_REGIONS_LENGTH ${clippingPolygons.extentsCount}`,
-        );
       }
 
       if (colorCorrect) {
@@ -397,9 +393,27 @@ class GlobeSurfaceShaderSet {
       }
 
       if (hasVectorLayer) {
-        vs.defines.push("HAS_VECTOR_LAYER");
         fs.defines.push("HAS_VECTOR_LAYER");
-        fs.sources.unshift(VectorCommon); // before GlobeFS.
+        if (hasVectorPolylines) {
+          fs.defines.push("HAS_VECTOR_POLYLINES");
+        }
+        if (hasVectorPolygons) {
+          fs.defines.push("HAS_VECTOR_POLYGONS");
+        }
+        if (vectorAntialias) {
+          fs.defines.push("VECTOR_ANTIALIAS");
+        }
+        if (vectorWidthInMeters) {
+          fs.defines.push("VECTOR_WIDTH_IN_METERS");
+        }
+        if (vectorMixedWidthUnits) {
+          fs.defines.push("VECTOR_WIDTH_MIXED_UNITS");
+        }
+      }
+
+      // Polygon clipping builds on top of the same machinery vector rendering uses
+      if (hasVectorLayer || enableClippingPolygons) {
+        fs.sources.unshift(VectorCommon);
       }
 
       let computeDayColor =
@@ -538,41 +552,6 @@ function getPositionMode(sceneMode) {
   return positionMode;
 }
 
-/**
- * @param {Context} context
- * @ignore
- */
-function getPolygonClippingFunction(context) {
-  // return a noop for webgl1
-  // @ts-expect-error Missing types.
-  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);
-  }`;
-}
-
-/**
- * @param {Context} context
- * @ignore
- */
-function getUnpackClippingFunction(context) {
-  // return a noop for webgl1
-  // @ts-expect-error Missing types.
-  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);
-  }`;
-}
-
 /**
  * @param {boolean} useWebMercatorProjection
  * @returns {string}

package/Source/Scene/GlobeSurfaceTile.js

@@ -19,6 +19,7 @@ import TextureMagnificationFilter from "../Renderer/TextureMagnificationFilter.j
 import TextureMinificationFilter from "../Renderer/TextureMinificationFilter.js";
 import TextureWrap from "../Renderer/TextureWrap.js";
 import VertexArray from "../Renderer/VertexArray.js";
+import ClippingPolygonCollection from "./ClippingPolygonCollection.js";
 import ImageryState from "./ImageryState.js";
 import QuadtreeTileLoadState from "./QuadtreeTileLoadState.js";
 import TerrainState from "./TerrainState.js";
@@ -37,7 +38,8 @@ import TerrainState from "./TerrainState.js";
 /** @import TerrainProvider from "../Core/TerrainProvider.js"; */
 /** @import TileBoundingRegion from "./TileBoundingRegion.js"; */
 /** @import TileImagery from "./TileImagery.js"; */
-/** @import VectorProvider, { VectorTileData } from "../Core/VectorProvider.js"; */
+/** @import VectorProvider from "../Core/VectorProvider.js"; */
+/** @import { VectorTileData } from "../Core/VectorPipeline.js"; */
 
 /**
  * Contains additional information about a {@link QuadtreeTile} of the globe's surface, and
@@ -67,6 +69,12 @@ class GlobeSurfaceTile {
     /** @type {VectorTileData} */
     this.vectorData = undefined;
 
+    /**
+     * Clipping polygons build on top of the vector tile data system (both rely on the same rendering technique).
+     * @type {VectorTileData}
+     */
+    this.clippingPolygonData = undefined;
+
     /** @type {VertexArray} */
     this.vertexArray = undefined;
 
@@ -169,6 +177,11 @@ class GlobeSurfaceTile {
       this.vectorData = undefined;
     }
 
+    if (defined(this.clippingPolygonData)) {
+      ClippingPolygonCollection.releaseRectangleData(this.clippingPolygonData);
+      this.clippingPolygonData = undefined;
+    }
+
     this.terrainData = undefined;
 
     this.terrainState = TerrainState.UNLOADED;

package/Source/Scene/GlobeSurfaceTileProvider.js

@@ -40,6 +40,7 @@ import ClippingPlaneCollection from "./ClippingPlaneCollection.js";
 import ClippingPolygonCollection from "./ClippingPolygonCollection.js";
 import DepthFunction from "./DepthFunction.js";
 import GlobeSurfaceTile from "./GlobeSurfaceTile.js";
+import HeightReference from "./HeightReference.js";
 import ImageryLayer from "./ImageryLayer.js";
 import ImageryState from "./ImageryState.js";
 import PerInstanceColorAppearance from "./PerInstanceColorAppearance.js";
@@ -209,6 +210,12 @@ class GlobeSurfaceTileProvider {
      */
     this._clippingPolygons = undefined;
 
+    this._clippingPolygonsDirty = false;
+
+    this._removeClippingPolygonAdded = undefined;
+
+    this._removeClippingPolygonRemoved = undefined;
+
     /**
      * A property specifying a {@link Rectangle} used to selectively limit terrain and imagery rendering.
      * @type {Rectangle}
@@ -348,7 +355,33 @@ class GlobeSurfaceTileProvider {
   }
 
   set clippingPolygons(value) {
+    if (value === this._clippingPolygons) {
+      return;
+    }
+
     ClippingPolygonCollection.setOwner(value, this, "_clippingPolygons");
+
+    // First, remove the previous listeners if they exist
+    this._removeClippingPolygonAdded =
+      this._removeClippingPolygonAdded && this._removeClippingPolygonAdded();
+    this._removeClippingPolygonRemoved =
+      this._removeClippingPolygonRemoved &&
+      this._removeClippingPolygonRemoved();
+
+    this._clippingPolygonsDirty = true;
+
+    if (!defined(value)) {
+      return;
+    }
+
+    const markDirty = () => {
+      this._clippingPolygonsDirty = true;
+    };
+
+    this._removeClippingPolygonAdded =
+      value.polygonAdded.addEventListener(markDirty);
+    this._removeClippingPolygonRemoved =
+      value.polygonRemoved.addEventListener(markDirty);
   }
 
   /**
@@ -384,7 +417,8 @@ class GlobeSurfaceTileProvider {
     // Record regions dirtied by changed collections, re-bake overlapping
     // tiles, and build vector data for new surface tiles.
     const vectorProvider = this._vectorProvider;
-    vectorProvider.update();
+    vectorProvider.minimumTileScreenPixels = minimumTileScreenPixels(this);
+    vectorProvider.update(frameState.frameNumber);
     this._quadtree.forEachRenderedTile(
       /** @param {QuadtreeTile} tile */
       (tile) => {
@@ -397,6 +431,7 @@ class GlobeSurfaceTileProvider {
             tile.level,
             frameState.context,
             surfaceTile.vectorData,
+            HeightReference.CLAMP_TO_TERRAIN,
           );
         } else {
           surfaceTile.vectorData = vectorProvider.requestTileData(
@@ -404,6 +439,7 @@ class GlobeSurfaceTileProvider {
             tile.y,
             tile.level,
             frameState.context,
+            HeightReference.CLAMP_TO_TERRAIN,
           );
         }
       },
@@ -447,8 +483,6 @@ class GlobeSurfaceTileProvider {
     if (defined(clippingPolygons) && clippingPolygons.enabled) {
       // @ts-expect-error Missing types.
       clippingPolygons.update(frameState);
-      // @ts-expect-error Missing types.
-      clippingPolygons.queueCommands(frameState);
     }
 
     this._usedDrawCommands = 0;
@@ -555,6 +589,10 @@ class GlobeSurfaceTileProvider {
       );
     }
 
+    if (this._clippingPolygonsDirty) {
+      releaseClippingPolygonData(this);
+    }
+
     // Add the tile render commands to the command list, sorted by texture count.
     const tilesToRenderByTextureCount = this._tilesToRenderByTextureCount;
     for (
@@ -575,6 +613,7 @@ class GlobeSurfaceTileProvider {
       ) {
         const tile = tilesToRender[tileIndex];
         const surfaceTile = /** @type {GlobeSurfaceTile} */ (tile.data);
+        updateTileClippingPolygonData(this, tile, surfaceTile, frameState);
         const tileBoundingRegion = surfaceTile.tileBoundingRegion;
         addDrawCommandsForTile(this, tile, frameState);
         frameState.minimumTerrainHeight = Math.min(
@@ -594,7 +633,16 @@ class GlobeSurfaceTileProvider {
     // Add the tile pick commands from the tiles drawn last frame.
     const drawCommands = this._drawCommands;
     for (let i = 0, length = this._usedDrawCommands; i < length; ++i) {
-      pushCommand(drawCommands[i], frameState);
+      const command = drawCommands[i];
+      // Pooled commands move between tiles, so a cached pick command may still
+      // hold the vertex array of a tile that has since been released.
+      command.dirty = true;
+      command.derivedCommands.picking = undefined;
+      const logDepthCommand = command.derivedCommands.logDepth?.command;
+      if (defined(logDepthCommand)) {
+        logDepthCommand.derivedCommands.picking = undefined;
+      }
+      pushCommand(command, frameState);
     }
   }
 
@@ -1161,8 +1209,7 @@ class GlobeSurfaceTileProvider {
     this._tileProvider = this._tileProvider && this._tileProvider.destroy();
     this._clippingPlanes =
       this._clippingPlanes && this._clippingPlanes.destroy();
-    this._clippingPolygons =
-      this._clippingPolygons && this._clippingPolygons.destroy();
+    this._clippingPolygons = undefined;
     this._removeLayerAddedListener =
       this._removeLayerAddedListener && this._removeLayerAddedListener();
     this._removeLayerRemovedListener =
@@ -1171,6 +1218,11 @@ class GlobeSurfaceTileProvider {
       this._removeLayerMovedListener && this._removeLayerMovedListener();
     this._removeLayerShownListener =
       this._removeLayerShownListener && this._removeLayerShownListener();
+    this._removeClippingPolygonAdded =
+      this._removeClippingPolygonAdded && this._removeClippingPolygonAdded();
+    this._removeClippingPolygonRemoved =
+      this._removeClippingPolygonRemoved &&
+      this._removeClippingPolygonRemoved();
 
     return destroyObject(this);
   }
@@ -1325,6 +1377,40 @@ class GlobeSurfaceTileProvider {
   }
 }
 
+const scratchLevelZeroRectangle = new Rectangle();
+
+/**
+ * Estimates the smallest screen size, in pixels, a rendered tile can have. Screen-space error is
+ * the tile's geometric error projected to the screen, so the tile projects to that error scaled by
+ * their ratio in meters, and refinement holds the error above half the maximum.
+ *
+ * @param {GlobeSurfaceTileProvider} tileProvider
+ * @returns {number}
+ * @private
+ */
+function minimumTileScreenPixels(tileProvider) {
+  const geometricError = tileProvider.getLevelMaximumGeometricError(0);
+  if (geometricError <= 0.0) {
+    // No terrain provider yet.
+    return tileProvider._vectorProvider.minimumTileScreenPixels;
+  }
+
+  const tilingScheme = tileProvider.tilingScheme;
+  const rectangle = tilingScheme.tileXYToRectangle(
+    0,
+    0,
+    0,
+    scratchLevelZeroRectangle,
+  );
+  const tileWidth = rectangle.width * tilingScheme.ellipsoid.maximumRadius;
+
+  return (
+    ((tileWidth / geometricError) *
+      tileProvider._quadtree.maximumScreenSpaceError) /
+    2.0
+  );
+}
+
 function sortTileImageryByLayerIndex(a, b) {
   let aImagery = a.loadingImagery;
   if (!defined(aImagery)) {
@@ -1339,6 +1425,81 @@ function sortTileImageryByLayerIndex(a, b) {
   return aImagery.imageryLayer._layerIndex - bImagery.imageryLayer._layerIndex;
 }
 
+/**
+ * Releases cached clipping polygon data on all loaded tiles so it is rebuilt
+ * against the current collection, and clears the dirty flag.
+ * @param {GlobeSurfaceTileProvider} tileProvider
+ * @ignore
+ */
+function releaseClippingPolygonData(tileProvider) {
+  tileProvider._quadtree.forEachLoadedTile(
+    /** @param {QuadtreeTile} tile */
+    function (tile) {
+      const surfaceTile = /** @type {GlobeSurfaceTile} */ (tile.data);
+      if (!defined(surfaceTile?.clippingPolygonData)) {
+        return;
+      }
+
+      ClippingPolygonCollection.releaseRectangleData(
+        surfaceTile.clippingPolygonData,
+      );
+      surfaceTile.clippingPolygonData = undefined;
+    },
+  );
+  tileProvider._clippingPolygonsDirty = false;
+}
+
+/**
+ * Builds clipping polygon data for a tile about to be rendered, unless it is
+ * unclipped or its data was already built this frame.
+ * @param {GlobeSurfaceTileProvider} tileProvider
+ * @param {QuadtreeTile} tile
+ * @param {GlobeSurfaceTile} surfaceTile
+ * @param {FrameState} frameState
+ * @ignore
+ */
+function updateTileClippingPolygonData(
+  tileProvider,
+  tile,
+  surfaceTile,
+  frameState,
+) {
+  const clippingPolygons = tileProvider._clippingPolygons;
+  if (
+    !defined(clippingPolygons) ||
+    !clippingPolygons.enabled ||
+    !tile.isClipped ||
+    defined(surfaceTile.clippingPolygonData)
+  ) {
+    return;
+  }
+
+  surfaceTile.clippingPolygonData = clippingPolygons.requestRectangleData(
+    tile.rectangle,
+    frameState.context,
+  );
+}
+
+/**
+ * Determines whether a tile is wholly clipped away by inverse clipping. In
+ * inverse mode a clipped tile with no polygon geometry lies entirely outside
+ * every polygon, so all of it is clipped and it should not be drawn.
+ * @param {GlobeSurfaceTileProvider} tileProvider
+ * @param {GlobeSurfaceTile} surfaceTile
+ * @returns {boolean}
+ * @ignore
+ */
+function isTileClippedAwayByInversePolygons(tileProvider, surfaceTile) {
+  const clippingPolygons = tileProvider._clippingPolygons;
+  return (
+    defined(clippingPolygons) &&
+    clippingPolygons.enabled &&
+    clippingPolygons.length > 0 &&
+    clippingPolygons.inverse &&
+    (surfaceTile.clippingPolygonData?.polygonRings.length ?? 0) === 0
+  );
+}
+
 /**
  * @param {GlobeSurfaceTileProvider} surface
  * @param {FrameState} frameState
@@ -1910,22 +2071,6 @@ 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 () {
-      // @ts-expect-error Missing types.
-      const texture = globeSurfaceTileProvider._clippingPolygons.extentsTexture;
-      if (defined(texture)) {
-        return texture;
-      }
-      return frameState.context.defaultTexture;
-    },
     u_minimumBrightness: function () {
       return frameState.fog.minimumBrightness;
     },
@@ -1972,6 +2117,12 @@ function createTileUniformMap(frameState, globeSurfaceTileProvider) {
         this.properties.vectorColorTexture ?? frameState.context.defaultTexture
       );
     },
+    u_vectorPickColorTexture: function () {
+      return (
+        this.properties.vectorPickColorTexture ??
+        frameState.context.defaultTexture
+      );
+    },
     u_vectorSegmentPrimitiveIndicesTexture: function () {
       return (
         this.properties.vectorSegmentPrimitiveIndicesTexture ??
@@ -2002,6 +2153,26 @@ function createTileUniformMap(frameState, globeSurfaceTileProvider) {
         frameState.context.defaultTexture
       );
     },
+    u_vectorMetersPerUv: function () {
+      return this.properties.vectorMetersPerUv;
+    },
+    u_clippingEdgeTexture: function () {
+      return (
+        this.properties.clippingEdgeTexture ?? frameState.context.defaultTexture
+      );
+    },
+    u_clippingEdgePrimitiveIndicesTexture: function () {
+      return (
+        this.properties.clippingEdgePrimitiveIndicesTexture ??
+        frameState.context.defaultTexture
+      );
+    },
+    u_clippingGridCellIndicesTexture: function () {
+      return (
+        this.properties.clippingGridCellIndicesTexture ??
+        frameState.context.defaultTexture
+      );
+    },
 
     // make a separate object so that changes to the properties are seen on
     // derived commands that combine another uniform map with this one.
@@ -2068,11 +2239,17 @@ function createTileUniformMap(frameState, globeSurfaceTileProvider) {
       vectorSegmentTexture: undefined,
       vectorWidthTexture: undefined,
       vectorColorTexture: undefined,
+      vectorPickColorTexture: undefined,
       vectorSegmentPrimitiveIndicesTexture: undefined,
       vectorGridCellIndicesTexture: undefined,
       vectorPolygonEdgeTexture: undefined,
       vectorPolygonEdgePrimitiveIndicesTexture: undefined,
       vectorPolygonGridCellIndicesTexture: undefined,
+      vectorMetersPerUv: new Cartesian2(),
+
+      clippingEdgeTexture: undefined,
+      clippingEdgePrimitiveIndicesTexture: undefined,
+      clippingGridCellIndicesTexture: undefined,
     },
   };
 
@@ -2312,6 +2489,7 @@ const surfaceShaderSetOptionsScratch = {
   colorToAlpha: undefined,
   hasGeodeticSurfaceNormals: undefined,
   hasExaggeration: undefined,
+  vectorAntialias: undefined,
 };
 
 const defaultUndergroundColor = Color.TRANSPARENT;
@@ -2326,6 +2504,10 @@ const defaultUndergroundColorAlphaByDistance = new NearFarScalar();
 function addDrawCommandsForTile(tileProvider, tile, frameState) {
   const surfaceTile = /** @type {GlobeSurfaceTile} */ (tile.data);
 
+  if (isTileClippedAwayByInversePolygons(tileProvider, surfaceTile)) {
+    return;
+  }
+
   if (!defined(surfaceTile.vertexArray)) {
     if (surfaceTile.fill === undefined) {
       // No fill was created for this tile, probably because this tile is not connected to
@@ -2445,8 +2627,9 @@ function addDrawCommandsForTile(tileProvider, tile, frameState) {
     defined(tileProvider.clippingPolygons) &&
     tileProvider.clippingPolygons.enabled
   ) {
-    --maxTextures;
-    --maxTextures;
+    // Vector polygon clipping samples three textures: edges, per-edge
+    // primitive indices, and the grid cell index header.
+    maxTextures -= 3;
   }
 
   maxTextures -= globeTranslucencyState.numberOfTextureUniforms;
@@ -2565,6 +2748,8 @@ function addDrawCommandsForTile(tileProvider, tile, frameState) {
   surfaceShaderSetOptions.clippedByBoundaries = surfaceTile.clippedByBoundaries;
   surfaceShaderSetOptions.hasGeodeticSurfaceNormals = hasGeodeticSurfaceNormals;
   surfaceShaderSetOptions.hasExaggeration = hasExaggeration;
+  surfaceShaderSetOptions.vectorAntialias =
+    tileProvider.vectorProvider.antialias;
 
   const tileImageryCollection = surfaceTile.imagery;
   let imageryIndex = 0;
@@ -3019,6 +3204,7 @@ function addDrawCommandsForTile(tileProvider, tile, frameState) {
         vectorData.polylineSegmentTexture;
       uniformMapProperties.vectorWidthTexture = vectorData.widthTexture;
       uniformMapProperties.vectorColorTexture = vectorData.colorTexture;
+      uniformMapProperties.vectorPickColorTexture = vectorData.pickColorTexture;
       uniformMapProperties.vectorSegmentPrimitiveIndicesTexture =
         vectorData.polylineSegmentPrimitiveIndicesTexture;
       uniformMapProperties.vectorGridCellIndicesTexture =
@@ -3029,15 +3215,32 @@ function addDrawCommandsForTile(tileProvider, tile, frameState) {
         vectorData.polygonEdgePrimitiveIndicesTexture;
       uniformMapProperties.vectorPolygonGridCellIndicesTexture =
         vectorData.polygonGridCellIndicesTexture;
+      Cartesian2.clone(
+        vectorData.metersPerUv,
+        uniformMapProperties.vectorMetersPerUv,
+      );
+    }
+
+    const clippingPolygonData = surfaceTile.clippingPolygonData;
+    if (defined(clippingPolygonData)) {
+      uniformMapProperties.clippingEdgeTexture =
+        clippingPolygonData.polygonEdgeTexture;
+      uniformMapProperties.clippingEdgePrimitiveIndicesTexture =
+        clippingPolygonData.polygonEdgePrimitiveIndicesTexture;
+      uniformMapProperties.clippingGridCellIndicesTexture =
+        clippingPolygonData.polygonGridCellIndicesTexture;
     }
 
     // update clipping polygons
     const clippingPolygons = tileProvider._clippingPolygons;
+    const hasClippingPolygonGeometry =
+      (clippingPolygonData?.polygonRings.length ?? 0) > 0;
     const clippingPolygonsEnabled =
       defined(clippingPolygons) &&
       clippingPolygons.enabled &&
       clippingPolygons.length > 0 &&
-      tile.isClipped;
+      tile.isClipped &&
+      hasClippingPolygonGeometry;
 
     surfaceShaderSetOptions.numberOfDayTextures = numberOfDayTextures;
     surfaceShaderSetOptions.applyBrightness = applyBrightness;
@@ -3068,6 +3271,10 @@ function addDrawCommandsForTile(tileProvider, tile, frameState) {
     command.shaderProgram = tileProvider._surfaceShaderSet.getShaderProgram(
       surfaceShaderSetOptions,
     );
+    // Draped vectors are picked through the surface; zero elsewhere keeps the globe unpickable.
+    command.pickId = surfaceTile.vectorData?.show
+      ? "vectorPickColorOver(vec4(0.0))"
+      : undefined;
     command.castShadows = castShadows;
     command.receiveShadows = receiveShadows;
     command.renderState = renderState;

package/Source/Scene/GltfBufferViewLoader.js

@@ -2,9 +2,11 @@ import Check from "../Core/Check.js";
 import Frozen from "../Core/Frozen.js";
 import defined from "../Core/defined.js";
 import findMeshoptExtension from "./findMeshoptExtension.js";
-import { MeshoptDecoder } from "meshoptimizer";
 import ResourceLoader from "./ResourceLoader.js";
 import ResourceLoaderState from "./ResourceLoaderState.js";
+import TaskProcessor from "../Core/TaskProcessor.js";
+
+const decodeMeshoptTaskProcessor = new TaskProcessor("decodeMeshopt");
 
 /**
  * Loads a glTF buffer view.
@@ -159,29 +161,39 @@ async function loadResources(loader) {
     }
 
     const bufferTypedArray = bufferLoader.typedArray;
-    const bufferViewTypedArray = new Uint8Array(
+    let bufferViewTypedArray = new Uint8Array(
       bufferTypedArray.buffer,
       bufferTypedArray.byteOffset + loader._byteOffset,
       loader._byteLength,
     );
 
+    if (loader._hasMeshopt) {
+      // The buffer can be shared with other cached resources. Copy the encoded
+      // range before transferring it to the worker so the cache stays intact.
+      bufferViewTypedArray = new Uint8Array(bufferViewTypedArray);
+    }
+
     // Unload the buffer
     loader.unload();
 
     loader._typedArray = bufferViewTypedArray;
     if (loader._hasMeshopt) {
-      const count = loader._meshoptCount;
-      const byteStride = loader._meshoptByteStride;
-      const result = new Uint8Array(count * byteStride);
-      MeshoptDecoder.decodeGltfBuffer(
-        result,
-        count,
-        byteStride,
-        loader._typedArray,
-        loader._meshoptMode,
-        loader._meshoptFilter,
+      const result = await decodeMeshoptTaskProcessor.scheduleTask(
+        {
+          source: loader._typedArray,
+          count: loader._meshoptCount,
+          byteStride: loader._meshoptByteStride,
+          mode: loader._meshoptMode,
+          filter: loader._meshoptFilter,
+        },
+        [loader._typedArray.buffer],
       );
-      loader._typedArray = result;
+
+      if (loader.isDestroyed()) {
+        return;
+      }
+
+      loader._typedArray = new Uint8Array(result);
     }
 
     loader._state = ResourceLoaderState.READY;