reze-engine 0.10.0 → 0.10.2

package/src/engine.ts

@@ -3,9 +3,25 @@ import { Mat4, Vec3 } from "./math"
 import { Model } from "./model"
 import { PmxLoader } from "./pmx-loader"
 import { Physics, type PhysicsOptions } from "./physics"
+import {
+  createFetchAssetReader,
+  createFileMapAssetReader,
+  deriveBasePathFromPmxPath,
+  fileListToMap,
+  findFirstPmxFileInList,
+  joinAssetPath,
+  normalizeAssetPath,
+  type AssetReader,
+} from "./asset-reader"
 
 export type RaycastCallback = (modelName: string, material: string | null, screenX: number, screenY: number) => void
 
+/** Select a folder (webkitdirectory) and pass FileList or File[]; pmxFile picks which .pmx when several exist. */
+export type LoadModelFromFilesOptions = {
+  files: FileList | File[]
+  pmxFile?: File
+}
+
 export type EngineOptions = {
   ambientColor?: Vec3
   directionalLightIntensity?: number
@@ -62,6 +78,9 @@ interface ModelInstance {
   name: string
   model: Model
   basePath: string
+  assetReader: AssetReader
+  gpuBuffers: GPUBuffer[]
+  textureCacheKeys: string[]
   vertexBuffer: GPUBuffer
   indexBuffer: GPUBuffer
   jointsBuffer: GPUBuffer
@@ -1151,30 +1170,62 @@ export class Engine {
 
   async loadModel(path: string): Promise<Model>
   async loadModel(name: string, path: string): Promise<Model>
-  async loadModel(nameOrPath: string, path?: string): Promise<Model> {
-    const pmxPath = path === undefined ? nameOrPath : path
-    const name = path === undefined ? "model_" + (this._nextDefaultModelId++) : nameOrPath
+  async loadModel(name: string, options: LoadModelFromFilesOptions): Promise<Model>
+  async loadModel(
+    nameOrPath: string,
+    pathOrOptions?: string | LoadModelFromFilesOptions
+  ): Promise<Model> {
+    if (pathOrOptions !== undefined && typeof pathOrOptions === "object" && "files" in pathOrOptions) {
+      const name = nameOrPath
+      const pmxFile = pathOrOptions.pmxFile ?? findFirstPmxFileInList(pathOrOptions.files)
+      if (!pmxFile) throw new Error("No .pmx file found in the selected folder")
+      const map = fileListToMap(pathOrOptions.files)
+      const pmxKey = normalizeAssetPath(
+        (pmxFile as File & { webkitRelativePath?: string }).webkitRelativePath ?? pmxFile.name
+      )
+      const reader = createFileMapAssetReader(map)
+      const model = await PmxLoader.loadFromReader(reader, pmxKey)
+      model.setName(name)
+      await this.addModel(model, pmxKey, name, reader)
+      return model
+    }
+
+    const pmxPath = pathOrOptions === undefined ? nameOrPath : pathOrOptions
+    const name = pathOrOptions === undefined ? "model_" + this._nextDefaultModelId++ : nameOrPath
     const model = await PmxLoader.load(pmxPath)
     model.setName(name)
     await this.addModel(model, pmxPath, name)
     return model
   }
 
-  async addModel(model: Model, pmxPath: string, name?: string): Promise<string> {
+  async addModel(model: Model, pmxPath: string, name?: string, assetReader?: AssetReader): Promise<string> {
     const requested = name ?? model.name
     let key = requested
     let n = 1
     while (this.modelInstances.has(key)) {
       key = `${requested}_${n++}`
     }
-    const pathParts = pmxPath.split("/")
-    pathParts.pop()
-    const basePath = pathParts.join("/") + "/"
-    await this.setupModelInstance(key, model, basePath)
+    const reader = assetReader ?? createFetchAssetReader()
+    const basePath = deriveBasePathFromPmxPath(pmxPath)
+    model.setAssetContext(reader, basePath)
+    await this.setupModelInstance(key, model, basePath, reader)
     return key
   }
 
   removeModel(name: string): void {
+    const inst = this.modelInstances.get(name)
+    if (!inst) return
+    inst.model.stopAnimation()
+    for (const path of inst.textureCacheKeys) {
+      const tex = this.textureCache.get(path)
+      if (tex) {
+        tex.destroy()
+        this.textureCache.delete(path)
+      }
+    }
+    for (const buf of inst.gpuBuffers) {
+      buf.destroy()
+    }
     this.modelInstances.delete(name)
   }
 
@@ -1262,7 +1313,7 @@ export class Engine {
     inst.vertexBufferNeedsUpdate = false
   }
 
-  private async setupModelInstance(name: string, model: Model, basePath: string): Promise<void> {
+  private async setupModelInstance(name: string, model: Model, basePath: string, assetReader: AssetReader): Promise<void> {
     const vertices = model.getVertices()
     const skinning = model.getSkinning()
     const skeleton = model.getSkeleton()
@@ -1345,10 +1396,21 @@ export class Engine {
       ],
     })
 
+    const gpuBuffers: GPUBuffer[] = [
+      vertexBuffer,
+      indexBuffer,
+      jointsBuffer,
+      weightsBuffer,
+      skinMatrixBuffer,
+    ]
+
     const inst: ModelInstance = {
       name,
       model,
       basePath,
+      assetReader,
+      gpuBuffers,
+      textureCacheKeys: [],
       vertexBuffer,
       indexBuffer,
       jointsBuffer,
@@ -1510,8 +1572,8 @@ export class Engine {
 
     const loadTextureByIndex = async (texIndex: number): Promise<GPUTexture | null> => {
       if (texIndex < 0 || texIndex >= textures.length) return null
-      const path = inst.basePath + textures[texIndex].path
-      return this.createTextureFromPath(path)
+      const logicalPath = joinAssetPath(inst.basePath, normalizeAssetPath(textures[texIndex].path))
+      return this.createTextureFromLogicalPath(inst, logicalPath)
     }
 
     let currentIndexOffset = 0
@@ -1535,6 +1597,7 @@ export class Engine {
         mat.specular,
         mat.shininess
       )
+      inst.gpuBuffers.push(materialUniformBuffer)
 
       const textureView = diffuseTexture.createView()
       const bindGroup = this.device.createBindGroup({
@@ -1555,6 +1618,7 @@ export class Engine {
           mat.edgeSize, 0, 0, 0,
         ])
         const outlineUniformBuffer = this.createUniformBuffer(`${prefix}outline: ${mat.name}`, materialUniformData)
+        inst.gpuBuffers.push(outlineUniformBuffer)
         const outlineBindGroup = this.device.createBindGroup({
           label: `${prefix}outline: ${mat.name}`,
           layout: this.outlinePerMaterialBindGroupLayout,
@@ -1569,6 +1633,7 @@ export class Engine {
       if (this.onRaycast) {
         const pickIdData = new Float32Array([modelId, materialId, 0, 0])
         const pickIdBuffer = this.createUniformBuffer(`${prefix}pick: ${mat.name}`, pickIdData)
+        inst.gpuBuffers.push(pickIdBuffer)
         const pickBindGroup = this.device.createBindGroup({
           label: `${prefix}pick: ${mat.name}`,
           layout: this.pickPerMaterialBindGroupLayout,
@@ -1621,24 +1686,22 @@ export class Engine {
     return !inst.hiddenMaterials.has(drawCall.materialName)
   }
 
-  private async createTextureFromPath(path: string): Promise<GPUTexture | null> {
-    const cached = this.textureCache.get(path)
+  private async createTextureFromLogicalPath(inst: ModelInstance, logicalPath: string): Promise<GPUTexture | null> {
+    const cacheKey = logicalPath
+    const cached = this.textureCache.get(cacheKey)
     if (cached) {
       return cached
     }
 
     try {
-      const response = await fetch(path)
-      if (!response.ok) {
-        throw new Error(`HTTP ${response.status}: ${response.statusText}`)
-      }
-      const imageBitmap = await createImageBitmap(await response.blob(), {
+      const buffer = await inst.assetReader.readBinary(logicalPath)
+      const imageBitmap = await createImageBitmap(new Blob([buffer]), {
         premultiplyAlpha: "none",
         colorSpaceConversion: "none",
       })
 
       const texture = this.device.createTexture({
-        label: `texture: ${path}`,
+        label: `texture: ${cacheKey}`,
         size: [imageBitmap.width, imageBitmap.height],
         format: "rgba8unorm",
         usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT,
@@ -1648,7 +1711,8 @@ export class Engine {
         imageBitmap.height,
       ])
 
-      this.textureCache.set(path, texture)
+      this.textureCache.set(cacheKey, texture)
+      inst.textureCacheKeys.push(cacheKey)
       return texture
     } catch {
       return null

package/src/folder-upload.ts

@@ -0,0 +1,59 @@
+import { normalizeAssetPath } from "./asset-reader"
+
+/**
+ * Call on `<input type="file" webkitdirectory>` `change` **before** `input.value = ""`.
+ * `FileList` is live — clearing the input empties it; this copies to a stable `File[]`.
+ */
+function prepareLocalFolderFiles(fileList: FileList | null | undefined): {
+  files: File[]
+  pmxRelativePaths: string[]
+} {
+  const files = fileList?.length ? Array.from(fileList) : []
+  const pmxRelativePaths: string[] = []
+  for (const f of files) {
+    const wr = (f as File & { webkitRelativePath?: string }).webkitRelativePath
+    if (!wr || !wr.toLowerCase().endsWith(".pmx")) continue
+    pmxRelativePaths.push(normalizeAssetPath(wr))
+  }
+  pmxRelativePaths.sort((a, b) => a.localeCompare(b))
+  return { files, pmxRelativePaths }
+}
+
+function isDirectoryUpload(files: File[]): boolean {
+  return files.length > 0 && files.every((f) => !!(f as File & { webkitRelativePath?: string }).webkitRelativePath)
+}
+
+/** After choosing a path from `multiple`, get the `File` for `loadModel(..., { files, pmxFile })`. */
+export function pmxFileAtRelativePath(files: File[], relativePath: string): File | undefined {
+  const norm = normalizeAssetPath(relativePath)
+  for (const f of files) {
+    const wr = (f as File & { webkitRelativePath?: string }).webkitRelativePath
+    if (wr && normalizeAssetPath(wr) === norm) return f
+  }
+  return undefined
+}
+
+/** Result of reading a folder input — switch on `status` in your UI. */
+export type PmxFolderInputResult =
+  | { status: "empty" }
+  | { status: "not_directory" }
+  | { status: "no_pmx" }
+  | { status: "single"; files: File[]; pmxFile: File }
+  | { status: "multiple"; files: File[]; pmxRelativePaths: string[] }
+
+/**
+ * One call from `onChange`: snapshots files, validates folder pick, resolves a single PMX or asks you to pick among several.
+ * Reset the input after: `e.target.value = ""`.
+ */
+export function parsePmxFolderInput(fileList: FileList | null | undefined): PmxFolderInputResult {
+  const { files, pmxRelativePaths } = prepareLocalFolderFiles(fileList)
+  if (files.length === 0) return { status: "empty" }
+  if (!isDirectoryUpload(files)) return { status: "not_directory" }
+  if (pmxRelativePaths.length === 0) return { status: "no_pmx" }
+  if (pmxRelativePaths.length === 1) {
+    const pmxFile = pmxFileAtRelativePath(files, pmxRelativePaths[0]!)
+    if (!pmxFile) return { status: "no_pmx" }
+    return { status: "single", files, pmxFile }
+  }
+  return { status: "multiple", files, pmxRelativePaths }
+}

package/src/index.ts

@@ -1,4 +1,5 @@
-export { Engine, type EngineStats } from "./engine"
+export { Engine, type EngineStats, type LoadModelFromFilesOptions } from "./engine"
+export { parsePmxFolderInput, pmxFileAtRelativePath, type PmxFolderInputResult } from "./folder-upload"
 export { Model } from "./model"
 export { Vec3, Quat, Mat4 } from "./math"
 export type {
@@ -11,4 +12,4 @@ export type {
   ControlPoint,
 } from "./animation"
 export { FPS } from "./animation"
-export { Physics, type PhysicsOptions } from "./physics"
+export { Physics, type PhysicsOptions } from "./physics"

package/src/model.ts

@@ -1,8 +1,10 @@
 import { Mat4, Quat, Vec3 } from "./math"
 import { Engine } from "./engine"
+import { joinAssetPath, type AssetReader } from "./asset-reader"
 import { Rigidbody, Joint } from "./physics"
 import { IKSolverSystem } from "./ik-solver"
 import { VMDLoader, type VMDKeyFrame } from "./vmd-loader"
+import { VMDWriter } from "./vmd-writer"
 import {
   AnimationClip,
   AnimationPlayOptions,
@@ -205,6 +207,14 @@ export class Model {
   private morphTrackIndices: Map<string, number> = new Map()
   private lastAppliedClip: AnimationClip | null = null
 
+  private assetReader: AssetReader | null = null
+  private assetBasePath = ""
+
+  /** Called by Engine when registering the model; enables loadVmd to resolve relative paths for folder uploads. */
+  setAssetContext(reader: AssetReader, basePath: string): void {
+    this.assetReader = reader
+    this.assetBasePath = basePath
+  }
 
   constructor(
     vertexData: Float32Array<ArrayBuffer>,
@@ -856,19 +866,40 @@ export class Model {
     return { boneTracks, morphTracks, frameCount: maxFrame }
   }
 
-  loadAnimation(animationName: string, source: string): Promise<void>
-  loadAnimation(animationName: string, source: AnimationClip): void
-  loadAnimation(animationName: string, source: string | AnimationClip): Promise<void> | void {
-    if (typeof source !== "string") {
-      this.animationState.loadAnimation(animationName, source)
-      return
+  loadVmd(name: string, urlOrRelative: string): Promise<void> {
+    const loadBuffer = (): Promise<ArrayBuffer> => {
+      const u = urlOrRelative.trim()
+      const useSiteFetch =
+        u.startsWith("http://") ||
+        u.startsWith("https://") ||
+        u.startsWith("/") ||
+        u.startsWith("blob:") ||
+        u.startsWith("data:")
+      if (useSiteFetch) {
+        return fetch(u).then((r) => {
+          if (!r.ok) throw new Error(`Failed to fetch VMD ${u}: ${r.status}`)
+          return r.arrayBuffer()
+        })
+      }
+      if (this.assetReader) {
+        return this.assetReader.readBinary(joinAssetPath(this.assetBasePath, u))
+      }
+      return fetch(u).then((r) => {
+        if (!r.ok) throw new Error(`Failed to fetch VMD ${u}: ${r.status}`)
+        return r.arrayBuffer()
+      })
     }
-    return VMDLoader.load(source).then((vmdKeyFrames) => {
+    return loadBuffer().then((buf) => {
+      const vmdKeyFrames = VMDLoader.loadFromBuffer(buf)
       const clip = this.buildClipFromVmdKeyFrames(vmdKeyFrames)
-      this.animationState.loadAnimation(animationName, clip)
+      this.animationState.loadAnimation(name, clip)
     })
   }
 
+  loadClip(name: string, clip: AnimationClip): void {
+    this.animationState.loadAnimation(name, clip)
+  }
+
   resetAllBones(): void {
     for (let boneIdx = 0; boneIdx < this.skeleton.bones.length; boneIdx++) {
       const localRot = this.runtimeSkeleton.localRotations[boneIdx]
@@ -889,10 +920,16 @@ export class Model {
     this.applyMorphs()
   }
 
-  getAnimationClip(name: string): AnimationClip | null {
+  getClip(name: string): AnimationClip | null {
     return this.animationState.getAnimationClip(name)
   }
 
+  exportVmd(name: string): ArrayBuffer {
+    const clip = this.animationState.getAnimationClip(name)
+    if (!clip) throw new Error(`Animation clip "${name}" not found`)
+    return new VMDWriter().write(clip)
+  }
+
   play(): void
   play(name: string): boolean
   play(name: string, options?: AnimationPlayOptions): boolean

package/src/pmx-loader.ts

@@ -13,6 +13,7 @@ import {
 } from "./model"
 import { Mat4, Vec3 } from "./math"
 import { Rigidbody, Joint, RigidbodyShape, RigidbodyType } from "./physics"
+import { createFetchAssetReader, type AssetReader } from "./asset-reader"
 
 export class PmxLoader {
   private view: DataView
@@ -42,8 +43,16 @@ export class PmxLoader {
   }
 
   static async load(url: string): Promise<Model> {
-    const loader = new PmxLoader(await fetch(url).then((r) => r.arrayBuffer()))
-    return loader.parse()
+    return PmxLoader.loadFromReader(createFetchAssetReader(), url)
+  }
+
+  static loadFromBuffer(buffer: ArrayBuffer): Model {
+    return new PmxLoader(buffer).parse()
+  }
+
+  static async loadFromReader(reader: AssetReader, pmxLogicalPath: string): Promise<Model> {
+    const buffer = await reader.readBinary(pmxLogicalPath)
+    return PmxLoader.loadFromBuffer(buffer)
   }
 
   private parse(): Model {

package/src/vmd-writer.ts

@@ -0,0 +1,180 @@
+import { AnimationClip, BoneInterpolation } from "./animation"
+
+const VMD_HEADER = "Vocaloid Motion Data 0002"
+const HEADER_SIZE = 30
+const MODEL_NAME_SIZE = 20
+const BONE_NAME_SIZE = 15
+const MORPH_NAME_SIZE = 15
+const BONE_FRAME_SIZE = BONE_NAME_SIZE + 4 + 12 + 16 + 64 // 111 bytes
+const MORPH_FRAME_SIZE = MORPH_NAME_SIZE + 4 + 4 // 23 bytes
+
+// Build a Unicode-to-Shift-JIS lookup by inverting the TextDecoder mapping.
+let shiftJISTable: Map<string, number[]> | null = null
+
+function getShiftJISTable(): Map<string, number[]> {
+  if (shiftJISTable) return shiftJISTable
+  const decoder = new TextDecoder("shift-jis")
+  const map = new Map<string, number[]>()
+  // Single-byte range
+  for (let i = 0; i < 256; i++) {
+    const char = decoder.decode(new Uint8Array([i]))
+    if (char !== "\ufffd") map.set(char, [i])
+  }
+  // Two-byte range (JIS X 0208)
+  for (let hi = 0x81; hi <= 0xfc; hi++) {
+    if (hi >= 0xa0 && hi <= 0xdf) continue
+    for (let lo = 0x40; lo <= 0xfc; lo++) {
+      if (lo === 0x7f) continue
+      const char = decoder.decode(new Uint8Array([hi, lo]))
+      if (char !== "\ufffd" && !map.has(char)) {
+        map.set(char, [hi, lo])
+      }
+    }
+  }
+  shiftJISTable = map
+  return map
+}
+
+function encodeShiftJIS(str: string): Uint8Array {
+  const table = getShiftJISTable()
+  const bytes: number[] = []
+  for (const char of str) {
+    const b = table.get(char)
+    if (b) bytes.push(...b)
+  }
+  return new Uint8Array(bytes)
+}
+
+export class VMDWriter {
+  write(clip: AnimationClip): ArrayBuffer {
+    let totalBoneFrames = 0
+    for (const frames of clip.boneTracks.values()) {
+      totalBoneFrames += frames.length
+    }
+    let totalMorphFrames = 0
+    for (const frames of clip.morphTracks.values()) {
+      totalMorphFrames += frames.length
+    }
+
+    const size =
+      HEADER_SIZE +
+      MODEL_NAME_SIZE +
+      4 + totalBoneFrames * BONE_FRAME_SIZE +
+      4 + totalMorphFrames * MORPH_FRAME_SIZE
+
+    const buffer = new ArrayBuffer(size)
+    const view = new DataView(buffer)
+    let offset = 0
+
+    // Header (30 bytes, ASCII)
+    offset = writeFixedString(buffer, offset, VMD_HEADER, HEADER_SIZE)
+
+    // Model name (20 bytes, zeroed)
+    offset += MODEL_NAME_SIZE
+
+    // Bone frame count
+    view.setUint32(offset, totalBoneFrames, true)
+    offset += 4
+
+    // Bone frames
+    for (const frames of clip.boneTracks.values()) {
+      for (const kf of frames) {
+        // Bone name (15 bytes, Shift-JIS)
+        offset = writeFixedShiftJIS(buffer, offset, kf.boneName, BONE_NAME_SIZE)
+
+        // Frame number (u32 LE)
+        view.setUint32(offset, kf.frame, true)
+        offset += 4
+
+        // Translation (3 x f32 LE)
+        view.setFloat32(offset, kf.translation.x, true); offset += 4
+        view.setFloat32(offset, kf.translation.y, true); offset += 4
+        view.setFloat32(offset, kf.translation.z, true); offset += 4
+
+        // Rotation quaternion (4 x f32 LE)
+        view.setFloat32(offset, kf.rotation.x, true); offset += 4
+        view.setFloat32(offset, kf.rotation.y, true); offset += 4
+        view.setFloat32(offset, kf.rotation.z, true); offset += 4
+        view.setFloat32(offset, kf.rotation.w, true); offset += 4
+
+        // Interpolation (64 bytes)
+        const raw = boneInterpolationToRaw(kf.interpolation)
+        new Uint8Array(buffer, offset, 64).set(raw)
+        offset += 64
+      }
+    }
+
+    // Morph frame count
+    view.setUint32(offset, totalMorphFrames, true)
+    offset += 4
+
+    // Morph frames
+    for (const frames of clip.morphTracks.values()) {
+      for (const kf of frames) {
+        // Morph name (15 bytes, Shift-JIS)
+        offset = writeFixedShiftJIS(buffer, offset, kf.morphName, MORPH_NAME_SIZE)
+
+        // Frame number (u32 LE)
+        view.setUint32(offset, kf.frame, true)
+        offset += 4
+
+        // Weight (f32 LE)
+        view.setFloat32(offset, kf.weight, true)
+        offset += 4
+      }
+    }
+
+    return buffer
+  }
+}
+
+function writeFixedString(buffer: ArrayBuffer, offset: number, str: string, maxBytes: number): number {
+  const bytes = new Uint8Array(buffer, offset, maxBytes)
+  bytes.fill(0)
+  for (let i = 0; i < str.length && i < maxBytes; i++) {
+    bytes[i] = str.charCodeAt(i) & 0xff
+  }
+  return offset + maxBytes
+}
+
+function writeFixedShiftJIS(buffer: ArrayBuffer, offset: number, str: string, maxBytes: number): number {
+  const target = new Uint8Array(buffer, offset, maxBytes)
+  target.fill(0)
+  const encoded = encodeShiftJIS(str)
+  target.set(encoded.subarray(0, maxBytes))
+  return offset + maxBytes
+}
+
+/**
+ * Convert BoneInterpolation back to the 64-byte raw VMD interpolation table.
+ * Exact inverse of rawInterpolationToBoneInterpolation in animation.ts.
+ */
+function boneInterpolationToRaw(interp: BoneInterpolation): Uint8Array {
+  const raw = new Uint8Array(64)
+
+  // Rotation: [{x: raw[0], y: raw[2]}, {x: raw[1], y: raw[3]}]
+  raw[0] = interp.rotation[0].x
+  raw[1] = interp.rotation[1].x
+  raw[2] = interp.rotation[0].y
+  raw[3] = interp.rotation[1].y
+
+  // TranslationX: [{x: raw[0], y: raw[4]}, {x: raw[8], y: raw[12]}]
+  // raw[0] already set by rotation (shared byte)
+  raw[4] = interp.translationX[0].y
+  raw[8] = interp.translationX[1].x
+  raw[12] = interp.translationX[1].y
+
+  // TranslationY: [{x: raw[16], y: raw[20]}, {x: raw[24], y: raw[28]}]
+  raw[16] = interp.translationY[0].x
+  raw[20] = interp.translationY[0].y
+  raw[24] = interp.translationY[1].x
+  raw[28] = interp.translationY[1].y
+
+  // TranslationZ: [{x: raw[32], y: raw[36]}, {x: raw[40], y: raw[44]}]
+  raw[32] = interp.translationZ[0].x
+  raw[36] = interp.translationZ[0].y
+  raw[40] = interp.translationZ[1].x
+  raw[44] = interp.translationZ[1].y
+
+  return raw
+}