@loaders.gl/gltf 4.0.0-alpha.5 → 4.0.0-alpha.7

package/src/lib/extensions/EXT_meshopt_compression.ts

@@ -1,8 +1,8 @@
 /* eslint-disable camelcase */
-import type {GLTF, GLTFBufferView, GLTF_EXT_meshopt_compression} from '../types/gltf-types';
+import type {GLTF, GLTFBufferView, GLTF_EXT_meshopt_compression} from '../types/gltf-json-schema';
 import type {GLTFLoaderOptions} from '../../gltf-loader';
-import GLTFScenegraph from '../api/gltf-scenegraph';
-import {isMeshoptSupported, meshoptDecodeGltfBuffer} from '../../meshopt/meshopt-decoder';
+import {GLTFScenegraph} from '../api/gltf-scenegraph';
+import {meshoptDecodeGltfBuffer} from '../../meshopt/meshopt-decoder';
 
 // @ts-ignore
 // eslint-disable-next-line
@@ -16,16 +16,6 @@ const EXT_MESHOPT_COMPRESSION = 'EXT_meshopt_compression';
 
 export const name = EXT_MESHOPT_COMPRESSION;
 
-export function preprocess(gltfData: {json: GLTF}) {
-  const scenegraph = new GLTFScenegraph(gltfData);
-  if (
-    scenegraph.getRequiredExtensions().includes(EXT_MESHOPT_COMPRESSION) &&
-    !isMeshoptSupported()
-  ) {
-    throw new Error(`gltf: Required extension ${EXT_MESHOPT_COMPRESSION} not supported by browser`);
-  }
-}
-
 export async function decode(gltfData: {json: GLTF}, options: GLTFLoaderOptions) {
   const scenegraph = new GLTFScenegraph(gltfData);
 
@@ -41,7 +31,7 @@ export async function decode(gltfData: {json: GLTF}, options: GLTFLoaderOptions)
   // Decompress meshes in parallel
   await Promise.all(promises);
 
-  // We have now decompressed all primitives, so remove the top-level extensions
+  // We have now decompressed all primitives, so remove the top-level extension
   scenegraph.removeExtension(EXT_MESHOPT_COMPRESSION);
 }
 
@@ -49,29 +39,30 @@ export async function decode(gltfData: {json: GLTF}, options: GLTFLoaderOptions)
 async function decodeMeshoptBufferView(
   scenegraph: GLTFScenegraph,
   bufferView: GLTFBufferView
-): Promise<ArrayBuffer | null> {
+): Promise<void> {
   const meshoptExtension = scenegraph.getObjectExtension<GLTF_EXT_meshopt_compression>(
     bufferView,
     EXT_MESHOPT_COMPRESSION
   );
   if (meshoptExtension) {
-    const buffer = bufferView.buffer;
-
     const {
       byteOffset = 0,
       byteLength = 0,
       byteStride,
       count,
       mode,
-      filter = 'NONE'
+      filter = 'NONE',
+      buffer: bufferIndex
     } = meshoptExtension;
+    const buffer = scenegraph.gltf.buffers[bufferIndex];
 
-    // @ts-expect-error TODO - fix buffer handling
-    const source = new Uint8Array(buffer, byteOffset, byteLength);
-    const result = new ArrayBuffer(count * byteStride);
-    await meshoptDecodeGltfBuffer(new Uint8Array(result), count, byteStride, source, mode, filter);
-    return result;
+    const source = new Uint8Array(buffer.arrayBuffer, buffer.byteOffset + byteOffset, byteLength);
+    const result = new Uint8Array(
+      scenegraph.gltf.buffers[bufferView.buffer].arrayBuffer,
+      bufferView.byteOffset,
+      bufferView.byteLength
+    );
+    await meshoptDecodeGltfBuffer(result, count, byteStride, source, mode, filter);
+    scenegraph.removeObjectExtension(bufferView, EXT_MESHOPT_COMPRESSION);
   }
-
-  return null;
 }

package/src/lib/extensions/EXT_texture_webp.ts

@@ -2,11 +2,11 @@
 // https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/EXT_TEXTURE_WEBP
 /* eslint-disable camelcase */
 
-import type {GLTF, GLTF_EXT_texture_webp} from '../types/gltf-types';
+import type {GLTF, GLTF_EXT_texture_webp} from '../types/gltf-json-schema';
 import type {GLTFLoaderOptions} from '../../gltf-loader';
 
-import {_isImageFormatSupported} from '@loaders.gl/images';
-import GLTFScenegraph from '../api/gltf-scenegraph';
+import {isImageFormatSupported} from '@loaders.gl/images';
+import {GLTFScenegraph} from '../api/gltf-scenegraph';
 
 const EXT_TEXTURE_WEBP = 'EXT_texture_webp';
 
@@ -20,7 +20,7 @@ export const name = EXT_TEXTURE_WEBP;
 export function preprocess(gltfData: {json: GLTF}, options: GLTFLoaderOptions): void {
   const scenegraph = new GLTFScenegraph(gltfData);
 
-  if (!_isImageFormatSupported('image/webp')) {
+  if (!isImageFormatSupported('image/webp')) {
     if (scenegraph.getRequiredExtensions().includes(EXT_TEXTURE_WEBP)) {
       throw new Error(`gltf: Required extension ${EXT_TEXTURE_WEBP} not supported by browser`);
     }
@@ -35,6 +35,7 @@ export function preprocess(gltfData: {json: GLTF}, options: GLTFLoaderOptions):
       EXT_TEXTURE_WEBP
     );
     if (extension) {
+      // TODO - if multiple texture extensions are present which one wins?
       texture.source = extension.source;
     }
     scenegraph.removeObjectExtension(texture, EXT_TEXTURE_WEBP);

package/src/lib/extensions/KHR_binary_gltf.ts

@@ -2,9 +2,9 @@
 // https://github.com/KhronosGroup/glTF/tree/master/extensions/1.0/Khronos/KHR_binary_glTF
 /* eslint-disable camelcase */
 
-import type {GLTF, GLTF_KHR_binary_glTF} from '../types/gltf-types';
+import type {GLTF, GLTF_KHR_binary_glTF} from '../types/gltf-json-schema';
 
-import GLTFScenegraph from '../api/gltf-scenegraph';
+import {GLTFScenegraph} from '../api/gltf-scenegraph';
 
 const KHR_BINARY_GLTF = 'KHR_binary_glTF';
 
@@ -40,7 +40,7 @@ export function preprocess(gltfData: {json: GLTF}): void {
     delete json.buffers[0].uri;
   }
 
-  // Remove the top-level extension as it has now been removed from all nodes
+  // Remove the top-level extension as it has now been processed
   gltfScenegraph.removeExtension(KHR_BINARY_GLTF);
 }
 

package/src/lib/extensions/KHR_draco_mesh_compression.ts

@@ -8,14 +8,14 @@ import type {
   GLTFAccessor,
   GLTFMeshPrimitive,
   GLTF_KHR_draco_mesh_compression
-} from '../types/gltf-types';
+} from '../types/gltf-json-schema';
 import type {GLTFLoaderOptions} from '../../gltf-loader';
 
 import type {LoaderContext} from '@loaders.gl/loader-utils';
 import {DracoLoader} from '@loaders.gl/draco';
 import {DracoLoaderOptions, DracoMesh} from '@loaders.gl/draco';
 import {sliceArrayBuffer} from '@loaders.gl/loader-utils';
-import {default as Scenegraph} from '../api/gltf-scenegraph';
+import {GLTFScenegraph} from '../api/gltf-scenegraph';
 import {getGLTFAccessors, getGLTFAccessor} from '../gltf-utils/gltf-attribute-utils';
 
 const KHR_DRACO_MESH_COMPRESSION = 'KHR_draco_mesh_compression';
@@ -28,7 +28,7 @@ export function preprocess(
   options: GLTFLoaderOptions,
   context: LoaderContext
 ): void {
-  const scenegraph = new Scenegraph(gltfData);
+  const scenegraph = new GLTFScenegraph(gltfData);
   for (const primitive of makeMeshPrimitiveIterator(scenegraph)) {
     if (scenegraph.getObjectExtension(primitive, KHR_DRACO_MESH_COMPRESSION)) {
       // TODO - Remove fallback accessors to make sure we don't load unnecessary buffers
@@ -45,7 +45,7 @@ export async function decode(
     return;
   }
 
-  const scenegraph = new Scenegraph(gltfData);
+  const scenegraph = new GLTFScenegraph(gltfData);
   const promises: Promise<void>[] = [];
   for (const primitive of makeMeshPrimitiveIterator(scenegraph)) {
     if (scenegraph.getObjectExtension(primitive, KHR_DRACO_MESH_COMPRESSION)) {
@@ -56,12 +56,12 @@ export async function decode(
   // Decompress meshes in parallel
   await Promise.all(promises);
 
-  // We have now decompressed all primitives, so remove the top-level extensions
+  // We have now decompressed all primitives, so remove the top-level extension
   scenegraph.removeExtension(KHR_DRACO_MESH_COMPRESSION);
 }
 
 export function encode(gltfData, options: GLTFLoaderOptions = {}): void {
-  const scenegraph = new Scenegraph(gltfData);
+  const scenegraph = new GLTFScenegraph(gltfData);
 
   for (const mesh of scenegraph.json.meshes || []) {
     // eslint-disable-next-line camelcase
@@ -81,7 +81,7 @@ export function encode(gltfData, options: GLTFLoaderOptions = {}): void {
 // TODO - Implement fallback behavior per KHR_DRACO_MESH_COMPRESSION spec
 
 async function decompressPrimitive(
-  scenegraph: Scenegraph,
+  scenegraph: GLTFScenegraph,
   primitive: GLTFMeshPrimitive,
   options: GLTFLoaderOptions,
   context: LoaderContext
@@ -128,7 +128,7 @@ async function decompressPrimitive(
   }
 
   // Extension has been processed, delete it
-  // delete primitive.extensions[KHR_DRACO_MESH_COMPRESSION];
+  scenegraph.removeObjectExtension(primitive, KHR_DRACO_MESH_COMPRESSION);
 
   checkPrimitive(primitive);
 }

package/src/lib/extensions/KHR_texture_basisu.ts

@@ -2,10 +2,10 @@
 // https://github.com/KhronosGroup/glTF/tree/main/extensions/2.0/Khronos/KHR_texture_basisu
 /* eslint-disable camelcase */
 
-import type {GLTF, GLTF_KHR_texture_basisu} from '../types/gltf-types';
+import type {GLTF, GLTF_KHR_texture_basisu} from '../types/gltf-json-schema';
 import type {GLTFLoaderOptions} from '../../gltf-loader';
 
-import GLTFScenegraph from '../api/gltf-scenegraph';
+import {GLTFScenegraph} from '../api/gltf-scenegraph';
 
 const KHR_TEXTURE_BASISU = 'KHR_texture_basisu';
 
@@ -26,9 +26,10 @@ export function preprocess(gltfData: {json: GLTF}, options: GLTFLoaderOptions):
       KHR_TEXTURE_BASISU
     );
     if (extension) {
+      // TODO - if multiple texture extensions are present which one wins?
       texture.source = extension.source;
+      scene.removeObjectExtension(texture, KHR_TEXTURE_BASISU);
     }
-    scene.removeObjectExtension(texture, KHR_TEXTURE_BASISU);
   }
 
   // Remove the top-level extension

package/src/lib/extensions/KHR_texture_transform.ts

@@ -0,0 +1,308 @@
+/**
+ * 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 {GLTFWithBuffers} from '../types/gltf-types';
+import type {
+  GLTFMeshPrimitive,
+  GLTFAccessor,
+  GLTFBufferView,
+  GLTFMaterialNormalTextureInfo,
+  GLTFMaterialOcclusionTextureInfo,
+  GLTFTextureInfo
+} from '../types/gltf-json-schema';
+import type {GLTFLoaderOptions} from '../../gltf-loader';
+
+import {getAccessorArrayTypeAndLength} from '../gltf-utils/gltf-utils';
+import {BYTES, COMPONENTS} from '../gltf-utils/gltf-constants';
+import {} 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 &
+  GLTFMaterialNormalTextureInfo &
+  GLTFMaterialOcclusionTextureInfo;
+/** 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 hasExtension = gltfScenegraph.hasExtension(EXT_MESHOPT_TRANSFORM);
+  if (!hasExtension) {
+    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: GLTFAccessor,
+  bufferView: GLTFBufferView,
+  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: GLTFAccessor,
+  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 translationMatrix = new Matrix3().set(1, 0, 0, 0, 1, 0, offset[0], offset[1], 1);
+  const rotationMatrix = 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 translationMatrix.multiplyRight(rotationMatrix).multiplyRight(scaleMatrix);
+}