reze-engine 0.2.19 → 0.3.1

package/src/engine.ts

@@ -3,7 +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"
+import { AnimationPose, Player } from "./player"
 
 export type EngineOptions = {
   ambientColor?: Vec3
@@ -24,12 +24,6 @@ interface DrawCall {
   bindGroup: GPUBindGroup
 }
 
-type BoneKeyFrame = {
-  boneName: string
-  time: number
-  rotation: Quat
-}
-
 export class Engine {
   private canvas: HTMLCanvasElement
   private device!: GPUDevice
@@ -79,7 +73,6 @@ export class Engine {
   private static readonly DEFAULT_RIM_LIGHT_INTENSITY = 0.45
   private static readonly DEFAULT_CAMERA_DISTANCE = 26.6
   private static readonly DEFAULT_CAMERA_TARGET = new Vec3(0, 12.5, 0)
-  private static readonly HAIR_OVER_EYES_ALPHA = 0.5
   private static readonly TRANSPARENCY_EPSILON = 0.001
   private static readonly STATS_FPS_UPDATE_INTERVAL_MS = 1000
   private static readonly STATS_FRAME_TIME_ROUNDING = 100
@@ -140,12 +133,9 @@ export class Engine {
   private animationFrameId: number | null = null
   private renderLoopCallback: (() => void) | null = null
 
-  private animationFrames: VMDKeyFrame[] = []
-  private animationTimeouts: number[] = []
+  private player: Player = new Player()
   private hasAnimation = false // Set to true when loadAnimation is called
-  private playingAnimation = false // Set to true when playAnimation is called
-  private breathingTimeout: number | null = null
-  private breathingBaseRotations: Map<string, Quat> = new Map()
+  private animationStartTime: number = 0 // Track when animation first started (for A-pose prevention)
 
   constructor(canvas: HTMLCanvasElement, options?: EngineOptions) {
     this.canvas = canvas
@@ -1277,84 +1267,71 @@ export class Engine {
     this.lightData[3] = 0.0 // Padding for vec3f alignment
   }
 
-  public async loadAnimation(url: string) {
-    const frames = await VMDLoader.load(url)
-    this.animationFrames = frames
+  public async loadAnimation(url: string, audioUrl?: string) {
+    await this.player.loadVmd(url, audioUrl)
     this.hasAnimation = true
-  }
 
-  public playAnimation(options?: {
-    breathBones?: string[] | Record<string, number> // Array of bone names or map of bone name -> rotation range
-    breathDuration?: number // Breathing cycle duration in milliseconds
-  }) {
-    if (this.animationFrames.length === 0) return
-
-    this.stopAnimation()
-    this.stopBreathing()
-    this.playingAnimation = true
+    // Show first frame (time 0) immediately
+    if (this.currentModel) {
+      const initialPose = this.player.getPoseAtTime(0)
+      this.applyPose(initialPose)
 
-    // Enable breathing if breathBones is provided
-    const enableBreath = options?.breathBones !== undefined && options.breathBones !== null
-    let breathBones: string[] = []
-    let breathRotationRanges: Record<string, number> | undefined = undefined
+      // Reset bones without time 0 keyframes
+      const skeleton = this.currentModel.getSkeleton()
+      const bonesWithPose = new Set(initialPose.boneRotations.keys())
+      const bonesToReset: string[] = []
+      for (const bone of skeleton.bones) {
+        if (!bonesWithPose.has(bone.name)) {
+          bonesToReset.push(bone.name)
+        }
+      }
 
-    if (enableBreath && options.breathBones) {
-      if (Array.isArray(options.breathBones)) {
-        breathBones = options.breathBones
-      } else {
-        breathBones = Object.keys(options.breathBones)
-        breathRotationRanges = options.breathBones
+      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)
       }
-    }
 
-    const breathDuration = options?.breathDuration ?? 4000
+      // Update model pose and physics
+      this.currentModel.evaluatePose()
 
-    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,
-        })
-      }
-    }
+      if (this.physics) {
+        const worldMats = this.currentModel.getBoneWorldMatrices()
+        this.physics.reset(worldMats, this.currentModel.getBoneInverseBindMatrices())
 
-    const boneKeyFramesByBone = new Map<string, BoneKeyFrame[]>()
-    for (const boneKeyFrame of allBoneKeyFrames) {
-      if (!boneKeyFramesByBone.has(boneKeyFrame.boneName)) {
-        boneKeyFramesByBone.set(boneKeyFrame.boneName, [])
+        // Upload matrices immediately
+        this.device.queue.writeBuffer(
+          this.worldMatrixBuffer!,
+          0,
+          worldMats.buffer,
+          worldMats.byteOffset,
+          worldMats.byteLength
+        )
+        const encoder = this.device.createCommandEncoder()
+        this.computeSkinMatrices(encoder)
+        this.device.queue.submit([encoder.finish()])
       }
-      boneKeyFramesByBone.get(boneKeyFrame.boneName)!.push(boneKeyFrame)
     }
+  }
 
-    for (const keyFrames of boneKeyFramesByBone.values()) {
-      keyFrames.sort((a, b) => a.time - b.time)
-    }
+  public playAnimation() {
+    if (!this.hasAnimation || !this.currentModel) return
 
-    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)
-      }
-    }
+    const wasPaused = this.player.isPausedState()
+    const wasPlaying = this.player.isPlayingState()
 
-    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)
-      }
+    // Only reset pose and physics if starting from beginning (not resuming)
+    if (!wasPlaying && !wasPaused) {
+      // Get initial pose at time 0
+      const initialPose = this.player.getPoseAtTime(0)
+      this.applyPose(initialPose)
 
+      // Reset bones without time 0 keyframes
       const skeleton = this.currentModel.getSkeleton()
+      const bonesWithPose = new Set(initialPose.boneRotations.keys())
       const bonesToReset: string[] = []
       for (const bone of skeleton.bones) {
-        if (!bonesWithTime0.has(bone.name)) {
+        if (!bonesWithPose.has(bone.name)) {
           bonesToReset.push(bone.name)
         }
       }
@@ -1385,141 +1362,80 @@ export class Engine {
         this.device.queue.submit([encoder.finish()])
       }
     }
-    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)
-        }
-      }
-    }
-
-    // Setup breathing animation if enabled
-    if (enableBreath && this.currentModel) {
-      // Find the last frame time
-      let maxTime = 0
-      for (const keyFrame of this.animationFrames) {
-        if (keyFrame.time > maxTime) {
-          maxTime = keyFrame.time
-        }
-      }
 
-      // Get last frame rotations directly from animation data for breathing bones
-      const lastFrameRotations = new Map<string, Quat>()
-      for (const bone of breathBones) {
-        const keyFrames = boneKeyFramesByBone.get(bone)
-        if (keyFrames && keyFrames.length > 0) {
-          // Find the rotation at the last frame time (closest keyframe <= maxTime)
-          let lastRotation: Quat | null = null
-          for (let i = keyFrames.length - 1; i >= 0; i--) {
-            if (keyFrames[i].time <= maxTime) {
-              lastRotation = keyFrames[i].rotation
-              break
-            }
-          }
-          if (lastRotation) {
-            lastFrameRotations.set(bone, lastRotation)
-          }
-        }
-      }
-
-      // Start breathing after animation completes
-      // Use the last frame rotations directly from animation data (no need to capture from model)
-      const animationEndTime = maxTime * 1000 + 200 // Small buffer for final tweens to complete
-      this.breathingTimeout = window.setTimeout(() => {
-        this.startBreathing(breathBones, lastFrameRotations, breathRotationRanges, breathDuration)
-      }, animationEndTime)
+    // Start playback (or resume if paused)
+    this.player.play()
+    if (this.animationStartTime === 0) {
+      this.animationStartTime = performance.now()
     }
   }
 
   public stopAnimation() {
-    for (const timeoutId of this.animationTimeouts) {
-      clearTimeout(timeoutId)
-    }
-    this.animationTimeouts = []
-    this.playingAnimation = false
+    this.player.stop()
   }
 
-  private stopBreathing() {
-    if (this.breathingTimeout !== null) {
-      clearTimeout(this.breathingTimeout)
-      this.breathingTimeout = null
-    }
-    this.breathingBaseRotations.clear()
+  public pauseAnimation() {
+    this.player.pause()
   }
 
-  private startBreathing(
-    bones: string[],
-    baseRotations: Map<string, Quat>,
-    rotationRanges?: Record<string, number>,
-    durationMs: number = 4000
-  ) {
-    if (!this.currentModel) return
+  public seekAnimation(time: number) {
+    if (!this.currentModel || !this.hasAnimation) return
 
-    // Store base rotations directly from last frame of animation data
-    // These are the exact rotations from the animation - use them as-is
-    for (const bone of bones) {
-      const baseRot = baseRotations.get(bone)
-      if (baseRot) {
-        this.breathingBaseRotations.set(bone, baseRot)
-      }
-    }
-
-    const halfCycleMs = durationMs / 2
-    const defaultRotation = 0.02 // Default rotation range if not specified per bone
-
-    // Start breathing cycle - oscillate around exact base rotation (final pose)
-    // Each bone can have its own rotation range, or use default
-    const animate = (isInhale: boolean) => {
-      if (!this.currentModel) return
+    this.player.seek(time)
 
-      const breathingBoneNames: string[] = []
-      const breathingQuats: Quat[] = []
+    // Immediately apply pose at seeked time
+    const pose = this.player.getPoseAtTime(time)
+    this.applyPose(pose)
 
-      for (const bone of bones) {
-        const baseRot = this.breathingBaseRotations.get(bone)
-        if (!baseRot) continue
+    // Update model pose and physics
+    this.currentModel.evaluatePose()
 
-        // Get rotation range for this bone (per-bone or default)
-        const rotation = rotationRanges?.[bone] ?? defaultRotation
+    if (this.physics) {
+      const worldMats = this.currentModel.getBoneWorldMatrices()
+      this.physics.reset(worldMats, this.currentModel.getBoneInverseBindMatrices())
+
+      // Upload matrices immediately
+      this.device.queue.writeBuffer(
+        this.worldMatrixBuffer!,
+        0,
+        worldMats.buffer,
+        worldMats.byteOffset,
+        worldMats.byteLength
+      )
+      const encoder = this.device.createCommandEncoder()
+      this.computeSkinMatrices(encoder)
+      this.device.queue.submit([encoder.finish()])
+    }
+  }
 
-        // Oscillate around base rotation with the bone's rotation range
-        // isInhale: base * rotation, exhale: base * (-rotation)
-        const oscillationRot = Quat.fromEuler(isInhale ? rotation : -rotation, 0, 0)
-        const finalRot = baseRot.multiply(oscillationRot)
+  public getAnimationProgress() {
+    return this.player.getProgress()
+  }
 
-        breathingBoneNames.push(bone)
-        breathingQuats.push(finalRot)
-      }
+  /**
+   * Apply animation pose to model
+   */
+  private applyPose(pose: AnimationPose): void {
+    if (!this.currentModel) return
 
-      if (breathingBoneNames.length > 0) {
-        this.rotateBones(breathingBoneNames, breathingQuats, halfCycleMs)
-      }
+    // Apply bone rotations
+    if (pose.boneRotations.size > 0) {
+      const boneNames = Array.from(pose.boneRotations.keys())
+      const rotations = Array.from(pose.boneRotations.values())
+      this.rotateBones(boneNames, rotations, 0)
+    }
 
-      this.breathingTimeout = window.setTimeout(() => animate(!isInhale), halfCycleMs)
+    // Apply bone translations
+    if (pose.boneTranslations.size > 0) {
+      const boneNames = Array.from(pose.boneTranslations.keys())
+      const translations = Array.from(pose.boneTranslations.values())
+      this.moveBones(boneNames, translations, 0)
     }
 
-    // Start breathing from exhale position (closer to base) to minimize initial movement
-    animate(false)
+    // Apply morph weights
+    for (const [morphName, weight] of pose.morphWeights.entries()) {
+      this.setMorphWeight(morphName, weight, 0)
+    }
   }
 
   public getStats(): EngineStats {
@@ -1553,7 +1469,6 @@ export class Engine {
   public dispose() {
     this.stopRenderLoop()
     this.stopAnimation()
-    this.stopBreathing()
     if (this.camera) this.camera.detachControl()
     if (this.resizeObserver) {
       this.resizeObserver.disconnect()
@@ -1578,6 +1493,11 @@ export class Engine {
     this.currentModel?.rotateBones(bones, rotations, durationMs)
   }
 
+  // moveBones now takes relative translations (VMD-style) by default
+  public moveBones(bones: string[], relativeTranslations: Vec3[], durationMs?: number) {
+    this.currentModel?.moveBones(bones, relativeTranslations, durationMs)
+  }
+
   public setMorphWeight(name: string, weight: number, durationMs?: number): void {
     if (!this.currentModel) return
     this.currentModel.setMorphWeight(name, weight, durationMs)
@@ -2008,6 +1928,14 @@ export class Engine {
       this.updateCameraUniforms()
       this.updateRenderTarget()
 
+      // Animate VMD animation if playing
+      if (this.hasAnimation && this.currentModel) {
+        const pose = this.player.update(currentTime)
+        if (pose) {
+          this.applyPose(pose)
+        }
+      }
+
       // Update model pose first (this may update morph weights via tweens)
       // We need to do this before creating the encoder to ensure vertex buffer is ready
       if (this.currentModel) {
@@ -2028,9 +1956,10 @@ export class Engine {
 
       this.updateModelPose(deltaTime, encoder)
 
-      // Hide model if animation is loaded but not playing yet (prevents A-pose flash)
-      // Still update physics and poses, just don't render visually
-      if (this.hasAnimation && !this.playingAnimation) {
+      // Hide model if animation is loaded but hasn't started playing yet (prevents A-pose flash)
+      // Once animation has played (even if it stopped), continue rendering normally
+      // Still update physics and poses, just don't render visually before first play
+      if (this.hasAnimation && !this.player.isPlayingState() && this.animationStartTime === 0) {
         // Submit encoder to ensure matrices are uploaded and physics initializes
         this.device.queue.submit([encoder.finish()])
         return