@vgai/engine 0.2.0 → 0.4.0-canary.20260715.0

package/src/animation/xstate-animation-binding.ts

@@ -0,0 +1,436 @@
+import * as THREE from 'three';
+import type { Actor, AnyActor, AnyStateMachine } from 'xstate';
+import type { createSystemRunner } from '../core/system-runner';
+import { deleteUserData, getUserData, setUserData } from '../scene/user-data';
+import type { BlendTreeDef } from './anim-graph-types';
+import { evaluateBlendTree } from './blend-node';
+import {
+  type AnimationBoneMask,
+  type AnimationMetaStateNodeLike,
+  clipNamesOf,
+  collectMachineAnimationMeta,
+  isBlendTreeAnimationMeta,
+  type MachineAnimationMetaEntry,
+  type StateAnimationMeta,
+} from './xstate-animation-meta';
+
+/** A binding-time problem such as a missing clip, bone, or ambiguous layer. */
+export class AnimationBindingError extends Error {
+  constructor(
+    message: string,
+    readonly stateId?: string,
+  ) {
+    super(message);
+    this.name = 'AnimationBindingError';
+  }
+}
+
+export interface XStateAnimationBindingOptions {
+  /** Select live numeric/boolean blend-tree parameters from actor context. */
+  selectParameters?: (context: unknown) => Record<string, number | boolean>;
+  /** Root whose named Bone/Object3D hierarchy is used by `boneMask`. Defaults to mixer root. */
+  root?: THREE.Object3D;
+  /** Entity that exposes this binding to editor/runtime inspection. Defaults to `root`. */
+  owner?: THREE.Object3D;
+  /**
+   * Engine runner used to register `tick` in the canonical animation phase.
+   * Pass `ctx.systems`; disposal removes the callback automatically. When
+   * omitted, the caller owns ticking (useful for standalone Three tests).
+   */
+  systems?: Pick<ReturnType<typeof createSystemRunner>, 'add' | 'remove'>;
+}
+
+export interface XStateAnimationLayerState {
+  readonly layer: string;
+  readonly stateId: string;
+  readonly clips: readonly string[];
+  readonly weight: number;
+  readonly blendMode: 'override' | 'additive';
+  readonly boneMask?: AnimationBoneMask;
+}
+
+export interface XStateAnimationBinding {
+  /** Advance native actions/mixer. Register this in the engine animation phase. */
+  tick: (dt: number) => void;
+  readonly actor: AnyActor;
+  /** Current native composition, useful to the editor and game diagnostics. */
+  getActiveLayers: () => readonly XStateAnimationLayerState[];
+  /** Unsubscribe, stop/uncache actions, and remove owner inspection data. Idempotent. */
+  dispose: () => void;
+}
+
+let inspectionVersion = 0;
+const inspectionListeners = new Set<() => void>();
+
+/** React/useSyncExternalStore-compatible lifecycle signal for live editor inspection. */
+export function subscribeXStateAnimationBindings(listener: () => void): () => void {
+  inspectionListeners.add(listener);
+  return () => inspectionListeners.delete(listener);
+}
+
+/** Monotonic snapshot changed whenever a binding is attached or disposed. */
+export function getXStateAnimationBindingsVersion(): number {
+  return inspectionVersion;
+}
+
+function notifyInspectionLifecycle(): void {
+  inspectionVersion++;
+  for (const listener of inspectionListeners) listener();
+}
+
+interface WeightedClip {
+  clip: string;
+  actionKey: string;
+  weight: number;
+}
+
+interface ActiveState {
+  layer: string;
+  stateId: string;
+  meta: StateAnimationMeta;
+  natural: WeightedClip[];
+  dominantActionKey: string;
+  crossfadeRemaining: number;
+}
+
+interface CachedAction {
+  action: THREE.AnimationAction;
+  clip: THREE.AnimationClip;
+}
+
+const layerOf = (meta: StateAnimationMeta): string => meta.layer ?? 'base';
+const layerWeightOf = (meta: StateAnimationMeta): number => meta.weight ?? 1;
+const blendModeOf = (meta: StateAnimationMeta): 'override' | 'additive' =>
+  meta.blendMode ?? 'override';
+
+function targetNameOf(track: THREE.KeyframeTrack): string {
+  try {
+    return THREE.PropertyBinding.parseTrackName(track.name).nodeName ?? '';
+  } catch {
+    const dot = track.name.indexOf('.');
+    return dot < 0 ? track.name : track.name.slice(0, dot);
+  }
+}
+
+function subtreeNames(root: THREE.Object3D, requested: readonly string[], trackNames: Set<string>) {
+  const names = new Set<string>();
+  const missing: string[] = [];
+  for (const requestedName of requested) {
+    let found = false;
+    root.traverse((object) => {
+      if (object.name !== requestedName) return;
+      found = true;
+      object.traverse((descendant) => {
+        if (descendant.name) names.add(descendant.name);
+      });
+    });
+    // Some exporters target a named node not retained as a discoverable Bone.
+    // Exact track-target matches remain useful, but cannot imply descendants.
+    if (trackNames.has(requestedName)) {
+      found = true;
+      names.add(requestedName);
+    }
+    if (!found) missing.push(requestedName);
+  }
+  return { names, missing };
+}
+
+function maskedClip(
+  source: THREE.AnimationClip,
+  mask: AnimationBoneMask,
+  root: THREE.Object3D,
+  stateId: string,
+): THREE.AnimationClip {
+  const trackNames = new Set(source.tracks.map(targetNameOf));
+  const included = mask.include ? subtreeNames(root, mask.include, trackNames) : undefined;
+  const excluded = mask.exclude ? subtreeNames(root, mask.exclude, trackNames) : undefined;
+  const missing = [...(included?.missing ?? []), ...(excluded?.missing ?? [])];
+  if (missing.length) {
+    throw new AnimationBindingError(
+      `[bindXStateAnimation] state "${stateId}" boneMask names unknown bones/objects: ${missing.join(', ')}`,
+      stateId,
+    );
+  }
+  const tracks = source.tracks.filter((track) => {
+    const name = targetNameOf(track);
+    return (!included || included.names.has(name)) && !excluded?.names.has(name);
+  });
+  if (tracks.length === 0) {
+    throw new AnimationBindingError(
+      `[bindXStateAnimation] state "${stateId}" boneMask removes every track from clip "${source.name}"`,
+      stateId,
+    );
+  }
+  return new THREE.AnimationClip(
+    source.name,
+    source.duration,
+    tracks.map((track) => track.clone()),
+  );
+}
+
+function dominantOf(weights: WeightedClip[]): WeightedClip {
+  return weights.reduce((a, b) => (b.weight > a.weight ? b : a), weights[0]!);
+}
+
+/**
+ * Bind a native XState actor to native Three actions.
+ *
+ * One active animated state is allowed per named layer. Parallel XState
+ * regions therefore compose lower-body locomotion, upper-body weapon states,
+ * facial animation, and other independent layers without introducing a
+ * second transition language. Bone masks clone/filter native clip tracks;
+ * additive layers use `AnimationUtils.makeClipAdditive` and Three's additive
+ * blend mode. Single unlayered machines retain the original clip/action path.
+ */
+export function bindXStateAnimation(
+  actor: Actor<AnyStateMachine>,
+  mixer: THREE.AnimationMixer,
+  clips: Map<string, THREE.AnimationClip>,
+  options: XStateAnimationBindingOptions = {},
+): XStateAnimationBinding {
+  const mixerRoot = mixer.getRoot();
+  const root = options.root ?? (mixerRoot instanceof THREE.Object3D ? mixerRoot : undefined);
+  if (!root) {
+    throw new AnimationBindingError(
+      '[bindXStateAnimation] a THREE.Object3D `root` option is required when the mixer uses AnimationObjectGroup',
+    );
+  }
+  const owner = options.owner ?? root;
+  const machineRoot = actor.logic.root as unknown as AnimationMetaStateNodeLike;
+  const entries: MachineAnimationMetaEntry[] = collectMachineAnimationMeta(machineRoot);
+  const metaByStateId = new Map(entries.map((entry) => [entry.stateId, entry.meta]));
+
+  for (const entry of entries) {
+    for (const clipName of clipNamesOf(entry.meta)) {
+      if (!clips.has(clipName)) {
+        throw new AnimationBindingError(
+          `[bindXStateAnimation] state "${entry.stateId}" references clip "${clipName}", which is ` +
+            `not present in the supplied clips map. Known clips: ${[...clips.keys()].join(', ') || '(none)'}`,
+          entry.stateId,
+        );
+      }
+    }
+  }
+
+  // Different layers need distinct AnimationActions even when they use the
+  // same source clip. A plain base state keeps the original clip identity for
+  // backwards-compatible mixer.existingAction(sourceClip) behavior.
+  const preparedClips = new Map<string, THREE.AnimationClip>();
+  function actionKey(stateId: string, meta: StateAnimationMeta, clipName: string): string {
+    const transformed =
+      layerOf(meta) !== 'base' || Boolean(meta.boneMask) || blendModeOf(meta) === 'additive';
+    return transformed ? `${stateId}\u0000${clipName}` : clipName;
+  }
+  for (const { stateId, meta } of entries) {
+    for (const clipName of clipNamesOf(meta)) {
+      const key = actionKey(stateId, meta, clipName);
+      if (preparedClips.has(key)) continue;
+      const source = clips.get(clipName)!;
+      let prepared = meta.boneMask ? maskedClip(source, meta.boneMask, root, stateId) : source;
+      if (prepared !== source || key !== clipName) {
+        if (prepared === source) prepared = source.clone();
+        prepared.name = `${source.name}@${layerOf(meta)}:${stateId}`;
+      }
+      if (blendModeOf(meta) === 'additive') {
+        THREE.AnimationUtils.makeClipAdditive(prepared);
+        prepared.blendMode = THREE.AdditiveAnimationBlendMode;
+      } else {
+        prepared.blendMode = THREE.NormalAnimationBlendMode;
+      }
+      preparedClips.set(key, prepared);
+    }
+  }
+
+  const actionCache = new Map<string, CachedAction>();
+  function ensureAction(
+    key: string,
+    loop: boolean,
+    speed: number,
+    weight: number,
+  ): THREE.AnimationAction {
+    let cached = actionCache.get(key);
+    if (!cached) {
+      const clip = preparedClips.get(key);
+      if (!clip)
+        throw new AnimationBindingError(`[bindXStateAnimation] prepared clip "${key}" not found`);
+      const action = mixer.clipAction(clip);
+      action.setEffectiveWeight(0);
+      action.play();
+      cached = { action, clip };
+      actionCache.set(key, cached);
+    }
+    cached.action.setLoop(loop ? THREE.LoopRepeat : THREE.LoopOnce, Infinity);
+    cached.action.clampWhenFinished = !loop;
+    cached.action.timeScale = speed;
+    cached.action.weight = weight;
+    return cached.action;
+  }
+
+  function readParameters(context: unknown): Map<string, number | boolean> {
+    const raw = options.selectParameters
+      ? options.selectParameters(context)
+      : (context as Record<string, number | boolean> | null | undefined);
+    return new Map(Object.entries(raw ?? {}));
+  }
+
+  function weightsOf(stateId: string, meta: StateAnimationMeta, context: unknown): WeightedClip[] {
+    const weights = isBlendTreeAnimationMeta(meta)
+      ? evaluateBlendTree(meta.blendTree as unknown as BlendTreeDef, readParameters(context))
+      : [{ clip: meta.clip, weight: 1 }];
+    return weights.map(({ clip, weight }) => ({
+      clip,
+      weight,
+      actionKey: actionKey(stateId, meta, clip),
+    }));
+  }
+
+  const activeLayers = new Map<string, ActiveState>();
+  let disposed = false;
+
+  function silence(weights: WeightedClip[], except: string | undefined, duration: number): void {
+    for (const weighted of weights) {
+      if (weighted.actionKey === except) continue;
+      const action = actionCache.get(weighted.actionKey)?.action;
+      if (!action) continue;
+      if (duration > 0) action.fadeOut(duration);
+      else action.setEffectiveWeight(0);
+    }
+  }
+
+  function applyLiveBlendWeights(state: ActiveState, context: unknown): void {
+    if (!isBlendTreeAnimationMeta(state.meta)) return;
+    state.natural = weightsOf(state.stateId, state.meta, context);
+    const layerWeight = layerWeightOf(state.meta);
+    for (const weighted of state.natural) {
+      actionCache.get(weighted.actionKey)?.action.setEffectiveWeight(weighted.weight * layerWeight);
+    }
+  }
+
+  function enterState(stateId: string, meta: StateAnimationMeta, context: unknown): void {
+    const layer = layerOf(meta);
+    const outgoing = activeLayers.get(layer) ?? null;
+    const weights = weightsOf(stateId, meta, context);
+    const dominant = dominantOf(weights);
+    const loop = isBlendTreeAnimationMeta(meta) ? true : meta.loop;
+    const speed = isBlendTreeAnimationMeta(meta) ? 1 : meta.speed;
+    const layerWeight = layerWeightOf(meta);
+
+    for (const weighted of weights) ensureAction(weighted.actionKey, loop, speed, layerWeight);
+    const dominantAction = actionCache.get(dominant.actionKey)!.action;
+    dominantAction.reset().setEffectiveWeight(layerWeight);
+    for (const weighted of weights) {
+      if (weighted.actionKey === dominant.actionKey) continue;
+      actionCache.get(weighted.actionKey)!.action.reset().setEffectiveWeight(0);
+    }
+
+    const duration = meta.crossfade?.duration ?? 0;
+    const warp = meta.crossfade?.warp ?? false;
+    if (!outgoing) {
+      if (duration > 0) dominantAction.fadeIn(duration);
+    } else {
+      silence(outgoing.natural, outgoing.dominantActionKey, duration);
+      const previous = actionCache.get(outgoing.dominantActionKey)?.action;
+      if (previous && duration > 0) previous.crossFadeTo(dominantAction, duration, warp);
+      else {
+        previous?.setEffectiveWeight(0);
+        dominantAction.setEffectiveWeight(layerWeight);
+      }
+    }
+
+    const active: ActiveState = {
+      layer,
+      stateId,
+      meta,
+      natural: weights,
+      dominantActionKey: dominant.actionKey,
+      crossfadeRemaining: duration,
+    };
+    activeLayers.set(layer, active);
+    if (isBlendTreeAnimationMeta(meta) && duration <= 0) applyLiveBlendWeights(active, context);
+  }
+
+  function activeStateIds(snapshot: { getMeta: () => Record<string, unknown> }): string[] {
+    return Object.keys(snapshot.getMeta()).filter((id) => metaByStateId.has(id));
+  }
+
+  function reconcile(snapshot: { getMeta: () => Record<string, unknown>; context: unknown }): void {
+    const nextByLayer = new Map<string, string>();
+    for (const stateId of activeStateIds(snapshot)) {
+      const meta = metaByStateId.get(stateId)!;
+      const layer = layerOf(meta);
+      const previous = nextByLayer.get(layer);
+      if (previous) {
+        throw new AnimationBindingError(
+          `[bindXStateAnimation] animated states "${previous}" and "${stateId}" are both active ` +
+            `on layer "${layer}". Give parallel regions distinct meta.animation.layer names.`,
+          stateId,
+        );
+      }
+      nextByLayer.set(layer, stateId);
+    }
+
+    for (const [layer, active] of activeLayers) {
+      if (nextByLayer.has(layer)) continue;
+      silence(active.natural, undefined, 0);
+      activeLayers.delete(layer);
+    }
+    for (const [layer, stateId] of nextByLayer) {
+      if (activeLayers.get(layer)?.stateId === stateId) continue;
+      enterState(stateId, metaByStateId.get(stateId)!, snapshot.context);
+    }
+  }
+
+  const initialSnapshot = actor.getSnapshot();
+  reconcile(initialSnapshot);
+  const subscription = actor.subscribe((snapshot) => {
+    if (!disposed) reconcile(snapshot);
+  });
+
+  function tick(dt: number): void {
+    if (disposed) return;
+    const context = actor.getSnapshot().context;
+    for (const active of activeLayers.values()) {
+      if (active.crossfadeRemaining > 0) {
+        active.crossfadeRemaining = Math.max(0, active.crossfadeRemaining - dt);
+        if (active.crossfadeRemaining <= 0) applyLiveBlendWeights(active, context);
+      } else {
+        applyLiveBlendWeights(active, context);
+      }
+    }
+    mixer.update(dt);
+  }
+
+  const binding: XStateAnimationBinding = {
+    tick,
+    actor,
+    getActiveLayers: () =>
+      [...activeLayers.values()].map((active) => ({
+        layer: active.layer,
+        stateId: active.stateId,
+        clips: active.natural.map((weighted) => weighted.clip),
+        weight: layerWeightOf(active.meta),
+        blendMode: blendModeOf(active.meta),
+        ...(active.meta.boneMask ? { boneMask: active.meta.boneMask } : {}),
+      })),
+    dispose(): void {
+      if (disposed) return;
+      disposed = true;
+      options.systems?.remove('animation', tick);
+      subscription.unsubscribe();
+      for (const { action, clip } of actionCache.values()) {
+        action.stop();
+        mixer.uncacheAction(clip, action.getRoot());
+      }
+      actionCache.clear();
+      activeLayers.clear();
+      if (getUserData(owner, '_xstateAnimation') === binding) {
+        deleteUserData(owner, '_xstateAnimation');
+        notifyInspectionLifecycle();
+      }
+    },
+  };
+  setUserData(owner, '_xstateAnimation', binding);
+  notifyInspectionLifecycle();
+  options.systems?.add('animation', tick);
+  return binding;
+}