@luma.gl/gltf 9.1.9 → 9.2.0-alpha.2

package/src/gltf/animations/interpolate.ts

@@ -0,0 +1,153 @@
+import {GLTFNodePostprocessed} from '@loaders.gl/gltf';
+import {log} from '@luma.gl/core';
+import {Quaternion} from '@math.gl/core';
+import {GLTFAnimationChannel, GLTFAnimationSampler} from './animations';
+
+const scratchQuaternion = new Quaternion();
+
+export function interpolate(
+  time: number,
+  {input, interpolation, output}: GLTFAnimationSampler,
+  target: GLTFNodePostprocessed,
+  path: GLTFAnimationChannel['path']
+) {
+  const maxTime = input[input.length - 1];
+  const animationTime = time % maxTime;
+
+  const nextIndex = input.findIndex(t => t >= animationTime);
+  const previousIndex = Math.max(0, nextIndex - 1);
+
+  if (!Array.isArray(target[path])) {
+    switch (path) {
+      case 'translation':
+        target[path] = [0, 0, 0];
+        break;
+
+      case 'rotation':
+        target[path] = [0, 0, 0, 1];
+        break;
+
+      case 'scale':
+        target[path] = [1, 1, 1];
+        break;
+
+      default:
+        log.warn(`Bad animation path ${path}`)();
+    }
+  }
+
+  // assert(target[path].length === output[previousIndex].length);
+  const previousTime = input[previousIndex];
+  const nextTime = input[nextIndex];
+
+  switch (interpolation) {
+    case 'STEP':
+      stepInterpolate(target, path, output[previousIndex] as number[]);
+      break;
+
+    case 'LINEAR':
+      if (nextTime > previousTime) {
+        const ratio = (animationTime - previousTime) / (nextTime - previousTime);
+        linearInterpolate(
+          target,
+          path,
+          output[previousIndex] as number[],
+          output[nextIndex] as number[],
+          ratio
+        );
+      }
+      break;
+
+    case 'CUBICSPLINE':
+      if (nextTime > previousTime) {
+        const ratio = (animationTime - previousTime) / (nextTime - previousTime);
+        const tDiff = nextTime - previousTime;
+
+        const p0 = output[3 * previousIndex + 1] as number[];
+        const outTangent0 = output[3 * previousIndex + 2] as number[];
+        const inTangent1 = output[3 * nextIndex + 0] as number[];
+        const p1 = output[3 * nextIndex + 1] as number[];
+
+        cubicsplineInterpolate(target, path, {p0, outTangent0, inTangent1, p1, tDiff, ratio});
+      }
+      break;
+
+    default:
+      log.warn(`Interpolation ${interpolation} not supported`)();
+      break;
+  }
+}
+
+function linearInterpolate(
+  target: GLTFNodePostprocessed,
+  path: GLTFAnimationChannel['path'],
+  start: number[],
+  stop: number[],
+  ratio: number
+) {
+  if (!target[path]) {
+    throw new Error();
+  }
+
+  if (path === 'rotation') {
+    // SLERP when path is rotation
+    scratchQuaternion.slerp({start, target: stop, ratio});
+    for (let i = 0; i < scratchQuaternion.length; i++) {
+      target[path][i] = scratchQuaternion[i];
+    }
+  } else {
+    // regular interpolation
+    for (let i = 0; i < start.length; i++) {
+      target[path][i] = ratio * stop[i] + (1 - ratio) * start[i];
+    }
+  }
+}
+
+function cubicsplineInterpolate(
+  target: GLTFNodePostprocessed,
+  path: GLTFAnimationChannel['path'],
+  {
+    p0,
+    outTangent0,
+    inTangent1,
+    p1,
+    tDiff,
+    ratio: t
+  }: {
+    p0: number[];
+    outTangent0: number[];
+    inTangent1: number[];
+    p1: number[];
+    tDiff: number;
+    ratio: number;
+  }
+) {
+  if (!target[path]) {
+    throw new Error();
+  }
+
+  // TODO: Quaternion might need normalization
+  for (let i = 0; i < target[path].length; i++) {
+    const m0 = outTangent0[i] * tDiff;
+    const m1 = inTangent1[i] * tDiff;
+    target[path][i] =
+      (2 * Math.pow(t, 3) - 3 * Math.pow(t, 2) + 1) * p0[i] +
+      (Math.pow(t, 3) - 2 * Math.pow(t, 2) + t) * m0 +
+      (-2 * Math.pow(t, 3) + 3 * Math.pow(t, 2)) * p1[i] +
+      (Math.pow(t, 3) - Math.pow(t, 2)) * m1;
+  }
+}
+
+function stepInterpolate(
+  target: GLTFNodePostprocessed,
+  path: GLTFAnimationChannel['path'],
+  value: number[]
+) {
+  if (!target[path]) {
+    throw new Error();
+  }
+
+  for (let i = 0; i < value.length; i++) {
+    target[path][i] = value[i];
+  }
+}

package/src/gltf/create-gltf-model.ts

@@ -2,10 +2,10 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import {Device, RenderPipelineParameters, log} from '@luma.gl/core';
+import {Device, type RenderPipelineParameters, log} from '@luma.gl/core';
 import {pbrMaterial, ShaderModule} from '@luma.gl/shadertools';
-import {Geometry, Model, ModelNode, ModelProps} from '@luma.gl/engine';
-import {ParsePBRMaterialOptions, parsePBRMaterial} from '../pbr/parse-pbr-material';
+import {Geometry, Model, ModelNode, type ModelProps} from '@luma.gl/engine';
+import {type ParsedPBRMaterial} from '../pbr/pbr-material';
 
 const SHADER = /* WGSL */ `
 layout(0) positions: vec4; // in vec4 POSITION;
@@ -112,21 +112,20 @@ export type CreateGLTFModelOptions = {
   id?: string;
   vertexCount?: number;
   geometry: Geometry;
-  material: any;
-  materialOptions: ParsePBRMaterialOptions;
+  parsedPPBRMaterial: ParsedPBRMaterial;
   modelOptions?: Partial<ModelProps>;
 };
 
+/** Creates a luma.gl Model from GLTF data*/
 export function createGLTFModel(device: Device, options: CreateGLTFModelOptions): ModelNode {
-  const {id, geometry, material, vertexCount, materialOptions, modelOptions} = options;
+  const {id, geometry, parsedPPBRMaterial, vertexCount, modelOptions = {}} = options;
 
-  const parsedMaterial = parsePBRMaterial(device, material, geometry.attributes, materialOptions);
-  log.info(4, 'createGLTFModel defines: ', parsedMaterial.defines)();
+  log.info(4, 'createGLTFModel defines: ', parsedPPBRMaterial.defines)();
 
   // Calculate managedResources
   // TODO: Implement resource management logic that will
   // not deallocate resources/textures/buffers that are shared
-  const managedResources = [];
+  const managedResources: any[] = [];
   // managedResources.push(...parsedMaterial.generatedTextures);
   // managedResources.push(...Object.values(attributes).map((attribute) => attribute.buffer));
 
@@ -148,16 +147,16 @@ export function createGLTFModel(device: Device, options: CreateGLTFModelOptions)
     modules: [pbrMaterial as unknown as ShaderModule],
     ...modelOptions,
 
-    defines: {...parsedMaterial.defines, ...modelOptions.defines},
-    parameters: {...parameters, ...parsedMaterial.parameters, ...modelOptions.parameters}
+    defines: {...parsedPPBRMaterial.defines, ...modelOptions.defines},
+    parameters: {...parameters, ...parsedPPBRMaterial.parameters, ...modelOptions.parameters}
   };
 
   const model = new Model(device, modelProps);
 
   const {camera, ...pbrMaterialProps} = {
-    ...parsedMaterial.uniforms,
+    ...parsedPPBRMaterial.uniforms,
     ...modelOptions.uniforms,
-    ...parsedMaterial.bindings,
+    ...parsedPPBRMaterial.bindings,
     ...modelOptions.bindings
   };
 

package/src/gltf/create-scenegraph-from-gltf.ts

@@ -0,0 +1,27 @@
+// luma.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {Device} from '@luma.gl/core';
+import {GroupNode} from '@luma.gl/engine';
+import {GLTFPostprocessed} from '@loaders.gl/gltf';
+import {parseGLTF, type ParseGLTFOptions} from '../parsers/parse-gltf';
+import {GLTFAnimator} from './gltf-animator';
+import {parseGLTFAnimations} from '../parsers/parse-gltf-animations';
+import {deepCopy} from '../utils/deep-copy';
+
+export function createScenegraphsFromGLTF(
+  device: Device,
+  gltf: GLTFPostprocessed,
+  options?: ParseGLTFOptions
+): {
+  scenes: GroupNode[];
+  animator: GLTFAnimator;
+} {
+  gltf = deepCopy(gltf);
+  const scenes = parseGLTF(device, gltf, options);
+  // Note: There is a nasty dependency on injected nodes in the glTF
+  const animations = parseGLTFAnimations(gltf);
+  const animator = new GLTFAnimator({animations});
+  return {scenes, animator};
+}

package/src/gltf/gltf-animator.ts

@@ -2,49 +2,33 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
+import {GLTFNodePostprocessed} from '@loaders.gl/gltf';
 import {log} from '@luma.gl/core';
-import {Matrix4, Quaternion} from '@math.gl/core';
-
-// TODO: import from loaders.gl?
-export const ATTRIBUTE_TYPE_TO_COMPONENTS = {
-  SCALAR: 1,
-  VEC2: 2,
-  VEC3: 3,
-  VEC4: 4,
-  MAT2: 4,
-  MAT3: 9,
-  MAT4: 16
-};
-
-export const ATTRIBUTE_COMPONENT_TYPE_TO_ARRAY = {
-  5120: Int8Array,
-  5121: Uint8Array,
-  5122: Int16Array,
-  5123: Uint16Array,
-  5125: Uint32Array,
-  5126: Float32Array
-};
+import {GroupNode} from '@luma.gl/engine';
+import {Matrix4} from '@math.gl/core';
+import {GLTFAnimation} from './animations/animations';
+import {interpolate} from './animations/interpolate';
 
-type GLTFAnimationProps = {
-  name: string;
+type GLTFSingleAnimatorProps = {
+  animation: GLTFAnimation;
   startTime?: number;
   playing?: boolean;
   speed?: number;
-  channels?: any;
 };
 
-class GLTFAnimation {
-  name: string;
+class GLTFSingleAnimator {
+  animation: GLTFAnimation;
   startTime: number = 0;
   playing: boolean = true;
   speed: number = 1;
-  channels: any = [];
 
-  constructor(props: GLTFAnimationProps) {
+  constructor(props: GLTFSingleAnimatorProps) {
+    this.animation = props.animation;
+    this.animation.name ||= 'unnamed';
     Object.assign(this, props);
   }
 
-  animate(timeMs: number) {
+  setTime(timeMs: number) {
     if (!this.playing) {
       return;
     }
@@ -52,40 +36,37 @@ class GLTFAnimation {
     const absTime = timeMs / 1000;
     const time = (absTime - this.startTime) * this.speed;
 
-    this.channels.forEach(({sampler, target, path}) => {
+    this.animation.channels.forEach(({sampler, target, path}) => {
       interpolate(time, sampler, target, path);
-      applyTranslationRotationScale(target, target._node);
+      applyTranslationRotationScale(target, (target as any)._node as GroupNode);
     });
   }
 }
 
-export class GLTFAnimator {
+export type GLTFAnimatorProps = {
   animations: GLTFAnimation[];
+};
 
-  constructor(gltf: any) {
-    this.animations = gltf.animations.map((animation, index) => {
+export class GLTFAnimator {
+  animations: GLTFSingleAnimator[];
+
+  constructor(props: GLTFAnimatorProps) {
+    this.animations = props.animations.map((animation, index) => {
       const name = animation.name || `Animation-${index}`;
-      const samplers = animation.samplers.map(({input, interpolation = 'LINEAR', output}) => ({
-        input: accessorToJsArray(gltf.accessors[input]),
-        interpolation,
-        output: accessorToJsArray(gltf.accessors[output])
-      }));
-      const channels = animation.channels.map(({sampler, target}) => ({
-        sampler: samplers[sampler],
-        target: gltf.nodes[target.node],
-        path: target.path
-      }));
-      return new GLTFAnimation({name, channels});
+      return new GLTFSingleAnimator({
+        animation: {name, channels: animation.channels}
+      });
     });
   }
 
   /** @deprecated Use .setTime(). Will be removed (deck.gl is using this) */
   animate(time: number): void {
+    log.warn('GLTFAnimator#animate is deprecated. Use GLTFAnimator#setTime instead')();
     this.setTime(time);
   }
 
   setTime(time: number): void {
-    this.animations.forEach(animation => animation.animate(time));
+    this.animations.forEach(animation => animation.setTime(time));
   }
 
   getAnimations() {
@@ -93,35 +74,10 @@ export class GLTFAnimator {
   }
 }
 
-//
-
-function accessorToJsArray(accessor) {
-  if (!accessor._animation) {
-    const ArrayType = ATTRIBUTE_COMPONENT_TYPE_TO_ARRAY[accessor.componentType];
-    const components = ATTRIBUTE_TYPE_TO_COMPONENTS[accessor.type];
-    const length = components * accessor.count;
-    const {buffer, byteOffset} = accessor.bufferView.data;
-
-    const array = new ArrayType(buffer, byteOffset + (accessor.byteOffset || 0), length);
-
-    if (components === 1) {
-      accessor._animation = Array.from(array);
-    } else {
-      // Slice array
-      const slicedArray = [];
-      for (let i = 0; i < array.length; i += components) {
-        slicedArray.push(Array.from(array.slice(i, i + components)));
-      }
-      accessor._animation = slicedArray;
-    }
-  }
-
-  return accessor._animation;
-}
-
 // TODO: share with GLTFInstantiator
-const helperMatrix = new Matrix4();
-function applyTranslationRotationScale(gltfNode, node) {
+const scratchMatrix = new Matrix4();
+
+function applyTranslationRotationScale(gltfNode: GLTFNodePostprocessed, node: GroupNode) {
   node.matrix.identity();
 
   if (gltfNode.translation) {
@@ -129,7 +85,7 @@ function applyTranslationRotationScale(gltfNode, node) {
   }
 
   if (gltfNode.rotation) {
-    const rotationMatrix = helperMatrix.fromQuaternion(gltfNode.rotation);
+    const rotationMatrix = scratchMatrix.fromQuaternion(gltfNode.rotation);
     node.matrix.multiplyRight(rotationMatrix);
   }
 
@@ -137,100 +93,3 @@ function applyTranslationRotationScale(gltfNode, node) {
     node.matrix.scale(gltfNode.scale);
   }
 }
-
-const quaternion = new Quaternion();
-function linearInterpolate(target, path, start, stop, ratio) {
-  if (path === 'rotation') {
-    // SLERP when path is rotation
-    quaternion.slerp({start, target: stop, ratio});
-    for (let i = 0; i < quaternion.length; i++) {
-      target[path][i] = quaternion[i];
-    }
-  } else {
-    // regular interpolation
-    for (let i = 0; i < start.length; i++) {
-      target[path][i] = ratio * stop[i] + (1 - ratio) * start[i];
-    }
-  }
-}
-
-function cubicsplineInterpolate(target, path, {p0, outTangent0, inTangent1, p1, tDiff, ratio: t}) {
-  // TODO: Quaternion might need normalization
-  for (let i = 0; i < target[path].length; i++) {
-    const m0 = outTangent0[i] * tDiff;
-    const m1 = inTangent1[i] * tDiff;
-    target[path][i] =
-      (2 * Math.pow(t, 3) - 3 * Math.pow(t, 2) + 1) * p0[i] +
-      (Math.pow(t, 3) - 2 * Math.pow(t, 2) + t) * m0 +
-      (-2 * Math.pow(t, 3) + 3 * Math.pow(t, 2)) * p1[i] +
-      (Math.pow(t, 3) - Math.pow(t, 2)) * m1;
-  }
-}
-
-function stepInterpolate(target, path, value) {
-  for (let i = 0; i < value.length; i++) {
-    target[path][i] = value[i];
-  }
-}
-
-function interpolate(time, {input, interpolation, output}, target, path) {
-  const maxTime = input[input.length - 1];
-  const animationTime = time % maxTime;
-
-  const nextIndex = input.findIndex(t => t >= animationTime);
-  const previousIndex = Math.max(0, nextIndex - 1);
-
-  if (!Array.isArray(target[path])) {
-    switch (path) {
-      case 'translation':
-        target[path] = [0, 0, 0];
-        break;
-
-      case 'rotation':
-        target[path] = [0, 0, 0, 1];
-        break;
-
-      case 'scale':
-        target[path] = [1, 1, 1];
-        break;
-
-      default:
-        log.warn(`Bad animation path ${path}`)();
-    }
-  }
-
-  // assert(target[path].length === output[previousIndex].length);
-  const previousTime = input[previousIndex];
-  const nextTime = input[nextIndex];
-
-  switch (interpolation) {
-    case 'STEP':
-      stepInterpolate(target, path, output[previousIndex]);
-      break;
-
-    case 'LINEAR':
-      if (nextTime > previousTime) {
-        const ratio = (animationTime - previousTime) / (nextTime - previousTime);
-        linearInterpolate(target, path, output[previousIndex], output[nextIndex], ratio);
-      }
-      break;
-
-    case 'CUBICSPLINE':
-      if (nextTime > previousTime) {
-        const ratio = (animationTime - previousTime) / (nextTime - previousTime);
-        const tDiff = nextTime - previousTime;
-
-        const p0 = output[3 * previousIndex + 1];
-        const outTangent0 = output[3 * previousIndex + 2];
-        const inTangent1 = output[3 * nextIndex + 0];
-        const p1 = output[3 * nextIndex + 1];
-
-        cubicsplineInterpolate(target, path, {p0, outTangent0, inTangent1, p1, tDiff, ratio});
-      }
-      break;
-
-    default:
-      log.warn(`Interpolation ${interpolation} not supported`)();
-      break;
-  }
-}

package/src/index.ts

@@ -1,10 +1,10 @@
 // luma.gl, MIT license
 
-export type {PBREnvironment} from './pbr/pbr-environment';
-export type {ParsePBRMaterialOptions, ParsedPBRMaterial} from './pbr/parse-pbr-material';
-export {parsePBRMaterial} from './pbr/parse-pbr-material';
-export {loadPBREnvironment} from './pbr/pbr-environment';
+export {loadPBREnvironment, type PBREnvironment} from './pbr/pbr-environment';
+export {type ParsedPBRMaterial} from './pbr/pbr-material';
+export {parsePBRMaterial, type ParsePBRMaterialOptions} from './parsers/parse-pbr-material';
+export {} from './pbr/pbr-environment';
 
 // glTF Scenegraph Instantiator
-export {createScenegraphsFromGLTF} from './gltf/create-gltf-objects';
+export {createScenegraphsFromGLTF} from './gltf/create-scenegraph-from-gltf';
 export {GLTFAnimator} from './gltf/gltf-animator';

package/src/parsers/parse-gltf-animations.ts

@@ -0,0 +1,55 @@
+// luma.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {type GLTFAccessorPostprocessed, type GLTFPostprocessed} from '@loaders.gl/gltf';
+import {
+  type GLTFAnimation,
+  type GLTFAnimationChannel,
+  type GLTFAnimationSampler
+} from '../gltf/animations/animations';
+
+import {accessorToTypedArray} from '..//webgl-to-webgpu/convert-webgl-attribute';
+
+export function parseGLTFAnimations(gltf: GLTFPostprocessed): GLTFAnimation[] {
+  const gltfAnimations = gltf.animations || [];
+  return gltfAnimations.map((animation, index) => {
+    const name = animation.name || `Animation-${index}`;
+    const samplers: GLTFAnimationSampler[] = animation.samplers.map(
+      ({input, interpolation = 'LINEAR', output}) => ({
+        input: accessorToJsArray(gltf.accessors[input]) as number[],
+        interpolation,
+        output: accessorToJsArray(gltf.accessors[output])
+      })
+    );
+    const channels: GLTFAnimationChannel[] = animation.channels.map(({sampler, target}) => ({
+      sampler: samplers[sampler],
+      target: gltf.nodes[target.node ?? 0],
+      path: target.path as GLTFAnimationChannel['path']
+    }));
+    return {name, channels};
+  });
+}
+
+//
+
+function accessorToJsArray(
+  accessor: GLTFAccessorPostprocessed & {_animation?: number[] | number[][]}
+): number[] | number[][] {
+  if (!accessor._animation) {
+    const {typedArray: array, components} = accessorToTypedArray(accessor);
+
+    if (components === 1) {
+      accessor._animation = Array.from(array);
+    } else {
+      // Slice array
+      const slicedArray: number[][] = [];
+      for (let i = 0; i < array.length; i += components) {
+        slicedArray.push(Array.from(array.slice(i, i + components)));
+      }
+      accessor._animation = slicedArray;
+    }
+  }
+
+  return accessor._animation;
+}