reze-engine 0.6.6 → 0.7.0

package/dist/model.js

@@ -1,7 +1,9 @@
-import { Mat4, Quat, Vec3, bezierInterpolate } from "./math";
+import { Mat4, Quat, Vec3 } from "./math";
 import { Physics } from "./physics";
 import { IKSolverSystem } from "./ik-solver";
 import { VMDLoader } from "./vmd-loader";
+import { interpolateControlPoints, rawInterpolationToBoneInterpolation } from "./animation";
+const VMD_FPS = 30;
 const VERTEX_STRIDE = 8;
 export class Model {
     constructor(vertexData, indexData, textures, materials, skeleton, skinning, morphing, rigidbodies = [], joints = []) {
@@ -16,7 +18,8 @@ export class Model {
         this.cachedIdentityMat2 = Mat4.identity();
         this.tweenTimeMs = 0; // Time tracking for tweens (milliseconds)
         // Animation runtime
-        this.animationData = null;
+        this._hasAnimation = false;
+        this._animationData = null;
         this.boneTracks = new Map();
         this.morphTracks = new Map();
         this.animationDuration = 0;
@@ -525,11 +528,78 @@ export class Model {
      * Load VMD animation file
      */
     async loadVmd(vmdUrl) {
-        this.animationData = await VMDLoader.load(vmdUrl);
+        const vmdKeyFrames = await VMDLoader.load(vmdUrl);
+        // Convert VMDKeyFrame[] to AnimationData
+        const boneTracks = {};
+        const morphTracks = {};
+        for (const keyFrame of vmdKeyFrames) {
+            for (const bf of keyFrame.boneFrames) {
+                if (!boneTracks[bf.boneName])
+                    boneTracks[bf.boneName] = [];
+                boneTracks[bf.boneName].push({
+                    frame: bf.frame,
+                    rotation: bf.rotation,
+                    translation: bf.translation,
+                    interpolation: rawInterpolationToBoneInterpolation(bf.interpolation),
+                });
+            }
+            for (const mf of keyFrame.morphFrames) {
+                if (!morphTracks[mf.morphName])
+                    morphTracks[mf.morphName] = [];
+                morphTracks[mf.morphName].push({
+                    frame: mf.frame,
+                    weight: mf.weight,
+                });
+            }
+        }
+        this.loadAnimationData({ boneTracks, morphTracks });
+    }
+    /**
+     * Load animation from structured keyframe data.
+     * This is the primary way to set animation data — loadVmd delegates to this.
+     */
+    loadAnimationData(data) {
+        this._animationData = data;
         this.resetAllBones();
         this.resetAllMorphs();
-        this.processFrames();
-        // Apply initial pose at time 0
+        this.boneTracks = new Map();
+        for (const name in data.boneTracks) {
+            const keyframes = data.boneTracks[name];
+            const sorted = [...keyframes].sort((a, b) => a.frame - b.frame);
+            this.boneTracks.set(name, sorted.map((kf) => ({
+                boneName: name,
+                frame: kf.frame,
+                rotation: kf.rotation,
+                translation: kf.translation,
+                interpolation: kf.interpolation,
+                time: kf.frame / VMD_FPS,
+            })));
+        }
+        this.morphTracks = new Map();
+        for (const name in data.morphTracks) {
+            const keyframes = data.morphTracks[name];
+            const sorted = [...keyframes].sort((a, b) => a.frame - b.frame);
+            this.morphTracks.set(name, sorted.map((kf) => ({
+                morphName: name,
+                frame: kf.frame,
+                weight: kf.weight,
+                time: kf.frame / VMD_FPS,
+            })));
+        }
+        this.boneTrackIndices.clear();
+        this.morphTrackIndices.clear();
+        // Calculate duration
+        let maxTime = 0;
+        for (const frames of this.boneTracks.values()) {
+            if (frames.length > 0)
+                maxTime = Math.max(maxTime, frames[frames.length - 1].time);
+        }
+        for (const frames of this.morphTracks.values()) {
+            if (frames.length > 0)
+                maxTime = Math.max(maxTime, frames[frames.length - 1].time);
+        }
+        this.animationDuration = maxTime;
+        this._hasAnimation = true;
         this.animationTime = 0;
         this.getPoseAtTime(0);
         if (this.physics) {
@@ -573,57 +643,8 @@ export class Model {
     setPhysicsEnabled(enabled) {
         this.physicsEnabled = enabled;
     }
-    /**
-     * Process frames into tracks
-     */
-    processFrames() {
-        if (!this.animationData)
-            return;
-        // Helper to group frames by name and sort by time
-        const groupFrames = (items) => {
-            const tracks = new Map();
-            for (const { item, name, time } of items) {
-                if (!tracks.has(name))
-                    tracks.set(name, []);
-                tracks.get(name).push({ item, time });
-            }
-            for (const keyFrames of tracks.values()) {
-                keyFrames.sort((a, b) => a.time - b.time);
-            }
-            return tracks;
-        };
-        // Collect all bone and morph frames
-        const boneItems = [];
-        const morphItems = [];
-        for (const keyFrame of this.animationData) {
-            for (const boneFrame of keyFrame.boneFrames) {
-                boneItems.push({ item: boneFrame, name: boneFrame.boneName, time: keyFrame.time });
-            }
-            for (const morphFrame of keyFrame.morphFrames) {
-                morphItems.push({ item: morphFrame, name: morphFrame.morphName, time: keyFrame.time });
-            }
-        }
-        // Transform to expected format
-        this.boneTracks = new Map();
-        for (const [name, frames] of groupFrames(boneItems).entries()) {
-            this.boneTracks.set(name, frames.map((f) => ({ boneFrame: f.item, time: f.time })));
-        }
-        this.morphTracks = new Map();
-        for (const [name, frames] of groupFrames(morphItems).entries()) {
-            this.morphTracks.set(name, frames.map((f) => ({ morphFrame: f.item, time: f.time })));
-        }
-        // Reset cached indices when tracks change
-        this.boneTrackIndices.clear();
-        this.morphTrackIndices.clear();
-        // Calculate duration from all tracks
-        const allTracks = [...this.boneTracks.values(), ...this.morphTracks.values()];
-        this.animationDuration = allTracks.reduce((max, keyFrames) => {
-            const lastTime = keyFrames[keyFrames.length - 1]?.time ?? 0;
-            return Math.max(max, lastTime);
-        }, 0);
-    }
     playAnimation() {
-        if (!this.animationData)
+        if (!this._hasAnimation)
             return;
         this.isPaused = false;
         this.isPlaying = true;
@@ -643,7 +664,7 @@ export class Model {
         this.animationTime = 0;
     }
     seekAnimation(time) {
-        if (!this.animationData)
+        if (!this._hasAnimation)
             return;
         const clampedTime = Math.max(0, Math.min(time, this.animationDuration));
         this.animationTime = clampedTime;
@@ -651,6 +672,9 @@ export class Model {
     /**
      * Get current animation progress
      */
+    getAnimationData() {
+        return this._animationData;
+    }
     getAnimationProgress() {
         const duration = this.animationDuration;
         const percentage = duration > 0 ? (this.animationTime / duration) * 100 : 0;
@@ -699,9 +723,8 @@ export class Model {
      * Optimized for per-frame performance
      */
     getPoseAtTime(time) {
-        if (!this.animationData)
+        if (!this._hasAnimation)
             return;
-        const INV_127 = 1 / 127; // Pre-compute division constant
         // Process bone tracks
         for (const [boneName, keyFrames] of this.boneTracks.entries()) {
             if (keyFrames.length === 0)
@@ -711,48 +734,31 @@ export class Model {
             const idx = this.findKeyframeIndex(clampedTime, keyFrames, cachedIdx);
             if (idx < 0)
                 continue;
-            // Update cache
             this.boneTrackIndices.set(boneName, idx);
-            const frameA = keyFrames[idx].boneFrame;
-            const frameB = keyFrames[idx + 1]?.boneFrame;
+            const frameA = keyFrames[idx];
+            const frameB = keyFrames[idx + 1];
             const boneIdx = this.runtimeSkeleton.nameIndex[boneName];
             if (boneIdx === undefined)
                 continue;
             const localRot = this.runtimeSkeleton.localRotations[boneIdx];
             const localTrans = this.runtimeSkeleton.localTranslations[boneIdx];
             if (!frameB) {
-                // No interpolation needed - direct assignment
-                // Use animation frame's rotation for translation conversion to ensure consistency
-                // This prevents conflicts when IK later modifies the rotation
                 const frameRotation = frameA.rotation;
                 localRot.set(frameRotation);
-                // Convert VMD relative translation to local translation using animation rotation
                 const localTranslation = this.convertVMDTranslationToLocal(boneIdx, frameA.translation, frameRotation);
                 localTrans.set(localTranslation);
             }
             else {
-                const timeA = keyFrames[idx].time;
-                const timeB = keyFrames[idx + 1].time;
-                const timeDelta = timeB - timeA;
-                const gradient = (clampedTime - timeA) / timeDelta;
+                const timeDelta = frameB.time - frameA.time;
+                const gradient = (clampedTime - frameA.time) / timeDelta;
                 const interp = frameB.interpolation;
-                // Pre-normalize interpolation values (avoid division in bezierInterpolate)
-                const rotT = bezierInterpolate(interp[0] * INV_127, interp[1] * INV_127, interp[2] * INV_127, interp[3] * INV_127, gradient);
-                // Use Quat.slerp to interpolate rotation
+                const rotT = interpolateControlPoints(interp.rotation, gradient);
                 const rotation = Quat.slerp(frameA.rotation, frameB.rotation, rotT);
-                // Interpolate VMD translation using bezier for each component
-                // Inline getWeight to avoid function call overhead
-                const getWeight = (offset) => bezierInterpolate(interp[offset] * INV_127, interp[offset + 8] * INV_127, interp[offset + 4] * INV_127, interp[offset + 12] * INV_127, gradient);
-                const txWeight = getWeight(0);
-                const tyWeight = getWeight(16);
-                const tzWeight = getWeight(32);
-                // Interpolate VMD relative translations (relative to bind pose world position)
+                const txWeight = interpolateControlPoints(interp.translationX, gradient);
+                const tyWeight = interpolateControlPoints(interp.translationY, gradient);
+                const tzWeight = interpolateControlPoints(interp.translationZ, gradient);
                 const interpolatedVMDTranslation = new Vec3(frameA.translation.x + (frameB.translation.x - frameA.translation.x) * txWeight, frameA.translation.y + (frameB.translation.y - frameA.translation.y) * tyWeight, frameA.translation.z + (frameB.translation.z - frameA.translation.z) * tzWeight);
-                // Convert interpolated VMD translation to local translation using animation rotation
-                // This ensures translation is computed for the animation rotation, not the runtime rotation
-                // that will be modified by IK, preventing conflicts
                 const localTranslation = this.convertVMDTranslationToLocal(boneIdx, interpolatedVMDTranslation, rotation);
-                // Direct property writes to avoid object allocation
                 localRot.set(rotation);
                 localTrans.set(localTranslation);
             }
@@ -766,10 +772,9 @@ export class Model {
             const idx = this.findKeyframeIndex(clampedTime, keyFrames, cachedIdx);
             if (idx < 0)
                 continue;
-            // Update cache
             this.morphTrackIndices.set(morphName, idx);
-            const frameA = keyFrames[idx].morphFrame;
-            const frameB = keyFrames[idx + 1]?.morphFrame;
+            const frameA = keyFrames[idx];
+            const frameB = keyFrames[idx + 1];
             const morphIdx = this.runtimeMorph.nameIndex[morphName];
             if (morphIdx === undefined)
                 continue;
@@ -794,7 +799,7 @@ export class Model {
         // Update all active tweens (rotations, translations, morphs)
         const tweensChangedMorphs = this.updateTweens();
         // Apply animation if playing or paused (always apply pose if animation data exists and we have a time set)
-        if (this.animationData) {
+        if (this._hasAnimation) {
             if (this.isPlaying && !this.isPaused) {
                 this.animationTime += deltaTime;
                 if (this.animationTime >= this.animationDuration) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "reze-engine",
-    "version": "0.6.6",
+    "version": "0.7.0",
     "description": "A WebGPU-based MMD model renderer",
     "main": "./dist/index.js",
     "types": "./dist/index.d.ts",

package/src/animation.ts

@@ -0,0 +1,109 @@
+import { Quat, Vec3 } from "./math"
+
+export interface ControlPoint {
+  x: number
+  y: number
+}
+
+export interface BoneInterpolation {
+  rotation: ControlPoint[]
+  translationX: ControlPoint[]
+  translationY: ControlPoint[]
+  translationZ: ControlPoint[]
+}
+
+export const LINEAR_INTERPOLATION: BoneInterpolation = {
+  rotation: [{ x: 20, y: 20 }, { x: 107, y: 107 }],
+  translationX: [{ x: 20, y: 20 }, { x: 107, y: 107 }],
+  translationY: [{ x: 20, y: 20 }, { x: 107, y: 107 }],
+  translationZ: [{ x: 20, y: 20 }, { x: 107, y: 107 }],
+}
+
+export interface BoneKeyframe {
+  frame: number
+  rotation: Quat
+  translation: Vec3
+  interpolation: BoneInterpolation
+}
+
+export interface MorphKeyframe {
+  frame: number
+  weight: number
+}
+
+export interface AnimationData {
+  boneTracks: Record<string, BoneKeyframe[]>
+  morphTracks: Record<string, MorphKeyframe[]>
+}
+
+/**
+ * Cubic bezier interpolation using binary search.
+ * Control points define the curve shape in 0-1 normalized space.
+ */
+export function bezierInterpolate(x1: number, x2: number, y1: number, y2: number, t: number): number {
+  t = Math.max(0, Math.min(1, t))
+
+  let start = 0
+  let end = 1
+  let mid = 0.5
+
+  for (let i = 0; i < 15; i++) {
+    const x = 3 * (1 - mid) * (1 - mid) * mid * x1 + 3 * (1 - mid) * mid * mid * x2 + mid * mid * mid
+
+    if (Math.abs(x - t) < 0.0001) {
+      break
+    }
+
+    if (x < t) {
+      start = mid
+    } else {
+      end = mid
+    }
+
+    mid = (start + end) / 2
+  }
+
+  const y = 3 * (1 - mid) * (1 - mid) * mid * y1 + 3 * (1 - mid) * mid * mid * y2 + mid * mid * mid
+
+  return y
+}
+
+const INV_127 = 1 / 127
+
+/**
+ * Convert raw VMD interpolation bytes (64-byte Uint8Array) to structured BoneInterpolation.
+ */
+export function rawInterpolationToBoneInterpolation(raw: Uint8Array): BoneInterpolation {
+  return {
+    rotation: [
+      { x: raw[0], y: raw[2] },
+      { x: raw[1], y: raw[3] },
+    ],
+    translationX: [
+      { x: raw[0], y: raw[4] },
+      { x: raw[8], y: raw[12] },
+    ],
+    translationY: [
+      { x: raw[16], y: raw[20] },
+      { x: raw[24], y: raw[28] },
+    ],
+    translationZ: [
+      { x: raw[32], y: raw[36] },
+      { x: raw[40], y: raw[44] },
+    ],
+  }
+}
+
+/**
+ * Compute bezier-interpolated weight for a pair of control points.
+ * Control point values are in 0-127 range.
+ */
+export function interpolateControlPoints(cp: ControlPoint[], t: number): number {
+  return bezierInterpolate(
+    cp[0].x * INV_127,
+    cp[1].x * INV_127,
+    cp[0].y * INV_127,
+    cp[1].y * INV_127,
+    t
+  )
+}

package/src/engine.ts

@@ -1,6 +1,7 @@
 import { Camera } from "./camera"
 import { Mat4, Quat, Vec3 } from "./math"
 import { Model } from "./model"
+import type { AnimationData } from "./animation"
 import { PmxLoader } from "./pmx-loader"
 
 export type RaycastCallback = (material: string | null, screenX: number, screenY: number) => void
@@ -1065,6 +1066,14 @@ export class Engine {
     await this.currentModel.loadVmd(url)
   }
 
+  public loadAnimationData(data: AnimationData) {
+    this.currentModel?.loadAnimationData(data)
+  }
+
+  public getAnimationData(): AnimationData | null {
+    return this.currentModel?.getAnimationData() ?? null
+  }
+
   public playAnimation() {
     this.currentModel?.playAnimation()
   }
@@ -1155,6 +1164,7 @@ export class Engine {
     this.currentModel?.moveBones(boneTranslations, durationMs)
   }
 
+
   public resetAllBones() {
     this.currentModel?.resetAllBones()
   }

package/src/index.ts

@@ -1,2 +1,4 @@
 export { Engine, type EngineStats } from "./engine"
 export { Vec3, Quat, Mat4 } from "./math"
+export type { AnimationData, BoneKeyframe, MorphKeyframe, BoneInterpolation, ControlPoint } from "./animation"
+export { bezierInterpolate, interpolateControlPoints, rawInterpolationToBoneInterpolation, LINEAR_INTERPOLATION } from "./animation"

package/src/math.ts

@@ -540,45 +540,3 @@ export class Mat4 {
   }
 }
 
-/**
- * Bezier interpolation function
- * @param x1 First control point X (0-127, normalized to 0-1)
- * @param x2 Second control point X (0-127, normalized to 0-1)
- * @param y1 First control point Y (0-127, normalized to 0-1)
- * @param y2 Second control point Y (0-127, normalized to 0-1)
- * @param t Interpolation parameter (0-1)
- * @returns Interpolated value (0-1)
- */
-export function bezierInterpolate(x1: number, x2: number, y1: number, y2: number, t: number): number {
-  // Clamp t to [0, 1]
-  t = Math.max(0, Math.min(1, t))
-
-  // Binary search for the t value that gives us the desired x
-  // We're solving for t in the Bezier curve: x(t) = 3*(1-t)^2*t*x1 + 3*(1-t)*t^2*x2 + t^3
-  let start = 0
-  let end = 1
-  let mid = 0.5
-
-  // Iterate until we find the t value that gives us the desired x
-  for (let i = 0; i < 15; i++) {
-    // Evaluate Bezier curve at mid point
-    const x = 3 * (1 - mid) * (1 - mid) * mid * x1 + 3 * (1 - mid) * mid * mid * x2 + mid * mid * mid
-
-    if (Math.abs(x - t) < 0.0001) {
-      break
-    }
-
-    if (x < t) {
-      start = mid
-    } else {
-      end = mid
-    }
-
-    mid = (start + end) / 2
-  }
-
-  // Now evaluate the y value at this t
-  const y = 3 * (1 - mid) * (1 - mid) * mid * y1 + 3 * (1 - mid) * mid * mid * y2 + mid * mid * mid
-
-  return y
-}