pixi-effects 0.47.0 → 0.47.2

package/dist/three.d.cts

@@ -49,14 +49,20 @@ interface ThreeLayerHost {
     shared: boolean;
     /** Run `fn` just before every draw of the three layer; returns the function that stops it. */
     beforeDraw(fn: () => void): () => void;
-    /** Remember a handle: a rebuild that keeps the three layer gives it the new tree's layer (`rebind`). */
-    track(handle: Rebindable): void;
+    /** Remember a handle: a rebuild that keeps the three layer gives it the new tree's layer (`prepare`). */
+    track(handle: Rebindable): () => void;
 }
 /** What a rebuild that keeps the three layer needs: show the layer of the new tree with the same name. */
+/** `prepare` looks for the layer in the new tree and throws if it is gone, but changes nothing; the function it returns puts the handle on the new tree's layer (called when that tree is on stage, so a rebuild that fails or is slow leaves the old movie showing its own screen). */
 interface Rebindable {
     material: Material;
-    source(): Sequence;
-    rebind(host: ThreeLayerHost): void;
+    source(): Sequence; /** Where in the source (0..1 across, 0..1 down) a point (u, v) of the mesh's uv shows: the texture's own repeat / offset / rotation taken into account. */
+    sourceAt(u: number, v: number): {
+        x: number;
+        y: number;
+    };
+    prepare(host: ThreeLayerHost): () => void;
+    keepHidden(): void;
     dispose(): void;
 }
 declare function threeLayerTexture(ctx: ThreeContext, name: string, options?: ThreeLayerTextureOptions): Promise<ThreeLayerTexture>;
@@ -171,6 +177,11 @@ declare class ThreeSequence extends 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. */
     private _drawHooks;
     private _layerTextures;
+    private _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(): void;
+    /** 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(): boolean;
     private _scene;
     private _camera;
     private _ctx;
@@ -191,6 +202,10 @@ declare class ThreeSequence extends 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: unknown): {
         source: Sequence;
+        at(u: number, v: number): {
+            x: number;
+            y: number;
+        };
     } | 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. */
     private _makeHost;

package/dist/three.d.ts

@@ -49,14 +49,20 @@ interface ThreeLayerHost {
     shared: boolean;
     /** Run `fn` just before every draw of the three layer; returns the function that stops it. */
     beforeDraw(fn: () => void): () => void;
-    /** Remember a handle: a rebuild that keeps the three layer gives it the new tree's layer (`rebind`). */
-    track(handle: Rebindable): void;
+    /** Remember a handle: a rebuild that keeps the three layer gives it the new tree's layer (`prepare`). */
+    track(handle: Rebindable): () => void;
 }
 /** What a rebuild that keeps the three layer needs: show the layer of the new tree with the same name. */
+/** `prepare` looks for the layer in the new tree and throws if it is gone, but changes nothing; the function it returns puts the handle on the new tree's layer (called when that tree is on stage, so a rebuild that fails or is slow leaves the old movie showing its own screen). */
 interface Rebindable {
     material: Material;
-    source(): Sequence;
-    rebind(host: ThreeLayerHost): void;
+    source(): Sequence; /** Where in the source (0..1 across, 0..1 down) a point (u, v) of the mesh's uv shows: the texture's own repeat / offset / rotation taken into account. */
+    sourceAt(u: number, v: number): {
+        x: number;
+        y: number;
+    };
+    prepare(host: ThreeLayerHost): () => void;
+    keepHidden(): void;
     dispose(): void;
 }
 declare function threeLayerTexture(ctx: ThreeContext, name: string, options?: ThreeLayerTextureOptions): Promise<ThreeLayerTexture>;
@@ -171,6 +177,11 @@ declare class ThreeSequence extends 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. */
     private _drawHooks;
     private _layerTextures;
+    private _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(): void;
+    /** 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(): boolean;
     private _scene;
     private _camera;
     private _ctx;
@@ -191,6 +202,10 @@ declare class ThreeSequence extends 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: unknown): {
         source: Sequence;
+        at(u: number, v: number): {
+            x: number;
+            y: number;
+        };
     } | 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. */
     private _makeHost;

package/dist/three.js

@@ -1,5 +1,5 @@
-import { Sequence, buildScope, evaluateExpr, registerSequenceType } from './chunk-DM2OLQOJ.js';
-import './chunk-32MMNDDN.js';
+import { Sequence, buildScope, evaluateExpr, registerSequenceType } from './chunk-YF4JC2AL.js';
+import './chunk-P2P7C2KZ.js';
 import './chunk-BXOCEZ4U.js';
 import { Texture, Sprite, TextureSource, RenderTexture, Matrix } from 'pixi.js';
 import { WebGLRenderer, Scene, PerspectiveCamera, Raycaster, Vector2, Vector3, Quaternion, Plane, Box3, RenderTarget, Group, AnimationMixer, LoopOnce, LoopRepeat, AmbientLight, DirectionalLight, SpotLight, PointLight, Color, SRGBColorSpace, Fog } from 'three';
@@ -192,6 +192,16 @@ var ThreeSequence = class extends 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;
@@ -326,7 +336,7 @@ var ThreeSequence = class extends 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() {
@@ -343,6 +353,10 @@ var ThreeSequence = class extends Sequence {
       },
       track: (handle) => {
         this._layerTextures.push(handle);
+        return () => {
+          const i = this._layerTextures.indexOf(handle);
+          if (i >= 0) this._layerTextures.splice(i, 1);
+        };
       }
     };
   }
@@ -374,7 +388,7 @@ var ThreeSequence = class extends 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);
   }
@@ -385,6 +399,8 @@ var ThreeSequence = class extends 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
@@ -897,18 +913,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 = 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 = 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;
@@ -941,7 +978,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;
@@ -977,30 +1014,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) {
@@ -1015,7 +1076,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;
 }