@cesium/engine 24.0.0 → 26.0.0

package/Source/Scene/VectorGltf3DTileContent.js

@@ -10,7 +10,6 @@ import BufferPolyline from "./BufferPolyline.js";
 import BufferPolylineCollection from "./BufferPolylineCollection.js";
 import BufferPolylineMaterial from "./BufferPolylineMaterial.js";
 import Cesium3DTileStyle from "./Cesium3DTileStyle.js";
-import Color from "../Core/Color.js";
 import Matrix4 from "../Core/Matrix4.js";
 import Model from "./Model/Model.js";
 import ModelUtility from "./Model/ModelUtility.js";
@@ -18,6 +17,7 @@ import Pass from "../Renderer/Pass.js";
 import createVectorTileBuffersFromModelComponents from "./Model/createVectorTileBuffersFromModelComponents.js";
 import defined from "../Core/defined.js";
 import destroyObject from "../Core/destroyObject.js";
+import DeveloperError from "../Core/DeveloperError.js";
 
 /** @import BufferPrimitive from "./BufferPrimitive.js"; */
 /** @import BufferPrimitiveCollection from "./BufferPrimitiveCollection.js"; */
@@ -25,8 +25,9 @@ import destroyObject from "../Core/destroyObject.js";
 /** @import Cesium3DContentGroup from "./Cesium3DContentGroup.js"; */
 /** @import Cesium3DTile from "./Cesium3DTile.js"; */
 /** @import Cesium3DTileBatchTable from "./Cesium3DTileBatchTable.js"; */
-/** @import Cesium3DTileFeature from "./Cesium3DTileFeature.js"; */
+/** @import Cesium3DTileVectorFeature from "./Cesium3DTileVectorFeature.js";*/
 /** @import Cesium3DTileset from "./Cesium3DTileset.js"; */
+/** @import Color from "../Core/Color.js"; */
 /** @import FrameState from "./FrameState.js"; */
 /** @import ImplicitMetadataView from "./ImplicitMetadataView.js"; */
 /** @import Ray from "../Core/Ray.js"; */
@@ -70,14 +71,33 @@ class VectorGltf3DTileContent {
     this._resource = resource;
 
     /** @type {Model} */
-    this._decodeModel = undefined;
+    this._model = undefined;
 
-    /** @type {Array<BufferPrimitiveCollection<BufferPrimitive>>} */
+    /**
+     * List of all vector primitive collections.
+     * @type {Array<BufferPrimitiveCollection<BufferPrimitive>>}
+     */
     this._collections = [];
 
-    /** @type {Array<Matrix4>} */
+    /**
+     * List of transform matrices for each collection; order matches 'collections'.
+     * @type {Array<Matrix4>}
+     */
     this._collectionLocalMatrices = [];
 
+    /**
+     * Maps vector primitive collection -> propertyTableId.
+     * @type {Map<BufferPrimitiveCollection<BufferPrimitive>, number>}
+     */
+    this._collectionFeatureTableIds = new Map();
+
+    /**
+     * Maps propertyTableId -> featureId -> feature. Note that Feature IDs are
+     * unique within their assigned property table, but not globally unique.
+     * @type {Map<number, Map<number, Cesium3DTileVectorFeature>>}
+     */
+    this._featuresByTableId = new Map();
+
     /** @type {ImplicitMetadataView} */
     this._metadata = undefined;
     /** @type {Cesium3DContentGroup} */
@@ -94,25 +114,27 @@ class VectorGltf3DTileContent {
   }
 
   get featuresLength() {
-    return this._collections.reduce((totalCount, collection) => {
-      return totalCount + collection.primitiveCount;
-    }, 0);
+    return this.batchTables.reduce(
+      (acc, batchTable) => acc + batchTable.featuresLength,
+      0,
+    );
   }
 
   get pointsLength() {
     return this._collections
       .filter((collection) => collection instanceof BufferPointCollection)
-      .reduce((totalPoints, collection) => {
-        return totalPoints + collection.primitiveCount;
-      }, 0);
+      .reduce((acc, collection) => acc + collection.primitiveCount, 0);
   }
 
   get trianglesLength() {
-    return this._collections
-      .filter((collection) => collection instanceof BufferPolygonCollection)
-      .reduce((totalPoints, collection) => {
-        return totalPoints + collection.triangleCount;
-      }, 0);
+    return this._collections.reduce((acc, collection) => {
+      if (collection instanceof BufferPolygonCollection) {
+        return acc + collection.triangleCount;
+      } else if (collection instanceof BufferPolylineCollection) {
+        return acc + (collection.vertexCount - collection.primitiveCount) * 2;
+      }
+      return acc;
+    }, 0);
   }
 
   get geometryByteLength() {
@@ -126,7 +148,11 @@ class VectorGltf3DTileContent {
   }
 
   get batchTableByteLength() {
-    return 0;
+    return this.batchTables.reduce(
+      // @ts-expect-error Missing types.
+      (acc, batchTable) => acc + batchTable.batchTableByteLength,
+      0,
+    );
   }
 
   /** @returns {undefined} */
@@ -150,9 +176,17 @@ class VectorGltf3DTileContent {
     return this._resource.getUrlComponent(true);
   }
 
-  /** @type {Cesium3DTileBatchTable} */
+  /** @type {Cesium3DTileBatchTable[]} */
+  get batchTables() {
+    return this._model._featureTables;
+  }
+
+  /**
+   * @type {Cesium3DTileBatchTable}
+   * @deprecated See {@link batchTables}.
+   */
   get batchTable() {
-    return undefined;
+    throw new DeveloperError("Deprecated: Use `content.batchTables`.");
   }
 
   /** @type {ImplicitMetadataView} */
@@ -174,20 +208,23 @@ class VectorGltf3DTileContent {
   }
 
   /**
-   * @param {number} _featureId
-   * @returns {Cesium3DTileFeature}
+   * @param {number} featureId
+   * @param {number} [featureTableId]
+   * @returns {Cesium3DTileVectorFeature}
    */
-  getFeature(_featureId) {
-    return undefined;
+  getFeature(featureId, featureTableId) {
+    return this._featuresByTableId.get(featureTableId)?.get(featureId);
   }
 
   /**
-   * @param {number} _featureId
-   * @param {string} _name
+   * @param {number} featureId
+   * @param {string} name
+   * @param {number} [featureTableId]
    * @returns {boolean}
    */
-  hasProperty(_featureId, _name) {
-    return false;
+  hasProperty(featureId, name, featureTableId) {
+    const feature = this.getFeature(featureId, featureTableId);
+    return feature ? feature.hasProperty(name) : false;
   }
 
   /**
@@ -195,17 +232,16 @@ class VectorGltf3DTileContent {
    * @param {Color} color
    */
   applyDebugSettings(enabled, color) {
-    color = enabled ? color : Color.WHITE;
-    this.applyStyle(new Cesium3DTileStyle({ color }));
+    const colorString = enabled
+      ? `color("${color.toCssHexString()}", 1.0)`
+      : 'color("white", 1.0)';
+    this.applyStyle(new Cesium3DTileStyle({ color: colorString }));
   }
 
   /**
    * @param {*} style
    */
   applyStyle(style) {
-    const show = style.show?.evaluate(null) ?? true;
-    const color = style.color?.evaluate(null, new Color());
-
     const isPointCollection = /** @param {unknown} c */ (c) =>
       c instanceof BufferPointCollection;
     const isPolylineCollection = /** @param {unknown} c */ (c) =>
@@ -213,33 +249,66 @@ class VectorGltf3DTileContent {
     const isPolygonCollection = /** @param {unknown} c */ (c) =>
       c instanceof BufferPolygonCollection;
 
-    Color.clone(color, pointMaterial.color);
-    pointMaterial.size = style.pointSize?.evaluate(null);
-    pointMaterial.outlineWidth = style.pointOutlineWidth?.evaluate(null);
-    style.pointOutlineColor?.evaluate(null, pointMaterial.outlineColor);
     for (const collection of this._collections.filter(isPointCollection)) {
+      const featureTableId = this._collectionFeatureTableIds.get(collection);
       for (let i = 0, il = collection.primitiveCount; i < il; i++) {
         collection.get(i, point);
-        point.show = show;
+        const feature = this.getFeature(point.featureId, featureTableId);
+
+        if (defined(style.show)) {
+          point.show = style.show.evaluate(feature);
+        }
+        if (defined(style.color)) {
+          style.color.evaluate(feature, pointMaterial.color);
+        }
+        if (defined(style.pointSize)) {
+          pointMaterial.size = style.pointSize.evaluate(feature);
+        }
+        if (defined(style.pointOutlineWidth)) {
+          pointMaterial.outlineWidth =
+            style.pointOutlineWidth.evaluate(feature);
+        }
+        if (defined(style.pointOutlineColor)) {
+          style.pointOutlineColor.evaluate(feature, pointMaterial.outlineColor);
+        }
+
         point.setMaterial(pointMaterial);
       }
     }
 
-    Color.clone(color, polylineMaterial.color);
-    polylineMaterial.width = style.lineWidth?.evaluate(null) ?? 1;
     for (const collection of this._collections.filter(isPolylineCollection)) {
+      const featureTableId = this._collectionFeatureTableIds.get(collection);
       for (let i = 0, il = collection.primitiveCount; i < il; i++) {
         collection.get(i, polyline);
-        polyline.show = show;
+        const feature = this.getFeature(polyline.featureId, featureTableId);
+
+        if (defined(style.show)) {
+          polyline.show = style.show.evaluate(feature);
+        }
+        if (defined(style.color)) {
+          style.color.evaluate(feature, polylineMaterial.color);
+        }
+        if (defined(style.lineWidth)) {
+          polylineMaterial.width = style.lineWidth.evaluate(feature);
+        }
+
         polyline.setMaterial(polylineMaterial);
       }
     }
 
-    Color.clone(color, polygonMaterial.color);
     for (const collection of this._collections.filter(isPolygonCollection)) {
+      const featureTableId = this._collectionFeatureTableIds.get(collection);
       for (let i = 0, il = collection.primitiveCount; i < il; i++) {
         collection.get(i, polygon);
-        polygon.show = show;
+        const feature = this.getFeature(polygon.featureId, featureTableId);
+
+        if (defined(style.show)) {
+          polygon.show = style.show.evaluate(feature);
+        }
+        if (defined(style.color)) {
+          style.color.evaluate(feature, polygonMaterial.color);
+        }
+
         polygon.setMaterial(polygonMaterial);
       }
     }
@@ -250,18 +319,14 @@ class VectorGltf3DTileContent {
    * @param {FrameState} frameState
    */
   update(_tileset, frameState) {
-    if (defined(this._decodeModel) && !this._ready) {
-      const model = this._decodeModel;
+    if (defined(this._model) && !this._ready) {
+      const model = this._model;
       model.modelMatrix = this._tile.computedTransform;
       model.update(frameState);
 
       // @ts-expect-error Requires Model conversion to ES6 class.
       if (model.ready) {
         initializeVectorPrimitives(this);
-        if (this._decodeModel) {
-          this._decodeModel.destroy();
-          this._decodeModel = undefined;
-        }
         this._ready = true;
       }
     }
@@ -297,8 +362,8 @@ class VectorGltf3DTileContent {
   }
 
   destroy() {
-    this._decodeModel?.destroy();
-    this._decodeModel = undefined;
+    this._model?.destroy();
+    this._model = undefined;
     this._collections.forEach((collection) => collection.destroy());
     this._collections.length = 0;
     return destroyObject(this);
@@ -308,16 +373,16 @@ class VectorGltf3DTileContent {
    * @param {Cesium3DTileset} tileset
    * @param {Cesium3DTile} tile
    * @param {Resource} resource
-   * @param {unknown} gltf
+   * @param {Uint8Array} glb GLB binary produced by buildVectorGltfFromMVT
    * @returns {Promise<VectorGltf3DTileContent>}
    */
-  static async fromGltf(tileset, tile, resource, gltf) {
+  static async fromGltf(tileset, tile, resource, glb) {
     const content = new VectorGltf3DTileContent(tileset, tile, resource);
-    const modelOptions = makeDecodeModelOptions(tileset, tile, content, gltf);
-    const decodeModel = await Model.fromGltfAsync(modelOptions);
+    const modelOptions = makeModelOptions(tileset, tile, content, glb);
+    const model = await Model.fromGltfAsync(modelOptions);
     // @ts-expect-error Requires Model conversion to ES6 class.
-    decodeModel.show = false;
-    content._decodeModel = decodeModel;
+    model.show = false;
+    content._model = model;
     return content;
   }
 }
@@ -326,13 +391,13 @@ class VectorGltf3DTileContent {
  * @param {Cesium3DTileset} tileset
  * @param {Cesium3DTile} tile
  * @param {VectorGltf3DTileContent} content
- * @param {unknown} gltf
+ * @param {Uint8Array} glb
  * @returns {*}
  * @ignore
  */
-function makeDecodeModelOptions(tileset, tile, content, gltf) {
+function makeModelOptions(tileset, tile, content, glb) {
   return {
-    gltf: gltf,
+    gltf: glb,
     basePath: content._resource,
     cull: false,
     releaseGltfJson: true,
@@ -359,7 +424,7 @@ function makeDecodeModelOptions(tileset, tile, content, gltf) {
  */
 function initializeVectorPrimitives(content) {
   // @ts-expect-error Requires Model conversion to ES6 class.
-  const components = content._decodeModel.sceneGraph.components;
+  const components = content._model.sceneGraph.components;
 
   const axisCorrection = ModelUtility.getAxisCorrectionMatrix(
     components.upAxis,
@@ -373,10 +438,15 @@ function initializeVectorPrimitives(content) {
     content._modelMatrix,
   );
 
-  const result = createVectorTileBuffersFromModelComponents(this, components);
+  const result = createVectorTileBuffersFromModelComponents(
+    content,
+    components,
+  );
 
   content._collections = result.collections;
   content._collectionLocalMatrices = result.collectionLocalMatrices;
+  content._collectionFeatureTableIds = result.collectionFeatureTableIds;
+  content._featuresByTableId = result.featuresByTableId;
 }
 
 export default VectorGltf3DTileContent;

package/Source/Scene/VertexAttributeSemantic.js

@@ -316,4 +316,6 @@ VertexAttributeSemantic.getVariableName = function (semantic, setIndex) {
   return variableName;
 };
 
-export default Object.freeze(VertexAttributeSemantic);
+Object.freeze(VertexAttributeSemantic);
+
+export default VertexAttributeSemantic;

package/Source/Scene/VerticalOrigin.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 /**
  * The vertical location of an origin relative to an object, e.g., a {@link Billboard}
  * or {@link Label}.  For example, setting the vertical origin to <code>TOP</code>
@@ -46,4 +48,7 @@ const VerticalOrigin = {
    */
   TOP: -1,
 };
-export default Object.freeze(VerticalOrigin);
+
+Object.freeze(VerticalOrigin);
+
+export default VerticalOrigin;

package/Source/Scene/VoxelBoxShape.js

@@ -76,10 +76,16 @@ function VoxelBoxShape() {
 
   this._renderBoundPlanes = new VoxelBoundsCollection({ planes: boundPlanes });
 
+  /**
+   * UV space transformation translation (JS-only, not a shader uniform)
+   * @type {Cartesian3}
+   * @private
+   */
+  this._localToShapeUvTranslate = new Cartesian3();
+
   this._shaderUniforms = {
     boxEcToXyz: new Matrix3(),
     boxLocalToShapeUvScale: new Cartesian3(),
-    boxLocalToShapeUvTranslate: new Cartesian3(),
   };
 
   this._shaderDefines = {
@@ -321,13 +327,13 @@ VoxelBoxShape.prototype.update = function (
     boundScale(min.z, max.z),
     shaderUniforms.boxLocalToShapeUvScale,
   );
-  shaderUniforms.boxLocalToShapeUvTranslate = Cartesian3.negate(
+  this._localToShapeUvTranslate = Cartesian3.negate(
     Cartesian3.multiplyComponents(
       boxLocalToShapeUvScale,
       min,
-      shaderUniforms.boxLocalToShapeUvTranslate,
+      this._localToShapeUvTranslate,
     ),
-    shaderUniforms.boxLocalToShapeUvTranslate,
+    this._localToShapeUvTranslate,
   );
 
   this._shaderMaximumIntersectionsLength = intersectionCount;
@@ -381,8 +387,8 @@ VoxelBoxShape.prototype.convertLocalToShapeUvSpace = function (
   Check.typeOf.object("result", result);
   //>>includeEnd('debug');
 
-  const { boxLocalToShapeUvScale, boxLocalToShapeUvTranslate } =
-    this._shaderUniforms;
+  const { boxLocalToShapeUvScale } = this._shaderUniforms;
+  const boxLocalToShapeUvTranslate = this._localToShapeUvTranslate;
 
   return Cartesian3.add(
     Cartesian3.multiplyComponents(

package/Source/Scene/VoxelContent.js

@@ -66,6 +66,8 @@ Object.defineProperties(VoxelContent.prototype, {
    * The metadata for this voxel content.
    * The metadata is an array of typed arrays, one for each field.
    * The data for one field is a flattened 3D array ordered by X, then Y, then Z.
+   *
+   * @memberof VoxelContent.prototype
    * @type {Int8Array[]|Uint8Array[]|Int16Array[]|Uint16Array[]|Int32Array[]|Uint32Array[]|Float32Array[]|Float64Array[]}
    * @readonly
    */

package/Source/Scene/VoxelCylinderShape.js

@@ -54,14 +54,20 @@ function VoxelCylinderShape() {
 
   this._renderBoundPlanes = new VoxelBoundsCollection({ planes: boundPlanes });
 
+  /**
+   * UV space transformation translations (JS-only, not shader uniforms)
+   * Components: [radius, angle, height] translation
+   * @type {Cartesian3}
+   * @private
+   */
+  this._localToShapeUvTranslate = new Cartesian3();
+
   this._shaderUniforms = {
     cameraShapePosition: new Cartesian3(),
     cylinderEcToRadialTangentUp: new Matrix3(),
     cylinderRenderRadiusMinMax: new Cartesian2(),
     cylinderRenderAngleMinMax: new Cartesian2(),
-    cylinderLocalToShapeUvRadius: new Cartesian2(),
-    cylinderLocalToShapeUvAngle: new Cartesian2(),
-    cylinderLocalToShapeUvHeight: new Cartesian2(),
+    cylinderLocalToShapeUvScale: new Cartesian3(),
     cylinderShapeUvAngleRangeOrigin: 0.0,
   };
 
@@ -359,30 +365,22 @@ VoxelCylinderShape.prototype.update = function (
   }
 
   const radiusRange = maxBounds.x - minBounds.x;
+  // Defaults are for the case where radiusRange is zero, to avoid division by zero.
   let radialScale = 0.0;
   let radialOffset = 1.0;
   if (radiusRange !== 0.0) {
     radialScale = 1.0 / radiusRange;
     radialOffset = -minBounds.x * radialScale;
   }
-  shaderUniforms.cylinderLocalToShapeUvRadius = Cartesian2.fromElements(
-    radialScale,
-    radialOffset,
-    shaderUniforms.cylinderLocalToShapeUvRadius,
-  );
 
   const heightRange = maxBounds.z - minBounds.z; // Default 2.0
+  // Defaults are for the case where heightRange is zero, to avoid division by zero.
   let heightScale = 0.0;
   let heightOffset = 1.0;
   if (heightRange !== 0.0) {
     heightScale = 1.0 / heightRange;
     heightOffset = -minBounds.z * heightScale;
   }
-  shaderUniforms.cylinderLocalToShapeUvHeight = Cartesian2.fromElements(
-    heightScale,
-    heightOffset,
-    shaderUniforms.cylinderLocalToShapeUvHeight,
-  );
 
   if (renderHasAngle) {
     shaderDefines["CYLINDER_HAS_RENDER_BOUNDS_ANGLE"] = true;
@@ -414,23 +412,31 @@ VoxelCylinderShape.prototype.update = function (
   const uvAngleRangeOrigin = (uvMaxAngle + 0.5 * uvAngleRangeZero) % 1.0;
   shaderUniforms.cylinderShapeUvAngleRangeOrigin = uvAngleRangeOrigin;
 
-  if (shapeAngleRange <= epsilonAngle) {
-    shaderUniforms.cylinderLocalToShapeUvAngle = Cartesian2.fromElements(
-      0.0,
-      1.0,
-      shaderUniforms.cylinderLocalToShapeUvAngle,
-    );
-  } else {
-    const scale = defaultAngleRange / shapeAngleRange;
+  // Defaults are for the case where shapeAngleRange is zero, to avoid division by zero.
+  let angleScale = 0.0;
+  let angleOffset = 1.0;
+  if (shapeAngleRange > epsilonAngle) {
+    angleScale = defaultAngleRange / shapeAngleRange;
     const shiftedMinAngle = uvMinAngle - uvAngleRangeOrigin;
-    const offset = -scale * (shiftedMinAngle - Math.floor(shiftedMinAngle));
-    shaderUniforms.cylinderLocalToShapeUvAngle = Cartesian2.fromElements(
-      scale,
-      offset,
-      shaderUniforms.cylinderLocalToShapeUvAngle,
-    );
+    angleOffset = -angleScale * (shiftedMinAngle - Math.floor(shiftedMinAngle));
   }
 
+  // Store scales in shader uniforms (GPU)
+  shaderUniforms.cylinderLocalToShapeUvScale = Cartesian3.fromElements(
+    radialScale,
+    angleScale,
+    heightScale,
+    shaderUniforms.cylinderLocalToShapeUvScale,
+  );
+
+  // Store translations in private property (JS-only)
+  this._localToShapeUvTranslate = Cartesian3.fromElements(
+    radialOffset,
+    angleOffset,
+    heightOffset,
+    this._localToShapeUvTranslate,
+  );
+
   this._shaderMaximumIntersectionsLength = intersectionCount;
 
   return true;
@@ -523,25 +529,20 @@ VoxelCylinderShape.prototype.convertLocalToShapeUvSpace = function (
   let angle = Math.atan2(positionLocal.y, positionLocal.x);
   let height = positionLocal.z;
 
-  const {
-    cylinderLocalToShapeUvRadius,
-    cylinderLocalToShapeUvAngle,
-    cylinderShapeUvAngleRangeOrigin,
-    cylinderLocalToShapeUvHeight,
-  } = this._shaderUniforms;
+  const { cylinderLocalToShapeUvScale, cylinderShapeUvAngleRangeOrigin } =
+    this._shaderUniforms;
+  const localToShapeUvTranslate = this._localToShapeUvTranslate;
 
-  radius =
-    radius * cylinderLocalToShapeUvRadius.x + cylinderLocalToShapeUvRadius.y;
+  radius = radius * cylinderLocalToShapeUvScale.x + localToShapeUvTranslate.x;
 
   // Convert angle to a "UV" in [0,1] with 0 defined at the center of the unoccupied space.
   angle = (angle + Math.PI) / (2.0 * Math.PI);
   angle -= cylinderShapeUvAngleRangeOrigin;
   angle = angle - Math.floor(angle);
   // Scale and shift so [0,1] covers the occupied space.
-  angle = angle * cylinderLocalToShapeUvAngle.x + cylinderLocalToShapeUvAngle.y;
+  angle = angle * cylinderLocalToShapeUvScale.y + localToShapeUvTranslate.y;
 
-  height =
-    height * cylinderLocalToShapeUvHeight.x + cylinderLocalToShapeUvHeight.y;
+  height = height * cylinderLocalToShapeUvScale.z + localToShapeUvTranslate.z;
 
   return Cartesian3.fromElements(radius, angle, height, result);
 };