pixi-effects 0.42.0 → 0.44.0

package/dist/{chunk-NFJKBWYO.js → chunk-4MBTYREC.js}

@@ -4,9 +4,24 @@ import { analyzeAudio, fft, resampleThrough, playSpan } from './chunk-UHNSL2KJ.j
 import { usesAdvancedBlend, enableAdvancedBlend } from './chunk-VNP7QCJE.js';
 import { describeLayer } from './chunk-32MMNDDN.js';
 import { warnUnknownOptions, suggestName } from './chunk-BXOCEZ4U.js';
-import { extensions, CullerPlugin, Application, Container, Rectangle, Culler, CanvasTextMetrics, TextStyle, Assets, ExtensionType, Filter, Texture, UniformGroup, GpuProgram, GlProgram, defaultFilterVert } from 'pixi.js';
+import { extensions, CullerPlugin, Application, Container, Rectangle, Culler, CanvasTextMetrics, TextStyle, Assets, ExtensionType, Filter, Texture, UniformGroup, GpuProgram, GlProgram, defaultFilterVert, Text, CanvasTextGenerator, CanvasPool } from 'pixi.js';
 import { Output, BufferTarget, CanvasSource, AudioBufferSource, Input, ALL_FORMATS, BlobSource, WavOutputFormat, Conversion, VideoSampleSink, OggOutputFormat, QUALITY_VERY_HIGH, QUALITY_HIGH, QUALITY_MEDIUM, QUALITY_LOW, QUALITY_VERY_LOW, MkvOutputFormat, WebMOutputFormat, MovOutputFormat, Mp4OutputFormat, canEncodeVideo, getFirstEncodableAudioCodec } from 'mediabunny';
 
+// src/core/gpuShare.ts
+function sharedGpuOf(renderer) {
+  const r = renderer;
+  if (!r || r.name !== "webgpu" || !r.gpu?.device) return void 0;
+  const uid = r.uid;
+  return {
+    device: r.gpu.device,
+    adopt(source, texture) {
+      const data = source._gpuData;
+      if (!data || typeof data !== "object") throw new Error("this PixiJS keeps no _gpuData on its texture sources");
+      data[uid] = { textureView: null, textureViews: /* @__PURE__ */ Object.create(null), gpuTexture: texture, destroy() {
+      } };
+    }
+  };
+}
 var registered = false;
 function ensureLoadersRegistered(audioContext) {
   if (registered) return;
@@ -173,7 +188,7 @@ function inspectFonts(root) {
   });
   const missing = [];
   const used = /* @__PURE__ */ new Set();
-  const walk2 = (seq, index) => {
+  const walk3 = (seq, index) => {
     const spec = seq.spec;
     if (spec.type === "text") {
       const raw = spec.style?.fontFamily;
@@ -182,10 +197,10 @@ function inspectFonts(root) {
       for (const f of list) used.add(f.replace(/^["']|["']$/g, "").toLowerCase());
       if (list.length && !list.some(fontAvailable) && !list.some((f) => failed.has(f.replace(/^["']|["']$/g, "")))) missing.push({ layer: spec.name ?? `text#${index}`, family: family2 });
     }
-    if (seq.maskSequence) walk2(seq.maskSequence, index);
-    (seq._children ?? []).forEach((child, i) => walk2(child, i));
+    if (seq.maskSequence) walk3(seq.maskSequence, index);
+    (seq._children ?? []).forEach((child, i) => walk3(child, i));
   };
-  walk2(root, 0);
+  walk3(root, 0);
   const all = [...failed];
   return { missing, failed: all.filter((f) => used.has(f.toLowerCase())), failedUnused: all.filter((f) => !used.has(f.toLowerCase())) };
 }
@@ -1511,16 +1526,16 @@ function canvasReport(root) {
       const problem = threw.length ? `${name} could not draw at ${threw.map((t) => `${t} s`).join(", ")} (its ${kind === "three" ? "update or render threw" : "draw threw"}, or the layer failed to build): ${kind === "three" ? "the warning above says why" : "it shows a magenta checkerboard there; the warning above says why"}, so the layer cannot be called deterministic` : differs.length ? `${name} does not draw the same picture for the same time (checked at ${differs.map(describeDiff).join(", ")}; drawn in two orders after one draw that was thrown away): ` + (kind === "three" ? "usually its update uses Math.random, Date.now, a clock, or state that builds up from call to call: a mixer advanced with mixer.update(dt) is one (pose a clip with mixer.setTime(t), or threeGltf(url).pose(t)), and so is a value moved by the time since the last call. A skinned model of your own (not loaded by threeGltf) that moves and casts a shadow does it too: three culls a skinned mesh by a bounding sphere that does not follow it, so set mesh.frustumCulled = false. Set every object from t, so playback, a seek and an export agree" : "usually its draw uses Math.random, Date.now or state that outlives the call (a value it keeps from the last call), so playback, a seek and an export would not agree: use info.random() (seeded) and derive everything from t. If it uses none of these, look at the canvases it draws from: make sprites and masks with info.canvas(w, h) (not document.createElement) and draw them into the picture before the strokes that depend on them") : "";
       out.push({ name: seq.spec.name ?? name, moments, drawMs, ok: !differs.length && !threw.length, problem, kind });
     }
-    if (seq instanceof CompositionSequence) walk2(seq);
+    if (seq instanceof CompositionSequence) walk3(seq);
   };
-  const walk2 = (comp) => {
+  const walk3 = (comp) => {
     for (const { seq } of comp.layers()) {
       visit(seq);
       const mask = seq.maskSequence;
       if (mask) visit(mask);
     }
   };
-  walk2(root);
+  walk3(root);
   return out;
 }
 var canvasProblems = (root) => canvasReport(root).filter((r) => !r.ok).map((r) => r.problem);
@@ -1587,7 +1602,7 @@ function inspectScene(root, frame, time, canvas, opts = {}) {
   const specs = /* @__PURE__ */ new Map();
   const chains = /* @__PURE__ */ new Map();
   const chainAlpha = /* @__PURE__ */ new Map();
-  const walk2 = (comp, prefix, insideThreeD, parentVisible, parentScene, parentMotion = NO_MOTION, parentZero = false, parentAlpha = 1) => {
+  const walk3 = (comp, prefix, insideThreeD, parentVisible, parentScene, parentMotion = NO_MOTION, parentZero = false, parentAlpha = 1) => {
     const blending = /* @__PURE__ */ new Set();
     const now = comp.childTime(time);
     const cameraMotion = (comp.spec.sequences ?? []).filter((q) => q.type === "camera").reduce((m, q) => either(m, motionOf(q.keyframes, now - comp.childBase - (q.at ?? 0), q.duration ?? comp.duration ?? Infinity, () => true)), NO_MOTION);
@@ -1634,6 +1649,7 @@ function inspectScene(root, frame, time, canvas, opts = {}) {
       if (typeof drawn.renderer === "string") {
         info.renderer = drawn.renderer;
         if (typeof drawn.backend === "string") info.backend = drawn.backend;
+        if (info.renderer === "webgpu") info.sharedGpu = drawn.sharedGpu === true;
       }
       layers.push(info);
       chainAlpha.set(info, parentAlpha * alpha);
@@ -1652,10 +1668,10 @@ function inspectScene(root, frame, time, canvas, opts = {}) {
       const group = parentScene ?? (name !== void 0 && blending.has(name) ? name : void 0);
       if (group) scene.set(info, group);
       if (zero || seq.showsNothingYet) scaledToNothing.add(info);
-      if (seq instanceof CompositionSequence) walk2(seq, prefix + label + "/", insideThreeD || threeD, visible, group, motion, zero, parentAlpha * alpha);
+      if (seq instanceof CompositionSequence) walk3(seq, prefix + label + "/", insideThreeD || threeD, visible, group, motion, zero, parentAlpha * alpha);
     });
   };
-  walk2(root, "", false, true);
+  walk3(root, "", false, true);
   const issues = [];
   const texts = layers.filter((l) => l.type === "text" && l.visible && l.alpha >= FAINT && l.bounds);
   for (const l of texts) {
@@ -1782,7 +1798,7 @@ function pickScene(root, x, y, opts = {}, deps = {}) {
     return true;
   };
   const inside = (b, p) => p.x >= b.x && p.x <= b.x + b.width && p.y >= b.y && p.y <= b.y + b.height;
-  const walk2 = (comp, prefix, parentVisible) => {
+  const walk3 = (comp, prefix, parentVisible) => {
     comp.layers().forEach(({ seq, display, threeD, carriers, quad }, i) => {
       const d = display;
       if (!d) return;
@@ -1795,7 +1811,7 @@ function pickScene(root, x, y, opts = {}, deps = {}) {
       if (!visible) return;
       const isComposition = seq instanceof CompositionSequence;
       if (isComposition && !threeD) {
-        walk2(seq, path + "/", visible);
+        walk3(seq, path + "/", visible);
         return;
       }
       if (!wanted(name, path)) return;
@@ -1823,7 +1839,7 @@ function pickScene(root, x, y, opts = {}, deps = {}) {
             hit = { name, path, type: seq.spec.type, kind: "three", point, three };
           } else if (three === void 0 && (typeof d.containsPoint !== "function" || d.containsPoint(local))) {
             let opaque = true;
-            const tex = opts.alpha !== void 0 && seq.spec.type !== "shader" ? d.texture : void 0;
+            const tex = opts.alpha !== void 0 && seq.spec.type !== "shader" ? d.texture ?? deps.textureOf?.(d) : void 0;
             if (tex?.source?.resource) {
               const res = tex.source.resolution ?? 1;
               const a = readAlpha(tex.source.resource, (tex.frame.x + (local.x - lb.x) / lb.width * tex.frame.width) * res, (tex.frame.y + (local.y - lb.y) / lb.height * tex.frame.height) * res);
@@ -1845,9 +1861,56 @@ function pickScene(root, x, y, opts = {}, deps = {}) {
       found.push({ hit, order: orderOf(d) });
     });
   };
-  walk2(root, "", true);
+  walk3(root, "", true);
   return found.sort((a, b) => above(a.order, b.order)).map((f) => f.hit);
 }
+var cache = /* @__PURE__ */ new WeakMap();
+function textPictureOf(display) {
+  if (!(display instanceof Text)) return null;
+  const style = display.style;
+  const key = `${display.text}|${display.resolution}|${style.styleKey ?? ""}`;
+  const kept = cache.get(display);
+  if (kept?.key === key) return kept.picture;
+  try {
+    const { canvasAndContext, frame } = CanvasTextGenerator.getCanvasAndContext({ text: display.text, style: display.style, resolution: display.resolution });
+    const copy = document.createElement("canvas");
+    copy.width = canvasAndContext.canvas.width;
+    copy.height = canvasAndContext.canvas.height;
+    copy.getContext("2d").drawImage(canvasAndContext.canvas, 0, 0);
+    CanvasPool.returnCanvasAndContext(canvasAndContext);
+    const picture = { frame: { x: frame.x, y: frame.y, width: frame.width, height: frame.height }, source: { resolution: display.resolution, resource: copy } };
+    cache.set(display, { key, picture });
+    return picture;
+  } catch {
+    return null;
+  }
+}
+
+// src/core/reuse.ts
+var lendable = (s) => typeof s.reuseKey === "function";
+var borrower = (s) => typeof s.commitReuse === "function";
+function walk(root, visit) {
+  for (const { seq } of root.layers()) {
+    visit(seq);
+    const mask = seq.maskSequence;
+    if (mask) visit(mask);
+    if (seq instanceof CompositionSequence) walk(seq, visit);
+  }
+}
+function reusePoolOf(old) {
+  const free = /* @__PURE__ */ new Map();
+  if (old) walk(old, (seq) => {
+    if (!lendable(seq)) return;
+    const key = seq.reuseKey();
+    if (key !== null) free.set(key, [...free.get(key) ?? [], seq]);
+  });
+  return { claim: (key) => free.get(key)?.shift() ?? null };
+}
+function commitReuse(root) {
+  walk(root, (seq) => {
+    if (borrower(seq)) seq.commitReuse();
+  });
+}
 
 // src/core/hover.ts
 var keyOf = (h) => h ? `${h.path}${h.three ? `#${h.three.object}` : ""}` : null;
@@ -1941,7 +2004,7 @@ function detailOf(seq) {
   if (s.music && typeof s.music === "object") return "music";
   return void 0;
 }
-function walk(comp, parentStart, parentEnd, depth, prefix, rows, transitions, local) {
+function walk2(comp, parentStart, parentEnd, depth, prefix, rows, transitions, local) {
   const entries = [];
   comp._children.forEach((seq, i) => {
     const name = seq.spec.name ?? `${seq.spec.type}#${i}`;
@@ -1954,7 +2017,7 @@ function walk(comp, parentStart, parentEnd, depth, prefix, rows, transitions, lo
     const isComp = seq instanceof CompositionSequence;
     if (isComp) {
       const label = seq.remapLabel();
-      walk(seq, label ? 0 : start, label ? seq.contentSpan : end, depth + 1, prefix + name + "/", inner, transitions, label ? `${name} ${label}` : local);
+      walk2(seq, label ? 0 : start, label ? seq.contentSpan : end, depth + 1, prefix + name + "/", inner, transitions, label ? `${name} ${label}` : local);
     }
     entries.push({ row, inner, groupable: !isComp });
   });
@@ -2002,7 +2065,7 @@ function collectTimeline(root, duration) {
   const rows = [];
   const transitions = [];
   const label = root.remapLabel();
-  walk(root, 0, label ? root.contentSpan : duration, 0, "", rows, transitions, label ? `movie ${label}` : void 0);
+  walk2(root, 0, label ? root.contentSpan : duration, 0, "", rows, transitions, label ? `movie ${label}` : void 0);
   return { duration, rows, transitions };
 }
 var COLORS = {
@@ -2150,28 +2213,28 @@ function substitute(s, vars) {
 }
 function applyVars(spec, vars) {
   if (Object.keys(vars).length === 0) return spec;
-  const walk2 = (v) => {
+  const walk3 = (v) => {
     if (typeof v === "string") return substitute(v, vars);
-    if (Array.isArray(v)) return v.map(walk2);
+    if (Array.isArray(v)) return v.map(walk3);
     if (isPlain(v)) {
       const o = {};
-      for (const [k, x] of Object.entries(v)) o[k] = walk2(x);
+      for (const [k, x] of Object.entries(v)) o[k] = walk3(x);
       return o;
     }
     return v;
   };
-  return walk2(spec);
+  return walk3(spec);
 }
 var escapeRe = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 function lintVars(spec, vars) {
   const declared = Object.keys(vars);
   const strings = [];
-  const walk2 = (v) => {
+  const walk3 = (v) => {
     if (typeof v === "string") strings.push(v);
-    else if (Array.isArray(v)) v.forEach(walk2);
-    else if (isPlain(v)) Object.values(v).forEach(walk2);
+    else if (Array.isArray(v)) v.forEach(walk3);
+    else if (isPlain(v)) Object.values(v).forEach(walk3);
   };
-  walk2(spec);
+  walk3(spec);
   const out = [];
   for (const name of declared) {
     const word = new RegExp(`(?<![A-Za-z0-9_.])${escapeRe(name)}(?![A-Za-z0-9_])`);
@@ -2725,14 +2788,18 @@ var Movie = class {
    * Build the composition tree for these variables and this size, off stage: `{name}` replaced, the root shape (with the numeric variables for the
    * expressions), transitions expanded, every layer built. Used by `init` and by `rebuild`.
    */
-  async _construct(composition, vars, width, height, lp, sizeWins = this._resized) {
+  async _construct(composition, vars, width, height, lp, sizeWins = this._resized, reuse) {
     const spec = applyVars(composition, vars);
+    const gpu = sharedGpuOf(this.app?.renderer);
+    const gpuField = gpu ? { gpu } : {};
     const rootShape = {
       width,
       height,
       duration: this.duration,
       frameRate: this.frameRate,
       vars: numericVars(vars),
+      ...gpuField,
+      ...reuse ? { reuse } : {},
       ...lp ? { onLayerBuilt: async () => {
         lp.tick();
         await lp.yieldIfDue();
@@ -2889,7 +2956,7 @@ var Movie = class {
       if (change.composition !== void 0) for (const w of lintVars(change.composition, vars)) console.warn(w);
       changed = changed || sizeChanged || change.composition !== void 0 || reason === "rebuild";
       if (!changed) return { reason, ms: 0, audio: "none", frame: this.currentFrame, playing: this.isPlaying, unchanged: true };
-      sequence = await this._construct(composition, vars, width, height, void 0, this._resized || sizeChanged);
+      sequence = await this._construct(composition, vars, width, height, void 0, this._resized || sizeChanged, reusePoolOf(this._rootSequence));
       alive();
       const timeline = createTimeline({ paused: true, defaults: { ease: "none" } });
       lengthen(timeline, this.duration);
@@ -2929,6 +2996,7 @@ var Movie = class {
         if (old?.target) root.removeChild(old.target);
         if (sequence.target) root.addChild(sequence.target);
         this._rootSequence = sequence;
+        commitReuse(sequence);
         this.timeline = timeline;
         this._timeFilters = collectTimeFilters(sequence);
         const unmute = muteBoundTextureWarning();
@@ -3203,7 +3271,8 @@ var Movie = class {
     warnUnknownOptions("movie.pick()", opts, ["only", "ignore", "alpha"]);
     this._requireReady("pick");
     if (!Number.isFinite(x) || !Number.isFinite(y)) throw new Error(`pixi-effects: movie.pick(x, y) needs two numbers (canvas pixels), got ${x}, ${y}. For a pointer event: movie.pick(...movie.canvasPoint(event))`);
-    return pickScene(this._rootSequence, x, y, opts);
+    const textureOf = textPictureOf;
+    return pickScene(this._rootSequence, x, y, opts, { textureOf });
   }
   /**
    * Which layer the pointer is over, as callbacks: `onEnter(hit)` when the layer (or, in a `three` layer, the object) under the pointer changes to another, `onLeave(hit)` for the one it
@@ -4724,5 +4793,5 @@ function withFade(spec, opts) {
 }
 
 export { Movie, animateText, audioEnvelope, bpmEnvelope, cameraPath, computeEnvelope, dismissLoader, failLoader, followPath, kenBurns, measureText, musicBuffer, musicEnvelope, musicEvents, orbit, parseEase2 as parseEase, particles, react, resolveLoader, samplePath, splitText, stagger, wiggle, withFade };
-//# sourceMappingURL=chunk-NFJKBWYO.js.map
-//# sourceMappingURL=chunk-NFJKBWYO.js.map
+//# sourceMappingURL=chunk-4MBTYREC.js.map
+//# sourceMappingURL=chunk-4MBTYREC.js.map