deploy: 14b4389

Author: lanmower

.nojekyll

@@ -0,0 +1,70 @@
+import * as THREE from 'three'
+import { get, put, remove } from './IndexedDBStore.js'
+
+const DB_NAME = 'spawnpoint-anim-cache'
+const DB_VERSION = 3
+const STORE = 'clips'
+
+const TRACK_TYPES = [
+  ['QuaternionKeyframeTrack', THREE.QuaternionKeyframeTrack],
+  ['VectorKeyframeTrack', THREE.VectorKeyframeTrack],
+  ['NumberKeyframeTrack', THREE.NumberKeyframeTrack],
+  ['BooleanKeyframeTrack', THREE.BooleanKeyframeTrack],
+  ['StringKeyframeTrack', THREE.StringKeyframeTrack],
+  ['ColorKeyframeTrack', THREE.ColorKeyframeTrack],
+]
+
+function getTrackTypeName(track) {
+  for (const [name, cls] of TRACK_TYPES) {
+    if (track instanceof cls) return name
+  }
+  return null
+}
+
+function serializeClip(clip) {
+  const tracks = []
+  for (const track of clip.tracks) {
+    const type = getTrackTypeName(track)
+    if (!type) continue
+    tracks.push({ name: track.name, type, times: track.times.buffer.slice(track.times.byteOffset, track.times.byteOffset + track.times.byteLength), values: track.values.buffer.slice(track.values.byteOffset, track.values.byteOffset + track.values.byteLength), interpolation: track.getInterpolation?.() ?? 2301 })
+  }
+  return { name: clip.name, duration: clip.duration, tracks }
+}
+
+function deserializeClip(data) {
+  const typeMap = Object.fromEntries(TRACK_TYPES)
+  const tracks = data.tracks.map(t => {
+    const TrackClass = typeMap[t.type]
+    if (!TrackClass) throw new Error(`Unknown track type: ${t.type}`)
+    const times = t.times instanceof ArrayBuffer ? new Float32Array(t.times) : new Float32Array(t.times)
+    const values = t.values instanceof ArrayBuffer ? new Float32Array(t.values) : new Float32Array(t.values)
+    const track = new TrackClass(t.name, times, values)
+    if (t.interpolation !== undefined && track.setInterpolation) track.setInterpolation(t.interpolation)
+    return track
+  })
+  return new THREE.AnimationClip(data.name, data.duration, tracks)
+}
+
+export async function getCachedClips(cacheKey) {
+  const cached = await get(DB_NAME, DB_VERSION, STORE, cacheKey)
+  if (cached) {
+    try {
+      return new Map(cached.clips.map(c => [c.name.replace(/^VRM\|/, '').replace(/@\d+$/, ''), deserializeClip(c)]))
+    } catch (e) {
+      console.warn('[anim-cache] deserialize failed:', e.message)
+      await remove(DB_NAME, DB_VERSION, STORE, cacheKey)
+      return null
+    }
+  }
+  return null
+}
+
+export async function cacheClips(cacheKey, clipsMap) {
+  if (!clipsMap) return
+  const clips = Array.from(clipsMap.values()).map(serializeClip)
+  try {
+    await put(DB_NAME, DB_VERSION, STORE, cacheKey, { clips, timestamp: Date.now() })
+  } catch (e) {
+    console.warn('[anim-cache] cache failed:', e.message)
+  }
+}

AnimationClipCache.js

@@ -0,0 +1,83 @@
+import * as THREE from 'three'
+import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'
+import { getCachedClips, cacheClips } from './AnimationClipCache.js'
+
+const q1 = new THREE.Quaternion()
+const restInv = new THREE.Quaternion()
+const parentRest = new THREE.Quaternion()
+
+function normalizeClips(gltf, vrmVersion, vrmHumanoid) {
+  const scene = gltf.scene
+  scene.updateMatrixWorld(true)
+  const clips = new Map()
+  for (const clip of gltf.animations) {
+    const name = clip.name.replace(/^VRM\|/, '').replace(/@\d+$/, '')
+    const tracks = []
+    for (const track of clip.tracks) {
+      const [boneName, property] = track.name.split('.')
+      if (property === 'scale') continue
+      if (property === 'position') {
+        if (boneName !== 'root' && boneName !== 'hips') continue
+        if (vrmVersion === '0') {
+          const newTrack = track.clone()
+          for (let i = 0; i < newTrack.values.length; i += 3) {
+            newTrack.values[i] = -newTrack.values[i]
+            newTrack.values[i + 2] = -newTrack.values[i + 2]
+          }
+          tracks.push(newTrack)
+        } else {
+          tracks.push(track)
+        }
+        continue
+      }
+      let bone = scene.getObjectByName(boneName)
+      if (!bone && vrmHumanoid) bone = vrmHumanoid.getNormalizedBoneNode(boneName)
+      if (!bone || !bone.parent) { tracks.push(track); continue }
+      if (property === 'quaternion') {
+        bone.getWorldQuaternion(restInv).invert()
+        bone.parent.getWorldQuaternion(parentRest)
+        const newTrack = track.clone()
+        for (let i = 0; i < newTrack.values.length; i += 4) {
+          q1.fromArray(newTrack.values, i)
+          q1.premultiply(parentRest).multiply(restInv)
+          if (vrmVersion === '0') { q1.x = -q1.x; q1.z = -q1.z }
+          q1.toArray(newTrack.values, i)
+        }
+        tracks.push(newTrack)
+      } else {
+        tracks.push(track)
+      }
+    }
+    clips.set(name, new THREE.AnimationClip(clip.name, clip.duration, tracks))
+  }
+  return clips
+}
+
+let _gltfPromise = null
+let _normalizedCache = null
+
+export function preloadAnimationLibrary(loader) {
+  if (_gltfPromise) return _gltfPromise
+  const l = loader || new GLTFLoader()
+  _gltfPromise = l.loadAsync('/spoint/anim-lib.glb')
+  return _gltfPromise
+}
+
+export async function loadAnimationLibrary(vrmVersion, vrmHumanoid) {
+  if (_normalizedCache) return _normalizedCache
+  const cacheKey = `anim-lib-v${vrmVersion || '1'}`
+  const cached = await getCachedClips(cacheKey)
+  if (cached) {
+    console.log(`[anim] Loaded ${cached.size} clips from cache`)
+    _normalizedCache = { normalizedClips: cached, rawClips: cached }
+    return _normalizedCache
+  }
+  const gltf = await preloadAnimationLibrary()
+  if (_normalizedCache) return _normalizedCache
+  const normalizedClips = normalizeClips(gltf, vrmVersion || '1', vrmHumanoid)
+  _gltfPromise = null
+  console.log(`[anim] Loaded animation library (${normalizedClips.size} clips):`, [...normalizedClips.keys()])
+  _normalizedCache = { normalizedClips, rawClips: normalizedClips }
+  await cacheClips(cacheKey, normalizedClips)
+  return _normalizedCache
+}

AnimationLibrary.js

@@ -0,0 +1,200 @@
+import * as THREE from 'three'
+
+const _isNode = typeof process !== 'undefined' && process.versions?.node
+const { createMachine, createActor } = await import(_isNode ? 'xstate' : '/spoint/node_modules/xstate/dist/xstate.esm.js')
+
+export const FADE_TIME = 0.15
+
+export const STATES = {
+  IdleLoop: { loop: true },
+  WalkLoop: { loop: true },
+  JogFwdLoop: { loop: true },
+  SprintLoop: { loop: true },
+  JumpStart: { loop: false, next: 'JumpLoop' },
+  JumpLoop: { loop: true },
+  JumpLand: { loop: false, next: 'IdleLoop', duration: 0.4 },
+  CrouchIdleLoop: { loop: true },
+  CrouchFwdLoop: { loop: true },
+  Death: { loop: false, clamp: true },
+  PistolShoot: { loop: false, next: null, duration: 0.3, upperBody: true },
+  Aim: { loop: true, additive: true },
+  PistolReload: { loop: false, next: 'IdleLoop', duration: 2.0, upperBody: true }
+}
+
+export const LOWER_BODY_BONES = new Set([
+  'root', 'hips', 'pelvis',
+  'leftUpperLeg', 'leftLowerLeg', 'leftFoot', 'leftToes',
+  'rightUpperLeg', 'rightLowerLeg', 'rightFoot', 'rightToes',
+  'LeftUpperLeg', 'LeftLowerLeg', 'LeftFoot', 'LeftToes',
+  'RightUpperLeg', 'RightLowerLeg', 'RightFoot', 'RightToes',
+  'LeftUpLeg', 'LeftLeg', 'LeftFoot', 'LeftToeBase',
+  'RightUpLeg', 'RightLeg', 'RightFoot', 'RightToeBase',
+  'leftUpLeg', 'leftLeg', 'leftFoot', 'leftToeBase',
+  'rightUpLeg', 'rightLeg', 'rightFoot', 'rightToeBase',
+  'lUpLeg', 'lLeg', 'lFoot', 'lToe',
+  'rUpLeg', 'rLeg', 'rFoot', 'rToe',
+  'Normalized_hips', 'Normalized_upper_legL', 'Normalized_upper_legR',
+  'Normalized_lower_legL', 'Normalized_lower_legR',
+  'Normalized_footL', 'Normalized_footR',
+  'Normalized_toesL', 'Normalized_toesR',
+  'upper_legL', 'upper_legR', 'lower_legL', 'lower_legR',
+  'footL', 'footR', 'toesL', 'toesR'
+])
+
+const locoMachine = createMachine({
+  id: 'loco',
+  initial: 'IdleLoop',
+  states: {
+    IdleLoop: { on: { WALK: 'WalkLoop', JOG: 'JogFwdLoop', SPRINT: 'SprintLoop', CROUCH_IDLE: 'CrouchIdleLoop', JUMP: 'JumpLoop', DEATH: 'Death' } },
+    WalkLoop: { on: { IDLE: 'IdleLoop', JOG: 'JogFwdLoop', SPRINT: 'SprintLoop', CROUCH_FWD: 'CrouchFwdLoop', JUMP: 'JumpLoop', DEATH: 'Death' } },
+    JogFwdLoop: { on: { IDLE: 'IdleLoop', WALK: 'WalkLoop', SPRINT: 'SprintLoop', JUMP: 'JumpLoop', DEATH: 'Death' } },
+    SprintLoop: { on: { IDLE: 'IdleLoop', WALK: 'WalkLoop', JOG: 'JogFwdLoop', JUMP: 'JumpLoop', DEATH: 'Death' } },
+    CrouchIdleLoop: { on: { IDLE: 'IdleLoop', CROUCH_FWD: 'CrouchFwdLoop', JUMP: 'JumpLoop', DEATH: 'Death' } },
+    CrouchFwdLoop: { on: { IDLE: 'IdleLoop', CROUCH_IDLE: 'CrouchIdleLoop', JUMP: 'JumpLoop', DEATH: 'Death' } },
+    JumpLoop: { on: { IDLE: 'IdleLoop', LAND: 'JumpLand', DEATH: 'Death' } },
+    JumpLand: { on: { IDLE: 'IdleLoop', WALK: 'WalkLoop', JOG: 'JogFwdLoop', DEATH: 'Death' } },
+    Death: { on: { REVIVE: 'IdleLoop' } }
+  }
+})
+
+export function createAnimationStateMachine(mixer, root, actions, additiveActions, animConfig = {}) {
+  const FADE = animConfig.fadeTime || FADE_TIME
+  const LOCO_STATES = new Set(['IdleLoop', 'WalkLoop', 'JogFwdLoop', 'SprintLoop', 'CrouchIdleLoop', 'CrouchFwdLoop'])
+  const AIR_GRACE = 0.15
+  const SPEED_SMOOTH = 8.0
+  const TIMESCALE_SMOOTH = 10.0
+  const LOCO_COOLDOWN = 0.3
+
+  const actor = createActor(locoMachine)
+  actor.start()
+  let current = null
+  let oneShot = null
+  let oneShotTimer = 0
+  let wasOnGround = true
+  let airTime = 0
+  let smoothSpeed = 0
+  let smoothTimeScale = 1.0
+  let locomotionCooldown = 0
+
+  function transitionTo(name) {
+    if (current === name) return
+    if (name !== 'IdleLoop' && name !== 'CrouchIdleLoop' && LOCO_STATES.has(name) && LOCO_STATES.has(current) && locomotionCooldown > 0) return
+    const prev = actions.get(current)
+    const next = actions.get(name)
+    if (!next) return
+    if (prev) prev.fadeOut(FADE)
+    next.reset().fadeIn(FADE).play()
+    current = name
+    if (LOCO_STATES.has(name) && name !== 'IdleLoop' && name !== 'CrouchIdleLoop') locomotionCooldown = LOCO_COOLDOWN
+  }
+
+  function sendLoco(event) {
+    const snap = actor.getSnapshot()
+    if (snap.can({ type: event })) {
+      actor.send({ type: event })
+      transitionTo(actor.getSnapshot().value)
+    }
+  }
+
+  if (actions.has('IdleLoop')) { actions.get('IdleLoop').play(); current = 'IdleLoop' }
+
+  mixer.addEventListener('finished', () => {
+    if (oneShot && !STATES[oneShot]?.additive) {
+      const cfg = STATES[oneShot]
+      if (cfg?.clamp) return
+      oneShot = null; oneShotTimer = 0
+      if (cfg?.next) sendLoco(cfg.next === 'IdleLoop' ? 'IDLE' : cfg.next)
+    }
+  })
+
+  function aim(active) {
+    const action = additiveActions.get('Aim')
+    if (!action) return
+    if (active) { if (!action.isRunning()) action.fadeIn(FADE).play() }
+    else { if (action.isRunning()) action.fadeOut(FADE) }
+  }
+
+  function resolveLocoEvent(smoothSpeed, crouching, skipWalk) {
+    if (crouching) return smoothSpeed < 0.8 ? 'CROUCH_IDLE' : 'CROUCH_FWD'
+    if (skipWalk) {
+      const idle2jog = current === 'IdleLoop' ? 2.0 : 0.8
+      const jog2sprint = current === 'JogFwdLoop' ? 15.5 : 15.0
+      if (smoothSpeed < idle2jog) return 'IDLE'
+      if (smoothSpeed < jog2sprint) return 'JOG'
+      return 'SPRINT'
+    }
+    const idle2walk = current === 'IdleLoop' ? 0.5 : 0.3
+    const walk2jog = current === 'WalkLoop' ? 4.0 : 3.5
+    const jog2sprint = current === 'JogFwdLoop' ? 15.5 : 15.0
+    if (smoothSpeed < idle2walk) return 'IDLE'
+    if (smoothSpeed < walk2jog) return 'WALK'
+    if (smoothSpeed < jog2sprint) return 'JOG'
+    return 'SPRINT'
+  }
+
+  function update(dt, velocity, onGround, health, aiming, crouching) {
+    if (locomotionCooldown > 0) locomotionCooldown -= dt
+    if (oneShotTimer > 0) {
+      oneShotTimer -= dt
+      if (oneShotTimer <= 0) {
+        const cfg = STATES[oneShot]
+        oneShot = null
+        if (cfg?.next) sendLoco(cfg.next === 'IdleLoop' ? 'IDLE' : cfg.next)
+      }
+    }
+    if (!onGround) airTime += dt; else airTime = 0
+    const effectiveOnGround = onGround || airTime < AIR_GRACE
+
+    if (health <= 0 && current !== 'Death') {
+      sendLoco('DEATH'); oneShot = 'Death'
+    } else if (health > 0 && (oneShot === 'Death' || current === 'Death')) {
+      const deathAction = actions.get('Death')
+      if (deathAction) { deathAction.stop(); deathAction.reset() }
+      oneShot = null; oneShotTimer = 0; current = null
+      sendLoco('REVIVE')
+    } else if (!oneShot || STATES[oneShot]?.additive) {
+      const vx = velocity?.[0] || 0, vz = velocity?.[2] || 0
+      const rawSpeed = Math.sqrt(vx * vx + vz * vz)
+      smoothSpeed += (rawSpeed - smoothSpeed) * Math.min(1, SPEED_SMOOTH * dt)
+      if (!effectiveOnGround && !wasOnGround) sendLoco('JUMP')
+      else if (!wasOnGround && effectiveOnGround && smoothSpeed < 1.5) {
+        sendLoco('LAND'); oneShot = 'JumpLand'; oneShotTimer = STATES.JumpLand.duration
+      } else if (effectiveOnGround) sendLoco(resolveLocoEvent(smoothSpeed, crouching, animConfig.skipWalk))
+    }
+
+    if (current && LOCO_STATES.has(current) && current !== 'IdleLoop' && current !== 'CrouchIdleLoop') {
+      const locoAction = actions.get(current)
+      if (locoAction) {
+        const baseScale = current === 'WalkLoop' ? (animConfig.walkTimeScale || 1.0)
+          : current === 'JogFwdLoop' ? (animConfig.jogTimeScale || 1.0)
+          : current === 'SprintLoop' ? (animConfig.sprintTimeScale || 1.0) : 1.0
+        const stateMin = current === 'WalkLoop' ? 0.3 : current === 'JogFwdLoop' ? 3.5 : current === 'SprintLoop' ? 12.0 : 0.3
+        const stateMax = current === 'WalkLoop' ? 4.0 : current === 'JogFwdLoop' ? 15.5 : current === 'SprintLoop' ? 24.0 : 6.0
+        const ratio = Math.max(0.5, Math.min(1.5, smoothSpeed / Math.max(1, (stateMin + stateMax) * 0.5)))
+        const target = baseScale * ratio
+        smoothTimeScale += (target - smoothTimeScale) * Math.min(1, TIMESCALE_SMOOTH * dt)
+        locoAction.timeScale = smoothTimeScale
+      }
+    }
+    aim(aiming)
+    wasOnGround = effectiveOnGround
+    mixer.update(dt)
+  }
+  function shoot() {
+    const action = actions.get('PistolShoot')
+    if (!action) return
+    action.reset().fadeIn(0.05).play()
+  }
+  function reload() {
+    const action = actions.get('PistolReload')
+    if (!action) throw new Error('[anim] PistolReload animation not found')
+    action.reset().fadeIn(0.1).play()
+  }
+  function dispose() {
+    actor.stop()
+    mixer.stopAllAction()
+    mixer.uncacheRoot(root)
+  }
+  function getState() { return current }
+  return { transitionTo, update, aim, shoot, reload, dispose, getState }
+}