@luma.gl/gltf 9.3.0-alpha.9 → 9.3.0

package/src/gltf/gltf-animator.ts

@@ -3,9 +3,20 @@
 // Copyright (c) vis.gl contributors
 
 import {log} from '@luma.gl/core';
-import {GroupNode} from '@luma.gl/engine';
-import {GLTFAnimation} from './animations/animations';
-import {interpolate} from './animations/interpolate';
+import {GroupNode, Material} from '@luma.gl/engine';
+import {
+  GLTFAnimation,
+  GLTFMaterialAnimationChannel,
+  GLTFMaterialAnimationProperty,
+  GLTFTextureTransformAnimationChannel
+} from './animations/animations';
+import {evaluateSampler, interpolate} from './animations/interpolate';
+import {
+  getTextureTransformDeltaMatrix,
+  getTextureTransformSlotDefinition,
+  type PBRTextureTransform,
+  type PBRTextureTransformSlot
+} from '../pbr/texture-transform';
 
 /** Construction props for a single glTF animation controller. */
 type GLTFSingleAnimatorProps = {
@@ -13,6 +24,8 @@ type GLTFSingleAnimatorProps = {
   animation: GLTFAnimation;
   /** Mapping from glTF node ids to scenegraph nodes. */
   gltfNodeIdToNodeMap: Map<string, GroupNode>;
+  /** Materials aligned with the source glTF materials array. */
+  materials?: Material[];
   /** Start time in seconds. */
   startTime?: number;
   /** Whether playback is active. */
@@ -27,19 +40,36 @@ class GLTFSingleAnimator {
   animation: GLTFAnimation;
   /** Target scenegraph lookup table. */
   gltfNodeIdToNodeMap: Map<string, GroupNode>;
+  /** Materials aligned with the source glTF materials array. */
+  materials: Material[];
   /** Playback start time in seconds. */
   startTime: number = 0;
   /** Whether playback is currently enabled. */
   playing: boolean = true;
   /** Playback speed multiplier. */
   speed: number = 1;
+  /** Mutable runtime texture-transform state for animated material slots. */
+  materialTextureTransformState = new Map<
+    Material,
+    Partial<Record<PBRTextureTransformSlot, PBRTextureTransform>>
+  >();
 
   /** Creates a single-animation controller. */
   constructor(props: GLTFSingleAnimatorProps) {
     this.animation = props.animation;
     this.gltfNodeIdToNodeMap = props.gltfNodeIdToNodeMap;
+    this.materials = props.materials || [];
     this.animation.name ||= 'unnamed';
     Object.assign(this, props);
+
+    if (
+      this.animation.channels.some(channel => channel.type !== 'node') &&
+      !this.materials.length
+    ) {
+      throw new Error(
+        `Animation ${this.animation.name} targets materials, but GLTFAnimator was created without a materials array`
+      );
+    }
   }
 
   /** Advances the animation to the supplied wall-clock time in milliseconds. */
@@ -51,13 +81,38 @@ class GLTFSingleAnimator {
     const absTime = timeMs / 1000;
     const time = (absTime - this.startTime) * this.speed;
 
-    this.animation.channels.forEach(({sampler, targetNodeId, path}) => {
-      const targetNode = this.gltfNodeIdToNodeMap.get(targetNodeId);
-      if (!targetNode) {
-        throw new Error(`Cannot find animation target node ${targetNodeId}`);
+    this.animation.channels.forEach(channel => {
+      if (channel.type === 'node') {
+        const {sampler, targetNodeId, path} = channel;
+        const targetNode = this.gltfNodeIdToNodeMap.get(targetNodeId);
+        if (!targetNode) {
+          throw new Error(`Cannot find animation target node ${targetNodeId}`);
+        }
+
+        interpolate(time, sampler, targetNode, path);
+        return;
       }
 
-      interpolate(time, sampler, targetNode, path);
+      const material = this.materials[channel.targetMaterialIndex];
+      if (!material) {
+        throw new Error(
+          `Cannot find animation target material ${channel.targetMaterialIndex} for ${channel.pointer}`
+        );
+      }
+
+      const value = evaluateSampler(time, channel.sampler);
+      if (value) {
+        if (channel.type === 'material') {
+          applyMaterialAnimationValue(material, channel, value);
+        } else {
+          applyTextureTransformAnimationValue(
+            material,
+            channel,
+            value,
+            this.materialTextureTransformState
+          );
+        }
+      }
     });
   }
 }
@@ -68,6 +123,8 @@ export type GLTFAnimatorProps = {
   animations: GLTFAnimation[];
   /** Mapping from glTF node ids to scenegraph nodes. */
   gltfNodeIdToNodeMap: Map<string, GroupNode>;
+  /** Materials aligned with the source glTF materials array. */
+  materials?: Material[];
 };
 
 /** Coordinates playback of every animation found in a glTF scene. */
@@ -81,6 +138,7 @@ export class GLTFAnimator {
       const name = animation.name || `Animation-${index}`;
       return new GLTFSingleAnimator({
         gltfNodeIdToNodeMap: props.gltfNodeIdToNodeMap,
+        materials: props.materials,
         animation: {name, channels: animation.channels}
       });
     });
@@ -102,3 +160,114 @@ export class GLTFAnimator {
     return this.animations;
   }
 }
+
+function applyMaterialAnimationValue(
+  material: Material,
+  channel: GLTFMaterialAnimationChannel,
+  value: number[]
+): void {
+  const pbrMaterial =
+    channel.component !== undefined
+      ? {
+          [channel.property]: updateMaterialArrayComponent(
+            getCurrentMaterialValue(material, channel.property),
+            channel.component,
+            value[0]
+          )
+        }
+      : {
+          [channel.property]: value.length === 1 ? value[0] : value
+        };
+
+  material.setProps({pbrMaterial});
+}
+
+function getCurrentMaterialValue(
+  material: Material,
+  property: GLTFMaterialAnimationProperty
+): number[] {
+  const uniformValues = material.shaderInputs.getUniformValues() as Record<string, any>;
+  const currentValue = uniformValues['pbrMaterial']?.[property];
+  return Array.isArray(currentValue) ? [...currentValue] : [];
+}
+
+function updateMaterialArrayComponent(
+  currentValue: number[],
+  component: number,
+  nextValue: number
+): number[] {
+  const updatedValue = [...currentValue];
+  updatedValue[component] = nextValue;
+  return updatedValue;
+}
+
+function applyTextureTransformAnimationValue(
+  material: Material,
+  channel: GLTFTextureTransformAnimationChannel,
+  value: number[],
+  materialTextureTransformState: Map<
+    Material,
+    Partial<Record<PBRTextureTransformSlot, PBRTextureTransform>>
+  >
+): void {
+  const slotDefinition = getTextureTransformSlotDefinition(channel.textureSlot);
+  const currentTransform = getCurrentTextureTransform(
+    materialTextureTransformState,
+    material,
+    channel
+  );
+
+  switch (channel.path) {
+    case 'offset':
+      if (channel.component !== undefined) {
+        currentTransform.offset[channel.component] = value[0];
+      } else {
+        currentTransform.offset = [value[0], value[1]];
+      }
+      break;
+
+    case 'rotation':
+      currentTransform.rotation = value[0];
+      break;
+
+    case 'scale':
+      if (channel.component !== undefined) {
+        currentTransform.scale[channel.component] = value[0];
+      } else {
+        currentTransform.scale = [value[0], value[1]];
+      }
+      break;
+  }
+
+  material.setProps({
+    pbrMaterial: {
+      [slotDefinition.uvTransformUniform]: getTextureTransformDeltaMatrix(
+        channel.baseTransform,
+        currentTransform
+      )
+    }
+  });
+}
+
+function getCurrentTextureTransform(
+  materialTextureTransformState: Map<
+    Material,
+    Partial<Record<PBRTextureTransformSlot, PBRTextureTransform>>
+  >,
+  material: Material,
+  channel: GLTFTextureTransformAnimationChannel
+): PBRTextureTransform {
+  const materialState = materialTextureTransformState.get(material) || {};
+  let textureTransformState = materialState[channel.textureSlot];
+  if (!textureTransformState) {
+    textureTransformState = {
+      offset: [...channel.baseTransform.offset] as [number, number],
+      rotation: channel.baseTransform.rotation,
+      scale: [...channel.baseTransform.scale] as [number, number]
+    };
+    materialState[channel.textureSlot] = textureTransformState;
+    materialTextureTransformState.set(material, materialState);
+  }
+
+  return textureTransformState;
+}

package/src/gltf/gltf-extension-support.ts

@@ -121,8 +121,9 @@ const GLTF_EXTENSION_SUPPORT_REGISTRY: Record<string, GLTFExtensionSupportDefini
     comment: 'Node-visibility animations and toggles are not mapped onto runtime scenegraph state.'
   },
   KHR_animation_pointer: {
-    supportLevel: 'none',
-    comment: 'Animation pointers are not mapped onto runtime scenegraph updates.'
+    supportLevel: 'parsed-and-wired',
+    comment:
+      'Selected node TRS, material factor, and KHR_texture_transform offset/rotation/scale pointers are wired to runtime updates; unsupported targets are skipped.'
   },
   KHR_materials_diffuse_transmission: {
     supportLevel: 'none',
@@ -171,7 +172,9 @@ export function getGLTFExtensionSupport(
         extensionName,
         {
           extensionName,
-          supported: extensionSupportDefinition.supportLevel === 'built-in',
+          supported:
+            extensionSupportDefinition.supportLevel === 'built-in' ||
+            extensionSupportDefinition.supportLevel === 'parsed-and-wired',
           supportLevel: extensionSupportDefinition.supportLevel,
           comment: extensionSupportDefinition.comment
         }
@@ -182,6 +185,12 @@ export function getGLTFExtensionSupport(
   return new Map(extensionSupportEntries);
 }
 
+export function getRegisteredGLTFExtensionSupport(
+  extensionName: string
+): GLTFExtensionSupportDefinition | null {
+  return GLTF_EXTENSION_SUPPORT_REGISTRY[extensionName] || null;
+}
+
 function collectGLTFExtensionNames(gltf: GLTFPostprocessed): Set<string> {
   const gltfWithRemovedExtensions = gltf as GLTFPostprocessedWithRemovedExtensions;
   const extensionNames = new Set<string>();
@@ -191,12 +200,15 @@ function collectGLTFExtensionNames(gltf: GLTFPostprocessed): Set<string> {
   addExtensionNames(extensionNames, gltfWithRemovedExtensions.extensionsRemoved);
   addExtensionNames(extensionNames, Object.keys(gltf.extensions || {}));
 
-  if (gltfWithRemovedExtensions.lights?.length || gltf.nodes.some(node => 'light' in node)) {
+  if (
+    gltfWithRemovedExtensions.lights?.length ||
+    (gltf.nodes || []).some(node => 'light' in node)
+  ) {
     extensionNames.add('KHR_lights_punctual');
   }
 
   if (
-    gltf.materials.some(material => {
+    (gltf.materials || []).some(material => {
       const gltfMaterial = material as typeof material & {unlit?: boolean};
       return gltfMaterial.unlit || gltfMaterial.extensions?.KHR_materials_unlit;
     })

package/src/index.ts

@@ -3,7 +3,7 @@
 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 {parseGLTFLights} from './parsers/parse-gltf-lights';
+export {parseGLTFLights, type ParseGLTFLightsOptions} from './parsers/parse-gltf-lights';
 
 // glTF Scenegraph Instantiator
 export {