rig-play 1.2.0 → 1.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -4
- package/dist/CanvasRenderer.d.ts +16 -1
- package/dist/CanvasRenderer.d.ts.map +1 -1
- package/dist/DomRenderer.d.ts.map +1 -1
- package/dist/index.js +49 -29
- package/dist/index.js.map +1 -1
- package/dist/pixelRatio.d.ts +22 -0
- package/dist/pixelRatio.d.ts.map +1 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -435,7 +435,7 @@ onto shared pages instead. Both play here, unchanged:
|
|
|
435
435
|
GPU pages handed back) and creates the other over the same root and assets;
|
|
436
436
|
`pixelRatio` and `clipping` carry over and the held pose is redrawn at once.
|
|
437
437
|
`player.renderer` is then a `CanvasRenderer`, whose knobs are `pixelRatio`,
|
|
438
|
-
`clipping`, `viewport` and `backend`. What each mode costs, as counters:
|
|
438
|
+
`syncPixelRatio()`, `clipping`, `viewport` and `backend`. What each mode costs, as counters:
|
|
439
439
|
- **dom** — one element per drawn slot, one style write per changed slot,
|
|
440
440
|
and the mesh tier's rasters (the knobs below).
|
|
441
441
|
- **canvas** — one canvas element per player and, per frame that changed,
|
|
@@ -588,7 +588,7 @@ name, and unloading is still elements first, bitmaps second.
|
|
|
588
588
|
| `new SpineHtmlRenderer(root, regionImages)` | `new DomRenderer(root, regionImages, pages?)` | Only for drawing your own frames; `RigPlayer` constructs its renderer. `pages` is the page-image map the mesh tier samples (`ModelAssets.pageImages`). A hand-built `regionImages` map is still accepted. |
|
|
589
589
|
| `renderer.render(skeleton)` | `renderer.render(frame)` | Takes a `PosedFrame`, not a skeleton. `player.posedFrame()` returns the one the player would draw. |
|
|
590
590
|
| `renderer.pixelRatio` | `player.renderer.pixelRatio` | On both renderers. Carried over when `player.mode` changes. |
|
|
591
|
-
| `renderer.syncPixelRatio()` | `
|
|
591
|
+
| `renderer.syncPixelRatio()` | `player.renderer.syncPixelRatio()` | On both renderers, the same meaning and the same deadband (since 1.3.0; before it, DOM mode only). |
|
|
592
592
|
| `renderer.meshBackingPixels` | `DomRenderer.meshBackingPixels` | DOM mode only. |
|
|
593
593
|
| `renderer.meshBackend`, `meshBackendActive`, type `MeshBackend` | `DomRenderer.meshBackend`, `meshBackendActive`, type `MeshBackend` | Same values (`'canvas2d'` default, `'webgl'`). Also settable up front as `RigPlayerOptions.meshBackend`. |
|
|
594
594
|
| `renderer.triangleExpand` | `DomRenderer.triangleExpand` | Same default (0.5). |
|
|
@@ -633,8 +633,6 @@ export, for which 1.0.0 declares nothing:
|
|
|
633
633
|
|
|
634
634
|
Knobs on `DomRenderer` that `CanvasRenderer` does not declare:
|
|
635
635
|
|
|
636
|
-
- `syncPixelRatio()`. `CanvasRenderer.pixelRatio` exists and is set by hand
|
|
637
|
-
(`devicePixelRatio * rootScale`).
|
|
638
636
|
- `meshBackend` and `meshBackendActive`. The canvas mode has its own pair, `backend` and
|
|
639
637
|
`backendActive` (type `CanvasBackend`, `'webgl'` by default).
|
|
640
638
|
- `triangleExpand`, `meshBackingPixels`, `clipWriteCount`, `meshCount`, `meshReuseCount`,
|
package/dist/CanvasRenderer.d.ts
CHANGED
|
@@ -52,7 +52,12 @@ export interface CanvasViewport {
|
|
|
52
52
|
export declare class CanvasRenderer {
|
|
53
53
|
private readonly root;
|
|
54
54
|
private readonly pages;
|
|
55
|
-
/**
|
|
55
|
+
/**
|
|
56
|
+
* Backing-store pixels per root CSS pixel; defaults to the device pixel
|
|
57
|
+
* ratio. A root under a CSS-scaled ancestor rasters at the wrong resolution
|
|
58
|
+
* until the scale is folded in — `syncPixelRatio()` measures it, as for the
|
|
59
|
+
* DOM tier. The next `render` sizes the backing store to the new ratio.
|
|
60
|
+
*/
|
|
56
61
|
pixelRatio: number;
|
|
57
62
|
/** Apply the clips the frame carries (default). False draws every slot unclipped and counts the clips in `clipSkipCount`. */
|
|
58
63
|
clipping: boolean;
|
|
@@ -113,6 +118,16 @@ export declare class CanvasRenderer {
|
|
|
113
118
|
*/
|
|
114
119
|
constructor(root: HTMLElement, pages: ReadonlyMap<string, HTMLImageElement>);
|
|
115
120
|
/** Grows the automatic viewport to cover `box` (world units, Y up) ahead of the frames reaching it. */
|
|
121
|
+
/**
|
|
122
|
+
* Measures the root's effective on-screen scale and sets `pixelRatio` to
|
|
123
|
+
* `devicePixelRatio × scale`, returning the ratio now in effect — the same
|
|
124
|
+
* call, the same meaning and the same deadband as `DomRenderer`'s, so code
|
|
125
|
+
* written against `player.renderer` survives a `mode` change. One forced
|
|
126
|
+
* layout per call (a hidden box appended to the root, read, removed), which
|
|
127
|
+
* is why the renderer never calls it for you. The backing store follows on
|
|
128
|
+
* the next `render`; a root that is not laid out leaves the ratio alone.
|
|
129
|
+
*/
|
|
130
|
+
syncPixelRatio(): number;
|
|
116
131
|
reserve(box: CanvasViewport): void;
|
|
117
132
|
/** Draws one frame. */
|
|
118
133
|
render(frame: PosedFrame): void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CanvasRenderer.d.ts","sourceRoot":"","sources":["../src/CanvasRenderer.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"CanvasRenderer.d.ts","sourceRoot":"","sources":["../src/CanvasRenderer.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAwB,UAAU,EAAa,MAAM,iBAAiB,CAAC;AAEnF,+DAA+D;AAC/D,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,UAAU,CAAC;AAEjD,4EAA4E;AAC5E,MAAM,WAAW,cAAc;IAC7B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAYD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,qBAAa,cAAc;IAqEvB,OAAO,CAAC,QAAQ,CAAC,IAAI;IACrB,OAAO,CAAC,QAAQ,CAAC,KAAK;IArExB;;;;;OAKG;IACH,UAAU,SAA+D;IACzE,6HAA6H;IAC7H,QAAQ,UAAQ;IAChB;;;;OAIG;IACH,QAAQ,EAAE,cAAc,GAAG,IAAI,CAAQ;IACvC,mHAAmH;IACnH,OAAO,EAAE,aAAa,CAAW;IACjC,wEAAwE;IACxE,aAAa,EAAE,aAAa,CAAW;IACvC,mEAAmE;IACnE,QAAQ,CAAC,MAAM,EAAE,iBAAiB,CAAC;IAEnC,8EAA8E;IAC9E,SAAS,SAAK;IACd,oEAAoE;IACpE,YAAY,SAAK;IACjB,iEAAiE;IACjE,cAAc,SAAK;IACnB,oFAAoF;IACpF,YAAY,SAAK;IACjB,yDAAyD;IACzD,KAAK,SAAK;IACV,wEAAwE;IACxE,kBAAkB,SAAK;IACvB,yCAAyC;IACzC,SAAS,SAAK;IACd,gIAAgI;IAChI,aAAa,SAAK;IAElB,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAkC;IACtD,gHAAgH;IAChH,OAAO,CAAC,IAAI,CAAK;IACjB,OAAO,CAAC,GAAG,CAAK;IAChB,OAAO,CAAC,KAAK,CAAK;IAClB,OAAO,CAAC,MAAM,CAAK;IACnB,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,QAAQ,CAAK;IACrB,OAAO,CAAC,QAAQ,CAAK;IACrB,OAAO,CAAC,YAAY,CAAM;IAC1B,OAAO,CAAC,IAAI,CAA0B;IACtC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAkB;IACvC,sFAAsF;IACtF,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA+B;IACvD,yGAAyG;IACzG,OAAO,CAAC,GAAG,CAAyB;IACpC,OAAO,CAAC,SAAS,CAAM;IACvB,OAAO,CAAC,OAAO,CAAiB;IAChC,OAAO,CAAC,OAAO,CAAyB;IACxC,OAAO,CAAC,QAAQ,CAAiB;IAEjC;;;;;;OAMG;gBAEgB,IAAI,EAAE,WAAW,EACjB,KAAK,EAAE,WAAW,CAAC,MAAM,EAAE,gBAAgB,CAAC;IAgB/D,uGAAuG;IACvG;;;;;;;;OAQG;IACH,cAAc,IAAI,MAAM;IAKxB,OAAO,CAAC,GAAG,EAAE,cAAc,GAAG,IAAI;IAIlC,uBAAuB;IACvB,MAAM,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IAuD/B,+GAA+G;IAC/G,OAAO,IAAI,IAAI;IAYf,OAAO,CAAC,MAAM;IAkBd,OAAO,CAAC,OAAO;IAUf,oFAAoF;IACpF,OAAO,CAAC,WAAW;IAkBnB,uGAAuG;IACvG,OAAO,CAAC,gBAAgB;IAoExB,iFAAiF;IACjF,OAAO,CAAC,UAAU;IAalB,OAAO,CAAC,MAAM,CAAa;IAE3B;;;OAGG;IACH,OAAO,CAAC,QAAQ;IA4BhB,+CAA+C;IAC/C,OAAO,CAAC,aAAa;IAmErB,OAAO,CAAC,MAAM;CAmEf"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DomRenderer.d.ts","sourceRoot":"","sources":["../src/DomRenderer.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"DomRenderer.d.ts","sourceRoot":"","sources":["../src/DomRenderer.ts"],"names":[],"mappings":"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"}
|
package/dist/index.js
CHANGED
|
@@ -1,3 +1,31 @@
|
|
|
1
|
+
const SCALE_PROBE_PX = 100;
|
|
2
|
+
const PIXEL_RATIO_DEADBAND = 1e-3;
|
|
3
|
+
function syncedPixelRatio(root, current) {
|
|
4
|
+
const probe = document.createElement("div");
|
|
5
|
+
probe.style.position = "absolute";
|
|
6
|
+
probe.style.left = "0";
|
|
7
|
+
probe.style.top = "0";
|
|
8
|
+
probe.style.width = `${SCALE_PROBE_PX}px`;
|
|
9
|
+
probe.style.height = `${SCALE_PROBE_PX}px`;
|
|
10
|
+
probe.style.visibility = "hidden";
|
|
11
|
+
probe.style.pointerEvents = "none";
|
|
12
|
+
root.appendChild(probe);
|
|
13
|
+
let width = 0;
|
|
14
|
+
let height = 0;
|
|
15
|
+
try {
|
|
16
|
+
const rect = probe.getBoundingClientRect();
|
|
17
|
+
width = rect.width;
|
|
18
|
+
height = rect.height;
|
|
19
|
+
} finally {
|
|
20
|
+
probe.remove();
|
|
21
|
+
}
|
|
22
|
+
const scale = Math.max(width, height) / SCALE_PROBE_PX;
|
|
23
|
+
if (!(scale > 0)) return current;
|
|
24
|
+
const dpr = typeof devicePixelRatio === "number" ? devicePixelRatio : 1;
|
|
25
|
+
const next = dpr * scale;
|
|
26
|
+
if (current > 0 && Math.abs(next - current) < current * PIXEL_RATIO_DEADBAND) return current;
|
|
27
|
+
return next;
|
|
28
|
+
}
|
|
1
29
|
const RUNTIME_PI = 3.1415927;
|
|
2
30
|
const RAD$3 = RUNTIME_PI / 180;
|
|
3
31
|
const RUNTIME_DEG = 180 / RUNTIME_PI;
|
|
@@ -5738,8 +5766,6 @@ function getMeshGlBlitter() {
|
|
|
5738
5766
|
const regionVertices = new Float32Array(8);
|
|
5739
5767
|
const SVG_NS = "http://www.w3.org/2000/svg";
|
|
5740
5768
|
let tintFilterSeq = 0;
|
|
5741
|
-
const SCALE_PROBE_PX = 100;
|
|
5742
|
-
const PIXEL_RATIO_DEADBAND = 1e-3;
|
|
5743
5769
|
function expandPoint(x, y, cx, cy, amount) {
|
|
5744
5770
|
const dx = x - cx;
|
|
5745
5771
|
const dy = y - cy;
|
|
@@ -5950,32 +5976,8 @@ class DomRenderer {
|
|
|
5950
5976
|
* @returns the pixel ratio now in effect (the current one if nothing moved).
|
|
5951
5977
|
*/
|
|
5952
5978
|
syncPixelRatio() {
|
|
5953
|
-
|
|
5954
|
-
|
|
5955
|
-
probe.style.left = "0";
|
|
5956
|
-
probe.style.top = "0";
|
|
5957
|
-
probe.style.width = `${SCALE_PROBE_PX}px`;
|
|
5958
|
-
probe.style.height = `${SCALE_PROBE_PX}px`;
|
|
5959
|
-
probe.style.visibility = "hidden";
|
|
5960
|
-
probe.style.pointerEvents = "none";
|
|
5961
|
-
this.root.appendChild(probe);
|
|
5962
|
-
let width = 0;
|
|
5963
|
-
let height = 0;
|
|
5964
|
-
try {
|
|
5965
|
-
const rect = probe.getBoundingClientRect();
|
|
5966
|
-
width = rect.width;
|
|
5967
|
-
height = rect.height;
|
|
5968
|
-
} finally {
|
|
5969
|
-
probe.remove();
|
|
5970
|
-
}
|
|
5971
|
-
const scale = Math.max(width, height) / SCALE_PROBE_PX;
|
|
5972
|
-
if (!(scale > 0)) return this.pixelRatio;
|
|
5973
|
-
const dpr = typeof devicePixelRatio === "number" ? devicePixelRatio : 1;
|
|
5974
|
-
const next = dpr * scale;
|
|
5975
|
-
const current = this.pixelRatio;
|
|
5976
|
-
if (current > 0 && Math.abs(next - current) < current * PIXEL_RATIO_DEADBAND) return current;
|
|
5977
|
-
this.pixelRatio = next;
|
|
5978
|
-
return next;
|
|
5979
|
+
this.pixelRatio = syncedPixelRatio(this.root, this.pixelRatio);
|
|
5980
|
+
return this.pixelRatio;
|
|
5979
5981
|
}
|
|
5980
5982
|
/**
|
|
5981
5983
|
* Draws one frame. Slots the frame does not carry — no attachment, a
|
|
@@ -6640,7 +6642,12 @@ class CanvasRenderer {
|
|
|
6640
6642
|
this.ctx = canvas.getContext("2d");
|
|
6641
6643
|
root.appendChild(canvas);
|
|
6642
6644
|
}
|
|
6643
|
-
/**
|
|
6645
|
+
/**
|
|
6646
|
+
* Backing-store pixels per root CSS pixel; defaults to the device pixel
|
|
6647
|
+
* ratio. A root under a CSS-scaled ancestor rasters at the wrong resolution
|
|
6648
|
+
* until the scale is folded in — `syncPixelRatio()` measures it, as for the
|
|
6649
|
+
* DOM tier. The next `render` sizes the backing store to the new ratio.
|
|
6650
|
+
*/
|
|
6644
6651
|
pixelRatio = typeof devicePixelRatio === "number" ? devicePixelRatio : 1;
|
|
6645
6652
|
/** Apply the clips the frame carries (default). False draws every slot unclipped and counts the clips in `clipSkipCount`. */
|
|
6646
6653
|
clipping = true;
|
|
@@ -6693,6 +6700,19 @@ class CanvasRenderer {
|
|
|
6693
6700
|
nextSig = new Float64Array(256);
|
|
6694
6701
|
nextRefs = [];
|
|
6695
6702
|
/** Grows the automatic viewport to cover `box` (world units, Y up) ahead of the frames reaching it. */
|
|
6703
|
+
/**
|
|
6704
|
+
* Measures the root's effective on-screen scale and sets `pixelRatio` to
|
|
6705
|
+
* `devicePixelRatio × scale`, returning the ratio now in effect — the same
|
|
6706
|
+
* call, the same meaning and the same deadband as `DomRenderer`'s, so code
|
|
6707
|
+
* written against `player.renderer` survives a `mode` change. One forced
|
|
6708
|
+
* layout per call (a hidden box appended to the root, read, removed), which
|
|
6709
|
+
* is why the renderer never calls it for you. The backing store follows on
|
|
6710
|
+
* the next `render`; a root that is not laid out leaves the ratio alone.
|
|
6711
|
+
*/
|
|
6712
|
+
syncPixelRatio() {
|
|
6713
|
+
this.pixelRatio = syncedPixelRatio(this.root, this.pixelRatio);
|
|
6714
|
+
return this.pixelRatio;
|
|
6715
|
+
}
|
|
6696
6716
|
reserve(box) {
|
|
6697
6717
|
this.growTo(box.x, -(box.y + box.height), box.x + box.width, -box.y);
|
|
6698
6718
|
}
|