reze-engine 0.1.16 → 0.2.0

package/dist/engine.d.ts

@@ -1,5 +1,5 @@
 import { Camera } from "./camera";
-import { Quat, Vec3 } from "./math";
+import { Quat } from "./math";
 export interface EngineStats {
     fps: number;
     frameTime: number;
@@ -77,6 +77,8 @@ export declare class Engine {
     private stats;
     private animationFrameId;
     private renderLoopCallback;
+    private animationFrames;
+    private animationTimeouts;
     constructor(canvas: HTMLCanvasElement);
     init(): Promise<void>;
     private createPipelines;
@@ -88,8 +90,11 @@ export declare class Engine {
     private handleResize;
     private setupCamera;
     private setupLighting;
-    addLight(direction: Vec3, color: Vec3, intensity?: number): boolean;
-    setAmbient(intensity: number): void;
+    private addLight;
+    private setAmbient;
+    loadAnimation(url: string): Promise<void>;
+    playAnimation(): void;
+    stopAnimation(): void;
     getStats(): EngineStats;
     runRenderLoop(callback?: () => void): void;
     stopRenderLoop(): void;

package/dist/engine.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"engine.d.ts","sourceRoot":"","sources":["../src/engine.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"engine.d.ts","sourceRoot":"","sources":["../src/engine.ts"],"names":[],"mappings":"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"}

package/dist/engine.js

@@ -1,7 +1,8 @@
 import { Camera } from "./camera";
-import { Vec3 } from "./math";
+import { Quat, Vec3 } from "./math";
 import { PmxLoader } from "./pmx-loader";
 import { Physics } from "./physics";
+import { VMDLoader } from "./vmd-loader";
 export class Engine {
     constructor(canvas) {
         this.cameraMatrixData = new Float32Array(36);
@@ -34,6 +35,8 @@ export class Engine {
         };
         this.animationFrameId = null;
         this.renderLoopCallback = null;
+        this.animationFrames = [];
+        this.animationTimeouts = [];
         this.opaqueNonEyeNonHairDraws = [];
         this.eyeDraws = [];
         this.hairDrawsOverEyes = [];
@@ -1258,6 +1261,107 @@ export class Engine {
     setAmbient(intensity) {
         this.lightData[0] = intensity;
     }
+    async loadAnimation(url) {
+        const frames = await VMDLoader.load(url);
+        this.animationFrames = frames;
+        console.log(this.animationFrames);
+    }
+    playAnimation() {
+        if (this.animationFrames.length === 0)
+            return;
+        this.stopAnimation();
+        const allBoneKeyFrames = [];
+        for (const keyFrame of this.animationFrames) {
+            for (const boneFrame of keyFrame.boneFrames) {
+                allBoneKeyFrames.push({
+                    boneName: boneFrame.boneName,
+                    time: keyFrame.time,
+                    rotation: boneFrame.rotation,
+                });
+            }
+        }
+        const boneKeyFramesByBone = new Map();
+        for (const boneKeyFrame of allBoneKeyFrames) {
+            if (!boneKeyFramesByBone.has(boneKeyFrame.boneName)) {
+                boneKeyFramesByBone.set(boneKeyFrame.boneName, []);
+            }
+            boneKeyFramesByBone.get(boneKeyFrame.boneName).push(boneKeyFrame);
+        }
+        for (const keyFrames of boneKeyFramesByBone.values()) {
+            keyFrames.sort((a, b) => a.time - b.time);
+        }
+        const time0Rotations = [];
+        const bonesWithTime0 = new Set();
+        for (const [boneName, keyFrames] of boneKeyFramesByBone.entries()) {
+            if (keyFrames.length > 0 && keyFrames[0].time === 0) {
+                time0Rotations.push({
+                    boneName: boneName,
+                    rotation: keyFrames[0].rotation,
+                });
+                bonesWithTime0.add(boneName);
+            }
+        }
+        if (this.currentModel) {
+            if (time0Rotations.length > 0) {
+                const boneNames = time0Rotations.map((r) => r.boneName);
+                const rotations = time0Rotations.map((r) => r.rotation);
+                this.rotateBones(boneNames, rotations, 0);
+            }
+            const skeleton = this.currentModel.getSkeleton();
+            const bonesToReset = [];
+            for (const bone of skeleton.bones) {
+                if (!bonesWithTime0.has(bone.name)) {
+                    bonesToReset.push(bone.name);
+                }
+            }
+            if (bonesToReset.length > 0) {
+                const identityQuat = new Quat(0, 0, 0, 1);
+                const identityQuats = new Array(bonesToReset.length).fill(identityQuat);
+                this.rotateBones(bonesToReset, identityQuats, 0);
+            }
+            this.currentModel.evaluatePose();
+            // Reset physics immediately and upload matrices to prevent A-pose flash
+            if (this.physics) {
+                const worldMats = this.currentModel.getBoneWorldMatrices();
+                this.physics.reset(worldMats, this.currentModel.getBoneInverseBindMatrices());
+                // Upload matrices immediately so next frame shows correct pose
+                this.device.queue.writeBuffer(this.worldMatrixBuffer, 0, worldMats.buffer, worldMats.byteOffset, worldMats.byteLength);
+                this.computeSkinMatrices();
+            }
+        }
+        for (const [_, keyFrames] of boneKeyFramesByBone.entries()) {
+            for (let i = 0; i < keyFrames.length; i++) {
+                const boneKeyFrame = keyFrames[i];
+                const previousBoneKeyFrame = i > 0 ? keyFrames[i - 1] : null;
+                if (boneKeyFrame.time === 0)
+                    continue;
+                let durationMs = 0;
+                if (i === 0) {
+                    durationMs = boneKeyFrame.time * 1000;
+                }
+                else if (previousBoneKeyFrame) {
+                    durationMs = (boneKeyFrame.time - previousBoneKeyFrame.time) * 1000;
+                }
+                const scheduleTime = i > 0 && previousBoneKeyFrame ? previousBoneKeyFrame.time : 0;
+                const delayMs = scheduleTime * 1000;
+                if (delayMs <= 0) {
+                    this.rotateBones([boneKeyFrame.boneName], [boneKeyFrame.rotation], durationMs);
+                }
+                else {
+                    const timeoutId = window.setTimeout(() => {
+                        this.rotateBones([boneKeyFrame.boneName], [boneKeyFrame.rotation], durationMs);
+                    }, delayMs);
+                    this.animationTimeouts.push(timeoutId);
+                }
+            }
+        }
+    }
+    stopAnimation() {
+        for (const timeoutId of this.animationTimeouts) {
+            clearTimeout(timeoutId);
+        }
+        this.animationTimeouts = [];
+    }
     getStats() {
         return { ...this.stats };
     }
@@ -1281,6 +1385,7 @@ export class Engine {
     }
     dispose() {
         this.stopRenderLoop();
+        this.stopAnimation();
         if (this.camera)
             this.camera.detachControl();
         if (this.resizeObserver) {
@@ -1899,19 +2004,13 @@ export class Engine {
             colorAttachment.view = this.sceneRenderTextureView;
         }
     }
-    // Update model pose and physics
     updateModelPose(deltaTime) {
-        // Step 1: Animation evaluation (computes matrices to CPU memory, no upload yet)
         this.currentModel.evaluatePose();
-        // Step 2: Get world matrices (still in CPU memory)
         const worldMats = this.currentModel.getBoneWorldMatrices();
-        // Step 3: Physics modifies matrices in-place
         if (this.physics) {
             this.physics.step(deltaTime, worldMats, this.currentModel.getBoneInverseBindMatrices());
         }
-        // Step 4: Upload ONCE with final result (animation + physics)
         this.device.queue.writeBuffer(this.worldMatrixBuffer, 0, worldMats.buffer, worldMats.byteOffset, worldMats.byteLength);
-        // Step 5: GPU skinning
         this.computeSkinMatrices();
     }
     // Compute skin matrices on GPU

package/dist/physics.d.ts

@@ -72,6 +72,7 @@ export declare class Physics {
     private createAmmoRigidbodies;
     private createAmmoJoints;
     private normalizeAngle;
+    reset(boneWorldMatrices: Float32Array, boneInverseBindMatrices: Float32Array): void;
     step(dt: number, boneWorldMatrices: Float32Array, boneInverseBindMatrices: Float32Array): void;
     private computeBodyOffsets;
     private positionBodiesFromBones;

package/dist/physics.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"physics.d.ts","sourceRoot":"","sources":["../src/physics.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAIzC,oBAAY,cAAc;IACxB,MAAM,IAAI;IACV,GAAG,IAAI;IACP,OAAO,IAAI;CACZ;AAED,oBAAY,aAAa;IACvB,MAAM,IAAI;IACV,OAAO,IAAI;IACX,SAAS,IAAI;CACd;AAED,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,MAAM,CAAA;IACZ,WAAW,EAAE,MAAM,CAAA;IACnB,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,aAAa,EAAE,MAAM,CAAA;IACrB,KAAK,EAAE,cAAc,CAAA;IACrB,IAAI,EAAE,IAAI,CAAA;IACV,aAAa,EAAE,IAAI,CAAA;IACnB,aAAa,EAAE,IAAI,CAAA;IACnB,IAAI,EAAE,MAAM,CAAA;IACZ,aAAa,EAAE,MAAM,CAAA;IACrB,cAAc,EAAE,MAAM,CAAA;IACtB,WAAW,EAAE,MAAM,CAAA;IACnB,QAAQ,EAAE,MAAM,CAAA;IAChB,IAAI,EAAE,aAAa,CAAA;IACnB,uBAAuB,EAAE,IAAI,CAAA;IAC7B,gBAAgB,CAAC,EAAE,IAAI,CAAA;CACxB;AAED,MAAM,WAAW,KAAK;IACpB,IAAI,EAAE,MAAM,CAAA;IACZ,WAAW,EAAE,MAAM,CAAA;IACnB,IAAI,EAAE,MAAM,CAAA;IACZ,eAAe,EAAE,MAAM,CAAA;IACvB,eAAe,EAAE,MAAM,CAAA;IACvB,QAAQ,EAAE,IAAI,CAAA;IACd,QAAQ,EAAE,IAAI,CAAA;IACd,WAAW,EAAE,IAAI,CAAA;IACjB,WAAW,EAAE,IAAI,CAAA;IACjB,WAAW,EAAE,IAAI,CAAA;IACjB,WAAW,EAAE,IAAI,CAAA;IACjB,cAAc,EAAE,IAAI,CAAA;IACpB,cAAc,EAAE,IAAI,CAAA;CACrB;AAED,qBAAa,OAAO;IAClB,OAAO,CAAC,WAAW,CAAa;IAChC,OAAO,CAAC,MAAM,CAAS;IACvB,OAAO,CAAC,OAAO,CAA4B;IAC3C,OAAO,CAAC,eAAe,CAAQ;IAC/B,OAAO,CAAC,WAAW,CAAqC;IACxD,OAAO,CAAC,IAAI,CAA4B;IAExC,OAAO,CAAC,aAAa,CAAY;IAEjC,OAAO,CAAC,eAAe,CAAY;IAEnC,OAAO,CAAC,eAAe,CAAY;IACnC,OAAO,CAAC,sBAAsB,CAAQ;IACtC,OAAO,CAAC,aAAa,CAAQ;IAC7B,OAAO,CAAC,UAAU,CAAO;IACzB,OAAO,CAAC,oCAAoC,CAAO;IAEnD,OAAO,CAAC,UAAU,CAAY;gBAElB,WAAW,EAAE,SAAS,EAAE,EAAE,MAAM,GAAE,KAAK,EAAO;YAM5C,QAAQ;IAatB,UAAU,CAAC,OAAO,EAAE,IAAI,GAAG,IAAI;IAU/B,UAAU,IAAI,IAAI;IAIlB,cAAc,IAAI,SAAS,EAAE;IAI7B,SAAS,IAAI,KAAK,EAAE;IAIpB,sBAAsB,IAAI,KAAK,CAAC;QAAE,QAAQ,EAAE,IAAI,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE,CAAC;IA6CnE,OAAO,CAAC,eAAe;IAwBvB,OAAO,CAAC,qBAAqB;IA+F7B,OAAO,CAAC,gBAAgB;IA0KxB,OAAO,CAAC,cAAc;IActB,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,iBAAiB,EAAE,YAAY,EAAE,uBAAuB,EAAE,YAAY,GAAG,IAAI;IAsC9F,OAAO,CAAC,kBAAkB;IA2B1B,OAAO,CAAC,uBAAuB;IAkD/B,OAAO,CAAC,aAAa;IAwDrB,OAAO,CAAC,eAAe;IAUvB,OAAO,CAAC,2BAA2B;CAqCpC"}
+{"version":3,"file":"physics.d.ts","sourceRoot":"","sources":["../src/physics.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAIzC,oBAAY,cAAc;IACxB,MAAM,IAAI;IACV,GAAG,IAAI;IACP,OAAO,IAAI;CACZ;AAED,oBAAY,aAAa;IACvB,MAAM,IAAI;IACV,OAAO,IAAI;IACX,SAAS,IAAI;CACd;AAED,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,MAAM,CAAA;IACZ,WAAW,EAAE,MAAM,CAAA;IACnB,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,aAAa,EAAE,MAAM,CAAA;IACrB,KAAK,EAAE,cAAc,CAAA;IACrB,IAAI,EAAE,IAAI,CAAA;IACV,aAAa,EAAE,IAAI,CAAA;IACnB,aAAa,EAAE,IAAI,CAAA;IACnB,IAAI,EAAE,MAAM,CAAA;IACZ,aAAa,EAAE,MAAM,CAAA;IACrB,cAAc,EAAE,MAAM,CAAA;IACtB,WAAW,EAAE,MAAM,CAAA;IACnB,QAAQ,EAAE,MAAM,CAAA;IAChB,IAAI,EAAE,aAAa,CAAA;IACnB,uBAAuB,EAAE,IAAI,CAAA;IAC7B,gBAAgB,CAAC,EAAE,IAAI,CAAA;CACxB;AAED,MAAM,WAAW,KAAK;IACpB,IAAI,EAAE,MAAM,CAAA;IACZ,WAAW,EAAE,MAAM,CAAA;IACnB,IAAI,EAAE,MAAM,CAAA;IACZ,eAAe,EAAE,MAAM,CAAA;IACvB,eAAe,EAAE,MAAM,CAAA;IACvB,QAAQ,EAAE,IAAI,CAAA;IACd,QAAQ,EAAE,IAAI,CAAA;IACd,WAAW,EAAE,IAAI,CAAA;IACjB,WAAW,EAAE,IAAI,CAAA;IACjB,WAAW,EAAE,IAAI,CAAA;IACjB,WAAW,EAAE,IAAI,CAAA;IACjB,cAAc,EAAE,IAAI,CAAA;IACpB,cAAc,EAAE,IAAI,CAAA;CACrB;AAED,qBAAa,OAAO;IAClB,OAAO,CAAC,WAAW,CAAa;IAChC,OAAO,CAAC,MAAM,CAAS;IACvB,OAAO,CAAC,OAAO,CAA4B;IAC3C,OAAO,CAAC,eAAe,CAAQ;IAC/B,OAAO,CAAC,WAAW,CAAqC;IACxD,OAAO,CAAC,IAAI,CAA4B;IAExC,OAAO,CAAC,aAAa,CAAY;IAEjC,OAAO,CAAC,eAAe,CAAY;IAEnC,OAAO,CAAC,eAAe,CAAY;IACnC,OAAO,CAAC,sBAAsB,CAAQ;IACtC,OAAO,CAAC,aAAa,CAAQ;IAC7B,OAAO,CAAC,UAAU,CAAO;IACzB,OAAO,CAAC,oCAAoC,CAAO;IAEnD,OAAO,CAAC,UAAU,CAAY;gBAElB,WAAW,EAAE,SAAS,EAAE,EAAE,MAAM,GAAE,KAAK,EAAO;YAM5C,QAAQ;IAatB,UAAU,CAAC,OAAO,EAAE,IAAI,GAAG,IAAI;IAU/B,UAAU,IAAI,IAAI;IAIlB,cAAc,IAAI,SAAS,EAAE;IAI7B,SAAS,IAAI,KAAK,EAAE;IAIpB,sBAAsB,IAAI,KAAK,CAAC;QAAE,QAAQ,EAAE,IAAI,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE,CAAC;IA6CnE,OAAO,CAAC,eAAe;IAwBvB,OAAO,CAAC,qBAAqB;IA+F7B,OAAO,CAAC,gBAAgB;IA0KxB,OAAO,CAAC,cAAc;IAetB,KAAK,CAAC,iBAAiB,EAAE,YAAY,EAAE,uBAAuB,EAAE,YAAY,GAAG,IAAI;IAuEnF,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,iBAAiB,EAAE,YAAY,EAAE,uBAAuB,EAAE,YAAY,GAAG,IAAI;IAsC9F,OAAO,CAAC,kBAAkB;IA2B1B,OAAO,CAAC,uBAAuB;IAkD/B,OAAO,CAAC,aAAa;IAwDrB,OAAO,CAAC,eAAe;IAUvB,OAAO,CAAC,2BAA2B;CAqCpC"}

package/dist/physics.js

@@ -329,6 +329,64 @@ export class Physics {
         }
         return angle;
     }
+    // Reset physics state (reposition bodies, clear velocities)
+    // Following babylon-mmd pattern: initialize all rigid body positions from current bone poses
+    // Call this when starting a new animation to prevent physics instability from sudden pose changes
+    reset(boneWorldMatrices, boneInverseBindMatrices) {
+        if (!this.ammoInitialized || !this.ammo || !this.dynamicsWorld) {
+            return;
+        }
+        const boneCount = boneWorldMatrices.length / 16;
+        const Ammo = this.ammo;
+        // Ensure body offsets are computed
+        if (!this.rigidbodiesInitialized) {
+            this.computeBodyOffsets(boneInverseBindMatrices, boneCount);
+            this.rigidbodiesInitialized = true;
+        }
+        // Reposition ALL rigid bodies from current bone poses (like babylon-mmd initialize)
+        // This ensures all bodies are correctly positioned before physics starts
+        for (let i = 0; i < this.rigidbodies.length; i++) {
+            const rb = this.rigidbodies[i];
+            const ammoBody = this.ammoRigidbodies[i];
+            if (!ammoBody || rb.boneIndex < 0 || rb.boneIndex >= boneCount)
+                continue;
+            const boneIdx = rb.boneIndex;
+            const worldMatIdx = boneIdx * 16;
+            // Get bone world matrix
+            const boneWorldMat = new Mat4(boneWorldMatrices.subarray(worldMatIdx, worldMatIdx + 16));
+            // Compute body world matrix: bodyWorld = boneWorld × bodyOffsetMatrix
+            // (like babylon-mmd: bodyWorldMatrix = bodyOffsetMatrix.multiplyToRef(bodyWorldMatrix))
+            const bodyOffsetMatrix = rb.bodyOffsetMatrix || rb.bodyOffsetMatrixInverse.inverse();
+            const bodyWorldMatrix = boneWorldMat.multiply(bodyOffsetMatrix);
+            const worldPos = bodyWorldMatrix.getPosition();
+            const worldRot = bodyWorldMatrix.toQuat();
+            // Set transform matrix
+            const transform = new Ammo.btTransform();
+            const pos = new Ammo.btVector3(worldPos.x, worldPos.y, worldPos.z);
+            const quat = new Ammo.btQuaternion(worldRot.x, worldRot.y, worldRot.z, worldRot.w);
+            transform.setOrigin(pos);
+            transform.setRotation(quat);
+            ammoBody.setWorldTransform(transform);
+            ammoBody.getMotionState().setWorldTransform(transform);
+            // Clear velocities for all rigidbodies
+            if (!this.zeroVector) {
+                this.zeroVector = new Ammo.btVector3(0, 0, 0);
+            }
+            ammoBody.setLinearVelocity(this.zeroVector);
+            ammoBody.setAngularVelocity(this.zeroVector);
+            // Explicitly activate dynamic rigidbodies after reset (wake them up)
+            // This is critical for dress pieces and other dynamic bodies to prevent teleporting
+            if (rb.type === RigidbodyType.Dynamic) {
+                ammoBody.activate(true); // Wake up the body
+            }
+            Ammo.destroy(pos);
+            Ammo.destroy(quat);
+        }
+        // Step simulation once to stabilize (like babylon-mmd)
+        if (this.dynamicsWorld.stepSimulation) {
+            this.dynamicsWorld.stepSimulation(0, 0, 0);
+        }
+    }
     // Syncs bones to rigidbodies, simulates dynamics, solves constraints
     // Modifies boneWorldMatrices in-place for dynamic rigidbodies that drive bones
     step(dt, boneWorldMatrices, boneInverseBindMatrices) {

package/dist/vmd-loader.d.ts

@@ -0,0 +1,25 @@
+import { Quat } from "./math";
+export interface BoneFrame {
+    boneName: string;
+    frame: number;
+    rotation: Quat;
+}
+export interface VMDKeyFrame {
+    time: number;
+    boneFrames: BoneFrame[];
+}
+export declare class VMDLoader {
+    private view;
+    private offset;
+    private decoder;
+    private constructor();
+    static load(url: string): Promise<VMDKeyFrame[]>;
+    static loadFromBuffer(buffer: ArrayBuffer): VMDKeyFrame[];
+    private parse;
+    private readBoneFrame;
+    private getUint32;
+    private getFloat32;
+    private getString;
+    private skip;
+}
+//# sourceMappingURL=vmd-loader.d.ts.map

package/dist/vmd-loader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vmd-loader.d.ts","sourceRoot":"","sources":["../src/vmd-loader.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAE7B,MAAM,WAAW,SAAS;IACxB,QAAQ,EAAE,MAAM,CAAA;IAChB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,IAAI,CAAA;CACf;AAED,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAA;IACZ,UAAU,EAAE,SAAS,EAAE,CAAA;CACxB;AAED,qBAAa,SAAS;IACpB,OAAO,CAAC,IAAI,CAAU;IACtB,OAAO,CAAC,MAAM,CAAI;IAClB,OAAO,CAAC,OAAO,CAAa;IAE5B,OAAO;WAWM,IAAI,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,WAAW,EAAE,CAAC;IAKtD,MAAM,CAAC,cAAc,CAAC,MAAM,EAAE,WAAW,GAAG,WAAW,EAAE;IAKzD,OAAO,CAAC,KAAK;IA8Db,OAAO,CAAC,aAAa;IA+CrB,OAAO,CAAC,SAAS;IASjB,OAAO,CAAC,UAAU;IASlB,OAAO,CAAC,SAAS;IAMjB,OAAO,CAAC,IAAI;CAMb"}

package/dist/vmd-loader.js

@@ -0,0 +1,141 @@
+import { Quat } from "./math";
+export class VMDLoader {
+    constructor(buffer) {
+        this.offset = 0;
+        this.view = new DataView(buffer);
+        // Try to use Shift-JIS decoder, fallback to UTF-8 if not available
+        try {
+            this.decoder = new TextDecoder("shift-jis");
+        }
+        catch {
+            // Fallback to UTF-8 if Shift-JIS is not supported
+            this.decoder = new TextDecoder("utf-8");
+        }
+    }
+    static async load(url) {
+        const loader = new VMDLoader(await fetch(url).then((r) => r.arrayBuffer()));
+        return loader.parse();
+    }
+    static loadFromBuffer(buffer) {
+        const loader = new VMDLoader(buffer);
+        return loader.parse();
+    }
+    parse() {
+        // Read header (30 bytes)
+        const header = this.getString(30);
+        if (!header.startsWith("Vocaloid Motion Data")) {
+            throw new Error("Invalid VMD file header");
+        }
+        // Skip model name (20 bytes)
+        this.skip(20);
+        // Read bone frame count (4 bytes, u32 little endian)
+        const boneFrameCount = this.getUint32();
+        // Read all bone frames
+        const allBoneFrames = [];
+        for (let i = 0; i < boneFrameCount; i++) {
+            const boneFrame = this.readBoneFrame();
+            // Convert frame number to time (assuming 30 FPS like the Rust code)
+            const FRAME_RATE = 30.0;
+            const time = boneFrame.frame / FRAME_RATE;
+            allBoneFrames.push({ time, boneFrame });
+        }
+        // Group by time and convert to VMDKeyFrame format
+        // Sort by time first
+        allBoneFrames.sort((a, b) => a.time - b.time);
+        const keyFrames = [];
+        let currentTime = -1.0;
+        let currentBoneFrames = [];
+        for (const { time, boneFrame } of allBoneFrames) {
+            if (Math.abs(time - currentTime) > 0.001) {
+                // New time frame
+                if (currentBoneFrames.length > 0) {
+                    keyFrames.push({
+                        time: currentTime,
+                        boneFrames: currentBoneFrames,
+                    });
+                }
+                currentTime = time;
+                currentBoneFrames = [boneFrame];
+            }
+            else {
+                // Same time frame
+                currentBoneFrames.push(boneFrame);
+            }
+        }
+        // Add the last frame
+        if (currentBoneFrames.length > 0) {
+            keyFrames.push({
+                time: currentTime,
+                boneFrames: currentBoneFrames,
+            });
+        }
+        return keyFrames;
+    }
+    readBoneFrame() {
+        // Read bone name (15 bytes)
+        const nameBuffer = new Uint8Array(this.view.buffer, this.offset, 15);
+        this.offset += 15;
+        // Find the actual length of the bone name (stop at first null byte)
+        let nameLength = 15;
+        for (let i = 0; i < 15; i++) {
+            if (nameBuffer[i] === 0) {
+                nameLength = i;
+                break;
+            }
+        }
+        // Decode Shift-JIS bone name
+        let boneName;
+        try {
+            const nameSlice = nameBuffer.slice(0, nameLength);
+            boneName = this.decoder.decode(nameSlice);
+        }
+        catch {
+            // Fallback to lossy decoding if there were encoding errors
+            boneName = String.fromCharCode(...nameBuffer.slice(0, nameLength));
+        }
+        // Read frame number (4 bytes, little endian)
+        const frame = this.getUint32();
+        // Skip position (12 bytes: 3 x f32, little endian)
+        this.skip(12);
+        // Read rotation quaternion (16 bytes: 4 x f32, little endian)
+        const rotX = this.getFloat32();
+        const rotY = this.getFloat32();
+        const rotZ = this.getFloat32();
+        const rotW = this.getFloat32();
+        const rotation = new Quat(rotX, rotY, rotZ, rotW);
+        // Skip interpolation parameters (64 bytes)
+        this.skip(64);
+        return {
+            boneName,
+            frame,
+            rotation,
+        };
+    }
+    getUint32() {
+        if (this.offset + 4 > this.view.buffer.byteLength) {
+            throw new RangeError(`Offset ${this.offset} + 4 exceeds buffer bounds ${this.view.buffer.byteLength}`);
+        }
+        const v = this.view.getUint32(this.offset, true); // true = little endian
+        this.offset += 4;
+        return v;
+    }
+    getFloat32() {
+        if (this.offset + 4 > this.view.buffer.byteLength) {
+            throw new RangeError(`Offset ${this.offset} + 4 exceeds buffer bounds ${this.view.buffer.byteLength}`);
+        }
+        const v = this.view.getFloat32(this.offset, true); // true = little endian
+        this.offset += 4;
+        return v;
+    }
+    getString(len) {
+        const bytes = new Uint8Array(this.view.buffer, this.offset, len);
+        this.offset += len;
+        return String.fromCharCode(...bytes);
+    }
+    skip(bytes) {
+        if (this.offset + bytes > this.view.buffer.byteLength) {
+            throw new RangeError(`Offset ${this.offset} + ${bytes} exceeds buffer bounds ${this.view.buffer.byteLength}`);
+        }
+        this.offset += bytes;
+    }
+}

package/package.json

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

package/src/engine.ts

@@ -3,6 +3,7 @@ import { Quat, Vec3 } from "./math"
 import { Model } from "./model"
 import { PmxLoader } from "./pmx-loader"
 import { Physics } from "./physics"
+import { VMDKeyFrame, VMDLoader } from "./vmd-loader"
 
 export interface EngineStats {
   fps: number
@@ -10,6 +11,13 @@ export interface EngineStats {
   gpuMemory: number // MB (estimated total GPU memory)
 }
 
+// Internal type for organizing bone keyframes during animation playback
+type BoneKeyFrame = {
+  boneName: string
+  time: number
+  rotation: Quat
+}
+
 export class Engine {
   private canvas: HTMLCanvasElement
   private device!: GPUDevice
@@ -94,6 +102,9 @@ export class Engine {
   private animationFrameId: number | null = null
   private renderLoopCallback: (() => void) | null = null
 
+  private animationFrames: VMDKeyFrame[] = []
+  private animationTimeouts: number[] = []
+
   constructor(canvas: HTMLCanvasElement) {
     this.canvas = canvas
   }
@@ -1352,7 +1363,7 @@ export class Engine {
     this.device.queue.writeBuffer(this.lightUniformBuffer, 0, this.lightData)
   }
 
-  public addLight(direction: Vec3, color: Vec3, intensity: number = 1.0): boolean {
+  private addLight(direction: Vec3, color: Vec3, intensity: number = 1.0): boolean {
     if (this.lightCount >= 4) return false
 
     const normalized = direction.normalize()
@@ -1371,10 +1382,131 @@ export class Engine {
     return true
   }
 
-  public setAmbient(intensity: number) {
+  private setAmbient(intensity: number) {
     this.lightData[0] = intensity
   }
 
+  public async loadAnimation(url: string) {
+    const frames = await VMDLoader.load(url)
+    this.animationFrames = frames
+    console.log(this.animationFrames)
+  }
+
+  public playAnimation() {
+    if (this.animationFrames.length === 0) return
+
+    this.stopAnimation()
+
+    const allBoneKeyFrames: BoneKeyFrame[] = []
+    for (const keyFrame of this.animationFrames) {
+      for (const boneFrame of keyFrame.boneFrames) {
+        allBoneKeyFrames.push({
+          boneName: boneFrame.boneName,
+          time: keyFrame.time,
+          rotation: boneFrame.rotation,
+        })
+      }
+    }
+
+    const boneKeyFramesByBone = new Map<string, BoneKeyFrame[]>()
+    for (const boneKeyFrame of allBoneKeyFrames) {
+      if (!boneKeyFramesByBone.has(boneKeyFrame.boneName)) {
+        boneKeyFramesByBone.set(boneKeyFrame.boneName, [])
+      }
+      boneKeyFramesByBone.get(boneKeyFrame.boneName)!.push(boneKeyFrame)
+    }
+
+    for (const keyFrames of boneKeyFramesByBone.values()) {
+      keyFrames.sort((a, b) => a.time - b.time)
+    }
+
+    const time0Rotations: Array<{ boneName: string; rotation: Quat }> = []
+    const bonesWithTime0 = new Set<string>()
+    for (const [boneName, keyFrames] of boneKeyFramesByBone.entries()) {
+      if (keyFrames.length > 0 && keyFrames[0].time === 0) {
+        time0Rotations.push({
+          boneName: boneName,
+          rotation: keyFrames[0].rotation,
+        })
+        bonesWithTime0.add(boneName)
+      }
+    }
+
+    if (this.currentModel) {
+      if (time0Rotations.length > 0) {
+        const boneNames = time0Rotations.map((r) => r.boneName)
+        const rotations = time0Rotations.map((r) => r.rotation)
+        this.rotateBones(boneNames, rotations, 0)
+      }
+
+      const skeleton = this.currentModel.getSkeleton()
+      const bonesToReset: string[] = []
+      for (const bone of skeleton.bones) {
+        if (!bonesWithTime0.has(bone.name)) {
+          bonesToReset.push(bone.name)
+        }
+      }
+
+      if (bonesToReset.length > 0) {
+        const identityQuat = new Quat(0, 0, 0, 1)
+        const identityQuats = new Array(bonesToReset.length).fill(identityQuat)
+        this.rotateBones(bonesToReset, identityQuats, 0)
+      }
+
+      this.currentModel.evaluatePose()
+
+      // Reset physics immediately and upload matrices to prevent A-pose flash
+      if (this.physics) {
+        const worldMats = this.currentModel.getBoneWorldMatrices()
+        this.physics.reset(worldMats, this.currentModel.getBoneInverseBindMatrices())
+
+        // Upload matrices immediately so next frame shows correct pose
+        this.device.queue.writeBuffer(
+          this.worldMatrixBuffer!,
+          0,
+          worldMats.buffer,
+          worldMats.byteOffset,
+          worldMats.byteLength
+        )
+        this.computeSkinMatrices()
+      }
+    }
+    for (const [_, keyFrames] of boneKeyFramesByBone.entries()) {
+      for (let i = 0; i < keyFrames.length; i++) {
+        const boneKeyFrame = keyFrames[i]
+        const previousBoneKeyFrame = i > 0 ? keyFrames[i - 1] : null
+
+        if (boneKeyFrame.time === 0) continue
+
+        let durationMs = 0
+        if (i === 0) {
+          durationMs = boneKeyFrame.time * 1000
+        } else if (previousBoneKeyFrame) {
+          durationMs = (boneKeyFrame.time - previousBoneKeyFrame.time) * 1000
+        }
+
+        const scheduleTime = i > 0 && previousBoneKeyFrame ? previousBoneKeyFrame.time : 0
+        const delayMs = scheduleTime * 1000
+
+        if (delayMs <= 0) {
+          this.rotateBones([boneKeyFrame.boneName], [boneKeyFrame.rotation], durationMs)
+        } else {
+          const timeoutId = window.setTimeout(() => {
+            this.rotateBones([boneKeyFrame.boneName], [boneKeyFrame.rotation], durationMs)
+          }, delayMs)
+          this.animationTimeouts.push(timeoutId)
+        }
+      }
+    }
+  }
+
+  public stopAnimation() {
+    for (const timeoutId of this.animationTimeouts) {
+      clearTimeout(timeoutId)
+    }
+    this.animationTimeouts = []
+  }
+
   public getStats(): EngineStats {
     return { ...this.stats }
   }
@@ -1405,6 +1537,7 @@ export class Engine {
 
   public dispose() {
     this.stopRenderLoop()
+    this.stopAnimation()
     if (this.camera) this.camera.detachControl()
     if (this.resizeObserver) {
       this.resizeObserver.disconnect()
@@ -2153,20 +2286,14 @@ export class Engine {
     }
   }
 
-  // Update model pose and physics
   private updateModelPose(deltaTime: number) {
-    // Step 1: Animation evaluation (computes matrices to CPU memory, no upload yet)
     this.currentModel!.evaluatePose()
-
-    // Step 2: Get world matrices (still in CPU memory)
     const worldMats = this.currentModel!.getBoneWorldMatrices()
 
-    // Step 3: Physics modifies matrices in-place
     if (this.physics) {
       this.physics.step(deltaTime, worldMats, this.currentModel!.getBoneInverseBindMatrices())
     }
 
-    // Step 4: Upload ONCE with final result (animation + physics)
     this.device.queue.writeBuffer(
       this.worldMatrixBuffer!,
       0,
@@ -2174,8 +2301,6 @@ export class Engine {
       worldMats.byteOffset,
       worldMats.byteLength
     )
-
-    // Step 5: GPU skinning
     this.computeSkinMatrices()
   }