@loaders.gl/i3s 4.0.0-alpha.4 → 4.0.0-alpha.6

package/src/lib/parsers/parse-i3s.ts

@@ -4,79 +4,95 @@ import {load} from '@loaders.gl/core';
 import {TILE_TYPE, TILE_REFINEMENT, TILESET_TYPE} from '@loaders.gl/tiles';
 import I3SNodePagesTiles from '../helpers/i3s-nodepages-tiles';
 import {generateTileAttributeUrls, getUrlWithToken} from '../utils/url-utils';
+import {
+  I3STilesetHeader,
+  I3STileHeader,
+  Mbs,
+  I3SMinimalNodeData,
+  Node3DIndexDocument
+} from '../../types';
+import type {LoaderOptions, LoaderContext} from '@loaders.gl/loader-utils';
 
-export function normalizeTileData(tile, options, context) {
-  tile.url = context.url;
-
-  if (tile.featureData) {
-    tile.featureUrl = `${tile.url}/${tile.featureData[0].href}`;
-  }
-
+export function normalizeTileData(tile : Node3DIndexDocument, context: LoaderContext): I3STileHeader {
+  const url: string = context.url || '';
+  let contentUrl: string | undefined;
   if (tile.geometryData) {
-    tile.contentUrl = `${tile.url}/${tile.geometryData[0].href}`;
+    contentUrl = `${url}/${tile.geometryData[0].href}`;
   }
 
+  let textureUrl: string | undefined;
   if (tile.textureData) {
-    tile.textureUrl = `${tile.url}/${tile.textureData[0].href}`;
+    textureUrl = `${url}/${tile.textureData[0].href}`;
   }
 
+  let attributeUrls: string[] | undefined;
   if (tile.attributeData) {
-    tile.attributeUrls = generateTileAttributeUrls(tile);
+    attributeUrls = generateTileAttributeUrls(url, tile);
   }
 
-  return normalizeTileNonUrlData(tile);
+  return normalizeTileNonUrlData({
+    ...tile,
+    url,
+    contentUrl,
+    textureUrl,
+    attributeUrls,
+    isDracoGeometry: false
+  });
 }
 
-export function normalizeTileNonUrlData(tile) {
-  const box = tile.obb
-    ? [
-      ...Ellipsoid.WGS84.cartographicToCartesian(tile.obb.center), // cartesian center of box
-      ...tile.obb.halfSize, // halfSize
-      ...tile.obb.quaternion // quaternion
-    ]
-    : undefined;
-  let sphere;
+export function normalizeTileNonUrlData(tile : I3SMinimalNodeData): I3STileHeader {
+  const boundingVolume: {box?: number[]; sphere?: number[]} = {};
+  let mbs: Mbs = [0, 0, 0, 1];
   if (tile.mbs) {
-    sphere = [
+    mbs = tile.mbs;
+    boundingVolume.sphere = [
       ...Ellipsoid.WGS84.cartographicToCartesian(tile.mbs.slice(0, 3)), // cartesian center of sphere
       tile.mbs[3] // radius of sphere
+    ] as Mbs;
+  } else if (tile.obb) {
+    boundingVolume.box = [
+      ...Ellipsoid.WGS84.cartographicToCartesian(tile.obb.center), // cartesian center of box
+      ...tile.obb.halfSize, // halfSize
+      ...tile.obb.quaternion // quaternion
     ];
-  } else if (box) {
     const obb = new OrientedBoundingBox().fromCenterHalfSizeQuaternion(
-      box.slice(0, 3),
+      boundingVolume.box.slice(0, 3),
       tile.obb.halfSize,
       tile.obb.quaternion
     );
     const boundingSphere = obb.getBoundingSphere();
-    sphere = [...boundingSphere.center, boundingSphere.radius];
-    tile.mbs = [...tile.obb.center, boundingSphere.radius];
+    boundingVolume.sphere = [...boundingSphere.center , boundingSphere.radius] as Mbs;
+    mbs = [...tile.obb.center, boundingSphere.radius] as Mbs;
   }
 
-  tile.boundingVolume = {
-    sphere,
-    box
-  };
-  tile.lodMetricType = tile.lodSelection[0].metricType;
-  tile.lodMetricValue = tile.lodSelection[0].maxError;
-  tile.transformMatrix = tile.transform;
-  tile.type = TILE_TYPE.MESH;
-  // TODO only support replacement for now
-  tile.refine = TILE_REFINEMENT.REPLACE;
+  const lodMetricType = tile.lodSelection?.[0].metricType;
+  const lodMetricValue = tile.lodSelection?.[0].maxError;
+  const transformMatrix = tile.transform;
+  const type = TILE_TYPE.MESH;
+  /**
+   * I3S specification supports only REPLACE
+   */
+  const refine = TILE_REFINEMENT.REPLACE;
 
-  return tile;
+  return {...tile, mbs, boundingVolume, lodMetricType, lodMetricValue, transformMatrix, type, refine};
 }
 
-export async function normalizeTilesetData(tileset, options, context) {
+export async function normalizeTilesetData(tileset : I3STilesetHeader, options : LoaderOptions, context: LoaderContext) {
   tileset.url = context.url;
 
   if (tileset.nodePages) {
     tileset.nodePagesTile = new I3SNodePagesTiles(tileset, options);
-    tileset.root = await tileset.nodePagesTile.formTileFromNodePages(0);
+    tileset.root = tileset.nodePagesTile.formTileFromNodePages(0);
   } else {
+    // @ts-expect-error options is not properly typed
     const rootNodeUrl = getUrlWithToken(`${tileset.url}/nodes/root`, options.i3s?.token);
     // eslint-disable-next-line no-use-before-define
     tileset.root = await load(rootNodeUrl, tileset.loader, {
-      i3s: {loadContent: false, isTileHeader: true, isTileset: false}
+      ...options,
+      i3s: {
+        // @ts-expect-error options is not properly typed
+        ...options.i3s,
+        loadContent: false, isTileHeader: true, isTileset: false}
     });
   }
 

package/src/lib/utils/customizeColors.ts

@@ -0,0 +1,134 @@
+import type {MeshAttribute} from '@loaders.gl/schema';
+import type {COLOR, I3STileOptions, I3STilesetOptions} from '../../types';
+
+import {load} from '@loaders.gl/core';
+import {getAttributeValueType, I3SAttributeLoader} from '../../i3s-attribute-loader';
+import {I3SLoaderOptions} from '../../i3s-loader';
+import {getUrlWithToken} from '../utils/url-utils';
+
+/**
+ * Modify vertex colors array to visualize 3D objects in a attribute driven way
+ * @param colors - vertex colors attribute
+ * @param featureIds - feature Ids attribute
+ * @param tileOptions - tile - related options
+ * @param tilesetOptions - tileset-related options
+ * @param options - loader options
+ * @returns midified colors attribute
+ */
+export async function customizeColors(
+  colors: MeshAttribute,
+  featureIds: MeshAttribute,
+  tileOptions: I3STileOptions,
+  tilesetOptions: I3STilesetOptions,
+  options?: I3SLoaderOptions
+): Promise<MeshAttribute> {
+  if (!options?.i3s?.colorsByAttribute) {
+    return colors;
+  }
+
+  const colorizeAttributeField = tilesetOptions.fields.find(
+    ({name}) => name === options?.i3s?.colorsByAttribute?.attributeName
+  );
+  if (
+    !colorizeAttributeField ||
+    !['esriFieldTypeDouble', 'esriFieldTypeInteger', 'esriFieldTypeSmallInteger'].includes(
+      colorizeAttributeField.type
+    )
+  ) {
+    return colors;
+  }
+
+  const colorizeAttributeData = await loadFeatureAttributeData(
+    colorizeAttributeField.name,
+    tileOptions,
+    tilesetOptions,
+    options
+  );
+  if (!colorizeAttributeData) {
+    return colors;
+  }
+
+  const objectIdField = tilesetOptions.fields.find(({type}) => type === 'esriFieldTypeOID');
+  if (!objectIdField) {
+    return colors;
+  }
+
+  const objectIdAttributeData = await loadFeatureAttributeData(
+    objectIdField.name,
+    tileOptions,
+    tilesetOptions,
+    options
+  );
+  if (!objectIdAttributeData) {
+    return colors;
+  }
+
+  const attributeValuesMap: {[key: number]: COLOR} = {};
+  // @ts-expect-error
+  for (let i = 0; i < objectIdAttributeData[objectIdField.name].length; i++) {
+    // @ts-expect-error
+    attributeValuesMap[objectIdAttributeData[objectIdField.name][i]] = calculateColorForAttribute(
+      // @ts-expect-error
+      colorizeAttributeData[colorizeAttributeField.name][i] as number,
+      options
+    );
+  }
+
+  for (let i = 0; i < featureIds.value.length; i++) {
+    const color = attributeValuesMap[featureIds.value[i]];
+    if (!color) {
+      continue; // eslint-disable-line no-continue
+    }
+    colors.value.set(color, i * 4);
+  }
+
+  return colors;
+}
+
+/**
+ * Calculate rgba color from the attribute value
+ * @param attributeValue - value of the attribute
+ * @param options - loader options
+ * @returns - color array for a specific attribute value
+ */
+function calculateColorForAttribute(attributeValue: number, options?: I3SLoaderOptions): COLOR {
+  if (!options?.i3s?.colorsByAttribute) {
+    return [255, 255, 255, 255];
+  }
+  const {minValue, maxValue, minColor, maxColor} = options.i3s.colorsByAttribute;
+  const rate = (attributeValue - minValue) / (maxValue - minValue);
+  const color: COLOR = [255, 255, 255, 255];
+  for (let i = 0; i < minColor.length; i++) {
+    color[i] = Math.round((maxColor[i] - minColor[i]) * rate + minColor[i]);
+  }
+  return color;
+}
+
+/**
+ * Load feature attribute data from the ArcGIS rest service
+ * @param attributeName - attribute name
+ * @param tileOptions - tile-related options
+ * @param tilesetOptions - tileset-related options
+ * @param options - loader options
+ * @returns - Array-like list of the attribute values
+ */
+async function loadFeatureAttributeData(
+  attributeName: string,
+  {attributeUrls}: I3STileOptions,
+  {attributeStorageInfo}: I3STilesetOptions,
+  options?: I3SLoaderOptions
+): Promise<{[key: string]: string[] | Uint32Array | Uint16Array | Float64Array | null} | null> {
+  const attributeIndex = attributeStorageInfo.findIndex(({name}) => attributeName === name);
+  if (attributeIndex === -1) {
+    return null;
+  }
+  const objectIdAttributeUrl = getUrlWithToken(attributeUrls[attributeIndex], options?.i3s?.token);
+  const attributeType = getAttributeValueType(attributeStorageInfo[attributeIndex]);
+  const objectIdAttributeData = await load(objectIdAttributeUrl, I3SAttributeLoader, {
+    attributeName,
+    attributeType
+  });
+
+  // @ts-expect-error TODO action engine
+  return objectIdAttributeData;
+}

package/src/lib/utils/url-utils.ts

@@ -1,12 +1,12 @@
-import {Tile} from '../../types';
+import {Node3DIndexDocument} from '../../types';
 
 /**
  * Generates url with token if it is exists.
- * @param {String} url
- * @param {any} token
- * @returns {string}
+ * @param url
+ * @param token
+ * @returns
  */
-export function getUrlWithToken(url, token = null) {
+export function getUrlWithToken(url: string, token: string | null = null): string {
   return token ? `${url}?token=${token}` : url;
 }
 
@@ -15,8 +15,8 @@ export function getUrlWithToken(url, token = null) {
  * @param tile
  * @returns list of attribute urls
  */
-export function generateTileAttributeUrls(tile: Tile): string[] {
-  const {url, attributeData} = tile;
+export function generateTileAttributeUrls(url: string, tile: Node3DIndexDocument): string[] {
+  const {attributeData = []} = tile;
   const attributeUrls: string[] = [];
 
   for (let index = 0; index < attributeData.length; index++) {