spine-html 0.2.0 → 0.4.0

package/dist/MeshGlBlitter.js

@@ -0,0 +1,265 @@
+/**
+ * Shared offscreen WebGL rasterizer for the mesh (deform) tier.
+ *
+ * One module-level context serves every renderer instance: browsers cap live
+ * WebGL contexts (16 on Chrome/Safari) and a page can hold many renderers, so
+ * per-renderer contexts would evict each other. Per flush, every dirty mesh is
+ * shelf-packed into a rect of the offscreen canvas, its triangles are drawn
+ * textured (atlas page texture, premultiplied alpha), and each rect is blitted
+ * onto the mesh's per-part 2d canvas with an unclipped drawImage rect copy.
+ *
+ * Why this exists: Safari antialiases canvas2d clip paths, so the standard
+ * per-triangle clip+transform+drawImage mapping pays a per-triangle AA-mask
+ * cost in the GPU process — invisible to in-callback JS timing, but it
+ * rAF-limits heavy scenes. GL rasterizes shared triangle edges seamlessly
+ * (no clip, no crack overdraw needed), and the remaining canvas2d work is a
+ * plain rect blit.
+ *
+ * The offscreen buffer is scratch space: rects are scissor-cleared and
+ * redrawn every flush and read back in the same task, so neither
+ * preserveDrawingBuffer nor cross-frame content is relied on. The buffer
+ * grows quantized and never shrinks, mirroring the per-part backing policy
+ * (reallocating GPU surfaces per frame is a Safari killer).
+ */
+const VERTEX_SHADER = `
+attribute vec2 aPos;
+attribute vec2 aUV;
+uniform vec2 uResolution;
+varying vec2 vUV;
+void main() {
+  // aPos is in offscreen-canvas device px, top-left origin (matching the
+  // top-left-origin drawImage read of the same rect).
+  vec2 clip = aPos / uResolution * 2.0 - 1.0;
+  gl_Position = vec4(clip.x, -clip.y, 0.0, 1.0);
+  vUV = aUV;
+}`;
+const FRAGMENT_SHADER = `
+precision mediump float;
+uniform sampler2D uTex;
+varying vec2 vUV;
+void main() {
+  gl_FragColor = texture2D(uTex, vUV);
+}`;
+/** Gap between packed rects; blits are 1:1 unfiltered, so 1px is plenty. */
+const GUTTER = 1;
+/** Drawing-buffer growth quantum (device px). */
+const GROW_STEP = 256;
+class MeshGlBlitter {
+    lost = false;
+    canvas = document.createElement('canvas');
+    gl;
+    uResolution;
+    textures = new Map();
+    maxSize;
+    vertexData = new Float32Array(8192);
+    /** Per-job packed rect origins, filled by flush(). */
+    packX = [];
+    packY = [];
+    constructor() {
+        const gl = this.canvas.getContext('webgl', {
+            alpha: true,
+            premultipliedAlpha: true,
+            antialias: false,
+            depth: false,
+            stencil: false,
+            preserveDrawingBuffer: false,
+        });
+        if (!gl)
+            throw new Error('WebGL unavailable');
+        this.gl = gl;
+        // No restore attempt: on loss the renderer falls back to canvas2d and the
+        // backend signature re-dirties every mesh, so frames stay complete.
+        this.canvas.addEventListener('webglcontextlost', () => {
+            this.lost = true;
+        });
+        const program = gl.createProgram();
+        if (!program)
+            throw new Error('createProgram failed');
+        gl.attachShader(program, this.compile(gl.VERTEX_SHADER, VERTEX_SHADER));
+        gl.attachShader(program, this.compile(gl.FRAGMENT_SHADER, FRAGMENT_SHADER));
+        gl.linkProgram(program);
+        if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+            throw new Error(`program link failed: ${gl.getProgramInfoLog(program)}`);
+        }
+        gl.useProgram(program);
+        const uResolution = gl.getUniformLocation(program, 'uResolution');
+        if (!uResolution)
+            throw new Error('uResolution not found');
+        this.uResolution = uResolution;
+        gl.uniform1i(gl.getUniformLocation(program, 'uTex'), 0);
+        // Static state: this context does exactly one thing, set it up once.
+        // Interleaved [x, y, u, v] vertices in a single dynamic buffer.
+        gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
+        const aPos = gl.getAttribLocation(program, 'aPos');
+        const aUV = gl.getAttribLocation(program, 'aUV');
+        gl.enableVertexAttribArray(aPos);
+        gl.enableVertexAttribArray(aUV);
+        gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 16, 0);
+        gl.vertexAttribPointer(aUV, 2, gl.FLOAT, false, 16, 8);
+        // Premultiplied source-over, matching canvas2d triangle compositing.
+        gl.enable(gl.BLEND);
+        gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+        gl.enable(gl.SCISSOR_TEST);
+        gl.clearColor(0, 0, 0, 0);
+        gl.activeTexture(gl.TEXTURE0);
+        this.maxSize = Math.min(gl.getParameter(gl.MAX_RENDERBUFFER_SIZE) || 4096, 8192);
+    }
+    /**
+     * Rasterize every job into the offscreen buffer, then blit each rect onto
+     * its per-part canvas. Returns false when the context is lost (or the jobs
+     * cannot fit) so the caller can rasterize the batch on the canvas2d path.
+     */
+    flush(jobs) {
+        const gl = this.gl;
+        if (this.lost || gl.isContextLost())
+            return false;
+        // Shelf-pack, tallest first (indices keep job order for the draw pass).
+        let width = Math.max(512, this.canvas.width);
+        for (const job of jobs)
+            width = Math.max(width, job.width + GUTTER * 2);
+        if (width > this.maxSize)
+            return false;
+        const order = jobs.map((_, i) => i).sort((a, b) => jobs[b].height - jobs[a].height);
+        const packX = (this.packX = new Array(jobs.length));
+        const packY = (this.packY = new Array(jobs.length));
+        let shelfX = GUTTER;
+        let shelfY = GUTTER;
+        let shelfH = 0;
+        let height = GUTTER;
+        for (const i of order) {
+            const job = jobs[i];
+            if (shelfX + job.width + GUTTER > width) {
+                shelfY += shelfH + GUTTER;
+                shelfX = GUTTER;
+                shelfH = 0;
+            }
+            packX[i] = shelfX;
+            packY[i] = shelfY;
+            shelfX += job.width + GUTTER;
+            if (job.height > shelfH)
+                shelfH = job.height;
+            if (shelfY + job.height + GUTTER > height)
+                height = shelfY + job.height + GUTTER;
+        }
+        if (height > this.maxSize)
+            return false;
+        // Grow-only quantized drawing buffer. Resizing clears it, which is fine:
+        // every rect below is cleared and redrawn anyway.
+        if (width > this.canvas.width || height > this.canvas.height) {
+            this.canvas.width = Math.min(this.maxSize, Math.ceil(width / GROW_STEP) * GROW_STEP);
+            this.canvas.height = Math.min(this.maxSize, Math.ceil(Math.max(height, this.canvas.height) / GROW_STEP) * GROW_STEP);
+        }
+        const bufW = this.canvas.width;
+        const bufH = this.canvas.height;
+        gl.viewport(0, 0, bufW, bufH);
+        gl.uniform2f(this.uResolution, bufW, bufH);
+        // Build one interleaved vertex array for the whole batch (unindexed —
+        // meshes are a few hundred triangles, expansion is cheaper than managing
+        // index buffers).
+        let floats = 0;
+        for (const job of jobs)
+            floats += job.triangles.length * 4;
+        if (this.vertexData.length < floats) {
+            this.vertexData = new Float32Array(1 << Math.ceil(Math.log2(floats)));
+        }
+        const data = this.vertexData;
+        let f = 0;
+        for (let i = 0; i < jobs.length; i++) {
+            const { vertices, uvs, triangles, ratio } = jobs[i];
+            const ox = packX[i];
+            const oy = packY[i];
+            for (let t = 0; t < triangles.length; t++) {
+                const vi = triangles[t] * 2;
+                data[f++] = ox + vertices[vi] * ratio;
+                data[f++] = oy + vertices[vi + 1] * ratio;
+                data[f++] = uvs[vi];
+                data[f++] = uvs[vi + 1];
+            }
+        }
+        gl.bufferData(gl.ARRAY_BUFFER, data.subarray(0, floats), gl.DYNAMIC_DRAW);
+        let boundPage = null;
+        let first = 0;
+        for (let i = 0; i < jobs.length; i++) {
+            const job = jobs[i];
+            if (job.page !== boundPage) {
+                gl.bindTexture(gl.TEXTURE_2D, this.textureFor(job.page));
+                boundPage = job.page;
+            }
+            // Scissor is bottom-left origin; pack coords are top-left origin.
+            gl.scissor(packX[i], bufH - packY[i] - job.height, job.width, job.height);
+            gl.clear(gl.COLOR_BUFFER_BIT);
+            gl.drawArrays(gl.TRIANGLES, first, job.triangles.length);
+            first += job.triangles.length;
+        }
+        // If the context died mid-batch the draws above were no-ops; report it
+        // before blitting stale/blank rects onto the part canvases.
+        if (gl.isContextLost()) {
+            this.lost = true;
+            return false;
+        }
+        // Blit each rect onto its per-part canvas: same-task read (no
+        // preserveDrawingBuffer needed), 1:1 device px (no filtering).
+        for (let i = 0; i < jobs.length; i++) {
+            const job = jobs[i];
+            const ctx = job.canvas.getContext('2d');
+            if (!ctx)
+                continue;
+            ctx.setTransform(1, 0, 0, 1, 0, 0);
+            // Clear the full backing: the previous raster may have been larger.
+            ctx.clearRect(0, 0, job.canvas.width, job.canvas.height);
+            ctx.drawImage(this.canvas, packX[i], packY[i], job.width, job.height, 0, 0, job.width, job.height);
+        }
+        return true;
+    }
+    compile(type, source) {
+        const gl = this.gl;
+        const shader = gl.createShader(type);
+        if (!shader)
+            throw new Error('createShader failed');
+        gl.shaderSource(shader, source);
+        gl.compileShader(shader);
+        if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+            throw new Error(`shader compile failed: ${gl.getShaderInfoLog(shader)}`);
+        }
+        return shader;
+    }
+    textureFor(page) {
+        let texture = this.textures.get(page);
+        if (texture)
+            return texture;
+        const gl = this.gl;
+        texture = gl.createTexture();
+        if (!texture)
+            throw new Error('createTexture failed');
+        gl.bindTexture(gl.TEXTURE_2D, texture);
+        // Premultiply at upload so blending and the premultiplied canvas agree.
+        gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, 1);
+        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 0);
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, page);
+        // Linear, no mips, clamped — NPOT-safe in WebGL1.
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+        this.textures.set(page, texture);
+        return texture;
+    }
+}
+let shared;
+/**
+ * The module-level blitter, created on first use. Returns null when WebGL is
+ * unavailable or the shared context has been lost — callers then stay on the
+ * canvas2d path.
+ */
+export function getMeshGlBlitter() {
+    if (shared === undefined) {
+        try {
+            shared = new MeshGlBlitter();
+        }
+        catch {
+            shared = null;
+        }
+    }
+    return shared && !shared.lost ? shared : null;
+}
+//# sourceMappingURL=MeshGlBlitter.js.map

package/dist/MeshGlBlitter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MeshGlBlitter.js","sourceRoot":"","sources":["../src/MeshGlBlitter.ts"],"names":[],"mappings":"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"}

package/dist/SpineHtmlRenderer.d.ts

@@ -1,5 +1,7 @@
 import { type Skeleton } from '@esotericsoftware/spine-core';
 import type { RegionImage } from './DomTexture';
+/** Rasterizer used for the mesh (deform) tier. */
+export type MeshBackend = 'canvas2d' | 'webgl';
 /**
  * Renders a spine-core Skeleton as DOM, split by slot type:
  *
@@ -7,9 +9,11 @@ import type { RegionImage } from './DomTexture';
  *   posed with a single CSS matrix() write per frame — exact, since bone
  *   transforms are affine.
  * - Mesh attachments (deform parts) each get a small per-part <canvas> sized
- *   to the mesh's world bounding box, redrawn per frame with the standard
- *   per-triangle clip+transform+drawImage mapping. Frames where the
- *   canvas-space vertices are unchanged reuse the previous raster.
+ *   to the mesh's world bounding box, redrawn per frame — either with the
+ *   standard per-triangle clip+transform+drawImage mapping (default), or via
+ *   a shared offscreen WebGL canvas that rect-blits into the same per-part
+ *   canvases (meshBackend = 'webgl'). Frames where the canvas-space vertices
+ *   are unchanged reuse the previous raster on both backends.
  *
  * Both element kinds share one stacking context, so draw order interleaves
  * freely via z-index (rear hair canvas < torso img < front hair canvas).
@@ -33,6 +37,12 @@ export declare class SpineHtmlRenderer {
     meshCount: number;
     /** Mesh canvases that reused their previous raster last frame. */
     meshReuseCount: number;
+    /**
+     * Mesh canvas backing stores (re)allocated last frame. Should drop to zero
+     * once an animation reaches its steady state; a persistent nonzero value
+     * means GPU surfaces are being recreated per frame (a Safari killer).
+     */
+    canvasReallocCount: number;
     /** Triangles rasterized last frame. */
     triangleCount: number;
     /**
@@ -48,7 +58,26 @@ export declare class SpineHtmlRenderer {
      * resolution instead of over- or under-sampling.
      */
     pixelRatio: number;
+    /**
+     * Rasterizer for the mesh (deform) tier. 'canvas2d' (default) maps each
+     * triangle with clip+transform+drawImage directly on the per-part canvas.
+     * 'webgl' rasterizes every dirty mesh into one shared offscreen WebGL
+     * canvas and rect-blits each mesh back onto its per-part canvas — the DOM
+     * structure and all element-level behavior (z-index interleave, tint
+     * filter, mix-blend-mode, dirty-skip) are identical, only the raster step
+     * changes. Motivation: Safari antialiases canvas2d clip paths, so the
+     * per-triangle clip mapping pays a per-triangle AA-mask cost in the GPU
+     * process that rAF-limits heavy scenes; GL rasterizes shared edges
+     * seamlessly (no clip, no crack overdraw) and the blit is an unclipped
+     * rect copy. Falls back to 'canvas2d' when WebGL is unavailable or the
+     * shared context is lost — see meshBackendActive.
+     */
+    meshBackend: MeshBackend;
+    /** Backend that actually rasterized the mesh tier during the last render(). */
+    meshBackendActive: MeshBackend;
     private readonly views;
+    private readonly pendingJobs;
+    private readonly pendingViews;
     private scratchVertices;
     private tintDefs;
     /**
@@ -59,9 +88,18 @@ export declare class SpineHtmlRenderer {
      */
     constructor(root: HTMLElement, regionImages: Map<string, RegionImage>);
     render(skeleton: Skeleton): void;
+    /**
+     * Removes every element this renderer added to the root (slot elements and
+     * the tint filter defs). The region bitmaps are deliberately untouched: the
+     * map is the caller's, and one map is normally shared by many renderers
+     * (disposing one instance must not blind the others). Free the unpacked
+     * blob URLs with revokeRegions() once no renderer needs them.
+     */
     dispose(): void;
     private renderRegion;
     private renderMesh;
+    /** The canvas2d raster path: clear the backing, map each triangle. */
+    private rasterizeMesh2d;
     /**
      * Standard canvas triangle texture mapping (same math as the official
      * spine-canvas renderer): derive the affine that sends the triangle's

package/dist/SpineHtmlRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SpineHtmlRenderer.d.ts","sourceRoot":"","sources":["../src/SpineHtmlRenderer.ts"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,QAAQ,EAId,MAAM,8BAA8B,CAAC;AACtC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AA6DhD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,qBAAa,iBAAiB;IAkC1B,OAAO,CAAC,QAAQ,CAAC,IAAI;IACrB,OAAO,CAAC,QAAQ,CAAC,YAAY;IAlC/B,kEAAkE;IAClE,aAAa,SAAK;IAClB,2CAA2C;IAC3C,SAAS,SAAK;IACd,kEAAkE;IAClE,cAAc,SAAK;IACnB,uCAAuC;IACvC,aAAa,SAAK;IAClB;;;;OAIG;IACH,cAAc,SAAO;IACrB;;;;;OAKG;IACH,UAAU,SAA+D;IAEzE,OAAO,CAAC,QAAQ,CAAC,KAAK,CAA6B;IACnD,OAAO,CAAC,eAAe,CAAyB;IAChD,OAAO,CAAC,QAAQ,CAA8B;IAE9C;;;;;OAKG;gBAEgB,IAAI,EAAE,WAAW,EACjB,YAAY,EAAE,GAAG,CAAC,MAAM,EAAE,WAAW,CAAC;IAGzD,MAAM,CAAC,QAAQ,EAAE,QAAQ,GAAG,IAAI;IA2BhC,OAAO,IAAI,IAAI;IASf,OAAO,CAAC,YAAY;IA8CpB,OAAO,CAAC,UAAU;IAsHlB;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,YAAY;IAwCpB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,WAAW;IAmDnB,OAAO,CAAC,aAAa;IAyBrB,OAAO,CAAC,IAAI;IA6CZ,OAAO,CAAC,IAAI;CAOb"}
+{"version":3,"file":"SpineHtmlRenderer.d.ts","sourceRoot":"","sources":["../src/SpineHtmlRenderer.ts"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,QAAQ,EAId,MAAM,8BAA8B,CAAC;AACtC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAGhD,kDAAkD;AAClD,MAAM,MAAM,WAAW,GAAG,UAAU,GAAG,OAAO,CAAC;AAiE/C;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,qBAAa,iBAAiB;IA2D1B,OAAO,CAAC,QAAQ,CAAC,IAAI;IACrB,OAAO,CAAC,QAAQ,CAAC,YAAY;IA3D/B,kEAAkE;IAClE,aAAa,SAAK;IAClB,2CAA2C;IAC3C,SAAS,SAAK;IACd,kEAAkE;IAClE,cAAc,SAAK;IACnB;;;;OAIG;IACH,kBAAkB,SAAK;IACvB,uCAAuC;IACvC,aAAa,SAAK;IAClB;;;;OAIG;IACH,cAAc,SAAO;IACrB;;;;;OAKG;IACH,UAAU,SAA+D;IACzE;;;;;;;;;;;;;OAaG;IACH,WAAW,EAAE,WAAW,CAAc;IACtC,+EAA+E;IAC/E,iBAAiB,EAAE,WAAW,CAAc;IAE5C,OAAO,CAAC,QAAQ,CAAC,KAAK,CAA6B;IACnD,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAqB;IACjD,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAkB;IAC/C,OAAO,CAAC,eAAe,CAAyB;IAChD,OAAO,CAAC,QAAQ,CAA8B;IAE9C;;;;;OAKG;gBAEgB,IAAI,EAAE,WAAW,EACjB,YAAY,EAAE,GAAG,CAAC,MAAM,EAAE,WAAW,CAAC;IAGzD,MAAM,CAAC,QAAQ,EAAE,QAAQ,GAAG,IAAI;IA4ChC;;;;;;OAMG;IACH,OAAO,IAAI,IAAI;IASf,OAAO,CAAC,YAAY;IA8CpB,OAAO,CAAC,UAAU;IAsIlB,sEAAsE;IACtE,OAAO,CAAC,eAAe;IA+BvB;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,YAAY;IAwCpB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,WAAW;IAmDnB,OAAO,CAAC,aAAa;IAyBrB,OAAO,CAAC,IAAI;IA+CZ,OAAO,CAAC,IAAI;CAOb"}

package/dist/SpineHtmlRenderer.js

@@ -1,4 +1,5 @@
 import { BlendMode, ClippingAttachment, MeshAttachment, RegionAttachment, } from '@esotericsoftware/spine-core';
+import { getMeshGlBlitter } from './MeshGlBlitter';
 const regionVertices = new Float32Array(8);
 const SVG_NS = 'http://www.w3.org/2000/svg';
 /** Unique tint-filter ids across renderer instances (ids are document-global). */
@@ -26,9 +27,11 @@ const BLEND_CSS = {
  *   posed with a single CSS matrix() write per frame — exact, since bone
  *   transforms are affine.
  * - Mesh attachments (deform parts) each get a small per-part <canvas> sized
- *   to the mesh's world bounding box, redrawn per frame with the standard
- *   per-triangle clip+transform+drawImage mapping. Frames where the
- *   canvas-space vertices are unchanged reuse the previous raster.
+ *   to the mesh's world bounding box, redrawn per frame — either with the
+ *   standard per-triangle clip+transform+drawImage mapping (default), or via
+ *   a shared offscreen WebGL canvas that rect-blits into the same per-part
+ *   canvases (meshBackend = 'webgl'). Frames where the canvas-space vertices
+ *   are unchanged reuse the previous raster on both backends.
  *
  * Both element kinds share one stacking context, so draw order interleaves
  * freely via z-index (rear hair canvas < torso img < front hair canvas).
@@ -52,6 +55,12 @@ export class SpineHtmlRenderer {
     meshCount = 0;
     /** Mesh canvases that reused their previous raster last frame. */
     meshReuseCount = 0;
+    /**
+     * Mesh canvas backing stores (re)allocated last frame. Should drop to zero
+     * once an animation reaches its steady state; a persistent nonzero value
+     * means GPU surfaces are being recreated per frame (a Safari killer).
+     */
+    canvasReallocCount = 0;
     /** Triangles rasterized last frame. */
     triangleCount = 0;
     /**
@@ -67,7 +76,26 @@ export class SpineHtmlRenderer {
      * resolution instead of over- or under-sampling.
      */
     pixelRatio = typeof devicePixelRatio === 'number' ? devicePixelRatio : 1;
+    /**
+     * Rasterizer for the mesh (deform) tier. 'canvas2d' (default) maps each
+     * triangle with clip+transform+drawImage directly on the per-part canvas.
+     * 'webgl' rasterizes every dirty mesh into one shared offscreen WebGL
+     * canvas and rect-blits each mesh back onto its per-part canvas — the DOM
+     * structure and all element-level behavior (z-index interleave, tint
+     * filter, mix-blend-mode, dirty-skip) are identical, only the raster step
+     * changes. Motivation: Safari antialiases canvas2d clip paths, so the
+     * per-triangle clip mapping pays a per-triangle AA-mask cost in the GPU
+     * process that rAF-limits heavy scenes; GL rasterizes shared edges
+     * seamlessly (no clip, no crack overdraw) and the blit is an unclipped
+     * rect copy. Falls back to 'canvas2d' when WebGL is unavailable or the
+     * shared context is lost — see meshBackendActive.
+     */
+    meshBackend = 'canvas2d';
+    /** Backend that actually rasterized the mesh tier during the last render(). */
+    meshBackendActive = 'canvas2d';
     views = new Map();
+    pendingJobs = [];
+    pendingViews = [];
     scratchVertices = new Float32Array(256);
     tintDefs = null;
     /**
@@ -84,7 +112,10 @@ export class SpineHtmlRenderer {
         this.clipSkipCount = 0;
         this.meshCount = 0;
         this.meshReuseCount = 0;
+        this.canvasReallocCount = 0;
         this.triangleCount = 0;
+        const blitter = this.meshBackend === 'webgl' ? getMeshGlBlitter() : null;
+        this.meshBackendActive = blitter ? 'webgl' : 'canvas2d';
         const drawOrder = skeleton.drawOrder.appliedPose;
         for (let i = 0, n = drawOrder.length; i < n; i++) {
             const slot = drawOrder[i];
@@ -106,7 +137,27 @@ export class SpineHtmlRenderer {
                 this.hide(slot);
             }
         }
+        if (this.pendingJobs.length) {
+            if (!blitter || !blitter.flush(this.pendingJobs)) {
+                // Context lost mid-frame: rasterize this batch on the 2d path so the
+                // frame stays complete; the next render() re-selects the backend.
+                for (let i = 0; i < this.pendingJobs.length; i++) {
+                    const job = this.pendingJobs[i];
+                    this.pendingViews[i].meshBackendDrawn = 'canvas2d';
+                    this.rasterizeMesh2d(job.canvas, job.page, job.vertices, job.uvs, job.triangles, job.ratio);
+                }
+            }
+            this.pendingJobs.length = 0;
+            this.pendingViews.length = 0;
+        }
     }
+    /**
+     * Removes every element this renderer added to the root (slot elements and
+     * the tint filter defs). The region bitmaps are deliberately untouched: the
+     * map is the caller's, and one map is normally shared by many renderers
+     * (disposing one instance must not blind the others). Free the unpacked
+     * blob URLs with revokeRegions() once no renderer needs them.
+     */
     dispose() {
         for (const view of this.views.values())
             view.el.remove();
@@ -190,19 +241,35 @@ export class SpineHtmlRenderer {
         const view = this.view(slot, 'canvas');
         const canvas = view.el;
         const ratio = this.pixelRatio;
-        const backingW = Math.max(1, Math.round(w * ratio));
-        const backingH = Math.max(1, Math.round(h * ratio));
         let dirty = view.meshAttachment !== attachment ||
             view.meshSequenceIndex !== sequenceIndex ||
             view.meshExpand !== this.triangleExpand ||
-            view.meshVertexCount !== count;
-        if (view.canvasW !== backingW || view.canvasH !== backingH) {
-            view.canvasW = backingW;
-            view.canvasH = backingH;
-            canvas.width = backingW; // resizing also clears the canvas
-            canvas.height = backingH;
-            canvas.style.width = `${w}px`;
-            canvas.style.height = `${h}px`;
+            view.meshVertexCount !== count ||
+            view.meshBackendDrawn !== this.meshBackendActive;
+        // The backing store only grows, in 32-device-px steps. Setting
+        // canvas.width recreates the GPU surface, and a deforming mesh changes
+        // its bbox every frame — reallocating every mesh canvas per frame
+        // stalled real Safari to ~3 fps while the JS split showed ~4 ms (the
+        // cost lives in the compositor, invisible to in-callback timing). With
+        // grow-only quantized backing, steady-state animation reallocates
+        // nothing. The CSS size mirrors the whole backing so the pixel mapping
+        // stays 1:1; the mesh draws into the top-left w×h logical region and
+        // the rest stays transparent.
+        const needW = Math.max(1, Math.round(w * ratio));
+        const needH = Math.max(1, Math.round(h * ratio));
+        if (needW > view.canvasW || needH > view.canvasH || view.meshRatio !== ratio) {
+            // 25% slack: at low fps the animation is sampled sparsely, so new bbox
+            // maxima keep being discovered for many seconds — allocate ahead of the
+            // curve instead of chasing it.
+            const step = 32;
+            view.canvasW = Math.ceil(Math.max(needW * 1.25, view.canvasW) / step) * step;
+            view.canvasH = Math.ceil(Math.max(needH * 1.25, view.canvasH) / step) * step;
+            view.meshRatio = ratio;
+            canvas.width = view.canvasW;
+            canvas.height = view.canvasH;
+            canvas.style.width = `${view.canvasW / ratio}px`;
+            canvas.style.height = `${view.canvasH / ratio}px`;
+            this.canvasReallocCount++;
             dirty = true;
         }
         // Canvas-space vertices: identical values mean last frame's raster is
@@ -232,26 +299,52 @@ export class SpineHtmlRenderer {
             view.meshSequenceIndex = sequenceIndex;
             view.meshExpand = this.triangleExpand;
             view.meshVertexCount = count;
-            const ctx = canvas.getContext('2d');
-            if (!ctx)
-                return;
-            ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
-            ctx.clearRect(0, 0, w, h);
+            view.meshBackendDrawn = this.meshBackendActive;
             const uvs = sequence.getUVs(sequenceIndex);
             const triangles = attachment.triangles;
-            const uw = page.width - 1;
-            const uh = page.height - 1;
-            for (let t = 0; t < triangles.length; t += 3) {
-                const i0 = triangles[t] * 2;
-                const i1 = triangles[t + 1] * 2;
-                const i2 = triangles[t + 2] * 2;
-                this.drawTriangle(ctx, page, rel[i0], rel[i0 + 1], uvs[i0] * uw, uvs[i0 + 1] * uh, rel[i1], rel[i1 + 1], uvs[i1] * uw, uvs[i1 + 1] * uh, rel[i2], rel[i2 + 1], uvs[i2] * uw, uvs[i2 + 1] * uh);
+            if (this.meshBackendActive === 'webgl') {
+                // Queued, not drawn: render() flushes the whole batch through the
+                // shared GL context once the slot loop is done. `rel` is this view's
+                // own signature array — nothing mutates it before the flush.
+                this.pendingJobs.push({
+                    canvas,
+                    page,
+                    vertices: rel,
+                    uvs,
+                    triangles,
+                    ratio,
+                    width: Math.min(view.canvasW, Math.ceil(w * ratio)),
+                    height: Math.min(view.canvasH, Math.ceil(h * ratio)),
+                });
+                this.pendingViews.push(view);
+            }
+            else {
+                this.rasterizeMesh2d(canvas, page, rel, uvs, triangles, ratio);
             }
             this.meshCount++;
             this.triangleCount += triangles.length / 3;
         }
         this.applyCommon(view, slot, pose, attachment.color, skeleton, zIndex);
     }
+    /** The canvas2d raster path: clear the backing, map each triangle. */
+    rasterizeMesh2d(canvas, page, vertices, uvs, triangles, ratio) {
+        const ctx = canvas.getContext('2d');
+        if (!ctx)
+            return;
+        // Clear the full backing: the previous frame's bbox (and so its drawn
+        // region) may have been larger than today's.
+        ctx.setTransform(1, 0, 0, 1, 0, 0);
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
+        const uw = page.width - 1;
+        const uh = page.height - 1;
+        for (let t = 0; t < triangles.length; t += 3) {
+            const i0 = triangles[t] * 2;
+            const i1 = triangles[t + 1] * 2;
+            const i2 = triangles[t + 2] * 2;
+            this.drawTriangle(ctx, page, vertices[i0], vertices[i0 + 1], uvs[i0] * uw, uvs[i0 + 1] * uh, vertices[i1], vertices[i1 + 1], uvs[i1] * uw, uvs[i1 + 1] * uh, vertices[i2], vertices[i2 + 1], uvs[i2] * uw, uvs[i2 + 1] * uh);
+        }
+    }
     /**
      * Standard canvas triangle texture mapping (same math as the official
      * spine-canvas renderer): derive the affine that sends the triangle's
@@ -404,10 +497,12 @@ export class SpineHtmlRenderer {
                 tintMatrix: null,
                 canvasW: 0,
                 canvasH: 0,
+                meshRatio: -1,
                 meshAttachment: null,
                 meshSequenceIndex: -1,
                 meshExpand: -1,
                 meshVertexCount: -1,
+                meshBackendDrawn: '',
                 meshVertices: new Float64Array(0),
             };
             this.views.set(slot, view);