@doki-land/live2d-renderer 0.0.19 → 0.0.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@doki-land/live2d-renderer",
-  "version": "0.0.19",
+  "version": "0.0.21",
   "description": "Live2D rendering — moc2/moc3 decode + WebGPU, WebGL2, Canvas2D backends for live2d.ts.",
   "type": "module",
   "license": "MIT",
@@ -45,7 +45,7 @@
     "test": "vitest run"
   },
   "dependencies": {
-    "@doki-land/live2d-core": "0.0.19"
+    "@doki-land/live2d-core": "0.0.21"
   },
   "sideEffects": false
 }

package/src/backends/canvas2d.ts

@@ -1,9 +1,6 @@
 import { canvasCompositeForBlendMode } from "../render/blend.js";
-import {
-    fitClippingContexts,
-    type MaskLayoutRect,
-    partitionForClipping,
-} from "../render/clipping.js";
+import type { MaskLayoutRect } from "../render/clipping.js";
+import { ResidentClippingPlan } from "../render/clipping-plan.js";
 import {
     modelXToCanvasPixelX,
     modelYUpToCanvasPixelY,
@@ -159,6 +156,7 @@ class Canvas2DModelDrawPass implements ModelDrawPass {
     readonly #ctx: CanvasRenderingContext2D;
     readonly #options: Canvas2DRendererOptions;
     #textures: (TextureData | null)[] = [];
+    readonly #clipPlan = new ResidentClippingPlan();
 
     constructor(
         ctx: CanvasRenderingContext2D,
@@ -182,10 +180,10 @@ class Canvas2DModelDrawPass implements ModelDrawPass {
         const byIndex = new Map<number, DrawableMesh>();
         for (const d of drawables) byIndex.set(d.index, d);
         // UV-grid only: Canvas2D cannot isolate R/G/B/A channels.
-        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) {
@@ -380,6 +378,7 @@ class Canvas2DModelDrawPass implements ModelDrawPass {
 
     destroy(): void {
         this.#textures = [];
+        this.#clipPlan.clear();
     }
 }
 

package/src/backends/webgl2.ts

@@ -7,13 +7,16 @@
 
 import { applyWebGl2BlendMode } from "../render/blend.js";
 import {
-    fitClippingContexts,
     type LaidOutClippingContext,
     type MaskLayoutRect,
     maskChannelVec4,
     maskLayoutVec4,
-    partitionForClipping,
 } from "../render/clipping.js";
+import { ResidentClippingPlan } from "../render/clipping-plan.js";
+import {
+    interleaveByteLength,
+    interleavePosUv,
+} from "../render/mesh-interleave.js";
 import {
     PREVIEW_FILL,
     PREVIEW_STROKE,
@@ -149,23 +152,6 @@ function linkProgram(
     return program;
 }
 
-function interleavePosUv(
-    positions: Float32Array,
-    uvs: Float32Array,
-): Float32Array {
-    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: WebGL2RenderingContext,
     program: WebGLProgram,
@@ -208,6 +194,13 @@ class WebGl2ModelDrawPass implements ModelDrawPass {
     #maskTex: WebGLTexture | null = null;
     #maskW = 0;
     #maskH = 0;
+    readonly #clipPlan = new ResidentClippingPlan();
+    #interleaved: Float32Array<ArrayBufferLike> = new Float32Array(64);
+    #indicesRef: Uint16Array | null = null;
+    readonly #layoutScratch = new Float32Array(4);
+    readonly #boundsScratch = new Float32Array(4);
+    readonly #channelScratch = new Float32Array(4);
+    readonly #defaultChannel = new Float32Array([0, 0, 0, 1]);
 
     constructor(gl: WebGL2RenderingContext) {
         this.#gl = gl;
@@ -395,13 +388,25 @@ class WebGl2ModelDrawPass implements ModelDrawPass {
         gl.bindTexture(gl.TEXTURE_2D, null);
     }
 
-    #uploadMesh(d: DrawableMesh): void {
+    #uploadMesh(d: DrawableMesh, uploadIndices = true): void {
         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(
@@ -434,19 +439,23 @@ class WebGl2ModelDrawPass implements ModelDrawPass {
         );
         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 },
+                this.#boundsScratch,
             ),
         );
         gl.uniform4fv(
             this.#channelFlagLoc,
-            channelFlag ?? new Float32Array([0, 0, 0, 1]),
+            channelFlag ?? this.#defaultChannel,
         );
         if (useMask && this.#maskTex) {
             gl.activeTexture(gl.TEXTURE1);
@@ -467,6 +476,7 @@ class WebGl2ModelDrawPass implements ModelDrawPass {
                 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);
         }
     }
@@ -486,8 +496,14 @@ class WebGl2ModelDrawPass implements ModelDrawPass {
         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);
     }
@@ -503,8 +519,8 @@ class WebGl2ModelDrawPass implements ModelDrawPass {
         const byIndex = new Map<number, DrawableMesh>();
         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);
@@ -522,7 +538,10 @@ class WebGl2ModelDrawPass implements ModelDrawPass {
                 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) {
@@ -570,7 +589,7 @@ class WebGl2ModelDrawPass implements ModelDrawPass {
                     clip.invertedMask,
                     clip.layout,
                     clip.modelBounds,
-                    maskChannelVec4(clip.channelFlag),
+                    maskChannelVec4(clip.channelFlag, this.#channelScratch),
                 );
             } else {
                 this.#drawMeshColor(d, false, false, null, null, null);
@@ -587,6 +606,8 @@ class WebGl2ModelDrawPass implements ModelDrawPass {
     destroy(): void {
         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);

package/src/backends/webgpu-mesh-cache.ts

@@ -0,0 +1,206 @@
+/**
+ * Per-drawable WebGPU buffer / bind-group cache.
+ * Static index/uv topology stays resident; vertex positions + small UBOs use writeBuffer.
+ */
+
+import {
+    interleaveByteLength,
+    interleavePosUv,
+} from "../render/mesh-interleave.js";
+
+/** WebGPU INDEX buffers must be a multiple of 4 bytes. */
+export function indexBufferByteSize(byteLength: number): number {
+    return (byteLength + 3) & ~3;
+}
+
+export interface WebGpuMeshSlot {
+    index: number;
+    vbo: GPUBuffer;
+    vboBytes: number;
+    interleaved: Float32Array<ArrayBufferLike>;
+    ibo: GPUBuffer;
+    iboBytes: number;
+    indicesRef: Uint16Array | null;
+    uvsRef: Float32Array | null;
+    /** Uniform buffer (max 80 bytes covers all shader variants). */
+    ubo: GPUBuffer;
+    uboFloats: Float32Array<ArrayBufferLike>;
+    bgMask: GPUBindGroup | null;
+    bgTextured: GPUBindGroup | null;
+    bgClippedTextured: GPUBindGroup | null;
+    bgSolid: GPUBindGroup | null;
+    bgClippedSolid: GPUBindGroup | null;
+    texIndex: number;
+    useWhite: boolean;
+    maskGeneration: number;
+}
+
+function createOrGrowBuffer(
+    device: GPUDevice,
+    prev: GPUBuffer | null,
+    prevBytes: number,
+    needBytes: number,
+    usage: GPUBufferUsageFlags,
+): { buffer: GPUBuffer; bytes: number } {
+    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,
+    };
+}
+
+export class WebGpuMeshCache {
+    readonly #slots = new Map<number, WebGpuMeshSlot>();
+    #maskGeneration = 0;
+
+    bumpMaskGeneration(): void {
+        this.#maskGeneration += 1;
+    }
+
+    get maskGeneration(): number {
+        return this.#maskGeneration;
+    }
+
+    clear(): void {
+        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(): void {
+        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: GPUDevice, drawableIndex: number): WebGpuMeshSlot {
+        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: GPUDevice,
+        slot: WebGpuMeshSlot,
+        positions: Float32Array,
+        uvs: Float32Array,
+        indices: Uint16Array,
+    ): void {
+        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 as ArrayBuffer,
+            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 as ArrayBuffer,
+                    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: GPUDevice,
+        slot: WebGpuMeshSlot,
+        floats: ArrayLike<number>,
+    ): void {
+        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 as ArrayBuffer,
+            slot.uboFloats.byteOffset,
+            Math.max(16, (n * 4 + 15) & ~15),
+        );
+    }
+}