@loaders.gl/i3s 3.3.0-alpha.3 → 3.3.0-alpha.4

package/src/i3s-loader.ts

@@ -41,7 +41,8 @@ export const I3SLoader: LoaderWithParser = {
       useDracoGeometry: true,
       useCompressedTextures: true,
       decodeTextures: true,
-      coordinateSystem: COORDINATE_SYSTEM.METER_OFFSETS
+      coordinateSystem: COORDINATE_SYSTEM.METER_OFFSETS,
+      colorsByAttribute: null
     }
   }
 };

package/src/index.ts

@@ -26,6 +26,8 @@ export type {
   I3SMaterialDefinition,
   TextureDefinitionInfo,
   MaterialDefinitionInfo,
-  FullExtent
+  FullExtent,
+  StatisticsInfo,
+  StatsInfo
 } from './types';
 export {COORDINATE_SYSTEM} from './lib/parsers/constants';

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

@@ -22,6 +22,8 @@ import {
 import {getUrlWithToken} from '../utils/url-utils';
 
 import {GL_TYPE_MAP, getConstructorForDataFormat, sizeOf, COORDINATE_SYSTEM} from './constants';
+import {I3SLoaderOptions} from '../../i3s-loader';
+import {customizeColors} from '../utils/customizeColors';
 
 const scratchVector = new Vector3([0, 0, 0]);
 
@@ -110,7 +112,7 @@ async function parseI3SNodeGeometry(
   content: I3STileContent,
   tileOptions: I3STileOptions,
   tilesetOptions: I3STilesetOptions,
-  options?: LoaderOptions
+  options?: I3SLoaderOptions
 ): Promise<I3STileContent> {
   const contentByteLength = arrayBuffer.byteLength;
   let attributes: I3SMeshAttributes;
@@ -199,6 +201,14 @@ async function parseI3SNodeGeometry(
     content.coordinateSystem = COORDINATE_SYSTEM.LNGLAT_OFFSETS;
   }
 
+  attributes.color = await customizeColors(
+    attributes.color,
+    attributes.id,
+    tileOptions,
+    tilesetOptions,
+    options
+  );
+
   content.attributes = {
     positions: attributes.position,
     normals: attributes.normal,

package/src/lib/utils/customizeColors.ts

@@ -0,0 +1,129 @@
+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} = {};
+  for (let i = 0; i < objectIdAttributeData[objectIdField.name].length; i++) {
+    attributeValuesMap[objectIdAttributeData[objectIdField.name][i]] = calculateColorForAttribute(
+      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> {
+  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
+  });
+  return objectIdAttributeData;
+}

package/src/types.ts

@@ -13,6 +13,9 @@ export enum DATA_TYPE {
   Float32 = 'Float32',
   Float64 = 'Float64'
 }
+
+export type COLOR = [number, number, number, number];
+
 /**
  * spec - https://github.com/Esri/i3s-spec/blob/master/docs/1.8/3DSceneLayer.cmn.md
  */
@@ -110,6 +113,13 @@ export type I3SParseOptions = {
    * Supported coordinate systems: METER_OFFSETS, LNGLAT_OFFSETS
    */
   coordinateSystem?: number;
+  colorsByAttribute?: {
+    attributeName: string;
+    minValue: number;
+    maxValue: number;
+    minColor: COLOR;
+    maxColor: COLOR;
+  };
 };
 
 export type I3STileOptions = {
@@ -118,11 +128,14 @@ export type I3STileOptions = {
   textureFormat?: I3STextureFormat;
   textureLoaderOptions?: any;
   materialDefinition?: I3SMaterialDefinition;
+  attributeUrls: string[];
   mbs: Mbs;
 };
 
 export type I3STilesetOptions = {
   store: Store;
+  attributeStorageInfo: AttributeStorageInfo[];
+  fields: Field[];
 };
 
 // TODO Replace "[key: string]: any" with actual defenition
@@ -157,7 +170,7 @@ export type BoundingVolumes = {
 export type Obb = {
   center: number[] | Vector3;
   halfSize: number[] | Vector3;
-  quaternion: Quaternion;
+  quaternion: number[] | Quaternion;
 };
 
 export type Mbs = [number, number, number, number];
@@ -1005,3 +1018,46 @@ type CameraPosition = {
   y: number;
   z: number;
 };
+
+/**
+ * Spec - https://github.com/Esri/i3s-spec/blob/master/docs/1.8/statsInfo.cmn.md
+ */
+export type StatsInfo = {
+  /** Represents the count of the value. */
+  totalValuesCount?: number;
+  /** Minimum attribute value for the entire layer. */
+  min?: number;
+  /** Maximum attribute value for the entire layer. */
+  max?: number;
+  /** Count for the entire layer. */
+  count?: number;
+  /** Sum of the attribute values over the entire layer. */
+  sum?: number;
+  /** Representing average or mean value. For example, sum/count. */
+  avg?: number;
+  /** Representing the standard deviation. */
+  stddev?: number;
+  /**	Representing variance. For example, stats.stddev *stats.stddev. */
+  variance?: number;
+  /** Represents the histogram. */
+  histogram?: Histogram;
+  /** An array of most frequently used values within the point cloud scene layer. */
+  mostFrequentValues?: ValueCount[];
+};
+
+/** Spec - https://github.com/Esri/i3s-spec/blob/master/docs/1.8/histogram.cmn.md */
+export type Histogram = {
+  /** Minimum attribute value for the entire layer. */
+  minimum: number;
+  /** Maximum attribute value for the entire layer. Maximum array size for stats.histo.counts is 256. */
+  maximum: number;
+  /** Count for the entire layer. */
+  counts: number;
+};
+
+export type ValueCount = {
+  /** Type of the attribute values after decompression, if applicable. Please note that string is not supported for point cloud scene layer attributes. */
+  value: number | string;
+  /** Count of the number of values. May exceed 32 bits. */
+  count: number;
+};