@doki-land/live2d-renderer 0.0.18 → 0.0.20

package/dist/index.js

@@ -322,12 +322,112 @@ function fitClippingContexts(contexts, byIndex, margin = 0.05) {
     )
   }));
 }
-function maskLayoutVec4(layout) {
-  return new Float32Array([layout.x, layout.y, layout.width, layout.height]);
+function maskLayoutVec4(layout, into) {
+  const out = into && into.length >= 4 ? into : new Float32Array(4);
+  out[0] = layout.x;
+  out[1] = layout.y;
+  out[2] = layout.width;
+  out[3] = layout.height;
+  return out;
+}
+function maskChannelVec4(flag, into) {
+  const out = into && into.length >= 4 ? into : new Float32Array(4);
+  out[0] = flag[0];
+  out[1] = flag[1];
+  out[2] = flag[2];
+  out[3] = flag[3];
+  return out;
+}
+
+// src/render/clipping-plan.ts
+function clippingTopologyKey(drawables) {
+  let key = `n:${drawables.length}`;
+  for (let i = 0; i < drawables.length; i++) {
+    const d = drawables[i];
+    key += `|${d.index}:${d.invertedMask ? 1 : 0}:`;
+    const masks = d.maskIndices;
+    for (let j = 0; j < masks.length; j++) {
+      key += `${masks[j]},`;
+    }
+  }
+  return key;
 }
-function maskChannelVec4(flag) {
-  return new Float32Array([flag[0], flag[1], flag[2], flag[3]]);
+function atlasOptionsKey(options) {
+  return `${options.mode ?? "rgba"}:${options.inset ?? ""}:${options.renderTextureCount ?? ""}`;
 }
+function fitClippingContextsInPlace(contexts, byIndex, margin = 0.05) {
+  for (let i = 0; i < contexts.length; i++) {
+    const ctx = contexts[i];
+    ctx.modelBounds = calcClippedDrawableBounds(
+      ctx.clippedIndices,
+      byIndex,
+      margin
+    );
+  }
+}
+var ResidentClippingPlan = class {
+  #cacheKey = "";
+  #contexts = [];
+  #clipped = /* @__PURE__ */ new Set();
+  #maskOnly = /* @__PURE__ */ new Set();
+  #byIndex = /* @__PURE__ */ new Map();
+  /**
+   * Returns a partition whose `contexts` array identity is stable across
+   * frames with the same topology. `modelBounds` are refreshed in place.
+   */
+  resolve(drawables, options = {}) {
+    const nextKey = `${clippingTopologyKey(drawables)}|${atlasOptionsKey(options)}`;
+    if (nextKey !== this.#cacheKey) {
+      const partitioned = partitionForClipping(drawables, options);
+      this.#contexts = partitioned.contexts.map((ctx) => ({
+        key: ctx.key,
+        maskIndices: ctx.maskIndices,
+        clippedIndices: ctx.clippedIndices,
+        invertedMask: ctx.invertedMask,
+        layout: ctx.layout,
+        channelIndex: ctx.channelIndex,
+        channelFlag: ctx.channelFlag,
+        bufferIndex: ctx.bufferIndex,
+        modelBounds: { ...ctx.modelBounds }
+      }));
+      this.#clipped = new Set(partitioned.clipped);
+      this.#maskOnly = new Set(partitioned.maskOnly);
+      this.#cacheKey = nextKey;
+    }
+    this.#byIndex.clear();
+    for (let i = 0; i < drawables.length; i++) {
+      const d = drawables[i];
+      if ("vertexPositions" in d) {
+        this.#byIndex.set(d.index, d);
+      }
+    }
+    fitClippingContextsInPlace(this.#contexts, this.#byIndex);
+    return {
+      contexts: this.#contexts,
+      clipped: this.#clipped,
+      maskOnly: this.#maskOnly
+    };
+  }
+  /** Convenience for full drawable meshes (GPU backends). */
+  resolveMeshes(drawables, options = {}) {
+    return this.resolve(drawables, options);
+  }
+  /** True when the last {@link resolve} reused the cached atlas layout. */
+  get hasPlan() {
+    return this.#cacheKey.length > 0;
+  }
+  /** Exposed for tests — context array identity while topology holds. */
+  get residentContexts() {
+    return this.#contexts;
+  }
+  clear() {
+    this.#cacheKey = "";
+    this.#contexts = [];
+    this.#clipped = /* @__PURE__ */ new Set();
+    this.#maskOnly = /* @__PURE__ */ new Set();
+    this.#byIndex.clear();
+  }
+};
 
 // src/render/coords.ts
 function modelYUpToCanvasPixelY(modelY, canvasHeight) {
@@ -443,6 +543,7 @@ var Canvas2DModelDrawPass = class {
   #ctx;
   #options;
   #textures = [];
+  #clipPlan = new ResidentClippingPlan();
   constructor(ctx, options) {
     this.#ctx = ctx;
     this.#options = options;
@@ -459,10 +560,10 @@ var Canvas2DModelDrawPass = class {
     const h = ctx.canvas.height;
     const byIndex = /* @__PURE__ */ new Map();
     for (const d of drawables) byIndex.set(d.index, d);
-    const partitioned = partitionForClipping(drawables, {
+    const partitioned = this.#clipPlan.resolveMeshes(drawables, {
       mode: "uv-grid"
     });
-    const contexts = fitClippingContexts(partitioned.contexts, byIndex);
+    const contexts = partitioned.contexts;
     const { maskOnly } = partitioned;
     if (contexts.length === 0) {
       for (const d of drawables) {
@@ -627,6 +728,7 @@ var Canvas2DModelDrawPass = class {
   }
   destroy() {
     this.#textures = [];
+    this.#clipPlan.clear();
   }
 };
 var Canvas2DRendererImpl = class {
@@ -683,6 +785,25 @@ function isCanvas2DAvailable() {
   return !!canvas.getContext("2d");
 }
 
+// src/render/mesh-interleave.ts
+function interleavePosUv(positions, uvs, into) {
+  const n = Math.floor(positions.length / 2);
+  const need = n * 4;
+  const out = into && into.length >= need ? into : new Float32Array(need);
+  for (let i = 0; i < n; i++) {
+    const o = i * 4;
+    const p = i * 2;
+    out[o] = positions[p];
+    out[o + 1] = positions[p + 1];
+    out[o + 2] = uvs[p] ?? 0;
+    out[o + 3] = uvs[p + 1] ?? 0;
+  }
+  return out;
+}
+function interleaveByteLength(positions) {
+  return Math.floor(positions.length / 2) * 16;
+}
+
 // src/backends/webgl2.ts
 var VS = `#version 300 es
 layout(location = 0) in vec2 a_pos;
@@ -791,19 +912,6 @@ function linkProgram(gl, vsSource, fsSource) {
   }
   return program;
 }
-function interleavePosUv(positions, uvs) {
-  const n = Math.floor(positions.length / 2);
-  const out = new Float32Array(n * 4);
-  for (let i = 0; i < n; i++) {
-    const o = i * 4;
-    const p = i * 2;
-    out[o] = positions[p];
-    out[o + 1] = positions[p + 1];
-    out[o + 2] = uvs[p] ?? 0;
-    out[o + 3] = uvs[p + 1] ?? 0;
-  }
-  return out;
-}
 function requireUniform(gl, program, name) {
   const loc = gl.getUniformLocation(program, name);
   if (!loc) {
@@ -841,6 +949,13 @@ var WebGl2ModelDrawPass = class {
   #maskTex = null;
   #maskW = 0;
   #maskH = 0;
+  #clipPlan = new ResidentClippingPlan();
+  #interleaved = new Float32Array(64);
+  #indicesRef = null;
+  #layoutScratch = new Float32Array(4);
+  #boundsScratch = new Float32Array(4);
+  #channelScratch = new Float32Array(4);
+  #defaultChannel = new Float32Array([0, 0, 0, 1]);
   constructor(gl) {
     this.#gl = gl;
     this.#program = linkProgram(gl, VS, FS);
@@ -1012,13 +1127,25 @@ var WebGl2ModelDrawPass = class {
     }
     gl.bindTexture(gl.TEXTURE_2D, null);
   }
-  #uploadMesh(d) {
+  #uploadMesh(d, uploadIndices = true) {
     const gl = this.#gl;
-    const interleaved = interleavePosUv(d.vertexPositions, d.uvs);
+    this.#interleaved = interleavePosUv(
+      d.vertexPositions,
+      d.uvs,
+      this.#interleaved
+    );
+    const vBytes = interleaveByteLength(d.vertexPositions);
     gl.bindBuffer(gl.ARRAY_BUFFER, this.#vbo);
-    gl.bufferData(gl.ARRAY_BUFFER, interleaved, gl.DYNAMIC_DRAW);
+    gl.bufferData(
+      gl.ARRAY_BUFFER,
+      this.#interleaved.subarray(0, vBytes / 4),
+      gl.DYNAMIC_DRAW
+    );
     gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.#ibo);
-    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, d.indices, gl.DYNAMIC_DRAW);
+    if (uploadIndices && this.#indicesRef !== d.indices) {
+      gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, d.indices, gl.STATIC_DRAW);
+      this.#indicesRef = d.indices;
+    }
   }
   #drawMeshColor(d, useMask, invertMask, layout, modelBounds, channelFlag) {
     const gl = this.#gl;
@@ -1041,19 +1168,23 @@ var WebGl2ModelDrawPass = class {
     );
     gl.uniform1f(this.#useMaskLoc, useMask ? 1 : 0);
     gl.uniform1f(this.#invertMaskLoc, invertMask ? 1 : 0);
-    const layoutVec = maskLayoutVec4(
-      layout ?? { x: 0, y: 0, width: 1, height: 1 }
+    gl.uniform4fv(
+      this.#maskLayoutLoc,
+      maskLayoutVec4(
+        layout ?? { x: 0, y: 0, width: 1, height: 1 },
+        this.#layoutScratch
+      )
     );
-    gl.uniform4fv(this.#maskLayoutLoc, layoutVec);
     gl.uniform4fv(
       this.#maskBoundsLoc,
       maskLayoutVec4(
-        modelBounds ?? { x: -1, y: -1, width: 2, height: 2 }
+        modelBounds ?? { x: -1, y: -1, width: 2, height: 2 },
+        this.#boundsScratch
       )
     );
     gl.uniform4fv(
       this.#channelFlagLoc,
-      channelFlag ?? new Float32Array([0, 0, 0, 1])
+      channelFlag ?? this.#defaultChannel
     );
     if (useMask && this.#maskTex) {
       gl.activeTexture(gl.TEXTURE1);
@@ -1072,6 +1203,7 @@ var WebGl2ModelDrawPass = class {
         PREVIEW_STROKE.a * d.opacity
       );
       gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, lines, gl.DYNAMIC_DRAW);
+      this.#indicesRef = null;
       gl.drawElements(gl.LINES, lines.length, gl.UNSIGNED_SHORT, 0);
     }
   }
@@ -1085,8 +1217,14 @@ var WebGl2ModelDrawPass = class {
     gl.uniform1i(this.#maskTexLoc, 0);
     gl.uniform1f(this.#maskUseTexLoc, gpuTex ? 1 : 0);
     gl.uniform1f(this.#maskOpacityLoc, Math.max(d.opacity, 1));
-    gl.uniform4fv(this.#maskWriteLayoutLoc, maskLayoutVec4(layout));
-    gl.uniform4fv(this.#maskWriteBoundsLoc, maskLayoutVec4(modelBounds));
+    gl.uniform4fv(
+      this.#maskWriteLayoutLoc,
+      maskLayoutVec4(layout, this.#layoutScratch)
+    );
+    gl.uniform4fv(
+      this.#maskWriteBoundsLoc,
+      maskLayoutVec4(modelBounds, this.#boundsScratch)
+    );
     gl.uniform4fv(this.#maskWriteChannelLoc, channelFlag);
     gl.drawElements(gl.TRIANGLES, d.indices.length, gl.UNSIGNED_SHORT, 0);
   }
@@ -1097,8 +1235,8 @@ var WebGl2ModelDrawPass = class {
     const height = canvas instanceof HTMLCanvasElement ? canvas.height : canvas.height;
     const byIndex = /* @__PURE__ */ new Map();
     for (const d of drawables) byIndex.set(d.index, d);
-    const partitioned = partitionForClipping(drawables);
-    const contexts = fitClippingContexts(partitioned.contexts, byIndex);
+    const partitioned = this.#clipPlan.resolveMeshes(drawables);
+    const contexts = partitioned.contexts;
     const { maskOnly } = partitioned;
     gl.bindVertexArray(this.#vao);
     if (contexts.length > 0) {
@@ -1113,7 +1251,10 @@ var WebGl2ModelDrawPass = class {
         gl.enable(gl.BLEND);
         gl.blendFuncSeparate(gl.ONE, gl.ONE, gl.ONE, gl.ONE);
         for (const ctx of contexts) {
-          const flag = maskChannelVec4(ctx.channelFlag);
+          const flag = maskChannelVec4(
+            ctx.channelFlag,
+            this.#channelScratch
+          );
           for (const mi of ctx.maskIndices) {
             const maskMesh = byIndex.get(mi);
             if (maskMesh) {
@@ -1152,7 +1293,7 @@ var WebGl2ModelDrawPass = class {
           clip.invertedMask,
           clip.layout,
           clip.modelBounds,
-          maskChannelVec4(clip.channelFlag)
+          maskChannelVec4(clip.channelFlag, this.#channelScratch)
         );
       } else {
         this.#drawMeshColor(d, false, false, null, null, null);
@@ -1167,6 +1308,8 @@ var WebGl2ModelDrawPass = class {
   destroy() {
     const gl = this.#gl;
     this.#clearGpuTextures();
+    this.#clipPlan.clear();
+    this.#indicesRef = null;
     if (this.#maskTex) gl.deleteTexture(this.#maskTex);
     if (this.#maskFbo) gl.deleteFramebuffer(this.#maskFbo);
     gl.deleteBuffer(this.#vbo);
@@ -1240,6 +1383,155 @@ function isWebGl2Available() {
   return !!gl;
 }
 
+// src/backends/webgpu-mesh-cache.ts
+function indexBufferByteSize(byteLength) {
+  return byteLength + 3 & ~3;
+}
+function createOrGrowBuffer(device, prev, prevBytes, needBytes, usage) {
+  const bytes = Math.max(4, needBytes);
+  if (prev && prevBytes >= bytes) return { buffer: prev, bytes: prevBytes };
+  prev?.destroy();
+  return {
+    buffer: device.createBuffer({
+      size: bytes,
+      usage
+    }),
+    bytes
+  };
+}
+var WebGpuMeshCache = class {
+  #slots = /* @__PURE__ */ new Map();
+  #maskGeneration = 0;
+  bumpMaskGeneration() {
+    this.#maskGeneration += 1;
+  }
+  get maskGeneration() {
+    return this.#maskGeneration;
+  }
+  clear() {
+    for (const slot of this.#slots.values()) {
+      slot.vbo.destroy();
+      slot.ibo.destroy();
+      slot.ubo.destroy();
+    }
+    this.#slots.clear();
+  }
+  /** Drop bind groups that reference model textures (after setTextures). */
+  invalidateTextureBindGroups() {
+    for (const slot of this.#slots.values()) {
+      slot.bgMask = null;
+      slot.bgTextured = null;
+      slot.bgClippedTextured = null;
+      slot.bgSolid = null;
+      slot.bgClippedSolid = null;
+      slot.texIndex = -1;
+    }
+  }
+  ensureSlot(device, drawableIndex) {
+    let slot = this.#slots.get(drawableIndex);
+    if (slot) return slot;
+    const vbo = device.createBuffer({
+      size: 64,
+      usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST
+    });
+    const ibo = device.createBuffer({
+      size: 4,
+      usage: GPUBufferUsage.INDEX | GPUBufferUsage.COPY_DST
+    });
+    const ubo = device.createBuffer({
+      size: 80,
+      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+    });
+    slot = {
+      index: drawableIndex,
+      vbo,
+      vboBytes: 64,
+      interleaved: new Float32Array(16),
+      ibo,
+      iboBytes: 4,
+      indicesRef: null,
+      uvsRef: null,
+      ubo,
+      uboFloats: new Float32Array(20),
+      bgMask: null,
+      bgTextured: null,
+      bgClippedTextured: null,
+      bgSolid: null,
+      bgClippedSolid: null,
+      texIndex: -1,
+      useWhite: false,
+      maskGeneration: -1
+    };
+    this.#slots.set(drawableIndex, slot);
+    return slot;
+  }
+  /**
+   * Upload interleaved pos/uv when positions change every frame; refresh
+   * index buffer only when the `indices` TypedArray identity changes.
+   */
+  uploadMesh(device, slot, positions, uvs, indices) {
+    slot.interleaved = interleavePosUv(positions, uvs, slot.interleaved);
+    const vBytes = interleaveByteLength(positions);
+    const grownV = createOrGrowBuffer(
+      device,
+      slot.vbo,
+      slot.vboBytes,
+      vBytes,
+      GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST
+    );
+    slot.vbo = grownV.buffer;
+    slot.vboBytes = grownV.bytes;
+    device.queue.writeBuffer(
+      slot.vbo,
+      0,
+      slot.interleaved.buffer,
+      slot.interleaved.byteOffset,
+      vBytes
+    );
+    const iBytes = indexBufferByteSize(indices.byteLength);
+    const grownI = createOrGrowBuffer(
+      device,
+      slot.ibo,
+      slot.iboBytes,
+      iBytes,
+      GPUBufferUsage.INDEX | GPUBufferUsage.COPY_DST
+    );
+    if (grownI.buffer !== slot.ibo) {
+      slot.indicesRef = null;
+    }
+    slot.ibo = grownI.buffer;
+    slot.iboBytes = grownI.bytes;
+    if (slot.indicesRef !== indices || slot.uvsRef !== uvs) {
+      if (iBytes === indices.byteLength) {
+        device.queue.writeBuffer(
+          slot.ibo,
+          0,
+          indices.buffer,
+          indices.byteOffset,
+          indices.byteLength
+        );
+      } else {
+        const padded = new Uint16Array(iBytes / 2);
+        padded.set(indices);
+        device.queue.writeBuffer(slot.ibo, 0, padded);
+      }
+      slot.indicesRef = indices;
+      slot.uvsRef = uvs;
+    }
+  }
+  writeUbo(device, slot, floats) {
+    const n = floats.length;
+    for (let i = 0; i < n; i++) slot.uboFloats[i] = floats[i];
+    device.queue.writeBuffer(
+      slot.ubo,
+      0,
+      slot.uboFloats.buffer,
+      slot.uboFloats.byteOffset,
+      Math.max(16, n * 4 + 15 & ~15)
+    );
+  }
+};
+
 // src/backends/webgpu.ts
 var SOLID_WGSL = (
   /* wgsl */
@@ -1432,33 +1724,6 @@ var BLEND_MODES = [
   BlendMode.Additive,
   BlendMode.Multiplicative
 ];
-function indexBufferSize(byteLength) {
-  return byteLength + 3 & ~3;
-}
-function writeIndexBuffer(device, indices) {
-  const size = indexBufferSize(indices.byteLength);
-  const ibo = device.createBuffer({
-    size: Math.max(4, size),
-    usage: GPUBufferUsage.INDEX | GPUBufferUsage.COPY_DST,
-    mappedAtCreation: true
-  });
-  new Uint16Array(ibo.getMappedRange()).set(indices);
-  ibo.unmap();
-  return ibo;
-}
-function interleavePosUv2(positions, uvs) {
-  const n = Math.floor(positions.length / 2);
-  const out = new Float32Array(n * 4);
-  for (let i = 0; i < n; i++) {
-    const o = i * 4;
-    const p = i * 2;
-    out[o] = positions[p];
-    out[o + 1] = positions[p + 1];
-    out[o + 2] = uvs[p] ?? 0;
-    out[o + 3] = uvs[p + 1] ?? 0;
-  }
-  return out;
-}
 function createWhiteTexture(device) {
   const tex = device.createTexture({
     size: [1, 1],
@@ -1514,8 +1779,17 @@ var WebGpuRendererImpl = class {
   #maskW = 0;
   #maskH = 0;
   #whiteTexture = null;
-  #transient = [];
+  #whiteView = null;
+  #maskView = null;
   #gpuTextures = [];
+  #gpuTextureViews = [];
+  #meshCache = new WebGpuMeshCache();
+  #clipPlan = new ResidentClippingPlan();
+  #layoutScratch = new Float32Array(4);
+  #channelScratch = new Float32Array(4);
+  #boundsScratch = new Float32Array(4);
+  /** Preview-only line index buffers destroyed at endFrame. */
+  #transient = [];
   #options;
   constructor(options = {}) {
     this.#options = options;
@@ -1885,6 +2159,7 @@ var WebGpuRendererImpl = class {
       addressModeV: "clamp-to-edge"
     });
     this.#whiteTexture = createWhiteTexture(device);
+    this.#whiteView = this.#whiteTexture.createView();
     this.#ensureMsaa();
   }
   #ensureMsaa() {
@@ -1923,11 +2198,15 @@ var WebGpuRendererImpl = class {
     });
     this.#maskW = w;
     this.#maskH = h;
+    this.#maskView = this.#maskTexture.createView();
+    this.#meshCache.bumpMaskGeneration();
     return this.#maskTexture;
   }
   #clearGpuTextures() {
     for (const t of this.#gpuTextures) t?.destroy();
     this.#gpuTextures = [];
+    this.#gpuTextureViews = [];
+    this.#meshCache.invalidateTextureBindGroups();
   }
   setTextures(textures) {
     const device = this.#device;
@@ -1936,6 +2215,7 @@ var WebGpuRendererImpl = class {
     let maxIndex = -1;
     for (const t of textures) maxIndex = Math.max(maxIndex, t.index);
     this.#gpuTextures = new Array(Math.max(0, maxIndex + 1)).fill(null);
+    this.#gpuTextureViews = new Array(Math.max(0, maxIndex + 1)).fill(null);
     for (const t of textures) {
       const gpuTex = device.createTexture({
         size: [t.width, t.height],
@@ -1948,6 +2228,7 @@ var WebGpuRendererImpl = class {
         [t.width, t.height]
       );
       this.#gpuTextures[t.index] = gpuTex;
+      this.#gpuTextureViews[t.index] = gpuTex.createView();
     }
   }
   createModelDrawPass() {
@@ -2018,8 +2299,8 @@ var WebGpuRendererImpl = class {
     }
     const byIndex = /* @__PURE__ */ new Map();
     for (const d of drawables) byIndex.set(d.index, d);
-    const partitioned = partitionForClipping(drawables);
-    const contexts = fitClippingContexts(partitioned.contexts, byIndex);
+    const partitioned = this.#clipPlan.resolveMeshes(drawables);
+    const contexts = partitioned.contexts;
     const { maskOnly } = partitioned;
     let maskTex = null;
     if (contexts.length > 0) {
@@ -2090,27 +2371,23 @@ var WebGpuRendererImpl = class {
   }
   #drawMaskMesh(d, pass, layout, sampler, whiteTex, atlasLayout, modelBounds, channelFlag) {
     const device = this.#device;
-    if (!device || d.opacity <= 0) return;
-    const interleaved = interleavePosUv2(d.vertexPositions, d.uvs);
-    const vbo = device.createBuffer({
-      size: interleaved.byteLength,
-      usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
-      mappedAtCreation: true
-    });
-    new Float32Array(vbo.getMappedRange()).set(interleaved);
-    vbo.unmap();
-    const gpuTex = this.#gpuTextures[d.textureIndex] ?? whiteTex;
-    const ubo = device.createBuffer({
-      size: 64,
-      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
-      mappedAtCreation: true
-    });
-    const layoutVec = maskLayoutVec4(atlasLayout);
-    const ch = maskChannelVec4(channelFlag);
-    const boundsVec = maskLayoutVec4(modelBounds);
-    new Float32Array(ubo.getMappedRange()).set([
+    const whiteView = this.#whiteView;
+    if (!device || !whiteView || d.opacity <= 0) return;
+    const slot = this.#meshCache.ensureSlot(device, d.index);
+    this.#meshCache.uploadMesh(
+      device,
+      slot,
+      d.vertexPositions,
+      d.uvs,
+      d.indices
+    );
+    const layoutVec = maskLayoutVec4(atlasLayout, this.#layoutScratch);
+    const ch = maskChannelVec4(channelFlag, this.#channelScratch);
+    const boundsVec = maskLayoutVec4(modelBounds, this.#boundsScratch);
+    const useWhite = !this.#gpuTextures[d.textureIndex];
+    this.#meshCache.writeUbo(device, slot, [
       Math.max(d.opacity, 1),
-      this.#gpuTextures[d.textureIndex] ? 1 : 0,
+      useWhite ? 0 : 1,
       0,
       0,
       layoutVec[0],
@@ -2126,23 +2403,24 @@ var WebGpuRendererImpl = class {
       boundsVec[2],
       boundsVec[3]
     ]);
-    ubo.unmap();
-    const ibo = writeIndexBuffer(device, d.indices);
-    pass.setBindGroup(
-      0,
-      device.createBindGroup({
+    const texView = this.#gpuTextureViews[d.textureIndex] ?? whiteView;
+    if (!slot.bgMask || slot.texIndex !== d.textureIndex || slot.useWhite !== useWhite) {
+      slot.bgMask = device.createBindGroup({
         layout,
         entries: [
-          { binding: 0, resource: { buffer: ubo } },
+          { binding: 0, resource: { buffer: slot.ubo } },
           { binding: 1, resource: sampler },
-          { binding: 2, resource: gpuTex.createView() }
+          { binding: 2, resource: texView }
         ]
-      })
-    );
-    pass.setVertexBuffer(0, vbo);
-    pass.setIndexBuffer(ibo, "uint16");
+      });
+      slot.texIndex = d.textureIndex;
+      slot.useWhite = useWhite;
+    }
+    pass.setBindGroup(0, slot.bgMask);
+    pass.setVertexBuffer(0, slot.vbo);
+    pass.setIndexBuffer(slot.ibo, "uint16");
     pass.drawIndexed(d.indices.length);
-    this.#transient.push(vbo, ubo, ibo);
+    void whiteTex;
   }
   #drawColorMesh(d, pass, useMask, invertMask, maskTex, atlasLayout, channelFlag, modelBounds) {
     const device = this.#device;
@@ -2151,6 +2429,7 @@ var WebGpuRendererImpl = class {
     const texturedLayout = this.#texturedBindGroupLayout;
     const clippedSolidLayout = this.#clippedSolidBindGroupLayout;
     const clippedTexturedLayout = this.#clippedTexturedBindGroupLayout;
+    const maskView = this.#maskView;
     if (!device || !sampler || !solidLayout || !texturedLayout || !clippedSolidLayout || !clippedTexturedLayout) {
       return;
     }
@@ -2158,30 +2437,30 @@ var WebGpuRendererImpl = class {
     const set = this.#pipelines[d.blendMode] ?? this.#pipelines[BlendMode.Normal];
     if (!set) return;
     const layoutVec = maskLayoutVec4(
-      atlasLayout ?? { x: 0, y: 0, width: 1, height: 1 }
+      atlasLayout ?? { x: 0, y: 0, width: 1, height: 1 },
+      this.#layoutScratch
+    );
+    const ch = maskChannelVec4(
+      channelFlag ?? [0, 0, 0, 1],
+      this.#channelScratch
     );
-    const ch = maskChannelVec4(channelFlag ?? [0, 0, 0, 1]);
     const boundsVec = maskLayoutVec4(
-      modelBounds ?? { x: -1, y: -1, width: 2, height: 2 }
+      modelBounds ?? { x: -1, y: -1, width: 2, height: 2 },
+      this.#boundsScratch
     );
+    const slot = this.#meshCache.ensureSlot(device, d.index);
     const gpuTex = this.#gpuTextures[d.textureIndex] ?? null;
-    if (gpuTex) {
-      const interleaved = interleavePosUv2(d.vertexPositions, d.uvs);
-      const vbo2 = device.createBuffer({
-        size: interleaved.byteLength,
-        usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
-        mappedAtCreation: true
-      });
-      new Float32Array(vbo2.getMappedRange()).set(interleaved);
-      vbo2.unmap();
-      const uboSize = useMask && maskTex ? 64 : 16;
-      const ubo = device.createBuffer({
-        size: uboSize,
-        usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
-        mappedAtCreation: true
-      });
-      if (useMask && maskTex) {
-        new Float32Array(ubo.getMappedRange()).set([
+    const texView = this.#gpuTextureViews[d.textureIndex] ?? null;
+    if (gpuTex && texView) {
+      this.#meshCache.uploadMesh(
+        device,
+        slot,
+        d.vertexPositions,
+        d.uvs,
+        d.indices
+      );
+      if (useMask && maskTex && maskView) {
+        this.#meshCache.writeUbo(device, slot, [
           d.opacity,
           invertMask ? 1 : 0,
           0,
@@ -2199,64 +2478,51 @@ var WebGpuRendererImpl = class {
           boundsVec[2],
           boundsVec[3]
         ]);
-      } else {
-        new Float32Array(ubo.getMappedRange()).set([
-          d.opacity,
-          0,
-          0,
-          0
-        ]);
-      }
-      ubo.unmap();
-      const ibo = writeIndexBuffer(device, d.indices);
-      if (useMask && maskTex) {
-        pass.setPipeline(set.clippedTextured);
-        pass.setBindGroup(
-          0,
-          device.createBindGroup({
+        if (!slot.bgClippedTextured || slot.texIndex !== d.textureIndex || slot.maskGeneration !== this.#meshCache.maskGeneration) {
+          slot.bgClippedTextured = device.createBindGroup({
             layout: clippedTexturedLayout,
             entries: [
-              { binding: 0, resource: { buffer: ubo } },
+              { binding: 0, resource: { buffer: slot.ubo } },
               { binding: 1, resource: sampler },
-              { binding: 2, resource: gpuTex.createView() },
-              { binding: 3, resource: maskTex.createView() }
+              { binding: 2, resource: texView },
+              { binding: 3, resource: maskView }
             ]
-          })
-        );
+          });
+          slot.texIndex = d.textureIndex;
+          slot.maskGeneration = this.#meshCache.maskGeneration;
+        }
+        pass.setPipeline(set.clippedTextured);
+        pass.setBindGroup(0, slot.bgClippedTextured);
       } else {
-        pass.setPipeline(set.textured);
-        pass.setBindGroup(
-          0,
-          device.createBindGroup({
+        this.#meshCache.writeUbo(device, slot, [d.opacity, 0, 0, 0]);
+        if (!slot.bgTextured || slot.texIndex !== d.textureIndex) {
+          slot.bgTextured = device.createBindGroup({
             layout: texturedLayout,
             entries: [
-              { binding: 0, resource: { buffer: ubo } },
+              { binding: 0, resource: { buffer: slot.ubo } },
               { binding: 1, resource: sampler },
-              { binding: 2, resource: gpuTex.createView() }
+              { binding: 2, resource: texView }
             ]
-          })
-        );
+          });
+          slot.texIndex = d.textureIndex;
+        }
+        pass.setPipeline(set.textured);
+        pass.setBindGroup(0, slot.bgTextured);
       }
-      pass.setVertexBuffer(0, vbo2);
-      pass.setIndexBuffer(ibo, "uint16");
+      pass.setVertexBuffer(0, slot.vbo);
+      pass.setIndexBuffer(slot.ibo, "uint16");
       pass.drawIndexed(d.indices.length);
-      this.#transient.push(vbo2, ubo, ibo);
       return;
     }
-    const vbo = device.createBuffer({
-      size: d.vertexPositions.byteLength,
-      usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
-      mappedAtCreation: true
-    });
-    new Float32Array(vbo.getMappedRange()).set(d.vertexPositions);
-    vbo.unmap();
-    if (useMask && maskTex) {
-      const ubo = device.createBuffer({
-        size: 80,
-        usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
-        mappedAtCreation: true
-      });
-      new Float32Array(ubo.getMappedRange()).set([
+    this.#meshCache.uploadMesh(
+      device,
+      slot,
+      d.vertexPositions,
+      d.uvs,
+      d.indices
+    );
+    if (useMask && maskTex && maskView) {
+      this.#meshCache.writeUbo(device, slot, [
         PREVIEW_FILL.r,
         PREVIEW_FILL.g,
         PREVIEW_FILL.b,
@@ -2278,54 +2544,61 @@ var WebGpuRendererImpl = class {
         boundsVec[2],
         boundsVec[3]
       ]);
-      ubo.unmap();
-      const ibo = writeIndexBuffer(device, d.indices);
-      pass.setPipeline(set.clippedFill);
-      pass.setBindGroup(
-        0,
-        device.createBindGroup({
+      if (!slot.bgClippedSolid || slot.maskGeneration !== this.#meshCache.maskGeneration) {
+        slot.bgClippedSolid = device.createBindGroup({
           layout: clippedSolidLayout,
           entries: [
-            { binding: 0, resource: { buffer: ubo } },
+            { binding: 0, resource: { buffer: slot.ubo } },
             { binding: 1, resource: sampler },
-            { binding: 2, resource: maskTex.createView() }
+            { binding: 2, resource: maskView }
           ]
-        })
-      );
-      pass.setVertexBuffer(0, vbo);
-      pass.setIndexBuffer(ibo, "uint16");
+        });
+        slot.maskGeneration = this.#meshCache.maskGeneration;
+      }
+      pass.setPipeline(set.clippedFill);
+      pass.setBindGroup(0, slot.bgClippedSolid);
+      pass.setVertexBuffer(0, slot.vbo);
+      pass.setIndexBuffer(slot.ibo, "uint16");
       pass.drawIndexed(d.indices.length);
-      this.#transient.push(vbo, ubo, ibo);
       return;
     }
-    const fillUbo = this.#makeColorUbo(
-      device,
+    this.#meshCache.writeUbo(device, slot, [
       PREVIEW_FILL.r,
       PREVIEW_FILL.g,
       PREVIEW_FILL.b,
       PREVIEW_FILL.a * d.opacity
-    );
-    const fillIbo = writeIndexBuffer(device, d.indices);
-    pass.setPipeline(set.fill);
-    pass.setBindGroup(
-      0,
-      device.createBindGroup({
+    ]);
+    if (!slot.bgSolid) {
+      slot.bgSolid = device.createBindGroup({
         layout: solidLayout,
-        entries: [{ binding: 0, resource: { buffer: fillUbo } }]
-      })
-    );
-    pass.setVertexBuffer(0, vbo);
-    pass.setIndexBuffer(fillIbo, "uint16");
+        entries: [{ binding: 0, resource: { buffer: slot.ubo } }]
+      });
+    }
+    pass.setPipeline(set.fill);
+    pass.setBindGroup(0, slot.bgSolid);
+    pass.setVertexBuffer(0, slot.vbo);
+    pass.setIndexBuffer(slot.ibo, "uint16");
     pass.drawIndexed(d.indices.length);
     const lines = triangleEdgesToLineList(d.indices);
-    const lineUbo = this.#makeColorUbo(
-      device,
+    const lineUbo = device.createBuffer({
+      size: 16,
+      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+      mappedAtCreation: true
+    });
+    new Float32Array(lineUbo.getMappedRange()).set([
       PREVIEW_STROKE.r,
       PREVIEW_STROKE.g,
       PREVIEW_STROKE.b,
       PREVIEW_STROKE.a * d.opacity
-    );
-    const lineIbo = writeIndexBuffer(device, lines);
+    ]);
+    lineUbo.unmap();
+    const lineIbo = device.createBuffer({
+      size: Math.max(4, lines.byteLength + 3 & ~3),
+      usage: GPUBufferUsage.INDEX | GPUBufferUsage.COPY_DST,
+      mappedAtCreation: true
+    });
+    new Uint16Array(lineIbo.getMappedRange()).set(lines);
+    lineIbo.unmap();
     pass.setPipeline(set.line);
     pass.setBindGroup(
       0,
@@ -2334,20 +2607,10 @@ var WebGpuRendererImpl = class {
         entries: [{ binding: 0, resource: { buffer: lineUbo } }]
       })
     );
-    pass.setVertexBuffer(0, vbo);
+    pass.setVertexBuffer(0, slot.vbo);
     pass.setIndexBuffer(lineIbo, "uint16");
     pass.drawIndexed(lines.length);
-    this.#transient.push(vbo, fillUbo, fillIbo, lineUbo, lineIbo);
-  }
-  #makeColorUbo(device, r, g, b, a) {
-    const ubo = device.createBuffer({
-      size: 16,
-      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
-      mappedAtCreation: true
-    });
-    new Float32Array(ubo.getMappedRange()).set([r, g, b, a]);
-    ubo.unmap();
-    return ubo;
+    this.#transient.push(lineUbo, lineIbo);
   }
   endFrame() {
     const device = this.#device;
@@ -2376,13 +2639,17 @@ var WebGpuRendererImpl = class {
   destroy() {
     for (const b of this.#transient) b.destroy();
     this.#transient = [];
+    this.#meshCache.clear();
+    this.#clipPlan.clear();
     this.#clearGpuTextures();
     this.#msaaTexture?.destroy();
     this.#msaaTexture = null;
     this.#maskTexture?.destroy();
     this.#maskTexture = null;
+    this.#maskView = null;
     this.#whiteTexture?.destroy();
     this.#whiteTexture = null;
+    this.#whiteView = null;
     this.#device?.destroy();
     this.#device = null;
     this.#context = null;
@@ -2551,10 +2818,21 @@ function createModelInstance(program) {
     timeSeconds: 0
   };
 }
+var paramIndexCache = /* @__PURE__ */ new WeakMap();
+function parameterIndex(instance, parameterId) {
+  let map = paramIndexCache.get(instance.program);
+  if (!map) {
+    map = /* @__PURE__ */ new Map();
+    for (let i = 0; i < instance.program.parameters.length; i++) {
+      map.set(instance.program.parameters[i].id, i);
+    }
+    paramIndexCache.set(instance.program, map);
+  }
+  const index = map.get(parameterId);
+  return index ?? -1;
+}
 function setParameterValue(instance, parameterId, value) {
-  const index = instance.program.parameters.findIndex(
-    (p2) => p2.id === parameterId
-  );
+  const index = parameterIndex(instance, parameterId);
   if (index < 0) {
     throw new Error(
       `@doki-land/live2d-renderer: unknown parameter "${parameterId}"`
@@ -2604,6 +2882,32 @@ function evaluateFrame(instance) {
     drawables
   };
 }
+function evaluateFrameInto(instance, meshes, poseOpacity) {
+  const byIndex = /* @__PURE__ */ new Map();
+  for (const m of meshes) byIndex.set(m.index, m);
+  for (const d of instance.program.drawables) {
+    const sink = byIndex.get(d.index);
+    if (!sink) continue;
+    let positions = sink.vertexPositions;
+    if (positions.length !== d.positions.length) {
+      positions = new Float32Array(d.positions.length);
+      sink.vertexPositions = positions;
+    }
+    positions.set(d.positions);
+    if (d.deformParamIndex >= 0 && d.deformDeltas) {
+      const w = paramWeight(instance, d.deformParamIndex);
+      for (let i = 0; i < positions.length; i++) {
+        positions[i] = positions[i] + w * d.deformDeltas[i];
+      }
+    }
+    sink.opacity = d.opacity;
+    sink.renderOrder = d.renderOrder;
+    sink.visible = d.visible;
+    if (d.index >= 0 && d.index < poseOpacity.length) {
+      poseOpacity[d.index] = d.opacity;
+    }
+  }
+}
 function fingerprintSnapshot(snapshot) {
   const parts = [`t=${snapshot.timeSeconds.toFixed(4)}`];
   for (const d of snapshot.drawables) {
@@ -3611,16 +3915,81 @@ function moc2ParamGetterFromValues(params, values) {
   }
   return (id) => byId.get(id) ?? 0;
 }
-function normalizePositions(positions, canvasWidth, canvasHeight) {
+function normalizePositionsInto(positions, canvasWidth, canvasHeight, out) {
   const w = canvasWidth > 0 ? canvasWidth : 1;
   const h = canvasHeight > 0 ? canvasHeight : 1;
-  const out = new Float32Array(positions.length);
   for (let i = 0; i + 1 < positions.length; i += 2) {
     out[i] = positions[i] / w * 2 - 1;
     out[i + 1] = 1 - positions[i + 1] / h * 2;
   }
+}
+function normalizePositions(positions, canvasWidth, canvasHeight) {
+  const out = new Float32Array(positions.length);
+  normalizePositionsInto(positions, canvasWidth, canvasHeight, out);
   return out;
 }
+function evaluateMoc2PoseInto(model, getParam, byId) {
+  const ops = bakeDeformerOps(model, getParam);
+  const w = model.canvasWidth;
+  const h = model.canvasHeight;
+  for (const part of model.parts) {
+    for (const mesh of part.drawData) {
+      const sink = byId.get(mesh.id);
+      if (!sink) continue;
+      const floatCount = mesh.numPoints * 2;
+      const local = interpolateKeyforms(
+        mesh.keyforms,
+        mesh.pivotManager,
+        getParam,
+        floatCount
+      );
+      const world = transformDrawablePositions(mesh, local, ops);
+      let pos = sink.vertexPositions;
+      if (pos.length !== world.length) {
+        pos = new Float32Array(world.length);
+        sink.vertexPositions = pos;
+      }
+      normalizePositionsInto(world, w, h, pos);
+      sink.opacity = interpolateScalarTable(
+        mesh.opacities,
+        mesh.pivotManager,
+        getParam,
+        1
+      );
+      sink.renderOrder = Math.round(
+        interpolateScalarTable(
+          mesh.drawOrders,
+          mesh.pivotManager,
+          getParam,
+          mesh.averageDrawOrder
+        )
+      );
+      sink.visible = part.visible;
+    }
+  }
+}
+function moc2DrawableIdsInProgramOrder(model, getParam) {
+  const paramDefs = model.paramDefSet?.params ?? [];
+  const gp = getParam ?? buildParamGetter(paramDefs);
+  const drafts = [];
+  for (const part of model.parts) {
+    for (const mesh of part.drawData) {
+      drafts.push({
+        id: mesh.id,
+        renderOrder: Math.round(
+          interpolateScalarTable(
+            mesh.drawOrders,
+            mesh.pivotManager,
+            gp,
+            mesh.averageDrawOrder
+          )
+        )
+      });
+    }
+  }
+  drafts.sort((a, b) => a.renderOrder - b.renderOrder);
+  return drafts.map((d) => d.id);
+}
 function lowerDrawable(mesh, getParam, ops, canvasWidth, canvasHeight, partVisible) {
   const floatCount = mesh.numPoints * 2;
   const local = interpolateKeyforms(
@@ -4851,15 +5220,24 @@ function meanGlueSeamDistance(positionsByMesh, glue) {
 }
 
 // src/moc/moc3-to-program.ts
-function normalizePositions2(positions, canvasWidth, canvasHeight, pixelsPerUnit) {
+function normalizePositionsInto2(positions, canvasWidth, canvasHeight, pixelsPerUnit, out) {
   const ppu = pixelsPerUnit > 0 ? pixelsPerUnit : 1;
   const hw = canvasWidth > 0 ? canvasWidth / ppu * 0.5 : 0.5;
   const hh = canvasHeight > 0 ? canvasHeight / ppu * 0.5 : 0.5;
-  const out = new Float32Array(positions.length);
   for (let i = 0; i + 1 < positions.length; i += 2) {
     out[i] = positions[i] / hw;
     out[i + 1] = -positions[i + 1] / hh;
   }
+}
+function normalizePositions2(positions, canvasWidth, canvasHeight, pixelsPerUnit) {
+  const out = new Float32Array(positions.length);
+  normalizePositionsInto2(
+    positions,
+    canvasWidth,
+    canvasHeight,
+    pixelsPerUnit,
+    out
+  );
   return out;
 }
 function moc3DocumentToProgram(doc, options = {}) {
@@ -5045,6 +5423,155 @@ function moc3DocumentToProgram(doc, options = {}) {
     drawables
   };
 }
+function moc3ArtMeshIndicesInProgramOrder(doc, getParamByIndex) {
+  const meshCount = doc.counts[CountIdx.ART_MESHES] ?? 0;
+  const defaultValues = moc3SectionF32(doc, "parameter.default_values");
+  const gp = getParamByIndex ?? ((index) => defaultValues[index] ?? 0);
+  const keyTables = loadMoc3KeyTables(doc);
+  const enables = moc3SectionI32(doc, "art_mesh.enables");
+  const vertexCounts = moc3SectionI32(doc, "art_mesh.vertex_counts");
+  const indexCounts = moc3SectionI32(doc, "art_mesh.position_index_counts");
+  const keyformBegins = moc3SectionI32(doc, "art_mesh.keyform_begin_indices");
+  const keyformCounts = moc3SectionI32(doc, "art_mesh.keyform_counts");
+  const bandIndices = moc3SectionI32(
+    doc,
+    "art_mesh.keyform_binding_band_indices"
+  );
+  const keyformDrawOrders = moc3SectionF32(
+    doc,
+    "art_mesh_keyform.draw_orders"
+  );
+  const drafts = [];
+  for (let i = 0; i < meshCount; i++) {
+    if ((enables[i] ?? 1) === 0) continue;
+    const vertexCount = vertexCounts[i] ?? 0;
+    const indexCount = indexCounts[i] ?? 0;
+    if (vertexCount <= 0 || indexCount < 3) continue;
+    const kfBegin = keyformBegins[i] ?? 0;
+    const kfCount = keyformCounts[i] ?? 0;
+    if (kfCount <= 0) continue;
+    const band = bandIndices[i] ?? -1;
+    const blend = resolveMoc3KeyformBlend(keyTables, band, gp);
+    drafts.push({
+      artMeshIndex: i,
+      renderOrder: Math.round(
+        blendKeyformScalar(
+          keyformDrawOrders,
+          kfBegin,
+          kfCount,
+          blend,
+          i
+        )
+      )
+    });
+  }
+  drafts.sort((a, b) => a.renderOrder - b.renderOrder);
+  return drafts.map((d) => d.artMeshIndex);
+}
+function evaluateMoc3PoseInto(doc, getParamByIndex, byArtMesh, poseOpacity) {
+  const meshCount = doc.counts[CountIdx.ART_MESHES] ?? 0;
+  const keyTables = loadMoc3KeyTables(doc);
+  const deformers = bakeMoc3Deformers(doc, keyTables, getParamByIndex);
+  const glues = loadMoc3Glues(doc);
+  const glueIntensities = moc3SectionF32(doc, "glue_keyform.intensities");
+  const visibles = moc3SectionI32(doc, "art_mesh.visibles");
+  const enables = moc3SectionI32(doc, "art_mesh.enables");
+  const vertexCounts = moc3SectionI32(doc, "art_mesh.vertex_counts");
+  const indexCounts = moc3SectionI32(doc, "art_mesh.position_index_counts");
+  const keyformBegins = moc3SectionI32(doc, "art_mesh.keyform_begin_indices");
+  const keyformCounts = moc3SectionI32(doc, "art_mesh.keyform_counts");
+  const bandIndices = moc3SectionI32(
+    doc,
+    "art_mesh.keyform_binding_band_indices"
+  );
+  const parentDeformers = moc3SectionI32(
+    doc,
+    "art_mesh.parent_deformer_indices"
+  );
+  const keyformOpacities = moc3SectionF32(doc, "art_mesh_keyform.opacities");
+  const keyformDrawOrders = moc3SectionF32(
+    doc,
+    "art_mesh_keyform.draw_orders"
+  );
+  const keyformPosBegins = moc3SectionI32(
+    doc,
+    "art_mesh_keyform.keyform_position_begin_indices"
+  );
+  const keyformPositions = moc3SectionF32(doc, "keyform_position.xys");
+  const cw = doc.canvas.canvasWidth;
+  const ch = doc.canvas.canvasHeight;
+  const ppu = doc.canvas.pixelsPerUnit;
+  const worldByMesh = /* @__PURE__ */ new Map();
+  const opacityByMesh = /* @__PURE__ */ new Map();
+  const orderByMesh = /* @__PURE__ */ new Map();
+  const visibleByMesh = /* @__PURE__ */ new Map();
+  for (let i = 0; i < meshCount; i++) {
+    if (!byArtMesh.has(i)) continue;
+    if ((enables[i] ?? 1) === 0) continue;
+    const vertexCount = vertexCounts[i] ?? 0;
+    const indexCount = indexCounts[i] ?? 0;
+    if (vertexCount <= 0 || indexCount < 3) continue;
+    const kfBegin = keyformBegins[i] ?? 0;
+    const kfCount = keyformCounts[i] ?? 0;
+    if (kfCount <= 0) continue;
+    const band = bandIndices[i] ?? -1;
+    const blend = resolveMoc3KeyformBlend(keyTables, band, getParamByIndex);
+    const local = blendKeyformFloats(
+      keyformPositions,
+      keyformPosBegins,
+      kfBegin,
+      kfCount,
+      vertexCount * 2,
+      blend
+    );
+    const parentIndex = parentDeformers[i] ?? -1;
+    const parent = parentIndex >= 0 ? deformers[parentIndex] ?? null : null;
+    const world = parent ? applyParentToPoints(local, parent) : local;
+    worldByMesh.set(i, world);
+    opacityByMesh.set(
+      i,
+      blendKeyformScalar(keyformOpacities, kfBegin, kfCount, blend, 1)
+    );
+    orderByMesh.set(
+      i,
+      Math.round(
+        blendKeyformScalar(
+          keyformDrawOrders,
+          kfBegin,
+          kfCount,
+          blend,
+          i
+        )
+      )
+    );
+    visibleByMesh.set(i, (visibles[i] ?? 1) !== 0);
+  }
+  applyMoc3Glues(
+    worldByMesh,
+    glues,
+    keyTables,
+    getParamByIndex,
+    glueIntensities
+  );
+  for (const [artMeshIndex, world] of worldByMesh) {
+    const sink = byArtMesh.get(artMeshIndex);
+    if (!sink) continue;
+    let pos = sink.vertexPositions;
+    if (pos.length !== world.length) {
+      pos = new Float32Array(world.length);
+      sink.vertexPositions = pos;
+    }
+    normalizePositionsInto2(world, cw, ch, ppu, pos);
+    const opacity = opacityByMesh.get(artMeshIndex) ?? 1;
+    sink.renderOrder = orderByMesh.get(artMeshIndex) ?? sink.renderOrder;
+    sink.visible = visibleByMesh.get(artMeshIndex) ?? true;
+    const slot = sink.index;
+    if (slot >= 0 && slot < poseOpacity.length) {
+      poseOpacity[slot] = opacity;
+    }
+    sink.opacity = opacity;
+  }
+}
 
 // src/moc/decode.ts
 function readMagic2(bytes) {
@@ -5095,49 +5622,90 @@ async function decodeMoc3(bytes) {
 
 // src/moc/moc2.ts
 import { detectModelSettingsFormat as detectModelSettingsFormat2 } from "@doki-land/live2d-core";
-function toDrawableMesh(d) {
-  return {
-    index: d.index,
-    textureIndex: d.textureIndex,
-    vertexPositions: d.positions,
-    uvs: d.uvs,
-    indices: d.indices,
-    opacity: d.opacity,
-    blendMode: d.blendMode,
-    invertedMask: d.invertedMask,
-    renderOrder: d.renderOrder,
-    dynamicFlag: true,
-    maskIndices: [...d.maskIndices],
-    visible: d.visible
-  };
+var stateByModel = /* @__PURE__ */ new WeakMap();
+function allocateMeshesFromProgram(program, drawableIds) {
+  const meshes = [];
+  const byId = /* @__PURE__ */ new Map();
+  for (let i = 0; i < program.drawables.length; i++) {
+    const d = program.drawables[i];
+    const mesh = {
+      index: d.index,
+      textureIndex: d.textureIndex,
+      vertexPositions: new Float32Array(d.positions),
+      uvs: d.uvs,
+      indices: d.indices,
+      opacity: d.opacity,
+      blendMode: d.blendMode,
+      invertedMask: d.invertedMask,
+      renderOrder: d.renderOrder,
+      dynamicFlag: true,
+      maskIndices: [...d.maskIndices],
+      visible: d.visible
+    };
+    meshes.push(mesh);
+    const id = drawableIds[i];
+    if (id) byId.set(id, mesh);
+  }
+  return { meshes, byId };
+}
+function buildBindings(instance) {
+  const bindings = [];
+  const paramIndexById = /* @__PURE__ */ new Map();
+  for (let i = 0; i < instance.program.parameters.length; i++) {
+    const p = instance.program.parameters[i];
+    const binding = {
+      id: p.id,
+      min: p.min,
+      max: p.max,
+      defaultValue: p.defaultValue,
+      value: instance.parameterValues[i] ?? p.defaultValue
+    };
+    bindings.push(binding);
+    paramIndexById.set(p.id, i);
+  }
+  return { bindings, paramIndexById };
 }
-function paramFingerprint(values) {
-  let s = "";
-  for (let i = 0; i < values.length; i++) {
-    s += `${values[i]?.toFixed(5)},`;
+function syncBindingValues(state) {
+  for (let i = 0; i < state.bindings.length; i++) {
+    const b = state.bindings[i];
+    b.value = state.instance.parameterValues[i] ?? b.defaultValue;
   }
-  return s;
 }
-var stateByModel = /* @__PURE__ */ new WeakMap();
+function refreshDrawView(state) {
+  const view = state.drawView;
+  view.length = 0;
+  for (const m of state.meshes) view.push(m);
+  view.sort((a, b) => a.renderOrder - b.renderOrder || a.index - b.index);
+}
 function bakePose(state) {
-  const values = Float32Array.from(state.instance.parameterValues);
-  const timeSeconds = state.instance.timeSeconds;
-  const fp = paramFingerprint(values);
-  if (fp === state.bakedFingerprint && state.lastFrame) {
-    return;
+  if (!state.poseDirty) return;
+  const getParam = moc2ParamGetterFromValues(
+    state.instance.program.parameters,
+    state.instance.parameterValues
+  );
+  evaluateMoc2PoseInto(state.moc, getParam, state.byId);
+  refreshDrawView(state);
+  syncBindingValues(state);
+  state.poseDirty = false;
+}
+function frameFromMeshes(meshes, timeSeconds) {
+  const drawables = [];
+  for (const m of meshes) {
+    drawables.push({
+      index: m.index,
+      textureIndex: m.textureIndex,
+      positions: m.vertexPositions,
+      uvs: m.uvs,
+      indices: m.indices,
+      opacity: m.opacity,
+      blendMode: m.blendMode,
+      renderOrder: m.renderOrder,
+      visible: m.visible,
+      invertedMask: m.invertedMask,
+      maskIndices: m.maskIndices
+    });
   }
-  const program = moc2ModelToProgram(state.moc, {
-    getParam: moc2ParamGetterFromValues(
-      state.moc.paramDefSet.params,
-      values
-    )
-  });
-  const next = createModelInstance(program);
-  next.parameterValues.set(values);
-  next.timeSeconds = timeSeconds;
-  state.instance = next;
-  state.bakedFingerprint = fp;
-  state.lastFrame = evaluateFrame(next);
+  return { timeSeconds, drawables };
 }
 var Moc2Backend = class {
   format = "moc2";
@@ -5158,17 +5726,30 @@ var Moc2Backend = class {
     const moc = shared?.moc2Model ?? new Moc2Parser(bytes).parseModel();
     const program = moc2ModelToProgram(moc);
     const instance = createModelInstance(program);
+    const drawableIds = moc2DrawableIdsInProgramOrder(moc);
+    const { meshes, byId } = allocateMeshesFromProgram(
+      program,
+      drawableIds
+    );
+    const { bindings, paramIndexById } = buildBindings(instance);
+    const drawView = [];
     const model = {
       id: settings.name ?? settings.url,
       settings,
       format: "moc2"
     };
-    stateByModel.set(model, {
+    const state = {
       moc,
       instance,
-      lastFrame: null,
-      bakedFingerprint: paramFingerprint(instance.parameterValues)
-    });
+      meshes,
+      drawView,
+      byId,
+      poseDirty: true,
+      bindings,
+      paramIndexById
+    };
+    bakePose(state);
+    stateByModel.set(model, state);
     return model;
   }
   updateModel(model, deltaTimeSeconds) {
@@ -5176,46 +5757,43 @@ var Moc2Backend = class {
     if (!state) return;
     state.instance.timeSeconds += deltaTimeSeconds;
     bakePose(state);
-    if (state.lastFrame) {
-      state.lastFrame = {
-        ...state.lastFrame,
-        timeSeconds: state.instance.timeSeconds
-      };
-    }
   }
   getDrawables(model) {
     const state = stateByModel.get(model);
     if (!state) return [];
     bakePose(state);
-    const frame = state.lastFrame ?? evaluateFrame(state.instance);
-    state.lastFrame = frame;
-    return frame.drawables.map(toDrawableMesh);
+    return state.drawView;
   }
   captureFrame(model) {
     const state = stateByModel.get(model);
     if (!state) return null;
     bakePose(state);
-    const frame = state.lastFrame ?? evaluateFrame(state.instance);
-    state.lastFrame = frame;
-    return frame;
+    return frameFromMeshes(state.drawView, state.instance.timeSeconds);
   }
   setParameter(model, id, value) {
     const state = stateByModel.get(model);
     if (!state) return;
     setParameterValue(state.instance, id, value);
-    state.lastFrame = null;
-    state.bakedFingerprint = "";
+    const index = state.paramIndexById.get(id);
+    if (index !== void 0) {
+      const binding = state.bindings[index];
+      if (binding) {
+        binding.value = state.instance.parameterValues[index] ?? binding.defaultValue;
+      }
+    }
+    state.poseDirty = true;
+  }
+  resolveParameter(model, id) {
+    const state = stateByModel.get(model);
+    if (!state) return void 0;
+    return state.paramIndexById.get(id);
   }
   listParameters(model) {
     const state = stateByModel.get(model);
     if (!state) return [];
-    return state.instance.program.parameters.map((p, i) => ({
-      id: p.id,
-      min: p.min,
-      max: p.max,
-      defaultValue: p.defaultValue,
-      value: state.instance.parameterValues[i] ?? p.defaultValue
-    }));
+    bakePose(state);
+    syncBindingValues(state);
+    return state.bindings;
   }
   hitTest(_model, _x, _y) {
     return null;
@@ -5223,6 +5801,10 @@ var Moc2Backend = class {
   destroyModel(model) {
     stateByModel.delete(model);
   }
+  /** Test/harness: stable program + instance refs. */
+  getResidentInstance(model) {
+    return stateByModel.get(model)?.instance ?? null;
+  }
 };
 function createMoc2Backend() {
   return new Moc2Backend();
@@ -5261,11 +5843,12 @@ function cascadedPartOpacity(tables, artMeshIndex, overrides) {
 }
 
 // src/moc/moc3.ts
-function toDrawableMesh2(d) {
-  return {
+var stateByModel2 = /* @__PURE__ */ new WeakMap();
+function allocateMeshesFromProgram2(program) {
+  return program.drawables.map((d) => ({
     index: d.index,
     textureIndex: d.textureIndex,
-    vertexPositions: d.positions,
+    vertexPositions: new Float32Array(d.positions),
     uvs: d.uvs,
     indices: d.indices,
     opacity: d.opacity,
@@ -5275,34 +5858,82 @@ function toDrawableMesh2(d) {
     dynamicFlag: true,
     maskIndices: [...d.maskIndices],
     visible: d.visible
-  };
+  }));
+}
+function buildBindings2(instance) {
+  const bindings = [];
+  const paramIndexById = /* @__PURE__ */ new Map();
+  for (let i = 0; i < instance.program.parameters.length; i++) {
+    const p = instance.program.parameters[i];
+    bindings.push({
+      id: p.id,
+      min: p.min,
+      max: p.max,
+      defaultValue: p.defaultValue,
+      value: instance.parameterValues[i] ?? p.defaultValue
+    });
+    paramIndexById.set(p.id, i);
+  }
+  return { bindings, paramIndexById };
 }
-function paramFingerprint2(values) {
-  let s = "";
-  for (let i = 0; i < values.length; i++) {
-    s += `${values[i]?.toFixed(5)},`;
+function syncBindingValues2(state) {
+  for (let i = 0; i < state.bindings.length; i++) {
+    const b = state.bindings[i];
+    b.value = state.instance.parameterValues[i] ?? b.defaultValue;
+  }
+}
+function refreshDrawView2(state) {
+  const view = state.drawView;
+  view.length = 0;
+  for (const m of state.meshes) view.push(m);
+  view.sort((a, b) => a.renderOrder - b.renderOrder || a.index - b.index);
+}
+function applyPartOpacity(state) {
+  const tables = state.doc ? readMoc3PartTables(state.doc) : null;
+  for (const mesh of state.meshes) {
+    const base = state.poseOpacity[mesh.index] ?? mesh.opacity;
+    if (!tables || state.partOpacity.size === 0) {
+      mesh.opacity = base;
+      continue;
+    }
+    mesh.opacity = base * cascadedPartOpacity(tables, mesh.index, state.partOpacity);
   }
-  return s;
 }
-var stateByModel2 = /* @__PURE__ */ new WeakMap();
 function bakePose2(state) {
-  if (!state.doc) {
-    state.lastFrame = evaluateFrame(state.instance);
-    return;
+  if (!state.poseDirty) return;
+  if (state.doc) {
+    const values = state.instance.parameterValues;
+    evaluateMoc3PoseInto(
+      state.doc,
+      (i) => values[i] ?? 0,
+      state.byArtMesh,
+      state.poseOpacity
+    );
+  } else {
+    evaluateFrameInto(state.instance, state.meshes, state.poseOpacity);
   }
-  const values = Float32Array.from(state.instance.parameterValues);
-  const timeSeconds = state.instance.timeSeconds;
-  const fp = paramFingerprint2(values);
-  if (fp === state.bakedFingerprint && state.lastFrame) return;
-  const program = moc3DocumentToProgram(state.doc, {
-    getParamByIndex: (i) => values[i] ?? 0
-  });
-  const next = createModelInstance(program);
-  next.parameterValues.set(values);
-  next.timeSeconds = timeSeconds;
-  state.instance = next;
-  state.bakedFingerprint = fp;
-  state.lastFrame = evaluateFrame(next);
+  refreshDrawView2(state);
+  syncBindingValues2(state);
+  state.poseDirty = false;
+}
+function frameFromMeshes2(meshes, timeSeconds) {
+  const drawables = [];
+  for (const m of meshes) {
+    drawables.push({
+      index: m.index,
+      textureIndex: m.textureIndex,
+      positions: m.vertexPositions,
+      uvs: m.uvs,
+      indices: m.indices,
+      opacity: m.opacity,
+      blendMode: m.blendMode,
+      renderOrder: m.renderOrder,
+      visible: m.visible,
+      invertedMask: m.invertedMask,
+      maskIndices: m.maskIndices
+    });
+  }
+  return { timeSeconds, drawables };
 }
 var Moc3Backend = class {
   format = "moc3";
@@ -5330,18 +5961,39 @@ var Moc3Backend = class {
       program = moc3DocumentToProgram(doc);
     }
     const instance = createModelInstance(program);
+    const meshes = allocateMeshesFromProgram2(program);
+    const byArtMesh = /* @__PURE__ */ new Map();
+    if (doc) {
+      const artOrder = moc3ArtMeshIndicesInProgramOrder(doc);
+      for (let i = 0; i < artOrder.length; i++) {
+        const art = artOrder[i];
+        const mesh = meshes[i];
+        if (mesh) byArtMesh.set(art, mesh);
+      }
+    }
+    const poseOpacity = new Float32Array(meshes.length);
+    for (const m of meshes) poseOpacity[m.index] = m.opacity;
+    const { bindings, paramIndexById } = buildBindings2(instance);
     const model = {
       id: settings.name ?? settings.url,
       settings,
       format: "moc3"
     };
-    stateByModel2.set(model, {
+    const state = {
       doc,
       instance,
-      lastFrame: null,
-      bakedFingerprint: paramFingerprint2(instance.parameterValues),
-      partOpacity: /* @__PURE__ */ new Map()
-    });
+      meshes,
+      drawView: [],
+      byArtMesh,
+      poseOpacity,
+      poseDirty: true,
+      partOpacity: /* @__PURE__ */ new Map(),
+      bindings,
+      paramIndexById
+    };
+    bakePose2(state);
+    applyPartOpacity(state);
+    stateByModel2.set(model, state);
     return model;
   }
   updateModel(model, deltaTimeSeconds) {
@@ -5349,49 +6001,34 @@ var Moc3Backend = class {
     if (!state) return;
     state.instance.timeSeconds += deltaTimeSeconds;
     bakePose2(state);
-    if (state.lastFrame) {
-      state.lastFrame = {
-        ...state.lastFrame,
-        timeSeconds: state.instance.timeSeconds
-      };
-    }
+    applyPartOpacity(state);
   }
   getDrawables(model) {
     const state = stateByModel2.get(model);
     if (!state) return [];
     bakePose2(state);
-    const frame = state.lastFrame ?? evaluateFrame(state.instance);
-    state.lastFrame = frame;
-    const tables = state.doc ? readMoc3PartTables(state.doc) : null;
-    return frame.drawables.map((d) => {
-      const mesh = toDrawableMesh2(d);
-      if (!tables || state.partOpacity.size === 0) return mesh;
-      const mul = cascadedPartOpacity(tables, d.index, state.partOpacity);
-      return { ...mesh, opacity: mesh.opacity * mul };
-    });
+    applyPartOpacity(state);
+    return state.drawView;
   }
   captureFrame(model) {
     const state = stateByModel2.get(model);
     if (!state) return null;
     bakePose2(state);
-    const frame = state.lastFrame ?? evaluateFrame(state.instance);
-    state.lastFrame = frame;
-    const tables = state.doc ? readMoc3PartTables(state.doc) : null;
-    if (!tables || state.partOpacity.size === 0) return frame;
-    return {
-      ...frame,
-      drawables: frame.drawables.map((d) => ({
-        ...d,
-        opacity: d.opacity * cascadedPartOpacity(tables, d.index, state.partOpacity)
-      }))
-    };
+    applyPartOpacity(state);
+    return frameFromMeshes2(state.drawView, state.instance.timeSeconds);
   }
   setParameter(model, id, value) {
     const state = stateByModel2.get(model);
     if (!state) return;
     setParameterValue(state.instance, id, value);
-    state.lastFrame = null;
-    state.bakedFingerprint = "";
+    const index = state.paramIndexById.get(id);
+    if (index !== void 0) {
+      const binding = state.bindings[index];
+      if (binding) {
+        binding.value = state.instance.parameterValues[index] ?? binding.defaultValue;
+      }
+    }
+    state.poseDirty = true;
   }
   setPartOpacity(model, id, value) {
     const state = stateByModel2.get(model);
@@ -5399,16 +6036,17 @@ var Moc3Backend = class {
     const v = Number.isFinite(value) ? Math.min(1, Math.max(0, value)) : 1;
     state.partOpacity.set(id, v);
   }
+  resolveParameter(model, id) {
+    const state = stateByModel2.get(model);
+    if (!state) return void 0;
+    return state.paramIndexById.get(id);
+  }
   listParameters(model) {
     const state = stateByModel2.get(model);
     if (!state) return [];
-    return state.instance.program.parameters.map((p, i) => ({
-      id: p.id,
-      min: p.min,
-      max: p.max,
-      defaultValue: p.defaultValue,
-      value: state.instance.parameterValues[i] ?? p.defaultValue
-    }));
+    bakePose2(state);
+    syncBindingValues2(state);
+    return state.bindings;
   }
   hitTest(_model, _x, _y) {
     return null;
@@ -5416,6 +6054,9 @@ var Moc3Backend = class {
   destroyModel(model) {
     stateByModel2.delete(model);
   }
+  getResidentInstance(model) {
+    return stateByModel2.get(model)?.instance ?? null;
+  }
 };
 function createMoc3Backend() {
   return new Moc3Backend();
@@ -5553,6 +6194,7 @@ export {
   Moc3DrawableFlag,
   PREVIEW_FILL,
   PREVIEW_STROKE,
+  ResidentClippingPlan,
   WebGl2RendererImpl,
   WebGpuRendererImpl,
   applyMoc3Glues,
@@ -5561,6 +6203,7 @@ export {
   calcClippedDrawableBounds,
   calcVertexBounds,
   canvasCompositeForBlendMode,
+  clippingTopologyKey,
   compileSharedModelCompile,
   createCanvas2DRenderer,
   createMoc2Backend,
@@ -5580,6 +6223,9 @@ export {
   expandBounds,
   fingerprintSnapshot,
   fitClippingContexts,
+  fitClippingContextsInPlace,
+  interleaveByteLength,
+  interleavePosUv,
   isCanvas2DAvailable,
   isCpuProgramBytes,
   isWebGl2Available,