@loaders.gl/gltf 4.0.0-alpha.1 → 4.0.0-alpha.11

package/src/lib/extensions/deprecated/EXT_feature_metadata.ts

@@ -0,0 +1,404 @@
+/* eslint-disable camelcase */
+import type {GLTF} from '../../types/gltf-json-schema';
+import {GLTFScenegraph} from '../../api/gltf-scenegraph';
+import {getImageData} from '@loaders.gl/images';
+import {
+  ClassProperty,
+  EXT_feature_metadata_class_object,
+  EXT_feature_metadata_feature_table,
+  FeatureTableProperty,
+  GLTF_EXT_feature_metadata,
+  EXT_feature_metadata_feature_texture,
+  FeatureTextureProperty,
+  GLTFMeshPrimitive
+} from '../../types/gltf-json-schema';
+import {getComponentTypeFromArray} from '../../gltf-utils/gltf-utils';
+import {GLTFLoaderOptions} from '../../../gltf-loader';
+
+/** Extension name */
+const EXT_FEATURE_METADATA = 'EXT_feature_metadata';
+
+export const name = EXT_FEATURE_METADATA;
+
+export async function decode(gltfData: {json: GLTF}, options: GLTFLoaderOptions): Promise<void> {
+  const scenegraph = new GLTFScenegraph(gltfData);
+  decodeExtFeatureMetadata(scenegraph, options);
+}
+
+/**
+ * Decodes feature metadata from extension
+ * @param scenegraph
+ */
+function decodeExtFeatureMetadata(scenegraph: GLTFScenegraph, options: GLTFLoaderOptions): void {
+  const extension: GLTF_EXT_feature_metadata | null = scenegraph.getExtension(EXT_FEATURE_METADATA);
+  if (!extension) return;
+
+  const schemaClasses = extension.schema?.classes;
+
+  const {featureTables} = extension;
+  if (schemaClasses && featureTables) {
+    for (const schemaName in schemaClasses) {
+      const schemaClass = schemaClasses[schemaName];
+      const featureTable = findFeatureTableByName(featureTables, schemaName);
+
+      if (featureTable) {
+        handleFeatureTableProperties(scenegraph, featureTable, schemaClass);
+      }
+    }
+  }
+
+  const {featureTextures} = extension;
+  if (schemaClasses && featureTextures && options.gltf?.loadImages) {
+    for (const schemaName in schemaClasses) {
+      const schemaClass = schemaClasses[schemaName];
+      const featureTexture = findFeatureTextureByName(featureTextures, schemaName);
+
+      if (featureTexture) {
+        handleFeatureTextureProperties(scenegraph, featureTexture, schemaClass);
+      }
+    }
+  }
+}
+
+/**
+ * Navigate throw all properies in feature table and gets properties data.
+ * @param scenegraph
+ * @param featureTable
+ * @param schemaClass
+ */
+function handleFeatureTableProperties(
+  scenegraph: GLTFScenegraph,
+  featureTable: EXT_feature_metadata_feature_table,
+  schemaClass: EXT_feature_metadata_class_object
+): void {
+  for (const propertyName in schemaClass.properties) {
+    const schemaProperty = schemaClass.properties[propertyName];
+    const featureTableProperty = featureTable?.properties?.[propertyName];
+    const numberOfFeatures = featureTable.count;
+
+    if (featureTableProperty) {
+      const data = getPropertyDataFromBinarySource(
+        scenegraph,
+        schemaProperty,
+        numberOfFeatures,
+        featureTableProperty
+      );
+      featureTableProperty.data = data;
+    }
+  }
+}
+
+/**
+ * Navigate throw all properies in feature texture and gets properties data.
+ * Data will be stored in featureTexture.properties[propertyName].data
+ * @param scenegraph
+ * @param featureTexture
+ * @param schemaClass
+ */
+function handleFeatureTextureProperties(
+  scenegraph: GLTFScenegraph,
+  featureTexture: EXT_feature_metadata_feature_texture,
+  schemaClass: EXT_feature_metadata_class_object
+): void {
+  const attributeName = featureTexture.class;
+
+  for (const propertyName in schemaClass.properties) {
+    const featureTextureProperty = featureTexture?.properties?.[propertyName];
+
+    if (featureTextureProperty) {
+      const data = getPropertyDataFromTexture(scenegraph, featureTextureProperty, attributeName);
+      featureTextureProperty.data = data;
+    }
+  }
+}
+
+/**
+ * Decode properties from binary sourse based on property type.
+ * @param scenegraph
+ * @param schemaProperty
+ * @param numberOfFeatures
+ * @param featureTableProperty
+ */
+function getPropertyDataFromBinarySource(
+  scenegraph: GLTFScenegraph,
+  schemaProperty: ClassProperty,
+  numberOfFeatures: number,
+  featureTableProperty: FeatureTableProperty
+): Uint8Array | string[] {
+  const bufferView = featureTableProperty.bufferView;
+  // TODO think maybe we shouldn't get data only in Uint8Array format.
+  const dataArray: Uint8Array = scenegraph.getTypedArrayForBufferView(bufferView);
+
+  switch (schemaProperty.type) {
+    case 'STRING': {
+      // stringOffsetBufferView should be available for string type.
+      const stringOffsetBufferView = featureTableProperty.stringOffsetBufferView!;
+      const offsetsData = scenegraph.getTypedArrayForBufferView(stringOffsetBufferView);
+      return getStringAttributes(dataArray, offsetsData, numberOfFeatures);
+    }
+    default:
+  }
+
+  return dataArray;
+}
+
+/**
+ * Get properties from texture associated with all mesh primitives.
+ * @param scenegraph
+ * @param featureTextureProperty
+ * @param attributeName
+ * @returns Feature texture data
+ */
+function getPropertyDataFromTexture(
+  scenegraph: GLTFScenegraph,
+  featureTextureProperty: FeatureTextureProperty,
+  attributeName: string
+): number[] {
+  const json = scenegraph.gltf.json;
+  if (!json.meshes) {
+    return [];
+  }
+  const featureTextureTable: number[] = [];
+  for (const mesh of json.meshes) {
+    for (const primitive of mesh.primitives) {
+      processPrimitiveTextures(
+        scenegraph,
+        attributeName,
+        featureTextureProperty,
+        featureTextureTable,
+        primitive
+      );
+    }
+  }
+  return featureTextureTable;
+}
+
+// eslint-disable-next-line max-statements
+/**
+ * Processes data encoded in the texture associated with the primitive. This data will be accessible through the attributes.
+ * @param scenegraph
+ * @param attributeName
+ * @param featureTextureProperty
+ * @param featureTextureTable
+ * @param primitive
+ */
+function processPrimitiveTextures(
+  scenegraph: GLTFScenegraph,
+  attributeName: string,
+  featureTextureProperty: FeatureTextureProperty,
+  featureTextureTable: number[],
+  primitive: GLTFMeshPrimitive
+): void {
+  /*
+    texture.index is an index for the "textures" array.
+    The texture object referenced by this index looks like this:
+    {
+    "sampler": 0,
+    "source": 0
+    }
+    "sampler" is an index for the "samplers" array
+    "source" is an index for the "images" array that contains data. These data are stored in rgba channels of the image.
+
+    texture.texCoord is a number-suffix (like 1) for an attribute like "TEXCOORD_1" in meshes.primitives
+    The value of "TEXCOORD_1" is an accessor that is used to get coordinates. These coordinates ared used to get data from the image.
+  */
+  const json = scenegraph.gltf.json;
+  const textureData: number[] = [];
+  const texCoordAccessorKey = `TEXCOORD_${featureTextureProperty.texture.texCoord}`;
+  const texCoordAccessorIndex = primitive.attributes[texCoordAccessorKey];
+  const texCoordBufferView = scenegraph.getBufferView(texCoordAccessorIndex);
+  const texCoordArray: Uint8Array = scenegraph.getTypedArrayForBufferView(texCoordBufferView);
+
+  const textureCoordinates: Float32Array = new Float32Array(
+    texCoordArray.buffer,
+    texCoordArray.byteOffset,
+    texCoordArray.length / 4
+  );
+  // textureCoordinates contains UV coordinates of the actual data stored in the texture
+  // accessor.count is a number of UV pairs (they are stored as VEC2)
+
+  const textureIndex = featureTextureProperty.texture.index;
+  const texture = json.textures?.[textureIndex];
+  const imageIndex = texture?.source;
+  if (typeof imageIndex !== 'undefined') {
+    const image = json.images?.[imageIndex];
+    const mimeType = image?.mimeType;
+    const parsedImage = scenegraph.gltf.images?.[imageIndex];
+    if (parsedImage) {
+      for (let index = 0; index < textureCoordinates.length; index += 2) {
+        const value = getImageValueByCoordinates(
+          parsedImage,
+          mimeType,
+          textureCoordinates,
+          index,
+          featureTextureProperty.channels
+        );
+        textureData.push(value);
+      }
+    }
+  }
+  /*
+    featureTextureTable will contain unique values, e.g.
+      textureData = [24, 35, 28, 24]
+      featureTextureTable = [24, 35, 28]
+    featureIndices will contain indices hat refer featureTextureTable, e.g.
+      featureIndices = [0, 1, 2, 0]
+  */
+  const featureIndices: number[] = [];
+  for (const texelData of textureData) {
+    let index = featureTextureTable.findIndex((item) => item === texelData);
+    if (index === -1) {
+      index = featureTextureTable.push(texelData) - 1;
+    }
+    featureIndices.push(index);
+  }
+  const typedArray = new Uint32Array(featureIndices);
+  const bufferIndex =
+    scenegraph.gltf.buffers.push({
+      arrayBuffer: typedArray.buffer,
+      byteOffset: 0,
+      byteLength: typedArray.byteLength
+    }) - 1;
+  const bufferViewIndex = scenegraph.addBufferView(typedArray, bufferIndex, 0);
+  const accessorIndex = scenegraph.addAccessor(bufferViewIndex, {
+    size: 1,
+    componentType: getComponentTypeFromArray(typedArray),
+    count: typedArray.length
+  });
+  primitive.attributes[attributeName] = accessorIndex;
+}
+
+function getImageValueByCoordinates(
+  parsedImage: any,
+  mimeType: string | undefined,
+  textureCoordinates: Float32Array,
+  index: number,
+  channels: string
+) {
+  const CHANNELS_MAP = {
+    r: {offset: 0, shift: 0},
+    g: {offset: 1, shift: 8},
+    b: {offset: 2, shift: 16},
+    a: {offset: 3, shift: 24}
+  };
+
+  const u = textureCoordinates[index];
+  const v = textureCoordinates[index + 1];
+
+  let components = 1;
+  if (mimeType && (mimeType.indexOf('image/jpeg') !== -1 || mimeType.indexOf('image/png') !== -1))
+    components = 4;
+  const offset = coordinatesToOffset(u, v, parsedImage, components);
+  let value = 0;
+  for (const c of channels) {
+    const map = CHANNELS_MAP[c];
+    const val = getVal(parsedImage, offset + map.offset);
+    value |= val << map.shift;
+  }
+  return value;
+}
+
+function getVal(parsedImage: any, offset: number): number {
+  const imageData = getImageData(parsedImage);
+  if (imageData.data.length <= offset) {
+    throw new Error(`${imageData.data.length} <= ${offset}`);
+  }
+  return imageData.data[offset];
+}
+
+function coordinatesToOffset(
+  u: number,
+  v: number,
+  parsedImage: any,
+  componentsCount: number = 1
+): number {
+  const w = parsedImage.width;
+  const iX = emod(u) * (w - 1);
+  const indX = Math.round(iX);
+
+  const h = parsedImage.height;
+  const iY = emod(v) * (h - 1);
+  const indY = Math.round(iY);
+  const components = parsedImage.components ? parsedImage.components : componentsCount;
+  // components is a number of channels in the image
+  const offset = (indY * w + indX) * components;
+  return offset;
+}
+
+// The following is taken from tile-converter\src\i3s-converter\helpers\batch-ids-extensions.ts
+/**
+ * Handle UVs if they are out of range [0,1].
+ * @param n
+ * @param m
+ */
+function emod(n: number): number {
+  const a = ((n % 1) + 1) % 1;
+  return a;
+}
+
+/**
+ * Find the feature table by class name.
+ * @param featureTables
+ * @param schemaClassName
+ */
+function findFeatureTableByName(
+  featureTables: {[key: string]: EXT_feature_metadata_feature_table},
+  schemaClassName: string
+): EXT_feature_metadata_feature_table | null {
+  for (const featureTableName in featureTables) {
+    const featureTable = featureTables[featureTableName];
+
+    if (featureTable.class === schemaClassName) {
+      return featureTable;
+    }
+  }
+
+  return null;
+}
+
+function findFeatureTextureByName(
+  featureTextures: {[key: string]: EXT_feature_metadata_feature_texture},
+  schemaClassName: string
+): EXT_feature_metadata_feature_texture | null {
+  for (const featureTexturesName in featureTextures) {
+    const featureTable = featureTextures[featureTexturesName];
+
+    if (featureTable.class === schemaClassName) {
+      return featureTable;
+    }
+  }
+
+  return null;
+}
+
+/**
+ * Getting string attributes from binary data.
+ * Spec - https://github.com/CesiumGS/3d-tiles/tree/main/specification/Metadata#strings
+ * @param data
+ * @param offsetsData
+ * @param stringsCount
+ */
+function getStringAttributes(
+  data: Uint8Array,
+  offsetsData: Uint8Array,
+  stringsCount: number
+): string[] {
+  const stringsArray: string[] = [];
+  const textDecoder = new TextDecoder('utf8');
+
+  let stringOffset = 0;
+  const bytesPerStringSize = 4;
+
+  for (let index = 0; index < stringsCount; index++) {
+    // TODO check if it is multiplication on bytesPerStringSize is valid operation?
+    const stringByteSize =
+      offsetsData[(index + 1) * bytesPerStringSize] - offsetsData[index * bytesPerStringSize];
+    const stringData = data.subarray(stringOffset, stringByteSize + stringOffset);
+    const stringAttribute = textDecoder.decode(stringData);
+
+    stringsArray.push(stringAttribute);
+    stringOffset += stringByteSize;
+  }
+
+  return stringsArray;
+}

package/src/lib/extensions/deprecated/KHR_lights_punctual.ts

@@ -1,10 +1,10 @@
 // GLTF EXTENSION: KHR_lights_punctual
 // https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_lights_punctual
 
-import type {GLTF} from '../../types/gltf-types';
+import type {GLTF} from '../../types/gltf-json-schema';
 
 import {assert} from '../../utils/assert';
-import GLTFScenegraph from '../../api/gltf-scenegraph';
+import {GLTFScenegraph} from '../../api/gltf-scenegraph';
 
 const KHR_LIGHTS_PUNCTUAL = 'KHR_lights_punctual';
 

package/src/lib/extensions/deprecated/KHR_materials_unlit.ts

@@ -1,9 +1,9 @@
 // GLTF EXTENSION: KHR_materials_unlit
 // https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_materials_unlit
 
-import type {GLTF} from '../../types/gltf-types';
+import type {GLTF} from '../../types/gltf-json-schema';
 
-import GLTFScenegraph from '../../api/gltf-scenegraph';
+import {GLTFScenegraph} from '../../api/gltf-scenegraph';
 
 const KHR_MATERIALS_UNLIT = 'KHR_materials_unlit';
 
@@ -13,9 +13,6 @@ export async function decode(gltfData: {json: GLTF}): Promise<void> {
   const gltfScenegraph = new GLTFScenegraph(gltfData);
   const {json} = gltfScenegraph;
 
-  // Remove the top-level extension
-  gltfScenegraph.removeExtension(KHR_MATERIALS_UNLIT);
-
   // Any nodes that have the extension, add lights field pointing to light object
   // and remove the extension
   for (const material of json.materials || []) {
@@ -26,6 +23,9 @@ export async function decode(gltfData: {json: GLTF}): Promise<void> {
     }
     gltfScenegraph.removeObjectExtension(material, KHR_MATERIALS_UNLIT);
   }
+
+  // Remove the top-level extension
+  gltfScenegraph.removeExtension(KHR_MATERIALS_UNLIT);
 }
 
 export function encode(gltfData) {

package/src/lib/extensions/deprecated/KHR_techniques_webgl.ts

@@ -1,9 +1,9 @@
 // GLTF EXTENSION: KHR_techniques_webgl
 // https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_techniques_webgl
 
-import type {GLTF} from '../../types/gltf-types';
+import type {GLTF} from '../../types/gltf-json-schema';
 
-import GLTFScenegraph from '../../api/gltf-scenegraph';
+import {GLTFScenegraph} from '../../api/gltf-scenegraph';
 
 const KHR_TECHNIQUES_WEBGL = 'KHR_techniques_webgl';
 
@@ -33,6 +33,7 @@ export async function decode(gltfData: {json: GLTF}): Promise<void> {
       gltfScenegraph.removeObjectExtension(material, KHR_TECHNIQUES_WEBGL);
     }
 
+    // Remove the top-level extension
     gltfScenegraph.removeExtension(KHR_TECHNIQUES_WEBGL);
   }
 }

package/src/lib/gltf-utils/gltf-attribute-utils.ts

@@ -1,5 +1,5 @@
 // import type {TypedArray} from '../types/loader-utils';
-import type {GLTFAccessor} from '../types/gltf-types';
+import type {GLTFAccessor} from '../types/gltf-json-schema';
 // TODO - remove
 import {getAccessorTypeFromSize, getComponentTypeFromArray} from './gltf-utils';
 

package/src/lib/gltf-utils/gltf-constants.ts

@@ -1,4 +1,4 @@
-const COMPONENTS = {
+export const COMPONENTS = {
   SCALAR: 1,
   VEC2: 2,
   VEC3: 3,
@@ -8,7 +8,7 @@ const COMPONENTS = {
   MAT4: 16
 };
 
-const BYTES = {
+export const BYTES = {
   5120: 1, // BYTE
   5121: 1, // UNSIGNED_BYTE
   5122: 2, // SHORT

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

@@ -1,4 +1,11 @@
 import {assert} from '../utils/assert';
+import type {GLTFPostprocessed} from '../types/gltf-postprocessed-schema';
+
+/**
+ * Memory needed to store texture and all mipmap levels 1 + 1/4 + 1/16 + 1/64 + ...
+ * Minimum 1.33, but due to GPU layout may be 1.5
+ */
+const MIPMAP_FACTOR = 1.33;
 
 const TYPES = ['SCALAR', 'VEC2', 'VEC3', 'VEC4'];
 
@@ -77,3 +84,27 @@ export function getAccessorArrayTypeAndLength(accessor, bufferView) {
   assert(byteLength >= 0 && byteLength <= bufferView.byteLength);
   return {ArrayType, length, byteLength};
 }
+
+/**
+ * Calculate the GPU memory used by a GLTF tile, for both buffer and texture memory
+ * @param gltf - the gltf content of a GLTF tile
+ * @returns - total memory usage in bytes
+ */
+export function getMemoryUsageGLTF(gltf: GLTFPostprocessed): number {
+  let {images, bufferViews} = gltf;
+  images = images || [];
+  bufferViews = bufferViews || [];
+  const imageBufferViews = images.map((i) => i.bufferView);
+  bufferViews = bufferViews.filter((view) => !imageBufferViews.includes(view as any));
+
+  const bufferMemory = bufferViews.reduce((acc, view) => acc + view.byteLength, 0);
+
+  // Assume each pixel of the texture is 4 channel with mimmaps (which add 33%)
+  // TODO correctly handle compressed textures
+  const pixelCount = images.reduce((acc, image) => {
+    // @ts-ignore
+    const {width, height} = (image as any).image;
+    return acc + width * height;
+  }, 0);
+  return bufferMemory + Math.ceil(4 * pixelCount * MIPMAP_FACTOR);
+}