@doki-land/live2d-renderer 0.0.19 → 0.0.21

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 atlasOptionsKey(options) {
+  return `${options.mode ?? "rgba"}:${options.inset ?? ""}:${options.renderTextureCount ?? ""}`;
 }
-function maskChannelVec4(flag) {
-  return new Float32Array([flag[0], flag[1], flag[2], flag[3]]);
+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;
@@ -5927,6 +6194,7 @@ export {
   Moc3DrawableFlag,
   PREVIEW_FILL,
   PREVIEW_STROKE,
+  ResidentClippingPlan,
   WebGl2RendererImpl,
   WebGpuRendererImpl,
   applyMoc3Glues,
@@ -5935,6 +6203,7 @@ export {
   calcClippedDrawableBounds,
   calcVertexBounds,
   canvasCompositeForBlendMode,
+  clippingTopologyKey,
   compileSharedModelCompile,
   createCanvas2DRenderer,
   createMoc2Backend,
@@ -5954,6 +6223,9 @@ export {
   expandBounds,
   fingerprintSnapshot,
   fitClippingContexts,
+  fitClippingContextsInPlace,
+  interleaveByteLength,
+  interleavePosUv,
   isCanvas2DAvailable,
   isCpuProgramBytes,
   isWebGl2Available,