pixi-effects 0.47.0 → 0.47.2

package/dist/three.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
-var chunkLALEBV63_cjs = require('./chunk-LALEBV63.cjs');
-require('./chunk-3SAS3ZE5.cjs');
+var chunkTVVC4GVK_cjs = require('./chunk-TVVC4GVK.cjs');
+require('./chunk-2YV7ISX6.cjs');
 require('./chunk-TWZNOUM7.cjs');
 var pixi_js = require('pixi.js');
 var three$1 = require('three');
@@ -170,7 +170,7 @@ function releaseThree(kind) {
 
 // src/three/ThreeSequence.ts
 var NOT_PURE = /\bMath\s*\.\s*random\s*\(|\bDate\s*\.\s*now\s*\(|\bperformance\s*\.\s*now\s*\(|\bnew\s+Date\s*\(/;
-var ThreeSequence = class extends chunkLALEBV63_cjs.Sequence {
+var ThreeSequence = class extends chunkTVVC4GVK_cjs.Sequence {
   _renderer = null;
   /** The renderer this layer draws with (`'webgl'` or `'webgpu'`), once it is built. */
   renderer = null;
@@ -194,6 +194,16 @@ var ThreeSequence = class extends chunkLALEBV63_cjs.Sequence {
   /** Things to do just before every draw (the 2D layers shown on meshes: `threeLayerTexture`), and those layers' handles. Both go with the state to a layer that takes it over. */
   _drawHooks = /* @__PURE__ */ new Set();
   _layerTextures = [];
+  _pendingRebinds = [];
+  /** Every frame, whether this layer is alive or not: a 2D layer it shows stays off the stage (a tween of `autoAlpha` writes `visible = true` on it). */
+  syncFrame() {
+    super.syncFrame();
+    for (const h of this._layerTextures) h.keepHidden();
+  }
+  /** True when this layer shows 2D layers on its meshes (`threeLayerTexture`): the movie draws it after the rest of the frame is ready. */
+  get showsLayers() {
+    return this._layerTextures.length > 0;
+  }
   _scene = null;
   _camera = null;
   _ctx = null;
@@ -221,7 +231,7 @@ var ThreeSequence = class extends chunkLALEBV63_cjs.Sequence {
     if (typeof spec.update === "function" && NOT_PURE.test(spec.update.toString())) {
       console.warn(`pixi-effects: three layer${spec.name ? ` "${spec.name}"` : ""}: update calls Math.random, Date.now, performance.now or new Date, so it is not deterministic: the same frame would draw differently in playback, in a seek and in an export. Derive the value from t`);
     }
-    const scope = chunkLALEBV63_cjs.buildScope(this, this.parent, this.root);
+    const scope = chunkTVVC4GVK_cjs.buildScope(this, this.parent, this.root);
     const width = resolveDim(spec.width, scope) ?? this.parent?.width ?? this.root.width;
     const height = resolveDim(spec.height, scope) ?? this.parent?.height ?? this.root.height;
     const resolution = spec.resolution ?? 1;
@@ -328,7 +338,7 @@ var ThreeSequence = class extends chunkLALEBV63_cjs.Sequence {
   /** The 2D layer that a material shows (`threeLayerTexture`), for a click on the mesh to reach it (movie.pick); null for any other material. */
   screenOf(material) {
     const handle = this._layerTextures.find((h) => h.material === material);
-    return handle ? { source: handle.source() } : null;
+    return handle ? { source: handle.source(), at: (u, v) => handle.sourceAt(u, v) } : null;
   }
   /** What `threeLayerTexture` asks of this layer: the layers listed before it, PixiJS's renderer, whether the GPU device is shared, and a place to hook in before every draw. */
   _makeHost() {
@@ -345,6 +355,10 @@ var ThreeSequence = class extends chunkLALEBV63_cjs.Sequence {
       },
       track: (handle) => {
         this._layerTextures.push(handle);
+        return () => {
+          const i = this._layerTextures.indexOf(handle);
+          if (i >= 0) this._layerTextures.splice(i, 1);
+        };
       }
     };
   }
@@ -376,7 +390,7 @@ var ThreeSequence = class extends chunkLALEBV63_cjs.Sequence {
     this._drawHooks = d._drawHooks;
     this._layerTextures = d._layerTextures;
     const host = this._makeHost();
-    for (const h of this._layerTextures) h.rebind(host);
+    this._pendingRebinds = this._layerTextures.map((h) => h.prepare(host));
     if (this.spec && this._threeSpec.followCamera) this._checkFollowShape(width, height, name);
     this._makeSprite(this._texture, width, height, name);
   }
@@ -387,6 +401,8 @@ var ThreeSequence = class extends chunkLALEBV63_cjs.Sequence {
     d._donated = true;
     d._tracked = false;
     this._borrowed = null;
+    for (const apply of this._pendingRebinds) apply();
+    this._pendingRebinds = [];
   }
   /**
    * Per-frame sync hook. Movie._awaitVideoFrames duck-types on this method
@@ -784,7 +800,7 @@ var ThreeSequence = class extends chunkLALEBV63_cjs.Sequence {
 function resolveDim(v, scope) {
   if (v === void 0) return void 0;
   if (typeof v === "number") return v;
-  return chunkLALEBV63_cjs.evaluateExpr(v, scope);
+  return chunkTVVC4GVK_cjs.evaluateExpr(v, scope);
 }
 var ids = /* @__PURE__ */ new WeakMap();
 var lastId = 0;
@@ -899,18 +915,39 @@ async function threeLayerTexture(ctx, name, options = {}) {
   if (source.spec.type !== "composition") {
     throw new Error(`${label}: "${name}" is a ${source.spec.type} layer: a layer shown on a mesh must be a composition (wrap it: { type: 'composition', name: '${name}', width: 480, height: 270, sequences: [ \u2026 ] })`);
   }
-  const width = Math.max(1, Math.round(source.intrinsicWidth * resolution)), height = Math.max(1, Math.round(source.intrinsicHeight * resolution));
-  const sharedRoute = host.shared && pixi.name === "webgpu";
-  const rt = pixi_js.RenderTexture.create({ width, height, resolution: 1, ...sharedRoute ? { autoGenerateMipmaps: true } : {} });
-  const gpuTexture = sharedRoute ? pixi.texture.getGpuSource?.(rt.source) : void 0;
-  let texture, material, readCanvas = null;
-  if (gpuTexture) {
-    let webgpu, tsl;
+  {
+    const ini = source.spec.initial ?? {};
+    const moved = ["x", "y", "rotation", "pivotX", "pivotY"].some((k) => typeof ini[k] === "number" && ini[k] !== 0) || ["scale", "scaleX", "scaleY"].some((k) => typeof ini[k] === "number" && ini[k] !== 1);
+    if (moved && (source.maskSequence || source.spec.mask !== void 0)) {
+      console.warn(`${label}: "${name}" has a mask and is not at x: 0, y: 0 (anchor 0, scale 1, rotation 0): on the mesh its content is drawn from (0, 0) but its mask stays where the parent puts it, so the mask lands shifted. Put the screen at the origin (or mask a layer INSIDE the screen: that mask moves with it).`);
+    }
+  }
+  const logicalW = Math.max(1, Math.round(source.intrinsicWidth)), logicalH = Math.max(1, Math.round(source.intrinsicHeight));
+  const width = Math.max(1, Math.round(logicalW * resolution)), height = Math.max(1, Math.round(logicalH * resolution));
+  const limit = (() => {
+    const g = pixi;
+    return g.gpu?.device?.limits?.maxTextureDimension2D ?? (g.gl ? g.gl.getParameter(g.gl.MAX_TEXTURE_SIZE) : null) ?? 8192;
+  })();
+  if (width > limit || height > limit) {
+    throw new Error(`${label}: the texture would be ${width} x ${height} pixels (the layer is ${logicalW} x ${logicalH}, resolution ${resolution}), above what this GPU allows (${limit}). Use resolution ${Math.max(1, Math.floor(limit / Math.max(logicalW, logicalH) * 10) / 10)} or lower, or a smaller composition.`);
+  }
+  let sharedRoute = host.shared && pixi.name === "webgpu";
+  let webgpu, tsl;
+  if (sharedRoute) {
     try {
       [webgpu, tsl] = await Promise.all([import('three/webgpu'), import('three/tsl')]);
     } catch (err) {
       throw new Error(`${label}: needs "three/webgpu" and "three/tsl" in the import map (${err instanceof Error ? err.message : err})`);
     }
+    if (typeof webgpu.ExternalTexture !== "function") {
+      console.warn(`${label}: this page's three has no ExternalTexture (it came with three 0.180): the screen is read back every frame (1.6 ms at 480 x 270) instead of shared with the GPU. Use three 0.180 or later for the no-copy route.`);
+      sharedRoute = false;
+    }
+  }
+  const rt = pixi_js.RenderTexture.create({ width: logicalW, height: logicalH, resolution, ...sharedRoute ? { autoGenerateMipmaps: true } : {} });
+  const gpuTexture = sharedRoute ? pixi.texture.getGpuSource?.(rt.source) : void 0;
+  let texture, material, readCanvas = null;
+  if (gpuTexture) {
     const ext = new webgpu.ExternalTexture(gpuTexture);
     ext.colorSpace = webgpu.NoColorSpace;
     ext.minFilter = webgpu.LinearMipmapLinearFilter;
@@ -943,7 +980,7 @@ async function threeLayerTexture(ctx, name, options = {}) {
   }
   let current = source;
   let display = source.target;
-  let sx = width / source.intrinsicWidth, sy = height / source.intrinsicHeight;
+  let sx = logicalW / source.intrinsicWidth, sy = logicalH / source.intrinsicHeight;
   let hidden = false;
   const hide = () => {
     display.visible = false;
@@ -979,30 +1016,54 @@ async function threeLayerTexture(ctx, name, options = {}) {
         }
         g.putImageData(new ImageData(pixels, w, h), 0, 0);
       } else {
-        g.clearRect(0, 0, width, height);
-        g.drawImage(pixi.extract.canvas(rt), 0, 0);
+        if (pixi.name === "webgl") {
+          const { pixels, width: w, height: h } = pixi.extract.pixels(rt);
+          for (let i = 3; i < pixels.length; i += 4) pixels[i] = 255;
+          g.putImageData(new ImageData(pixels, w, h), 0, 0);
+        } else {
+          g.globalCompositeOperation = "source-over";
+          g.fillStyle = "#000";
+          g.fillRect(0, 0, width, height);
+          g.drawImage(pixi.extract.canvas(rt), 0, 0);
+        }
       }
       texture.needsUpdate = true;
     }
   };
   const stop = host.beforeDraw(refresh);
   refresh();
+  let disposed = false;
   const handle = {
     material,
     texture,
     width,
     height,
     source: () => current,
-    rebind(next) {
+    sourceAt(u, v) {
+      const t = texture;
+      t.updateMatrix?.();
+      const e = t.matrix?.elements;
+      const tu = e ? e[0] * u + e[3] * v + e[6] : u, tv = e ? e[1] * u + e[4] * v + e[7] : v;
+      return { x: tu, y: gpuTexture ? tv : 1 - tv };
+    },
+    prepare(next) {
       const again = next.findLayer(name);
+      if (disposed) return () => {
+      };
       if (!again) throw new Error(`${label}: after a rebuild there is no layer "${name}" before the three layer any more`);
-      current = again;
-      display = again.target;
-      sx = width / again.intrinsicWidth;
-      sy = height / again.intrinsicHeight;
-      hide();
-      refresh();
+      return () => {
+        current = again;
+        display = again.target;
+        sx = logicalW / again.intrinsicWidth;
+        sy = logicalH / again.intrinsicHeight;
+        hide();
+        refresh();
+      };
+    },
+    keepHidden() {
+      if (hidden && !disposed) display.visible = false;
     },
+    // (the timeline can put it back: autoAlpha writes `visible`)
     dispose() {
       stop();
       if (hidden) {
@@ -1017,7 +1078,13 @@ async function threeLayerTexture(ctx, name, options = {}) {
       material.dispose?.();
     }
   };
-  host.track(handle);
+  const untrack = host.track(handle);
+  handle.dispose = /* @__PURE__ */ ((inner) => () => {
+    if (disposed) return;
+    disposed = true;
+    untrack();
+    inner();
+  })(handle.dispose);
   return handle;
 }
 
@@ -1026,7 +1093,7 @@ function registerThree(options = {}) {
   const kind = options.renderer ?? "webgl";
   checkRendererKind(kind, "registerThree's renderer");
   setPageRenderer(kind);
-  chunkLALEBV63_cjs.registerSequenceType("three", ThreeSequence);
+  chunkTVVC4GVK_cjs.registerSequenceType("three", ThreeSequence);
 }
 function three(spec) {
   return spec;