rig-play 1.8.0 → 1.8.2

package/NOTICE.md

@@ -3,8 +3,8 @@
 ## Spine Runtimes
 
 **The published package links nothing from Esoteric Software.** An install of
-`rig-play` (or of `spine-html`, the same files under the name the package first
-shipped as) carries one JavaScript module, `dist/index.js`, plus type
+`@rig-c/play` (or of `rig-play` or `spine-html`, the same files under the names the
+package shipped as before) carries one JavaScript module, `dist/index.js`, plus type
 declarations, and that module bundles two things: the renderer, and
 `rig-c/core` (MIT), rigc's own posing core, which poses the compiled model
 document `rigc build` writes. No part of the
@@ -28,7 +28,7 @@ it, and it is neither committed nor published.
 
 ### What that means, as a chain of facts
 
-rig-play's own code is MIT (see `LICENSE`). The following is a restatement of
+@rig-c/play's own code is MIT (see `LICENSE`). The following is a restatement of
 Esoteric Software's terms, not a licence term of this project:
 
 1. rigc writes two things side by side: the model document this package plays,
@@ -46,7 +46,7 @@ Esoteric Software's terms, not a licence term of this project:
    because the package links none.
 
 > **What a consumer does with rigc's Spine-format output is governed by
-> Esoteric Software's terms**, not by this package — rig-play neither adds those
+> Esoteric Software's terms**, not by this package — @rig-c/play neither adds those
 > terms nor removes them.
 
 ## Example assets

package/README.md

@@ -1,18 +1,21 @@
 <p align="center">
-  <img src="assets/banner.svg" alt="rig-play - plays rigc's compiled model as DOM elements or one canvas" width="100%" />
+  <img src="assets/banner.svg" alt="@rig-c/play - plays rigc's compiled model as DOM elements or one canvas" width="100%" />
 </p>
 
 <p align="center">
-  <a href="https://www.npmjs.com/package/rig-play"><img src="https://img.shields.io/npm/v/rig-play.svg?style=flat-square&color=FF6B4A" alt="npm version" /></a>
-  <a href="https://www.npmjs.com/package/rig-play"><img src="https://img.shields.io/npm/dm/rig-play.svg?style=flat-square&color=EC4899" alt="npm downloads" /></a>
+  <a href="https://www.npmjs.com/package/@rig-c/play"><img src="https://img.shields.io/npm/v/@rig-c/play.svg?style=flat-square&color=FF6B4A" alt="npm version" /></a>
+  <a href="https://www.npmjs.com/package/@rig-c/play"><img src="https://img.shields.io/npm/dm/@rig-c/play.svg?style=flat-square&color=EC4899" alt="npm downloads" /></a>
   <a href="LICENSE"><img src="https://img.shields.io/badge/license-MIT-38BDF8.svg?style=flat-square" alt="license" /></a>
 </p>
 
-Plays the rigs [rigc](https://github.com/firejune/rigc) builds — the compiled model
+Plays the rigs [rigc](https://github.com/rig-c/core) builds — the compiled model
 document `rigc build` writes, `skeleton.model.json` — as **plain DOM**: one
 absolutely-positioned `<img>` per rigid slot, posed with a single CSS `matrix()` write
 per frame, deforming meshes on small per-part canvases; or as **one canvas** per player.
-`spine-html` is the same package under the name it first shipped as.
+`rig-play` and `spine-html` are the same package under the names it shipped as before.
+The toolchain lives under one organisation: the compiler [rig-c/core](https://github.com/rig-c/core)
+(npm `rig-c`), the part generator [rig-c/parts](https://github.com/rig-c/parts)
+(npm `@rig-c/parts`), and this player, [rig-c/play](https://github.com/rig-c/play).
 
 ## Why
 
@@ -29,8 +32,9 @@ At 1.0 it stopped being a Spine runtime. It plays the model document `rigc build
 poses it through `rig-c/core` — rigc's own posing core, bundled into the package — and
 links nothing from Esoteric Software; a Spine export is refused by name. It gained a
 second render mode that draws the whole frame into one canvas. And it took the name
-`rig-play`, which says what it is; `spine-html` keeps being published with the same
-files, so links to the old name keep working.
+`rig-play`, which says what it is; after 1.8 it moved with the rest of the toolchain to
+`@rig-c/play`. `rig-play` and `spine-html` keep being published with the same files, so
+links to either earlier name keep working.
 
 ### Measured
 
@@ -99,9 +103,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
@@ -159,11 +166,11 @@ default stays `dom`.
 ## Install
 
 ```bash
-npm i rig-play
-npm i -D rig-c    # the build tool: `rigc build` writes the model rig-play loads
+npm i @rig-c/play
+npm i -D rig-c    # the build tool: `rigc build` writes the model the player loads
 ```
 
-The package plays rigs built by [rigc](https://github.com/firejune/rigc):
+The package plays rigs built by [rigc](https://github.com/rig-c/core):
 `rigc build` writes a compiled model document, `skeleton.model.json` (spec
 `rigc-compiled/3`), next to the Spine pair and the atlas pages. That document
 is what the player loads, and it states everything posing and drawing need —
@@ -173,7 +180,7 @@ the skeleton, the animations, and where every region sits on its page — so the
 is nothing else to install.
 
 ```ts
-import { loadModel, RigPlayer } from 'rig-play';
+import { loadModel, RigPlayer } from '@rig-c/play';
 
 const assets = await loadModel({ modelUrl: '/rigs/walk/skeleton.model.json' });
 
@@ -212,7 +219,7 @@ else. A document whose `spec` is not one `rig-c/core` reads is refused with the
 core's own sentence plus "build it with `rigc build`", and so is a
 `rigc-compiled/1` document, which predates the `pages` section.
 
-`rig-play` is a third-party renderer and is not affiliated with or endorsed by
+`@rig-c/play` is a third-party renderer and is not affiliated with or endorsed by
 Esoteric Software.
 
 ### Drawing your own frames
@@ -221,7 +228,7 @@ Esoteric Software.
 record, so anything that can produce one can draw through it:
 
 ```ts
-import { DomRenderer, type PosedFrame } from 'rig-play';
+import { DomRenderer, type PosedFrame } from '@rig-c/play';
 
 const renderer = new DomRenderer(rootElement, assets.regionImages, assets.pageImages);
 renderer.render(frame); // frame: PosedFrame
@@ -583,8 +590,8 @@ onto shared pages instead. Both play here, unchanged:
   heavy deforming scenes on Safari want `'webgl'` (see Measured above). Falls back
   to canvas2d automatically when WebGL is unavailable. 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
@@ -653,9 +660,9 @@ name, and unloading is still elements first, bitmaps second.
 
 ### 0.8 → 1.0
 
-| 0.8.0 (`spine-html`) | 1.0.0 (`rig-play`) | Note |
+| 0.8.0 (`spine-html`) | 1.x (`@rig-c/play`, formerly `rig-play`) | Note |
 | --- | --- | --- |
-| `npm i spine-html @esotericsoftware/spine-core` | `npm i rig-play`, and `npm i -D rig-c` for the build tool | 0.8 declared spine-core as a peer dependency (`>=4.0.0 <4.4.0`). 1.0.0 declares no dependencies and no peer dependencies. |
+| `npm i spine-html @esotericsoftware/spine-core` | `npm i @rig-c/play`, and `npm i -D rig-c` for the build tool | 0.8 declared spine-core as a peer dependency (`>=4.0.0 <4.4.0`). 1.0.0 declares no dependencies and no peer dependencies. |
 | `loadSkeletonAssets(options)` | `loadModel(options)` | One URL instead of two. The `.atlas` and `skeleton.json` a build writes beside the document are not fetched. |
 | `LoadSkeletonAssetsOptions.atlasUrl`, `skeletonUrl` | `LoadModelOptions.modelUrl` | |
 | `resolvePage(pageName, atlasUrl)` | `resolvePage(pageName, modelUrl)` | The default now resolves a page name against the model URL's directory. |
@@ -761,7 +768,7 @@ renderer.dispose(); assets.dispose(); // on unload
 1.0.0:
 
 ```ts
-import { loadModel, RigPlayer } from 'rig-play';
+import { loadModel, RigPlayer } from '@rig-c/play';
 const assets = await loadModel({ modelUrl: '/rigs/walk/skeleton.model.json' });
 const player = new RigPlayer(rootElement, assets);
 player.play('walk', { loop: true });
@@ -934,10 +941,10 @@ perf oracle is the demo's stats line on a real device.
 
 ## License
 
-rig-play's own code is MIT (see [LICENSE](LICENSE)). That says nothing about Spine,
+@rig-c/play's own code is MIT (see [LICENSE](LICENSE)). That says nothing about Spine,
 so here is what is true of this package and this repository, stated plainly:
 
-1. The published package — `rig-play`, and `spine-html`, the same files — **links
+1. The published package — `@rig-c/play`, and `rig-play` and `spine-html`, the same files — **links
    nothing from Esoteric Software**. Its one module bundles the renderer and
    `rig-c/core` (MIT), which poses rigc's model document; no part of the
    [Spine Runtimes](https://github.com/EsotericSoftware/spine-runtimes) is in it or
@@ -956,7 +963,7 @@ so here is what is true of this package and this repository, stated plainly:
    this project.
 
 > **What a consumer does with rigc's Spine-format output is governed by Esoteric
-> Software's terms**, not by this package — rig-play neither adds those terms nor
+> Software's terms**, not by this package — @rig-c/play neither adds those terms nor
 > removes them.
 
 No example assets of Esoteric Software's are fetched or redistributed. See

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;
     /**
@@ -294,9 +295,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":"AACA,OAAO,EAAmB,KAAK,WAAW,EAAuB,MAAM,iBAAiB,CAAC;AAEzF,OAAO,KAAK,EAAwB,UAAU,EAAqC,MAAM,iBAAiB,CAAC;AAE3G,kDAAkD;AAClD,MAAM,MAAM,WAAW,GAAG,UAAU,GAAG,OAAO,CAAC;AA4J/C;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,qBAAa,WAAW;IAoIpB,OAAO,CAAC,QAAQ,CAAC,IAAI;IACrB,OAAO,CAAC,QAAQ,CAAC,YAAY;IAC7B,OAAO,CAAC,QAAQ,CAAC,KAAK;IArIxB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,QAAQ,UAAQ;IAChB,8EAA8E;IAC9E,SAAS,SAAK;IACd;;;;;OAKG;IACH,aAAa,SAAK;IAClB;;;;OAIG;IACH,cAAc,SAAK;IACnB,2CAA2C;IAC3C,SAAS,SAAK;IACd,kEAAkE;IAClE,cAAc,SAAK;IACnB;;;;OAIG;IACH,kBAAkB,SAAK;IACvB,uCAAuC;IACvC,aAAa,SAAK;IAClB;;;;;OAKG;IACH,cAAc,SAAO;IACrB;;;;;;OAMG;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,CAA+B;IACrD,6FAA6F;IAC7F,OAAO,CAAC,WAAW,CAAK;IACxB,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAqB;IACjD,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAkB;IAC/C;;;;OAIG;IACH,OAAO,CAAC,OAAO,CAAsC;IACrD;;;;;;OAMG;IACH,OAAO,CAAC,eAAe,CAAyB;IAChD,OAAO,CAAC,QAAQ,CAA8B;IAC9C,iEAAiE;IACjE,OAAO,CAAC,UAAU,CAA0B;IAC5C,gFAAgF;IAChF,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAwB;IAClD,OAAO,CAAC,WAAW,CAAS;IAC5B,yEAAyE;IACzE,OAAO,CAAC,UAAU,CAAS;IAC3B,0EAA0E;IAC1E,OAAO,CAAC,WAAW,CAAuB;IAC1C,OAAO,CAAC,iBAAiB,CAAK;IAC9B;;;;OAIG;IACH,OAAO,CAAC,aAAa,CAAuB;IAC5C,6EAA6E;IAC7E,OAAO,CAAC,eAAe,CAAM;IAE7B;;;;;;;;;OASG;gBAEgB,IAAI,EAAE,WAAW,EACjB,YAAY,EAAE,WAAW,CAAC,MAAM,EAAE,WAAW,CAAC,EAC9C,KAAK,GAAE,WAAW,CAAC,MAAM,EAAE,gBAAgB,CAAa;IAG3E;;;;;;;;;;;OAWG;IACH,IAAI,iBAAiB,IAAI,MAAM,CAM9B;IAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAmCG;IACH,cAAc,IAAI,MAAM;IAKxB;;;;OAIG;IACH,MAAM,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IAqE/B;;;;;;;;;;;;;;;;;OAiBG;IACH,OAAO,IAAI,IAAI;IAiBf,OAAO,CAAC,YAAY;IAwCpB,OAAO,CAAC,UAAU;IAiJlB;;;;;;OAMG;IACH,OAAO,CAAC,UAAU;IAWlB,sEAAsE;IACtE,OAAO,CAAC,eAAe;IAuCvB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA2DG;IACH,OAAO,CAAC,YAAY;IAWpB;;;;;;;;;;;;;OAaG;IACH,OAAO,CAAC,OAAO;IAmCf;;;;;;;;;;OAUG;IACH,OAAO,CAAC,SAAS;IAoDjB,OAAO,CAAC,WAAW;IAOnB,yEAAyE;IACzE,OAAO,CAAC,YAAY;IAUpB,OAAO,CAAC,aAAa;IAUrB,OAAO,CAAC,eAAe;IAUvB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,WAAW;IA4CnB,OAAO,CAAC,aAAa;IAyBrB,OAAO,CAAC,IAAI;IAmDZ,OAAO,CAAC,IAAI;CAWb"}

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;
   /**
@@ -7365,9 +7394,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 +7654,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);