rig-play 1.8.1 → 1.9.0

package/README.md

@@ -38,7 +38,21 @@ links to either earlier name keep working.
 
 ### Measured
 
-Measured on the 0.x line, on the spineboy exports it then played (PoC, Apple silicon —
+**The element mode's mesh backend is `'webgl'` by default since 1.9 (#109)**, read off
+macOS Safari on 2026-10-13 (1.8.2, gallery rig `look-packed`: 4 meshes, 464
+triangles, `sweep`; the demo's stats line after a 30 s settle; the Mac was also
+serving the builds, so absolute fps is low and only the comparison is the point —
+readings verbatim on #25):
+
+| macOS Safari | 1 rig | 10 rigs (4,640 triangles) |
+| --- | --: | --: |
+| canvas2d mesh backend | 21–26 fps | 2–3 fps |
+| webgl mesh backend | 60 fps | 58 fps |
+
+Nothing is claimed here for mobile browsers: no phone or tablet has been measured
+on the 1.x line.
+
+The numbers below are older: measured on the 0.x line, on the spineboy exports it then played (PoC, Apple silicon —
 headless and on-device numbers are labeled, they do **not** substitute for each other).
 The renderer tiers they describe carried over; they have not been re-measured since the
 player moved to rigc's model (#60):
@@ -103,9 +117,12 @@ default stays `dom`.
   bounds, interleaved with the rigid `<img>` slots in one stacking context — the DOM
   handles the bones, a rasterizer handles the warps
 - ✅ Blend modes via `mix-blend-mode` (additive = `plus-lighter`)
-- ✅ Crack-free mesh seams on clip-antialiasing browsers (Safari): each triangle's
-  clip polygon is expanded 0.5px from its centroid so neighbours overlap — the
-  texture is continuous across shared edges, so the overlap is invisible
+- ✅ Crack-free mesh seams on the canvas2d backend: canvas2d antialiases each
+  triangle's clip edge, so two triangles sharing an edge each leave it partly
+  transparent and the background shows through as a hairline — plainest over a
+  light background behind light art (#104). Each edge of a triangle's clip
+  polygon is moved 0.5px outward along its own normal so neighbours overlap —
+  the texture is continuous across shared edges, so the overlap is invisible
   (`?expand=0` shows the cracks for comparison)
 - ✅ RGB tinting (skeleton × slot × attachment color) via an SVG `feColorMatrix`
   reference filter per element — an exact channel multiply that works identically on
@@ -147,8 +164,8 @@ default stays `dom`.
   37 fps, meshed ×10 = 3–4 fps with JS flat at ~4–5 ms — put the real cost in the
   GPU process: Safari antialiases canvas2d **clip paths**, so the per-triangle clip
   mapping pays a per-triangle AA-mask tax (the same AA that caused the seam cracks)
-- ✅ Optional WebGL blit backend for the mesh tier: `renderer.meshBackend =
-  'webgl'` (default stays `'canvas2d'`). All dirty meshes are shelf-packed into
+- ✅ WebGL blit backend for the mesh tier, the default since 1.9 (#109;
+  `renderer.meshBackend = 'canvas2d'` keeps the 2d raster). All dirty meshes are shelf-packed into
   **one shared offscreen WebGL context** (module-level — browsers cap contexts at
   ~16), drawn as textured triangles with premultiplied alpha, then rect-blitted
   onto the same per-part canvases with an unclipped `drawImage` — cheap on Safari.
@@ -583,12 +600,13 @@ onto shared pages instead. Both play here, unchanged:
   (Σ width × height), computed on demand. This is what `pixelRatio` moves
   quadratically, and the cheapest way to see an oversampling stage; the demo
   prints it in the stats line as `backing N Mpx`.
-- `renderer.meshBackend` — `'canvas2d'` (default) or `'webgl'`; same output, but
-  heavy deforming scenes on Safari want `'webgl'` (see Measured above). Falls back
-  to canvas2d automatically when WebGL is unavailable. Switching re-rasters every
+- `renderer.meshBackend` — `'webgl'` (default since 1.9) or `'canvas2d'`; same
+  output, and on macOS Safari webgl holds 58–60 fps where canvas2d reads 2–26
+  (see Measured above). Falls back to canvas2d automatically when WebGL is
+  unavailable or the shared context is lost; `meshBackendActive` says which drew. Switching re-rasters every
   mesh once (no reallocation), so it is fine to expose as a user setting.
-- `renderer.triangleExpand` — clip overdraw in px that closes antialiased mesh
-  seams (default 0.5). Also re-rasters every mesh once when changed.
+- `renderer.triangleExpand` — how far (canvas px) each triangle edge's clip is
+  moved outward to close antialiased mesh seams (default 0.5). Also re-rasters every mesh once when changed.
 - `renderer.clipping` — apply the clips the frame carries (default `true`).
   Which slots a clip covers is decided where the frame is made — the player's
   adapter walks the draw order the way the runtime's draw loop does (one clip in
@@ -640,6 +658,30 @@ on-device (Chromium, dpr 2, stage under `scale(0.25)`, ~2.2 M CSS px on screen):
 | 92 meshes | `devicePixelRatio` (2) | 141.1 Mpx | 36–39 |
 | 92 meshes | `dpr × zoom` (0.5) | 9.1 Mpx | 60–61 |
 
+## Coming from 1.8: meshes draw through WebGL by default
+
+From 1.9 the element mode rasterizes its meshes through the one shared WebGL
+context unless told otherwise (`DomRenderer.meshBackend` defaults to `'webgl'`,
+#109). The picture is the same within the parity suite's bounds, the API is
+unchanged, and canvas2d is still drawn wherever WebGL is unavailable or the
+context is lost. What a caller can notice:
+
+- The page holds one more WebGL context (one for every mesh of every player, not
+  one per player). A page already near the browser's cap of about 16 live
+  contexts can lose its oldest one when this one is created.
+- `meshBackendActive` reads `'webgl'` where it read `'canvas2d'`.
+- Frame cost moves from the page to the GPU blit (see *Measured*).
+
+To keep 1.8's raster, set it back, up front or on a live player:
+
+```ts
+const player = new RigPlayer(root, assets, { meshBackend: 'canvas2d' });
+// or, on a renderer you hold:
+renderer.meshBackend = 'canvas2d';
+```
+
+The canvas mode was already webgl by default and does not change.
+
 ## Coming from spine-html 0.8
 
 This is not a drop-in upgrade. 0.8 drew a Spine export (`.json` or `.skel`, plus its
@@ -692,7 +734,7 @@ name, and unloading is still elements first, bitmaps second.
 | `renderer.pixelRatio` | `player.renderer.pixelRatio` | On both renderers. Carried over when `player.mode` changes. |
 | `renderer.syncPixelRatio()` | `player.renderer.syncPixelRatio()` | On both renderers, the same meaning and the same deadband (since 1.3.0; before it, DOM mode only). |
 | `renderer.meshBackingPixels` | `DomRenderer.meshBackingPixels` | DOM mode only. |
-| `renderer.meshBackend`, `meshBackendActive`, type `MeshBackend` | `DomRenderer.meshBackend`, `meshBackendActive`, type `MeshBackend` | Same values (`'canvas2d'` default, `'webgl'`). Also settable up front as `RigPlayerOptions.meshBackend`. |
+| `renderer.meshBackend`, `meshBackendActive`, type `MeshBackend` | `DomRenderer.meshBackend`, `meshBackendActive`, type `MeshBackend` | Same values; the default is `'webgl'` since 1.9 (`'canvas2d'` before). Also settable up front as `RigPlayerOptions.meshBackend`. |
 | `renderer.triangleExpand` | `DomRenderer.triangleExpand` | Same default (0.5). |
 | `renderer.clipping` | `player.renderer.clipping` | On both renderers. Carried over when `player.mode` changes. |
 | `clipCount`, `clipSkipCount`, `clipWriteCount` | same names on `DomRenderer` | `clipSkipCount` counts less than it did: a second clip met while one is in force, and a clip on an inactive bone, no longer reach the frame, so they are not counted. |

package/dist/DomRenderer.d.ts

@@ -82,9 +82,10 @@ export declare class DomRenderer {
     /** Triangles rasterized last frame. */
     triangleCount: number;
     /**
-     * How far (px) each triangle's clip polygon is expanded from its centroid.
-     * Closes antialiased-clip cracks between adjacent triangles (Safari);
-     * set to 0 to see them.
+     * How far (canvas px) each edge of a triangle's clip polygon is moved
+     * outward along its normal. Closes the antialiased-clip cracks between
+     * adjacent triangles, through which the background shows (#104); set to 0
+     * to see them.
      */
     triangleExpand: number;
     /**
@@ -96,9 +97,9 @@ export declare class DomRenderer {
      */
     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
+     * Rasterizer for the mesh (deform) tier. 'canvas2d' maps each triangle
+     * with clip+transform+drawImage directly on the per-part canvas. 'webgl'
+     * (default) 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
@@ -107,7 +108,8 @@ export declare class DomRenderer {
      * 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.
+     * shared context is lost — see meshBackendActive. The default since 1.9
+     * (#109); before it, 'canvas2d'. Set 'canvas2d' to keep the 2d raster.
      */
     meshBackend: MeshBackend;
     /** Backend that actually rasterized the mesh tier during the last render(). */
@@ -294,9 +296,10 @@ export declare class DomRenderer {
      * texel of bilinear support is added, and the result is floor/ceil'd to texel
      * boundaries (so the sub-rect itself resamples nothing) and clamped to the
      * page. A fixed pad would not do: the texture-space reach of the expansion is
-     * `triangleExpand` times the local texels-per-canvas-unit, which on the
-     * demo's own meshes ranges from ~0.26 texels on a typical triangle to ~8.6 on
-     * a foreshortened one. Under-padding lets the rim of the overdraw sample
+     * `triangleExpand` times the local texels-per-canvas-unit (up to
+     * `MITRE_LIMIT` times that at a sharp corner), which on the demo's own meshes
+     * ranged from ~0.26 texels on a typical triangle to ~8.6 on a foreshortened
+     * one. Under-padding lets the rim of the overdraw sample
      * nothing, which brings back the very seams the overdraw exists to close.
      *
      * No half-texel offset is applied to the incoming u/v: the `(i + 0.5) / size`

package/dist/DomRenderer.d.ts.map

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

package/dist/index.js

@@ -6845,13 +6845,41 @@ function getMeshGlBlitter() {
 const regionVertices = new Float32Array(8);
 const SVG_NS = "http://www.w3.org/2000/svg";
 let tintFilterSeq = 0;
-function expandPoint(x, y, cx, cy, amount) {
-  const dx = x - cx;
-  const dy = y - cy;
-  const len = Math.sqrt(dx * dx + dy * dy);
-  if (len < 1e-6) return [x, y];
-  const s = amount / len;
-  return [x + dx * s, y + dy * s];
+const MITRE_LIMIT = 4;
+const offsetCorners = new Float64Array(6);
+function offsetTriangle(x0, y0, x1, y1, x2, y2, amount) {
+  const out = offsetCorners;
+  out[0] = x0;
+  out[1] = y0;
+  out[2] = x1;
+  out[3] = y1;
+  out[4] = x2;
+  out[5] = y2;
+  const area = (x1 - x0) * (y2 - y0) - (x2 - x0) * (y1 - y0);
+  if (amount === 0 || area === 0) return out;
+  const sign = area > 0 ? 1 : -1;
+  let len = Math.hypot(x1 - x0, y1 - y0);
+  const n0x = (y1 - y0) / len * sign, n0y = -(x1 - x0) / len * sign;
+  len = Math.hypot(x2 - x1, y2 - y1);
+  const n1x = (y2 - y1) / len * sign, n1y = -(x2 - x1) / len * sign;
+  len = Math.hypot(x0 - x2, y0 - y2);
+  const n2x = (y0 - y2) / len * sign, n2y = -(x0 - x2) / len * sign;
+  offsetCorner(out, 0, n2x, n2y, n0x, n0y, amount);
+  offsetCorner(out, 2, n0x, n0y, n1x, n1y, amount);
+  offsetCorner(out, 4, n1x, n1y, n2x, n2y, amount);
+  return out;
+}
+function offsetCorner(out, i, ax, ay, bx, by, amount) {
+  const k = amount / (1 + ax * bx + ay * by);
+  let dx = (ax + bx) * k, dy = (ay + by) * k;
+  const reach = Math.hypot(dx, dy);
+  const limit = MITRE_LIMIT * amount;
+  if (reach > limit) {
+    dx *= limit / reach;
+    dy *= limit / reach;
+  }
+  out[i] += dx;
+  out[i + 1] += dy;
 }
 function clipCoord(v) {
   return `${clipNum(v)}px`;
@@ -6931,9 +6959,10 @@ class DomRenderer {
   /** Triangles rasterized last frame. */
   triangleCount = 0;
   /**
-   * How far (px) each triangle's clip polygon is expanded from its centroid.
-   * Closes antialiased-clip cracks between adjacent triangles (Safari);
-   * set to 0 to see them.
+   * How far (canvas px) each edge of a triangle's clip polygon is moved
+   * outward along its normal. Closes the antialiased-clip cracks between
+   * adjacent triangles, through which the background shows (#104); set to 0
+   * to see them.
    */
   triangleExpand = 0.5;
   /**
@@ -6945,9 +6974,9 @@ class DomRenderer {
    */
   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
+   * Rasterizer for the mesh (deform) tier. 'canvas2d' maps each triangle
+   * with clip+transform+drawImage directly on the per-part canvas. 'webgl'
+   * (default) 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
@@ -6956,11 +6985,12 @@ class DomRenderer {
    * 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.
+   * shared context is lost — see meshBackendActive. The default since 1.9
+   * (#109); before it, 'canvas2d'. Set 'canvas2d' to keep the 2d raster.
    */
-  meshBackend = "canvas2d";
+  meshBackend = "webgl";
   /** Backend that actually rasterized the mesh tier during the last render(). */
-  meshBackendActive = "canvas2d";
+  meshBackendActive = "webgl";
   views = /* @__PURE__ */ new Map();
   /** Counts render() calls: the stamp a view drawn this frame carries (`SlotView.drawnIn`). */
   frameNumber = 0;
@@ -7365,9 +7395,10 @@ class DomRenderer {
    * texel of bilinear support is added, and the result is floor/ceil'd to texel
    * boundaries (so the sub-rect itself resamples nothing) and clamped to the
    * page. A fixed pad would not do: the texture-space reach of the expansion is
-   * `triangleExpand` times the local texels-per-canvas-unit, which on the
-   * demo's own meshes ranges from ~0.26 texels on a typical triangle to ~8.6 on
-   * a foreshortened one. Under-padding lets the rim of the overdraw sample
+   * `triangleExpand` times the local texels-per-canvas-unit (up to
+   * `MITRE_LIMIT` times that at a sharp corner), which on the demo's own meshes
+   * ranged from ~0.26 texels on a typical triangle to ~8.6 on a foreshortened
+   * one. Under-padding lets the rim of the overdraw sample
    * nothing, which brings back the very seams the overdraw exists to close.
    *
    * No half-texel offset is applied to the incoming u/v: the `(i + 0.5) / size`
@@ -7624,11 +7655,10 @@ class DomRenderer {
   }
 }
 function drawTexturedTriangle(ctx, img, expand, x0, y0, u0, v0, x1, y1, u1, v1, x2, y2, u2, v2) {
-  const cx = (x0 + x1 + x2) / 3;
-  const cy = (y0 + y1 + y2) / 3;
-  const [px0, py0] = expandPoint(x0, y0, cx, cy, expand);
-  const [px1, py1] = expandPoint(x1, y1, cx, cy, expand);
-  const [px2, py2] = expandPoint(x2, y2, cx, cy, expand);
+  const corners = offsetTriangle(x0, y0, x1, y1, x2, y2, expand);
+  const px0 = corners[0], py0 = corners[1];
+  const px1 = corners[2], py1 = corners[3];
+  const px2 = corners[4], py2 = corners[5];
   ctx.beginPath();
   ctx.moveTo(px0, py0);
   ctx.lineTo(px1, py1);