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

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

@@ -10,7 +10,8 @@ import type {
   GLTFTexture,
   GLTFImage,
   GLTFBuffer,
-  GLTFBufferView
+  GLTFBufferView,
+  GLTFWithBuffers
 } from '../types/gltf-types';
 
 import {getBinaryImageMetadata} from '@loaders.gl/images';
@@ -22,12 +23,6 @@ import {
   getComponentTypeFromArray
 } from '../gltf-utils/gltf-utils';
 
-type GLTFWithBuffers = {
-  json: GLTF;
-  buffers: any[];
-  binary?: ArrayBuffer;
-};
-
 const DEFAULT_GLTF_JSON: GLTF = {
   asset: {
     version: '2.0',
@@ -68,13 +63,13 @@ export default class GLTFScenegraph {
     return this.gltf.json;
   }
 
-  getApplicationData(key: string): {[key: string]: any} {
+  getApplicationData(key: string): unknown {
     // TODO - Data is already unpacked by GLBParser
     const data = this.json[key];
     return data;
   }
 
-  getExtraData(key: string): {[key: string]: any} {
+  getExtraData(key: string): {[key: string]: unknown} {
     // TODO - Data is already unpacked by GLBParser
     const extras = this.json.extras || {};
     return extras[key];
@@ -99,6 +94,10 @@ export default class GLTFScenegraph {
     return this.json.extensionsUsed || [];
   }
 
+  getRemovedExtensions(): string[] {
+    return (this.json.extensionsRemoved || []) as string[];
+  }
+
   getObjectExtension<T = Extension>(object: {[key: string]: any}, extensionName: string): T | null {
     const extensions = object.extensions || {};
     return extensions[extensionName];
@@ -157,7 +156,7 @@ export default class GLTFScenegraph {
     if (typeof index === 'object') {
       return index;
     }
-    const object = this.json[array] && this.json[array][index];
+    const object = this.json[array] && (this.json[array] as {}[])[index];
     if (!object) {
       throw new Error(`glTF file error: Could not find ${array}[${index}]`); // eslint-disable-line
     }
@@ -234,7 +233,7 @@ export default class GLTFScenegraph {
    */
   addExtraData(key: string, data: object): GLTFScenegraph {
     this.json.extras = this.json.extras || {};
-    this.json.extras[key] = data;
+    (this.json.extras as Record<string, unknown>)[key] = data;
     return this;
   }
 
@@ -269,7 +268,7 @@ export default class GLTFScenegraph {
   addExtension(extensionName: string, extensionData: object = {}): object {
     assert(extensionData);
     this.json.extensions = this.json.extensions || {};
-    this.json.extensions[extensionName] = extensionData;
+    (this.json.extensions as Record<string, unknown>)[extensionName] = extensionData;
     this.registerUsedExtension(extensionName);
     return extensionData;
   }
@@ -309,6 +308,9 @@ export default class GLTFScenegraph {
    * Removes an extension from the top-level list
    */
   removeExtension(extensionName: string): void {
+    if (!this.getExtension(extensionName)) {
+      return;
+    }
     if (this.json.extensionsRequired) {
       this._removeStringFromArray(this.json.extensionsRequired, extensionName);
     }
@@ -318,6 +320,13 @@ export default class GLTFScenegraph {
     if (this.json.extensions) {
       delete this.json.extensions[extensionName];
     }
+    if (!Array.isArray(this.json.extensionsRemoved)) {
+      this.json.extensionsRemoved = [];
+    }
+    const extensionsRemoved = this.json.extensionsRemoved as string[];
+    if (!extensionsRemoved.includes(extensionName)) {
+      extensionsRemoved.push(extensionName);
+    }
   }
 
   /**
@@ -344,7 +353,7 @@ export default class GLTFScenegraph {
    *   `name`, `extensions`, `extras`, `camera`, `children`, `skin`, `rotation`, `scale`, `translation`, `weights`
    *   https://github.com/KhronosGroup/glTF/tree/master/specification/2.0#node
    */
-  addNode(node: {meshIndex: number; matrix: number[]}): number {
+  addNode(node: {meshIndex: number; matrix?: number[]}): number {
     const {meshIndex, matrix} = node;
     this.json.nodes = this.json.nodes || [];
     const nodeData = {mesh: meshIndex};
@@ -357,7 +366,7 @@ export default class GLTFScenegraph {
   }
 
   /** Adds a mesh to the json part */
-  addMesh(mesh: {attributes: object; indices: object; material: number; mode: number}): number {
+  addMesh(mesh: {attributes: object; indices?: object; material?: number; mode?: number}): number {
     const {attributes, indices, material, mode = 4} = mesh;
     const accessors = this._addAttributes(attributes);
 

package/src/lib/api/{normalize-gltf-v1.js → normalize-gltf-v1.ts}

@@ -80,22 +80,24 @@ const GLTF_KEYS = {
  * Converts (normalizes) glTF v1 to v2
  */
 class GLTFV1Normalizer {
-  constructor(gltf) {
-    this.idToIndexMap = {
-      animations: {},
-      accessors: {},
-      buffers: {},
-      bufferViews: {},
-      images: {},
-      materials: {},
-      meshes: {},
-      nodes: {},
-      samplers: {},
-      scenes: {},
-      skins: {},
-      textures: {}
-    };
-  }
+  idToIndexMap = {
+    animations: {},
+    accessors: {},
+    buffers: {},
+    bufferViews: {},
+    images: {},
+    materials: {},
+    meshes: {},
+    nodes: {},
+    samplers: {},
+    scenes: {},
+    skins: {},
+    textures: {}
+  };
+
+  json;
+
+  // constructor() {}
 
   /**
    * Convert (normalize) glTF < 2.0 to glTF 2.0
@@ -296,7 +298,8 @@ class GLTFV1Normalizer {
         roughnessFactor: 1
       };
 
-      const textureId = material.values && material.values.tex;
+      const textureId =
+        material.values?.tex || material.values?.texture2d_0 || material.values?.diffuseTex;
       const textureIndex = json.textures.findIndex((texture) => texture.id === textureId);
       if (textureIndex !== -1) {
         material.pbrMetallicRoughness.baseColorTexture = {index: textureIndex};

package/src/lib/api/{post-process-gltf.js → post-process-gltf.ts}

@@ -1,5 +1,7 @@
 import {assert} from '../utils/assert';
 import {getAccessorArrayTypeAndLength} from '../gltf-utils/gltf-utils';
+import {BufferView} from '../types/gltf-json-schema';
+import {BufferView as BufferViewPostprocessed} from '../types/gltf-postprocessed-schema';
 
 // This is a post processor for loaded glTF files
 // The goal is to make the loaded data easier to use in WebGL applications
@@ -56,7 +58,7 @@ const DEFAULT_SAMPLER = {
   [GL_SAMPLER.TEXTURE_MAG_FILTER]: GL_SAMPLER.LINEAR,
   [GL_SAMPLER.TEXTURE_MIN_FILTER]: GL_SAMPLER.NEAREST_MIPMAP_LINEAR,
   [GL_SAMPLER.TEXTURE_WRAP_S]: GL_SAMPLER.REPEAT,
-  [GL_SAMPLER.TEXTURE_WRAP_]: GL_SAMPLER.REPEAT
+  [GL_SAMPLER.TEXTURE_WRAP_T]: GL_SAMPLER.REPEAT
 };
 
 function getBytesFromComponentType(componentType) {
@@ -68,6 +70,11 @@ function getSizeFromAccessorType(type) {
 }
 
 class GLTFPostProcessor {
+  baseUri: string = '';
+  json: Record<string, any> = {};
+  buffers: [] = [];
+  images: [] = [];
+
   postProcess(gltf, options = {}) {
     const {json, buffers = [], images = [], baseUri = ''} = gltf;
     assert(json);
@@ -303,13 +310,44 @@ class GLTFPostProcessor {
       const {ArrayType, byteLength} = getAccessorArrayTypeAndLength(accessor, accessor.bufferView);
       const byteOffset =
         (accessor.bufferView.byteOffset || 0) + (accessor.byteOffset || 0) + buffer.byteOffset;
-      const cutBufffer = buffer.arrayBuffer.slice(byteOffset, byteOffset + byteLength);
-      accessor.value = new ArrayType(cutBufffer);
+      let cutBuffer = buffer.arrayBuffer.slice(byteOffset, byteOffset + byteLength);
+      if (accessor.bufferView.byteStride) {
+        cutBuffer = this._getValueFromInterleavedBuffer(
+          buffer,
+          byteOffset,
+          accessor.bufferView.byteStride,
+          accessor.bytesPerElement,
+          accessor.count
+        );
+      }
+      accessor.value = new ArrayType(cutBuffer);
     }
 
     return accessor;
   }
 
+  /**
+   * Take values of particular accessor from interleaved buffer
+   * various parts of the buffer
+   * @param buffer
+   * @param byteOffset
+   * @param byteStride
+   * @param bytesPerElement
+   * @param count
+   * @returns
+   */
+  _getValueFromInterleavedBuffer(buffer, byteOffset, byteStride, bytesPerElement, count) {
+    const result = new Uint8Array(count * bytesPerElement);
+    for (let i = 0; i < count; i++) {
+      const elementOffset = byteOffset + i * byteStride;
+      result.set(
+        new Uint8Array(buffer.arrayBuffer.slice(elementOffset, elementOffset + bytesPerElement)),
+        i * bytesPerElement
+      );
+    }
+    return result.buffer;
+  }
+
   _resolveTexture(texture, index) {
     // texture = {...texture};
     texture.id = texture.id || `texture-${index}`;
@@ -353,21 +391,26 @@ class GLTFPostProcessor {
     return image;
   }
 
-  _resolveBufferView(bufferView, index) {
+  _resolveBufferView(bufferView: BufferView, index: number): BufferViewPostprocessed {
     // bufferView = {...bufferView};
-    bufferView.id = bufferView.id || `bufferView-${index}`;
     const bufferIndex = bufferView.buffer;
-    bufferView.buffer = this.buffers[bufferIndex];
+    const result: BufferViewPostprocessed = {
+      id: `bufferView-${index}`,
+      ...bufferView,
+      buffer: this.buffers[bufferIndex]
+    };
 
+    // @ts-expect-error
     const arrayBuffer = this.buffers[bufferIndex].arrayBuffer;
+    // @ts-expect-error
     let byteOffset = this.buffers[bufferIndex].byteOffset || 0;
 
     if ('byteOffset' in bufferView) {
       byteOffset += bufferView.byteOffset;
     }
 
-    bufferView.data = new Uint8Array(arrayBuffer, byteOffset, bufferView.byteLength);
-    return bufferView;
+    result.data = new Uint8Array(arrayBuffer, byteOffset, bufferView.byteLength);
+    return result;
   }
 
   _resolveCamera(camera, index) {
@@ -383,6 +426,6 @@ class GLTFPostProcessor {
   }
 }
 
-export function postProcessGLTF(gltf, options) {
+export function postProcessGLTF(gltf, options?) {
   return new GLTFPostProcessor().postProcess(gltf, options);
 }

package/src/lib/encoders/{encode-glb.js → encode-glb.ts}

@@ -10,10 +10,17 @@ const MAGIC_BIN = 0x004e4942; // BIN\0 in ASCII
 
 const LE = true; // Binary GLTF is little endian.
 
+export type GLBEncodeOptions = {};
+
 // Encode the full GLB buffer with header etc
 // https://github.com/KhronosGroup/glTF/tree/master/specification/2.0#
 // glb-file-format-specification
-export default function encodeGLBSync(glb, dataView, byteOffset = 0, options = {}) {
+export default function encodeGLBSync(
+  glb,
+  dataView,
+  byteOffset = 0,
+  options: GLBEncodeOptions = {}
+) {
   const {magic = MAGIC_glTF, version = 2, json = {}, binary} = glb;
 
   const byteOffsetStart = byteOffset;

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

@@ -0,0 +1,34 @@
+import encodeGLBSync from './encode-glb';
+
+export type GLTFEncodeOptions = Record<string, any>;
+
+/**
+ * Encode the full glTF file as a binary GLB file
+ * Returns an ArrayBuffer that represents the complete GLB image that can be saved to file
+ *
+ * @todo - Does not support encoding to non-GLB versions of glTF format. Other formats
+ * - Encode as a textual JSON file with binary data in base64 data URLs.
+ * - Encode as a JSON with all images (and buffers?) in separate binary files
+ *
+ * glb-file-format-specification
+ * @see https://github.com/KhronosGroup/glTF/tree/master/specification/2.0#
+ *
+ * @param gltf
+ * @param arrayBuffer
+ * @param byteOffset
+ * @param options
+ * @returns
+ */
+export function encodeGLTFSync(gltf, arrayBuffer, byteOffset, options) {
+  convertBuffersToBase64(gltf);
+
+  // TODO: Copy buffers to binary
+
+  return encodeGLBSync(gltf, arrayBuffer, byteOffset, options);
+}
+
+function convertBuffersToBase64(gltf, {firstBuffer = 0} = {}) {
+  if (gltf.buffers && gltf.buffers.length > firstBuffer) {
+    throw new Error('encodeGLTF: multiple buffers not yet implemented');
+  }
+}

package/src/lib/extensions/EXT_meshopt_compression.ts

@@ -2,7 +2,7 @@
 import type {GLTF, GLTFBufferView, GLTF_EXT_meshopt_compression} from '../types/gltf-types';
 import type {GLTFLoaderOptions} from '../../gltf-loader';
 import GLTFScenegraph from '../api/gltf-scenegraph';
-import {isMeshoptSupported, meshoptDecodeGltfBuffer} from '../../meshopt/meshopt-decoder';
+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);
 }
 
@@ -55,21 +45,24 @@ async function decodeMeshoptBufferView(
     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);
+    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);
     return result;
   }
 

package/src/lib/extensions/EXT_texture_webp.ts

@@ -5,7 +5,7 @@
 import type {GLTF, GLTF_EXT_texture_webp} from '../types/gltf-types';
 import type {GLTFLoaderOptions} from '../../gltf-loader';
 
-import {_isImageFormatSupported} from '@loaders.gl/images';
+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

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

@@ -56,7 +56,7 @@ 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);
 }
 

package/src/lib/extensions/KHR_texture_basisu.ts

@@ -1,5 +1,5 @@
-// GLTF EXTENSION: EXT_TEXTURE_WEBP
-// https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/EXT_TEXTURE_WEBP
+// GLTF EXTENSION: KHR_texture_basisu
+// 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';
@@ -26,6 +26,7 @@ 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);