@cesium/engine 7.0.0 → 8.0.0

package/Source/Scene/I3SGeometry.js

@@ -1,6 +1,8 @@
 import Cartesian3 from "../Core/Cartesian3.js";
+import clone from "../Core/clone.js";
 import defined from "../Core/defined.js";
 import Matrix3 from "../Core/Matrix3.js";
+import srgbToLinear from "../Core/srgbToLinear.js";
 
 /**
  * This class implements an I3S Geometry. Each I3SGeometry
@@ -267,6 +269,19 @@ I3SGeometry.prototype.getClosestPointIndexOnTriangle = function (px, py, pz) {
   };
 };
 
+function convertColorFactor(factor) {
+  const convertedFactor = [];
+  const length = factor.length;
+  for (let i = 0; i < length; i++) {
+    if (i < 3) {
+      convertedFactor.push(srgbToLinear(factor[i]));
+    } else {
+      convertedFactor.push(factor[i]);
+    }
+  }
+  return convertedFactor;
+}
+
 /**
  * @private
  */
@@ -276,7 +291,9 @@ I3SGeometry.prototype._generateGltf = function (
   meshes,
   buffers,
   bufferViews,
-  accessors
+  accessors,
+  extensions,
+  extensionsUsed
 ) {
   // Get the material definition
   let gltfMaterial = {
@@ -344,6 +361,21 @@ I3SGeometry.prototype._generateGltf = function (
           }).url;
         }
       }
+
+      // Convert color factors from sRGB to linear color space
+      if (
+        defined(gltfMaterial.pbrMetallicRoughness) &&
+        defined(gltfMaterial.pbrMetallicRoughness.baseColorFactor)
+      ) {
+        gltfMaterial.pbrMetallicRoughness.baseColorFactor = convertColorFactor(
+          gltfMaterial.pbrMetallicRoughness.baseColorFactor
+        );
+      }
+      if (defined(gltfMaterial.emissiveFactor)) {
+        gltfMaterial.emissiveFactor = convertColorFactor(
+          gltfMaterial.emissiveFactor
+        );
+      }
     }
   } else if (defined(this._parent._data.textureData)) {
     // No material definition, but if there's a texture reference, we can create a simple material using it (version 1.6 support)
@@ -353,6 +385,10 @@ I3SGeometry.prototype._generateGltf = function (
     }).url;
     gltfMaterial.pbrMetallicRoughness.baseColorTexture = { index: 0 };
   }
+  if (defined(gltfMaterial.alphaMode)) {
+    // I3S specifies alphaMode values in lowercase, but glTF expects values in uppercase
+    gltfMaterial.alphaMode = gltfMaterial.alphaMode.toUpperCase();
+  }
 
   let gltfTextures = [];
   let gltfImages = [];
@@ -382,6 +418,36 @@ I3SGeometry.prototype._generateGltf = function (
     ];
   }
 
+  const gltfMaterials = [];
+  const meshesLength = meshes.length;
+  for (let meshIndex = 0; meshIndex < meshesLength; meshIndex++) {
+    const primitives = meshes[meshIndex].primitives;
+    const primitivesLength = primitives.length;
+    for (
+      let primitiveIndex = 0;
+      primitiveIndex < primitivesLength;
+      primitiveIndex++
+    ) {
+      const primitive = primitives[primitiveIndex];
+      if (defined(primitive.material)) {
+        // Create as many copies of the material as specified in the mesh primitives
+        while (primitive.material >= gltfMaterials.length) {
+          const material = clone(gltfMaterial, true);
+          gltfMaterials.push(material);
+        }
+        const primitiveMaterial = gltfMaterials[primitive.material];
+        if (defined(primitive.extra) && primitive.extra.isTransparent) {
+          // If the alpha mode is not specified in the original material but the geometry is transparent, we need to force set BLEND alpha mode. Otherwise the geometry will be rendered opaque.
+          if (!defined(primitiveMaterial.alphaMode)) {
+            primitiveMaterial.alphaMode = "BLEND";
+          }
+        } else if (primitiveMaterial.alphaMode === "BLEND") {
+          // If the geometry is not transparent, but the alpha mode is set to BLEND in the original material, we need to force set OPAQUE alpha mode. Otherwise the geometry will be rendered transparent.
+          primitiveMaterial.alphaMode = "OPAQUE";
+        }
+      }
+    }
+  }
   const gltfData = {
     scene: 0,
     scenes: [
@@ -394,13 +460,15 @@ I3SGeometry.prototype._generateGltf = function (
     buffers: buffers,
     bufferViews: bufferViews,
     accessors: accessors,
-    materials: [gltfMaterial],
+    materials: gltfMaterials,
     textures: gltfTextures,
     images: gltfImages,
     samplers: gltfSamplers,
     asset: {
       version: "2.0",
     },
+    extensions: extensions,
+    extensionsUsed: extensionsUsed,
   };
 
   return gltfData;

package/Source/Scene/I3SLayer.js

@@ -1,9 +1,13 @@
+import Cartesian4 from "../Core/Cartesian4.js";
+import clone from "../Core/clone.js";
+import Color from "../Core/Color.js";
 import defined from "../Core/defined.js";
 import Rectangle from "../Core/Rectangle.js";
 import Resource from "../Core/Resource.js";
 import RuntimeError from "../Core/RuntimeError.js";
 import Cesium3DTileset from "./Cesium3DTileset.js";
 import I3SNode from "./I3SNode.js";
+import I3SSymbology from "./I3SSymbology.js";
 
 /**
  * This class implements an I3S layer. In CesiumJS each I3SLayer creates a Cesium3DTileset.
@@ -14,24 +18,25 @@ import I3SNode from "./I3SNode.js";
  * @internalConstructor
  * @privateParam {I3SDataProvider} dataProvider The i3s data provider
  * @privateParam {object} layerData The layer data that is loaded from the scene layer
- * @privateParam {number} index The index of the layer to be reflected
+ * @privateParam {I3SDataProvider|I3SSublayer} parent The parent of that layer
  */
-function I3SLayer(dataProvider, layerData, index) {
+function I3SLayer(dataProvider, layerData, parent) {
   this._dataProvider = dataProvider;
+  this._parent = parent;
 
-  if (!defined(layerData.href) && defined(index)) {
+  if (!defined(layerData.href) && defined(layerData.id)) {
     // assign a default layer
-    layerData.href = `layers/${index}`;
+    layerData.href = `layers/${layerData.id}`;
   }
 
-  const dataProviderUrl = this._dataProvider.resource.getUrlComponent();
+  const parentUrl = this._parent.resource.getUrlComponent();
 
   let tilesetUrl = "";
-  if (dataProviderUrl.match(/layers\/\d/)) {
-    tilesetUrl = `${dataProviderUrl}`.replace(/\/+$/, "");
+  if (parentUrl.match(/layers\/\d/)) {
+    tilesetUrl = `${parentUrl}`.replace(/\/+$/, "");
   } else {
     // Add '/' to url if needed + `${layerData.href}` if tilesetUrl not already in ../layers/[id] format
-    tilesetUrl = `${dataProviderUrl}`
+    tilesetUrl = `${parentUrl}`
       .replace(/\/?$/, "/")
       .concat(`${layerData.href}`);
   }
@@ -53,6 +58,8 @@ function I3SLayer(dataProvider, layerData, index) {
   this._extent = undefined;
   this._tileset = undefined;
   this._geometryDefinitions = undefined;
+  this._filters = [];
+  this._symbology = undefined;
 
   this._computeGeometryDefinitions(true);
   this._computeExtent();
@@ -166,7 +173,7 @@ Object.defineProperties(I3SLayer.prototype, {
 /**
  * Loads the content, including the root node definition and its children
  * @param {Cesium3DTileset.ConstructorOptions} [cesium3dTilesetOptions] options for Cesium3dTileset constructor
- * @returns {Promise} A promise that is resolved when the layer data is loaded
+ * @returns {Promise<void>} A promise that is resolved when the layer data is loaded
  * @private
  */
 I3SLayer.prototype.load = async function (cesium3dTilesetOptions) {
@@ -176,6 +183,9 @@ I3SLayer.prototype.load = async function (cesium3dTilesetOptions) {
     );
   }
 
+  if (this._dataProvider.applySymbology) {
+    this._symbology = new I3SSymbology(this);
+  }
   await this._dataProvider.loadGeoidData();
   await this._loadRootNode(cesium3dTilesetOptions);
   await this._create3DTileset(cesium3dTilesetOptions);
@@ -387,11 +397,20 @@ I3SLayer.prototype._create3DTileset = async function (cesium3dTilesetOptions) {
   });
 
   const tilesetUrl = URL.createObjectURL(tilesetBlob);
+  const outlineColor = this._symbology?.defaultSymbology?.edges?.color;
+  if (defined(outlineColor) && !defined(cesium3dTilesetOptions?.outlineColor)) {
+    cesium3dTilesetOptions = defined(cesium3dTilesetOptions)
+      ? clone(cesium3dTilesetOptions)
+      : {};
+    cesium3dTilesetOptions.outlineColor = Color.fromCartesian4(
+      Cartesian4.fromArray(outlineColor)
+    );
+  }
   this._tileset = await Cesium3DTileset.fromUrl(
     tilesetUrl,
     cesium3dTilesetOptions
   );
-  this._tileset.show = this._dataProvider.show;
+  this._tileset.show = this._parent.show;
   this._tileset._isI3STileSet = true;
   this._tileset.tileUnload.addEventListener(function (tile) {
     tile._i3sNode._clearGeometryData();
@@ -406,4 +425,30 @@ I3SLayer.prototype._create3DTileset = async function (cesium3dTilesetOptions) {
   });
 };
 
+/**
+ * @private
+ */
+I3SLayer.prototype._updateVisibility = function () {
+  if (defined(this._tileset)) {
+    this._tileset.show = this._parent.show;
+  }
+};
+
+/**
+ * Filters the drawn elements of a layer to specific attribute names and values
+ * @param {I3SNode.AttributeFilter[]} [filters=[]] The collection of attribute filters
+ * @returns {Promise<void>} A promise that is resolved when the filter is applied
+ */
+I3SLayer.prototype.filterByAttributes = function (filters) {
+  // Filters are applied for each node in the layer when the node model is loaded
+  this._filters = defined(filters) ? clone(filters, true) : [];
+
+  // Forced filtering is required for loaded nodes only
+  const rootNode = this._rootNode;
+  if (defined(rootNode)) {
+    return rootNode._filterFeatures();
+  }
+  return Promise.resolve();
+};
+
 export default I3SLayer;

package/Source/Scene/I3SNode.js

@@ -1,4 +1,5 @@
 import Cartographic from "../Core/Cartographic.js";
+import Check from "../Core/Check.js";
 import defaultValue from "../Core/defaultValue.js";
 import defined from "../Core/defined.js";
 import Ellipsoid from "../Core/Ellipsoid.js";
@@ -15,6 +16,16 @@ import I3SFeature from "./I3SFeature.js";
 import I3SField from "./I3SField.js";
 import I3SGeometry from "./I3SGeometry.js";
 
+/**
+ * @typedef {object} I3SNode.AttributeFilter
+ *
+ * A filter given by an attribute name and values.
+ * The 3D feature object should be hidden if its value for the attribute name is not specified in the collection of values.
+ *
+ * @property {string} name The name of the attribute
+ * @property {string[]|number[]} values The collection of values
+ */
+
 /**
  * This class implements an I3S Node. In CesiumJS each I3SNode creates a Cesium3DTile.
  * <p>
@@ -64,6 +75,7 @@ function I3SNode(parent, ref, isRoot) {
   this._globalTransform = undefined;
   this._inverseGlobalTransform = undefined;
   this._inverseRotationMatrix = undefined;
+  this._symbologyData = undefined;
 }
 
 Object.defineProperties(I3SNode.prototype, {
@@ -192,10 +204,7 @@ I3SNode.prototype.load = async function () {
 
   // If we don't have a nodepage index load from json
   if (!defined(this._nodeIndex)) {
-    const data = await I3SDataProvider.loadJson(
-      this._resource,
-      this._dataProvider._traceFetches
-    );
+    const data = await I3SDataProvider.loadJson(this._resource);
     that._data = data;
     processData();
     return;
@@ -217,6 +226,12 @@ I3SNode.prototype.load = async function () {
   processData();
 };
 
+function createAndLoadField(node, storageInfo) {
+  const newField = new I3SField(node, storageInfo);
+  node._fields[storageInfo.name] = newField;
+  return newField.load();
+}
+
 /**
  * Loads the node fields.
  * @returns {Promise<void>} A promise that is resolved when the I3S Node fields are loaded
@@ -225,23 +240,50 @@ I3SNode.prototype.loadFields = function () {
   // Check if we must load fields
   const fields = this._layer._data.attributeStorageInfo;
 
-  const that = this;
-  function createAndLoadField(fields, index) {
-    const newField = new I3SField(that, fields[index]);
-    that._fields[newField._storageInfo.name] = newField;
-    return newField.load();
-  }
-
   const promises = [];
   if (defined(fields)) {
     for (let i = 0; i < fields.length; i++) {
-      promises.push(createAndLoadField(fields, i));
+      const storageInfo = fields[i];
+      const field = this._fields[storageInfo.name];
+      if (defined(field)) {
+        promises.push(field.load());
+      } else {
+        promises.push(createAndLoadField(this, storageInfo));
+      }
     }
   }
 
   return Promise.all(promises);
 };
 
+/**
+ * Loads the node field.
+ * @param {string} name The field name
+ * @returns {Promise<void>} A promise that is resolved when the I3S Node field is loaded
+ */
+I3SNode.prototype.loadField = function (name) {
+  //>>includeStart('debug', pragmas.debug);
+  Check.defined("name", name);
+  //>>includeEnd('debug');
+
+  const field = this._fields[name];
+  if (defined(field)) {
+    return field.load();
+  }
+
+  const fields = this._layer._data.attributeStorageInfo;
+  if (defined(fields)) {
+    for (let i = 0; i < fields.length; i++) {
+      const storageInfo = fields[i];
+      if (storageInfo.name === name) {
+        return createAndLoadField(this, storageInfo);
+      }
+    }
+  }
+
+  return Promise.resolve();
+};
+
 /**
  * Returns the fields for a given picked position
  * @param {Cartesian3} pickedPosition The picked position
@@ -608,6 +650,15 @@ I3SNode.prototype._create3DTileDefinition = function () {
   return inPlaceTileDefinition;
 };
 
+/**
+ * @private
+ */
+I3SNode.prototype._loadSymbology = async function () {
+  if (!defined(this._symbologyData) && defined(this._layer._symbology)) {
+    this._symbologyData = await this._layer._symbology._getSymbology(this);
+  }
+};
+
 /**
  * @private
  */
@@ -646,6 +697,10 @@ I3SNode.prototype._createContentURL = async function () {
   await Promise.all(dataPromises);
   // Binary glTF
   if (defined(this._geometryData) && this._geometryData.length > 0) {
+    if (this._dataProvider._applySymbology) {
+      await this._loadSymbology();
+    }
+
     const url = this._geometryData[0].resource.url;
     const geometrySchema = this._layer._data.store.defaultGeometrySchema;
     const geometryData = this._geometryData[0];
@@ -653,7 +708,8 @@ I3SNode.prototype._createContentURL = async function () {
       url,
       geometrySchema,
       geometryData,
-      this._featureData[0]
+      this._featureData[0],
+      this._symbologyData
     );
     if (!defined(result)) {
       // Postponed
@@ -666,7 +722,9 @@ I3SNode.prototype._createContentURL = async function () {
       result.meshData.meshes,
       result.meshData.buffers,
       result.meshData.bufferViews,
-      result.meshData.accessors
+      result.meshData.accessors,
+      result.meshData.rootExtensions,
+      result.meshData.extensionsUsed
     );
 
     this._geometryData[0]._customAttributes = result.meshData._customAttributes;
@@ -679,6 +737,91 @@ I3SNode.prototype._createContentURL = async function () {
   return URL.createObjectURL(glbDataBlob);
 };
 
+async function loadFilters(node) {
+  const filters = node._layer._filters;
+  const promises = [];
+  for (let i = 0; i < filters.length; i++) {
+    const promise = node.loadField(filters[i].name);
+    promises.push(promise);
+  }
+  await Promise.all(promises);
+  return filters;
+}
+
+function checkFeatureValue(featureIndex, field, filter) {
+  if (!defined(filter.values) || filter.values.length === 0) {
+    return false;
+  }
+
+  const fieldValues = defined(field) ? field.values : [];
+  let featureValue;
+  if (featureIndex < fieldValues.length) {
+    featureValue = fieldValues[featureIndex];
+  }
+  let matches = false;
+  for (let i = 0; i < filter.values.length; i++) {
+    if (filter.values[i] === featureValue) {
+      matches = true;
+      break;
+    }
+  }
+  return matches;
+}
+
+async function filterFeatures(node, contentModel) {
+  const batchTable = node._tile.content.batchTable;
+  if (defined(batchTable) && batchTable.featuresLength > 0) {
+    batchTable.setAllShow(true);
+
+    const filters = await loadFilters(node);
+    if (filters.length > 0) {
+      for (
+        let featureIndex = 0;
+        featureIndex < batchTable.featuresLength;
+        featureIndex++
+      ) {
+        for (let filterIndex = 0; filterIndex < filters.length; filterIndex++) {
+          const filter = filters[filterIndex];
+          if (
+            !checkFeatureValue(featureIndex, node._fields[filter.name], filter)
+          ) {
+            batchTable.setShow(featureIndex, false);
+            break;
+          }
+        }
+      }
+    }
+  }
+  contentModel.show = true;
+}
+
+/**
+ * @private
+ */
+I3SNode.prototype._filterFeatures = function () {
+  const promises = [];
+  // Forced filtering is required for loaded nodes only
+  for (let i = 0; i < this._children.length; i++) {
+    const promise = this._children[i]._filterFeatures();
+    promises.push(promise);
+  }
+
+  // Filters are applied for nodes with geometry data only
+  const contentModel = this._tile?.content?._model;
+  if (
+    defined(this._geometryData) &&
+    this._geometryData.length > 0 &&
+    defined(contentModel) &&
+    contentModel.ready
+  ) {
+    // The model needs to be hidden till the filters are applied
+    contentModel.show = false;
+    const promise = filterFeatures(this, contentModel);
+    promises.push(promise);
+  }
+  return Promise.all(promises);
+};
+
 // Reimplement Cesium3DTile.prototype.requestContent so that
 // We get a chance to load our own gltf from I3S data
 Cesium3DTile.prototype._hookedRequestContent =
@@ -700,19 +843,33 @@ Cesium3DTile.prototype.requestContent = function () {
 
   if (!this._isLoading) {
     this._isLoading = true;
+    const that = this;
     return this._i3sNode
       ._createContentURL()
       .then((url) => {
         if (!defined(url)) {
-          this._isLoading = false;
+          that._isLoading = false;
           return;
         }
 
-        this._contentResource = new Resource({ url: url });
-        return this._hookedRequestContent();
+        that._contentResource = new Resource({ url: url });
+        return that._hookedRequestContent();
       })
       .then((content) => {
-        this._isLoading = false;
+        // Filters are applied for nodes with geometry data only
+        const contentModel = content?._model;
+        if (
+          defined(that._i3sNode._geometryData) &&
+          that._i3sNode._geometryData.length > 0 &&
+          defined(contentModel)
+        ) {
+          // The model needs to be hidden till the filters are applied
+          contentModel.show = false;
+          contentModel.readyEvent.addEventListener(() => {
+            filterFeatures(that._i3sNode, contentModel);
+          });
+        }
+        that._isLoading = false;
         return content;
       });
   }

package/Source/Scene/I3SStatistics.js

@@ -0,0 +1,94 @@
+import defined from "../Core/defined.js";
+import I3SDataProvider from "./I3SDataProvider.js";
+import Resource from "../Core/Resource.js";
+
+/**
+ * This class implements an I3S statistics for Building Scene Layer.
+ * <p>
+ * Do not construct this directly, instead access statistics through {@link I3SDataProvider}.
+ * </p>
+ * @alias I3SStatistics
+ * @internalConstructor
+ */
+function I3SStatistics(dataProvider, uri) {
+  this._dataProvider = dataProvider;
+
+  this._resource = new Resource({ url: uri });
+  this._resource.setQueryParameters(dataProvider.resource.queryParameters);
+  this._resource.appendForwardSlash();
+}
+
+Object.defineProperties(I3SStatistics.prototype, {
+  /**
+   * Gets the resource for the statistics
+   * @memberof I3SStatistics.prototype
+   * @type {Resource}
+   * @readonly
+   */
+  resource: {
+    get: function () {
+      return this._resource;
+    },
+  },
+
+  /**
+   * Gets the I3S data for this object.
+   * @memberof I3SStatistics.prototype
+   * @type {object}
+   * @readonly
+   */
+  data: {
+    get: function () {
+      return this._data;
+    },
+  },
+
+  /**
+   * Gets the collection of attribute names.
+   * @memberof I3SStatistics.prototype
+   * @type {string[]}
+   * @readonly
+   */
+  names: {
+    get: function () {
+      const names = [];
+      const summary = this._data.summary;
+      if (defined(summary)) {
+        for (let i = 0; i < summary.length; ++i) {
+          names.push(summary[i].fieldName);
+        }
+      }
+      return names;
+    },
+  },
+});
+
+/**
+ * Loads the content.
+ * @returns {Promise<object>} A promise that is resolved when the data of the I3S statistics is loaded
+ * @private
+ */
+I3SStatistics.prototype.load = async function () {
+  this._data = await I3SDataProvider.loadJson(this._resource);
+  return this._data;
+};
+
+/**
+ * @private
+ */
+I3SStatistics.prototype._getValues = function (attributeName) {
+  const summary = this._data.summary;
+  if (defined(summary)) {
+    for (let i = 0; i < summary.length; ++i) {
+      const attribute = summary[i];
+      if (attribute.fieldName === attributeName) {
+        if (defined(attribute.mostFrequentValues)) {
+          return [...attribute.mostFrequentValues];
+        }
+        return [];
+      }
+    }
+  }
+};
+
+export default I3SStatistics;