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

package/src/lib/extensions/KHR_texture_transform.ts

@@ -0,0 +1,305 @@
+/**
+ * https://github.com/KhronosGroup/glTF/blob/main/extensions/2.0/Khronos/KHR_texture_transform/README.md
+ */
+
+import {Vector3, Matrix3} from '@math.gl/core';
+import type {GLTFMeshPrimitive, GLTFWithBuffers} from '../types/gltf-types';
+import type {GLTFLoaderOptions} from '../../gltf-loader';
+import {getAccessorArrayTypeAndLength} from '../gltf-utils/gltf-utils';
+import {BYTES, COMPONENTS} from '../gltf-utils/gltf-constants';
+import {
+  Accessor,
+  BufferView,
+  MaterialNormalTextureInfo,
+  MaterialOcclusionTextureInfo,
+  TextureInfo as GLTFTextureInfo
+} from '../types/gltf-json-schema';
+import GLTFScenegraph from '../api/gltf-scenegraph';
+
+/** Extension name */
+const EXT_MESHOPT_TRANSFORM = 'KHR_texture_transform';
+
+export const name = EXT_MESHOPT_TRANSFORM;
+
+const scratchVector = new Vector3();
+const scratchRotationMatrix = new Matrix3();
+const scratchScaleMatrix = new Matrix3();
+
+/** Extension textureInfo https://github.com/KhronosGroup/glTF/tree/main/extensions/2.0/Khronos/KHR_texture_transform#gltf-schema-updates */
+type TextureInfo = {
+  /** The offset of the UV coordinate origin as a factor of the texture dimensions. */
+  offset?: [number, number];
+  /** Rotate the UVs by this many radians counter-clockwise around the origin. This is equivalent to a similar rotation of the image clockwise. */
+  rotation?: number;
+  /** The scale factor applied to the components of the UV coordinates. */
+  scale?: [number, number];
+  /** Overrides the textureInfo texCoord value if supplied, and if this extension is supported. */
+  texCoord?: number;
+};
+/** Intersection of all GLTF textures */
+type CompoundGLTFTextureInfo = GLTFTextureInfo &
+  MaterialNormalTextureInfo &
+  MaterialOcclusionTextureInfo;
+/** Parameters for TEXCOORD transformation */
+type TransformParameters = {
+  /** Original texCoord value https://www.khronos.org/registry/glTF/specs/2.0/glTF-2.0.html#_textureinfo_texcoord */
+  originalTexCoord: number;
+  /** New texCoord value from extension https://github.com/KhronosGroup/glTF/tree/main/extensions/2.0/Khronos/KHR_texture_transform#gltf-schema-updates */
+  texCoord: number;
+  /** Transformation matrix */
+  matrix: Matrix3;
+};
+
+/**
+ * The extension entry to process the transformation
+ * @param gltfData gltf buffers and json
+ * @param options GLTFLoader options
+ */
+export async function decode(gltfData: GLTFWithBuffers, options: GLTFLoaderOptions) {
+  const gltfScenegraph = new GLTFScenegraph(gltfData);
+  const extension = gltfScenegraph.getExtension(EXT_MESHOPT_TRANSFORM);
+  if (!extension) {
+    return;
+  }
+  const materials = gltfData.json.materials || [];
+  for (let i = 0; i < materials.length; i++) {
+    transformTexCoords(i, gltfData);
+  }
+}
+
+/**
+ * Transform TEXCOORD by material
+ * @param materialIndex processing material index
+ * @param gltfData gltf buffers and json
+ */
+function transformTexCoords(materialIndex: number, gltfData: GLTFWithBuffers): void {
+  // Save processed texCoords in order no to process the same twice
+  const processedTexCoords: [number, number][] = [];
+  const material = gltfData.json.materials?.[materialIndex];
+  const baseColorTexture = material?.pbrMetallicRoughness?.baseColorTexture;
+  if (baseColorTexture) {
+    transformPrimitives(gltfData, materialIndex, baseColorTexture, processedTexCoords);
+  }
+  const emisiveTexture = material?.emissiveTexture;
+  if (emisiveTexture) {
+    transformPrimitives(gltfData, materialIndex, emisiveTexture, processedTexCoords);
+  }
+  const normalTexture = material?.normalTexture;
+  if (normalTexture) {
+    transformPrimitives(gltfData, materialIndex, normalTexture, processedTexCoords);
+  }
+  const occlusionTexture = material?.occlusionTexture;
+  if (occlusionTexture) {
+    transformPrimitives(gltfData, materialIndex, occlusionTexture, processedTexCoords);
+  }
+  const metallicRoughnessTexture = material?.pbrMetallicRoughness?.metallicRoughnessTexture;
+  if (metallicRoughnessTexture) {
+    transformPrimitives(gltfData, materialIndex, metallicRoughnessTexture, processedTexCoords);
+  }
+}
+
+/**
+ * Transform primitives of the particular material
+ * @param gltfData gltf data
+ * @param materialIndex primitives with this material will be transformed
+ * @param texture texture object
+ * @param processedTexCoords storage to save already processed texCoords
+ */
+function transformPrimitives(
+  gltfData: GLTFWithBuffers,
+  materialIndex: number,
+  texture: CompoundGLTFTextureInfo,
+  processedTexCoords: [number, number][]
+) {
+  const transformParameters = getTransformParameters(texture, processedTexCoords);
+  if (!transformParameters) {
+    return;
+  }
+  const meshes = gltfData.json.meshes || [];
+  for (const mesh of meshes) {
+    for (const primitive of mesh.primitives) {
+      const material = primitive.material;
+      if (Number.isFinite(material) && materialIndex === material) {
+        transformPrimitive(gltfData, primitive, transformParameters);
+      }
+    }
+  }
+}
+
+/**
+ * Get parameters for TEXCOORD transformation
+ * @param texture texture object
+ * @param processedTexCoords storage to save already processed texCoords
+ * @returns texCoord couple and transformation matrix
+ */
+function getTransformParameters(
+  texture: CompoundGLTFTextureInfo,
+  processedTexCoords: [number, number][]
+): TransformParameters | null {
+  const textureInfo = texture.extensions?.[EXT_MESHOPT_TRANSFORM];
+  const {texCoord: originalTexCoord = 0} = texture;
+  // If texCoord is not set in the extension, original attribute data will be replaced
+  const {texCoord = originalTexCoord} = textureInfo;
+  // Make sure that couple [originalTexCoord, extensionTexCoord] is not processed twice
+  const isProcessed =
+    processedTexCoords.findIndex(
+      ([original, newTexCoord]) => original === originalTexCoord && newTexCoord === texCoord
+    ) !== -1;
+  if (!isProcessed) {
+    const matrix = makeTransformationMatrix(textureInfo);
+    if (originalTexCoord !== texCoord) {
+      texture.texCoord = texCoord;
+    }
+    processedTexCoords.push([originalTexCoord, texCoord]);
+    return {originalTexCoord, texCoord, matrix};
+  }
+  return null;
+}
+
+/**
+ * Transform `TEXCOORD_0` attribute in the primitive
+ * @param gltfData gltf data
+ * @param primitive primitive object
+ * @param transformParameters texCoord couple and transformation matrix
+ */
+function transformPrimitive(
+  gltfData: GLTFWithBuffers,
+  primitive: GLTFMeshPrimitive,
+  transformParameters: TransformParameters
+) {
+  const {originalTexCoord, texCoord, matrix} = transformParameters;
+  const texCoordAccessor = primitive.attributes[`TEXCOORD_${originalTexCoord}`];
+  if (Number.isFinite(texCoordAccessor)) {
+    // Get accessor of the `TEXCOORD_0` attribute
+    const accessor = gltfData.json.accessors?.[texCoordAccessor];
+    if (accessor && accessor.bufferView) {
+      // Get `bufferView` of the `accessor`
+      const bufferView = gltfData.json.bufferViews?.[accessor.bufferView];
+      if (bufferView) {
+        // Get `arrayBuffer` the `bufferView` look at
+        const {arrayBuffer, byteOffset: bufferByteOffset} = gltfData.buffers[bufferView.buffer];
+        // Resulting byteOffset is sum of the buffer, accessor and bufferView byte offsets
+        const byteOffset =
+          (bufferByteOffset || 0) + (accessor.byteOffset || 0) + (bufferView.byteOffset || 0);
+        // Deduce TypedArray type and its length from `accessor` and `bufferView` data
+        const {ArrayType, length} = getAccessorArrayTypeAndLength(accessor, bufferView);
+        // Number of bytes each component occupies
+        const bytes = BYTES[accessor.componentType];
+        // Number of components. For the `TEXCOORD_0` with `VEC2` type, it must return 2
+        const components = COMPONENTS[accessor.type];
+        // Multiplier to calculate the address of the `TEXCOORD_0` element in the arrayBuffer
+        const elementAddressScale = bufferView.byteStride || bytes * components;
+        // Data transform to Float32Array
+        const result = new Float32Array(length);
+        for (let i = 0; i < accessor.count; i++) {
+          // Take [u, v] couple from the arrayBuffer
+          const uv = new ArrayType(arrayBuffer, byteOffset + i * elementAddressScale, 2);
+          // Set and transform Vector3 per https://github.com/KhronosGroup/glTF/tree/main/extensions/2.0/Khronos/KHR_texture_transform#overview
+          scratchVector.set(uv[0], uv[1], 1);
+          scratchVector.transformByMatrix3(matrix);
+          // Save result in Float32Array
+          result.set([scratchVector[0], scratchVector[1]], i * components);
+        }
+        // If texCoord the same, replace gltf structural data
+        if (originalTexCoord === texCoord) {
+          updateGltf(accessor, bufferView, gltfData.buffers, result);
+        } else {
+          // If texCoord change, create new attribute
+          createAttribute(texCoord, accessor, primitive, gltfData, result);
+        }
+      }
+    }
+  }
+}
+
+/**
+ * Update GLTF structural objects with new data as we create new `Float32Array` for `TEXCOORD_0`.
+ * @param accessor accessor to change
+ * @param bufferView bufferView to change
+ * @param buffers binary buffers
+ * @param newTexcoordArray typed array with data after transformation
+ */
+function updateGltf(
+  accessor: Accessor,
+  bufferView: BufferView,
+  buffers: {arrayBuffer: ArrayBuffer; byteOffset: number; byteLength: number}[],
+  newTexCoordArray: Float32Array
+): void {
+  accessor.componentType = 5126;
+  buffers.push({
+    arrayBuffer: newTexCoordArray.buffer,
+    byteOffset: 0,
+    byteLength: newTexCoordArray.buffer.byteLength
+  });
+  bufferView.buffer = buffers.length - 1;
+  bufferView.byteLength = newTexCoordArray.buffer.byteLength;
+  bufferView.byteOffset = 0;
+  delete bufferView.byteStride;
+}
+
+/**
+ *
+ * @param newTexCoord new `texCoord` value
+ * @param originalAccessor original accessor object, that store data before transformation
+ * @param primitive primitive object
+ * @param gltfData gltf data
+ * @param newTexCoordArray typed array with data after transformation
+ * @returns
+ */
+function createAttribute(
+  newTexCoord: number,
+  originalAccessor: Accessor,
+  primitive: GLTFMeshPrimitive,
+  gltfData: GLTFWithBuffers,
+  newTexCoordArray: Float32Array
+) {
+  gltfData.buffers.push({
+    arrayBuffer: newTexCoordArray.buffer,
+    byteOffset: 0,
+    byteLength: newTexCoordArray.buffer.byteLength
+  });
+  const bufferViews = gltfData.json.bufferViews;
+  if (!bufferViews) {
+    return;
+  }
+  bufferViews.push({
+    buffer: gltfData.buffers.length - 1,
+    byteLength: newTexCoordArray.buffer.byteLength,
+    byteOffset: 0
+  });
+  const accessors = gltfData.json.accessors;
+  if (!accessors) {
+    return;
+  }
+  accessors.push({
+    bufferView: bufferViews?.length - 1,
+    byteOffset: 0,
+    componentType: 5126,
+    count: originalAccessor.count,
+    type: 'VEC2'
+  });
+  primitive.attributes[`TEXCOORD_${newTexCoord}`] = accessors.length - 1;
+}
+
+/**
+ * Construct transformation matrix from the extension data (transition, rotation, scale)
+ * @param extensionData extension data
+ * @returns transformation matrix
+ */
+function makeTransformationMatrix(extensionData: TextureInfo): Matrix3 {
+  const {offset = [0, 0], rotation = 0, scale = [1, 1]} = extensionData;
+  const translationMatirx = new Matrix3().set(1, 0, 0, 0, 1, 0, offset[0], offset[1], 1);
+  const rotationMatirx = scratchRotationMatrix.set(
+    Math.cos(rotation),
+    Math.sin(rotation),
+    0,
+    -Math.sin(rotation),
+    Math.cos(rotation),
+    0,
+    0,
+    0,
+    1
+  );
+  const scaleMatrix = scratchScaleMatrix.set(scale[0], 0, 0, 0, scale[1], 0, 0, 0, 1);
+  return translationMatirx.multiplyRight(rotationMatirx).multiplyRight(scaleMatrix);
+}

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

@@ -0,0 +1,163 @@
+/* eslint-disable camelcase */
+import type {GLTF} from '../../types/gltf-types';
+
+import GLTFScenegraph from '../../api/gltf-scenegraph';
+import {
+  ClassProperty,
+  EXT_feature_metadata_class_object,
+  EXT_feature_metadata_feature_table,
+  FeatureTableProperty,
+  GLTF_EXT_feature_metadata
+} from '../../types/gltf-json-schema';
+
+/** Extension name */
+const EXT_FEATURE_METADATA = 'EXT_feature_metadata';
+
+export const name = EXT_FEATURE_METADATA;
+
+export async function decode(gltfData: {json: GLTF}): Promise<void> {
+  const scenegraph = new GLTFScenegraph(gltfData);
+  decodeExtFeatureMetadata(scenegraph);
+}
+
+/**
+ * Decodes feature metadata from extension
+ * @param scenegraph
+ */
+function decodeExtFeatureMetadata(scenegraph: GLTFScenegraph): void {
+  const extension: GLTF_EXT_feature_metadata | null = scenegraph.getExtension(EXT_FEATURE_METADATA);
+  const schemaClasses = extension?.schema?.classes;
+  const featureTables = extension?.featureTables;
+  const featureTextures = extension?.featureTextures;
+
+  if (featureTextures) {
+    /*
+     * TODO add support for featureTextures
+     * Spec - https://github.com/CesiumGS/glTF/tree/3d-tiles-next/extensions/2.0/Vendor/EXT_feature_metadata#feature-textures
+     */
+    // eslint-disable-next-line no-console
+    console.warn('featureTextures is not yet supported in the "EXT_feature_metadata" extension.');
+  }
+
+  if (schemaClasses && featureTables) {
+    for (const schemaName in schemaClasses) {
+      const schemaClass = schemaClasses[schemaName];
+      const featureTable = findFeatureTableByName(featureTables, schemaName);
+
+      if (featureTable) {
+        handleFeatureTableProperties(scenegraph, featureTable, 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;
+    }
+  }
+}
+
+/**
+ * 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.
+  let data: Uint8Array | string[] = scenegraph.getTypedArrayForBufferView(bufferView);
+
+  switch (schemaProperty.type) {
+    case 'STRING': {
+      // stringOffsetBufferView should be available for string type.
+      const stringOffsetBufferView = featureTableProperty.stringOffsetBufferView!;
+      const offsetsData = scenegraph.getTypedArrayForBufferView(stringOffsetBufferView);
+      data = getStringAttributes(data, offsetsData, numberOfFeatures);
+      break;
+    }
+    default:
+  }
+
+  return data;
+}
+
+/**
+ * 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;
+}
+
+/**
+ * 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_materials_unlit.ts

@@ -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

@@ -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-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/parsers/parse-gltf.ts

@@ -144,6 +144,12 @@ async function loadBuffers(gltf: GLTFWithBuffers, options, context: LoaderContex
       };
 
       delete buffer.uri;
+    } else if (gltf.buffers[i] === null) {
+      gltf.buffers[i] = {
+        arrayBuffer: new ArrayBuffer(buffer.byteLength),
+        byteOffset: 0,
+        byteLength: buffer.byteLength
+      };
     }
   }
 }
@@ -195,10 +201,13 @@ async function loadImage(
 
   let arrayBuffer;
 
-  if (image.uri) {
+  if (image.uri && !image.hasOwnProperty('bufferView')) {
     const uri = resolveUrl(image.uri, options);
     const response = await fetch(uri);
     arrayBuffer = await response.arrayBuffer();
+    image.bufferView = {
+      data: arrayBuffer
+    };
   }
 
   if (Number.isFinite(image.bufferView)) {
@@ -212,7 +221,7 @@ async function loadImage(
   let parsedImage = await parse(
     arrayBuffer,
     [ImageLoader, BasisLoader],
-    {mimeType: image.mimeType, basis: {format: selectSupportedBasisFormat()}},
+    {mimeType: image.mimeType, basis: options.basis || {format: selectSupportedBasisFormat()}},
     context
   );
 
@@ -222,7 +231,7 @@ async function loadImage(
       mipmaps: false,
       width: parsedImage[0].width,
       height: parsedImage[0].height,
-      data: parsedImage
+      data: parsedImage[0]
     };
   }
   // TODO making sure ImageLoader is overridable by using array of loaders

package/src/lib/types/glb-types.ts

@@ -16,6 +16,6 @@ export type GLB = {
   };
 
   // Per spec we must iterate over chunks, ignoring all except JSON and BIN
-  json: {};
+  json: Record<string, any>;
   binChunks: GLBBinChunk[];
 };