@loaders.gl/gltf 4.3.0-alpha.7 → 4.3.0-beta.1

package/src/lib/api/gltf-extensions.ts

@@ -1,6 +1,7 @@
 /* eslint-disable camelcase */
 import {GLTF} from '../types/gltf-json-schema';
 import type {GLTFLoaderOptions} from '../../gltf-loader';
+import {GLTFWriterOptions} from '../../gltf-writer';
 
 // GLTF 1.0 extensions (decode only)
 // import * as KHR_binary_gltf from './KHR_draco_mesh_compression';
@@ -33,7 +34,7 @@ type GLTFExtensionPlugin = {
     options: GLTFLoaderOptions,
     context
   ) => Promise<void>;
-  encode?: (gltfData: {json: GLTF}, options: GLTFLoaderOptions) => void;
+  encode?: (gltfData: {json: GLTF}, options: GLTFWriterOptions) => void;
 };
 
 /**
@@ -61,6 +62,11 @@ export const EXTENSIONS: GLTFExtensionPlugin[] = [
   EXT_feature_metadata
 ];
 
+/**
+ * List of extensions processed by the GLTFWriter
+ */
+const EXTENSIONS_ENCODING: GLTFExtensionPlugin[] = [EXT_structural_metadata, EXT_mesh_features];
+
 /** Call before any resource loading starts */
 export function preprocessExtensions(gltf, options: GLTFLoaderOptions = {}, context?) {
   const extensions = EXTENSIONS.filter((extension) => useExtension(extension.name, options));
@@ -79,6 +85,14 @@ export async function decodeExtensions(gltf, options: GLTFLoaderOptions = {}, co
   }
 }
 
+/** Call before resource writing */
+export function encodeExtensions(gltf, options: GLTFWriterOptions = {}) {
+  for (const extension of EXTENSIONS_ENCODING) {
+    gltf = extension.encode?.(gltf, options) ?? gltf;
+  }
+  return gltf;
+}
+
 function useExtension(extensionName: string, options: GLTFLoaderOptions) {
   const excludes = options?.gltf?.excludeExtensions || {};
   const exclude = extensionName in excludes && !excludes[extensionName];

package/src/lib/api/gltf-scenegraph.ts

@@ -557,9 +557,6 @@ export class GLTFScenegraph {
 
   /** Pack the binary chunk */
   createBinaryChunk(): void {
-    // Encoder expects this array undefined or empty
-    this.gltf.buffers = [];
-
     // Allocate total array
     const totalByteLength = this.byteLength;
     const arrayBuffer = new ArrayBuffer(totalByteLength);
@@ -583,6 +580,7 @@ export class GLTFScenegraph {
 
     // Put arrayBuffer to sourceBuffers for possible additional writing data in the chunk
     this.sourceBuffers = [arrayBuffer];
+    this.gltf.buffers = [{arrayBuffer, byteOffset: 0, byteLength: arrayBuffer.byteLength}];
   }
 
   // PRIVATE

package/src/lib/encoders/encode-gltf.ts

@@ -1,4 +1,6 @@
 import {encodeGLBSync} from './encode-glb';
+import {GLTFWriterOptions} from '../../gltf-writer';
+import {GLTFWithBuffers} from '@loaders.gl/gltf';
 
 export type GLTFEncodeOptions = Record<string, any>;
 
@@ -19,16 +21,21 @@ export type GLTFEncodeOptions = Record<string, any>;
  * @param options
  * @returns
  */
-export function encodeGLTFSync(gltf, arrayBuffer, byteOffset, options) {
-  convertBuffersToBase64(gltf);
+export function encodeGLTFSync(
+  gltf: GLTFWithBuffers,
+  arrayBuffer: DataView | null,
+  byteOffset: number,
+  options: GLTFWriterOptions
+) {
+  validateGltf(gltf);
 
   // TODO: Copy buffers to binary
 
   return encodeGLBSync(gltf, arrayBuffer, byteOffset, options);
 }
 
-function convertBuffersToBase64(gltf, {firstBuffer = 0} = {}) {
-  if (gltf.buffers && gltf.buffers.length > firstBuffer) {
+function validateGltf(gltf) {
+  if (gltf.buffers && gltf.buffers.length > 1) {
     throw new Error('encodeGLTF: multiple buffers not yet implemented');
   }
 }

package/src/lib/extensions/EXT_mesh_features.ts

@@ -4,6 +4,7 @@
 import type {NumericArray} from '@loaders.gl/loader-utils';
 import type {GLTF, GLTFMeshPrimitive} from '../types/gltf-json-schema';
 import {GLTFLoaderOptions} from '../../gltf-loader';
+import {GLTFWriterOptions} from '../../gltf-writer';
 import type {
   GLTF_EXT_mesh_features,
   GLTF_EXT_mesh_features_featureId
@@ -11,6 +12,7 @@ import type {
 
 import {GLTFScenegraph} from '../api/gltf-scenegraph';
 import {getPrimitiveTextureData} from './utils/3d-tiles-utils';
+import {getComponentTypeFromArray} from '../gltf-utils/gltf-utils';
 
 const EXT_MESH_FEATURES_NAME = 'EXT_mesh_features';
 export const name = EXT_MESH_FEATURES_NAME;
@@ -20,6 +22,13 @@ export async function decode(gltfData: {json: GLTF}, options: GLTFLoaderOptions)
   decodeExtMeshFeatures(scenegraph, options);
 }
 
+export function encode(gltfData: {json: GLTF}, options: GLTFWriterOptions): {json: GLTF} {
+  const scenegraph = new GLTFScenegraph(gltfData);
+  encodeExtMeshFeatures(scenegraph, options);
+  scenegraph.createBinaryChunk();
+  return scenegraph.gltf;
+}
+
 /**
  * Decodes feature metadata from extension.
  * @param {GLTFScenegraph} scenegraph - Instance of the class for structured access to GLTF data.
@@ -91,3 +100,124 @@ function processMeshPrimitiveFeatures(
     featureId.data = featureIdData;
   }
 }
+
+/*
+  Encoding data
+*/
+
+function encodeExtMeshFeatures(scenegraph: GLTFScenegraph, options: GLTFWriterOptions) {
+  const meshes = scenegraph.gltf.json.meshes;
+  if (!meshes) {
+    return;
+  }
+
+  // Iterate through all meshes/primitives.
+  for (const mesh of meshes) {
+    for (const primitive of mesh.primitives) {
+      encodeExtMeshFeaturesForPrimitive(scenegraph, primitive);
+    }
+  }
+}
+
+/**
+ * Creates ExtMeshFeatures, creates a featureId containing feature ids provided.
+ * @param scenegraph - Instance of the class for structured access to GLTF data.
+ * @param primitive - target primitive instance that will contain the extension
+ * @param featureIdArray - Array of feature id
+ * @param propertyTableIndex - index of the property table created by the ExtStructuralMetadata (optional).
+ */
+export function createExtMeshFeatures(
+  scenegraph: GLTFScenegraph,
+  primitive: GLTFMeshPrimitive,
+  featureIdArray: NumericArray,
+  propertyTableIndex?: number
+) {
+  if (!primitive.extensions) {
+    primitive.extensions = {};
+  }
+  let extension = primitive.extensions[EXT_MESH_FEATURES_NAME] as GLTF_EXT_mesh_features;
+  if (!extension) {
+    extension = {featureIds: []};
+    primitive.extensions[EXT_MESH_FEATURES_NAME] = extension;
+  }
+
+  const {featureIds} = extension;
+  const featureId: GLTF_EXT_mesh_features_featureId = {
+    featureCount: featureIdArray.length,
+    propertyTable: propertyTableIndex,
+    data: featureIdArray
+  };
+  featureIds.push(featureId);
+
+  scenegraph.addObjectExtension(primitive, EXT_MESH_FEATURES_NAME, extension);
+}
+
+/**
+ * Encodes a feature ID set to extension.
+ * @param scenegraph - Instance of the class for structured access to GLTF data.
+ * @param primitive - Primitive that the data encoded belongs to.
+ * @see https://github.com/CesiumGS/glTF/tree/3d-tiles-next/extensions/2.0/Vendor/EXT_mesh_features
+ */
+function encodeExtMeshFeaturesForPrimitive(
+  scenegraph: GLTFScenegraph,
+  primitive: GLTFMeshPrimitive
+) {
+  const extension = primitive.extensions?.[EXT_MESH_FEATURES_NAME] as GLTF_EXT_mesh_features;
+  if (!extension) {
+    return;
+  }
+  const featureIds: GLTF_EXT_mesh_features_featureId[] = extension.featureIds;
+  featureIds.forEach((featureId, elementIndex) => {
+    if (featureId.data) {
+      const {accessorKey, index} = createAccessorKey(primitive.attributes);
+      const typedArray = new Uint32Array(featureId.data as NumericArray);
+
+      // Clean up featureId object.
+      // Everything that could come from the original extension in case of round-trip decode/encode operations should be deleted.
+      // We need make sure the featureId object is clean.
+      featureIds[elementIndex] = {
+        featureCount: typedArray.length,
+        propertyTable: featureId.propertyTable,
+        attribute: index
+      };
+
+      scenegraph.gltf.buffers.push({
+        arrayBuffer: typedArray.buffer,
+        byteOffset: typedArray.byteOffset,
+        byteLength: typedArray.byteLength
+      });
+
+      const bufferViewIndex = scenegraph.addBufferView(typedArray);
+      const accessorIndex = scenegraph.addAccessor(bufferViewIndex, {
+        size: 1,
+        componentType: getComponentTypeFromArray(typedArray),
+        count: typedArray.length
+      });
+      primitive.attributes[accessorKey] = accessorIndex;
+    }
+  });
+}
+
+/**
+ * Creates an accessor key for the attribute array provided.
+ * The generated key has a suffix (number) that is the next consequtive in the list of existing accessors.
+ * @param attributes - attribute array
+ * @returns accessor key and the key suffix (number) used in the key.
+ */
+function createAccessorKey(attributes: {[k: string]: number}) {
+  const prefix = '_FEATURE_ID_';
+  // Search for all "_FEATURE_ID_n" attribures in the primitive provided if any.
+  // If there are some, e.g. "_FEATURE_ID_0", "_FEATURE_ID_1",
+  // we will add a new one with the name "_FEATURE_ID_2"
+  const attrs = Object.keys(attributes).filter((item) => item.indexOf(prefix) === 0);
+  let max = -1;
+  for (const a of attrs) {
+    const n = Number(a.substring(prefix.length));
+    if (n > max) {
+      max = n;
+    }
+  }
+  max++;
+  const accessorKey = `${prefix}${max}`;
+  return {accessorKey, index: max};
+}

package/src/lib/extensions/EXT_structural_metadata.ts

@@ -12,9 +12,11 @@ import type {
   GLTF_EXT_structural_metadata_GLTF,
   GLTF_EXT_structural_metadata_PropertyTexture,
   GLTF_EXT_structural_metadata_PropertyTable_Property,
-  GLTF_EXT_structural_metadata_Primitive
+  GLTF_EXT_structural_metadata_Primitive,
+  GLTF_EXT_structural_metadata_Class
 } from '../types/gltf-ext-structural-metadata-schema';
 import type {GLTFLoaderOptions} from '../../gltf-loader';
+import {GLTFWriterOptions} from '../../gltf-writer';
 
 import {GLTFScenegraph} from '../api/gltf-scenegraph';
 import {
@@ -37,6 +39,13 @@ export async function decode(gltfData: {json: GLTF}, options: GLTFLoaderOptions)
   decodeExtStructuralMetadata(scenegraph, options);
 }
 
+export function encode(gltfData: {json: GLTF}, options: GLTFWriterOptions) {
+  const scenegraph = new GLTFScenegraph(gltfData);
+  encodeExtStructuralMetadata(scenegraph, options);
+  scenegraph.createBinaryChunk();
+  return scenegraph.gltf;
+}
+
 /*
 // Example of the extension.
 // See more info at https://github.com/CesiumGS/glTF/tree/3d-tiles-next/extensions/2.0/Vendor/EXT_structural_metadata
@@ -701,3 +710,225 @@ function getEnumByValue(
 
   return null;
 }
+
+/*
+  Encoding data
+*/
+
+export interface PropertyAttribute {
+  name: string;
+  elementType: string;
+  componentType?: string;
+  values: number[] | string[];
+}
+
+const SCHEMA_CLASS_ID_DEFAULT = 'schemaClassId';
+
+function encodeExtStructuralMetadata(scenegraph: GLTFScenegraph, options: GLTFWriterOptions) {
+  const extension: GLTF_EXT_structural_metadata_GLTF | null = scenegraph.getExtension(
+    EXT_STRUCTURAL_METADATA_NAME
+  );
+  if (!extension) {
+    return;
+  }
+  if (extension.propertyTables) {
+    for (const table of extension.propertyTables) {
+      const classId = table.class;
+      const schemaClass = extension.schema?.classes?.[classId];
+      if (table.properties && schemaClass) {
+        encodeProperties(table, schemaClass, scenegraph);
+      }
+    }
+  }
+}
+
+function encodeProperties(
+  table: GLTF_EXT_structural_metadata_PropertyTable,
+  schemaClass: GLTF_EXT_structural_metadata_Class,
+  scenegraph: GLTFScenegraph
+) {
+  for (const propertyName in table.properties) {
+    const data = table.properties[propertyName].data;
+    if (data) {
+      const classProperty = schemaClass.properties[propertyName];
+      if (classProperty) {
+        const tableProperty = createPropertyTableProperty(
+          data as number[] | string[],
+          classProperty,
+          scenegraph
+        );
+        // Override table property that came with "data"
+        table.properties[propertyName] = tableProperty;
+      }
+    }
+  }
+}
+
+/**
+ * Creates ExtStructuralMetadata, creates the schema and creates a property table containing feature data provided.
+ * @param scenegraph - Instance of the class for structured access to GLTF data.
+ * @param propertyAttributes - property attributes
+ * @param classId - classId to use for encoding metadata.
+ * @returns Index of the table created.
+ */
+export function createExtStructuralMetadata(
+  scenegraph: GLTFScenegraph,
+  propertyAttributes: PropertyAttribute[],
+  classId: string = SCHEMA_CLASS_ID_DEFAULT
+): number {
+  let extension: GLTF_EXT_structural_metadata_GLTF | null = scenegraph.getExtension(
+    EXT_STRUCTURAL_METADATA_NAME
+  );
+  if (!extension) {
+    extension = scenegraph.addExtension(EXT_STRUCTURAL_METADATA_NAME);
+  }
+
+  extension.schema = createSchema(propertyAttributes, classId, extension.schema);
+  const table = createPropertyTable(propertyAttributes, classId, extension.schema);
+  if (!extension.propertyTables) {
+    extension.propertyTables = [];
+  }
+
+  return extension.propertyTables.push(table) - 1; // index of the table
+}
+
+function createSchema(
+  propertyAttributes: PropertyAttribute[],
+  classId: string,
+  schemaToUpdate?: GLTF_EXT_structural_metadata_Schema
+): GLTF_EXT_structural_metadata_Schema {
+  const schema: GLTF_EXT_structural_metadata_Schema = schemaToUpdate ?? {
+    id: 'schema_id'
+  };
+  const schemaClass: GLTF_EXT_structural_metadata_Class = {
+    properties: {}
+  };
+  for (const attribute of propertyAttributes) {
+    const classProperty: GLTF_EXT_structural_metadata_ClassProperty = {
+      type: attribute.elementType,
+      componentType: attribute.componentType
+    };
+    schemaClass.properties[attribute.name] = classProperty;
+  }
+
+  schema.classes = {};
+  schema.classes[classId] = schemaClass;
+  return schema;
+}
+
+function createPropertyTable(
+  propertyAttributes: PropertyAttribute[],
+  classId: string,
+  schema: GLTF_EXT_structural_metadata_Schema
+): GLTF_EXT_structural_metadata_PropertyTable {
+  const table: GLTF_EXT_structural_metadata_PropertyTable = {
+    class: classId,
+    count: 0
+  };
+  // count is a number of rows in the table
+  let count = 0;
+  const schemaClass = schema.classes?.[classId];
+
+  for (const attribute of propertyAttributes) {
+    if (count === 0) {
+      count = attribute.values.length;
+    }
+
+    // The number of elements in all propertyAttributes must be the same
+    if (count !== attribute.values.length && attribute.values.length) {
+      throw new Error('Illegal values in attributes');
+    }
+
+    const classProperty = schemaClass?.properties[attribute.name];
+    if (classProperty) {
+      // const tableProperty = createPropertyTableProperty(attribute, classProperty, scenegraph);
+      if (!table.properties) {
+        table.properties = {};
+      }
+      // values is a required field. Its real value will be set while encoding data
+      table.properties[attribute.name] = {values: 0, data: attribute.values};
+    }
+  }
+
+  table.count = count;
+  return table;
+}
+
+function createPropertyTableProperty(
+  // attribute: PropertyAttribute,
+  values: number[] | string[],
+  classProperty: GLTF_EXT_structural_metadata_ClassProperty,
+  scenegraph: GLTFScenegraph
+): GLTF_EXT_structural_metadata_PropertyTable_Property {
+  const prop: GLTF_EXT_structural_metadata_PropertyTable_Property = {values: 0};
+
+  if (classProperty.type === 'STRING') {
+    const {stringData, stringOffsets} = createPropertyDataString(values as string[]);
+    prop.stringOffsets = createBufferView(stringOffsets, scenegraph);
+    prop.values = createBufferView(stringData, scenegraph);
+  } else if (classProperty.type === 'SCALAR' && classProperty.componentType) {
+    const data = createPropertyDataScalar(values as number[], classProperty.componentType);
+    prop.values = createBufferView(data, scenegraph);
+  }
+
+  return prop;
+}
+
+const COMPONENT_TYPE_TO_ARRAY_CONSTRUCTOR = {
+  INT8: Int8Array,
+  UINT8: Uint8Array,
+  INT16: Int16Array,
+  UINT16: Uint16Array,
+  INT32: Int32Array,
+  UINT32: Uint32Array,
+  INT64: Int32Array,
+  UINT64: Uint32Array,
+  FLOAT32: Float32Array,
+  FLOAT64: Float64Array
+};
+
+function createPropertyDataScalar(array: number[], componentType: string): TypedArray {
+  const numberArray: number[] = [];
+  for (const value of array) {
+    numberArray.push(Number(value));
+  }
+  const Construct = COMPONENT_TYPE_TO_ARRAY_CONSTRUCTOR[componentType];
+  if (!Construct) {
+    throw new Error('Illegal component type');
+  }
+  return new Construct(numberArray);
+}
+
+function createPropertyDataString(strings: string[]): {
+  stringData: TypedArray;
+  stringOffsets: TypedArray;
+} {
+  const utf8Encode = new TextEncoder();
+  const arr: Uint8Array[] = [];
+  let len = 0;
+  for (const str of strings) {
+    const uint8Array = utf8Encode.encode(str);
+    len += uint8Array.length;
+    arr.push(uint8Array);
+  }
+  const strArray = new Uint8Array(len);
+  const strOffsets: number[] = [];
+  let offset = 0;
+  for (const str of arr) {
+    strArray.set(str, offset);
+    strOffsets.push(offset);
+    offset += str.length;
+  }
+  strOffsets.push(offset); // The last offset represents the byte offset after the last string.
+  const stringOffsetsTypedArray = new Uint32Array(strOffsets); // Its length = len+1
+  return {stringData: strArray, stringOffsets: stringOffsetsTypedArray};
+}
+
+function createBufferView(typedArray: TypedArray, scenegraph: GLTFScenegraph): number {
+  scenegraph.gltf.buffers.push({
+    arrayBuffer: typedArray.buffer,
+    byteOffset: typedArray.byteOffset,
+    byteLength: typedArray.byteLength
+  });
+  return scenegraph.addBufferView(typedArray);
+}

package/src/lib/extensions/KHR_draco_mesh_compression.ts

@@ -5,8 +5,7 @@
 import type {LoaderContext} from '@loaders.gl/loader-utils';
 import {sliceArrayBuffer, parseFromContext} from '@loaders.gl/loader-utils';
 
-import {DracoLoader} from '@loaders.gl/draco';
-import {DracoLoaderOptions} from '@loaders.gl/draco';
+import {DracoLoader, DracoLoaderOptions} from '@loaders.gl/draco';
 
 import type {
   GLTF,