pixi-effects 0.20.0 → 0.22.0

package/dist/{chunk-FFYA3UBU.cjs → chunk-MHOO2CVU.cjs}

@@ -1,7 +1,9 @@
 'use strict';
 
-var chunkNO26HWR7_cjs = require('./chunk-NO26HWR7.cjs');
-var chunkWTRKDIKH_cjs = require('./chunk-WTRKDIKH.cjs');
+var chunkIFZOI3JQ_cjs = require('./chunk-IFZOI3JQ.cjs');
+var chunkK4JVI5HK_cjs = require('./chunk-K4JVI5HK.cjs');
+var chunkBPTW7L25_cjs = require('./chunk-BPTW7L25.cjs');
+var chunkUZTKEYFP_cjs = require('./chunk-UZTKEYFP.cjs');
 var pixi_js = require('pixi.js');
 var gsap = require('gsap');
 
@@ -47,6 +49,91 @@ function assignDepthOrder(items) {
   }
   return out;
 }
+var DISC_TAPS = 48;
+var GL_VERTEX = `#version 300 es
+in vec2 aPosition;
+out vec2 vTextureCoord;
+uniform vec4 uInputSize;
+uniform vec4 uOutputFrame;
+uniform vec4 uOutputTexture;
+void main(void) {
+  vec2 position = aPosition * uOutputFrame.zw + uOutputFrame.xy;
+  position.x = position.x * (2.0 / uOutputTexture.x) - 1.0;
+  position.y = position.y * (2.0 * uOutputTexture.z / uOutputTexture.y) - uOutputTexture.z;
+  gl_Position = vec4(position, 0.0, 1.0);
+  vTextureCoord = aPosition * (uOutputFrame.zw * uInputSize.zw);
+}`;
+var GL_FRAGMENT = `#version 300 es
+precision highp float;
+in vec2 vTextureCoord;
+uniform sampler2D uTexture;
+uniform vec4 uInputSize;
+uniform float uRadius;
+out vec4 finalColor;
+void main(void) {
+  vec4 acc = vec4(0.0);
+  for (int i = 0; i < ${DISC_TAPS}; i++) {
+    float r = sqrt((float(i) + 0.5) / ${DISC_TAPS}.0) * uRadius;
+    float a = float(i) * 2.39996323;
+    acc += texture(uTexture, vTextureCoord + vec2(cos(a), sin(a)) * r * uInputSize.zw);
+  }
+  finalColor = acc / ${DISC_TAPS}.0;
+}`;
+var WGSL = `
+struct GlobalFilterUniforms {
+  uInputSize: vec4<f32>, uInputPixel: vec4<f32>, uInputClamp: vec4<f32>,
+  uOutputFrame: vec4<f32>, uGlobalFrame: vec4<f32>, uOutputTexture: vec4<f32>,
+};
+struct DiscUniforms { uRadius: f32 };
+@group(0) @binding(0) var<uniform> gfu: GlobalFilterUniforms;
+@group(0) @binding(1) var uTexture: texture_2d<f32>;
+@group(0) @binding(2) var uSampler : sampler;
+@group(1) @binding(0) var<uniform> disc : DiscUniforms;
+struct VSOutput { @builtin(position) position: vec4<f32>, @location(0) uv : vec2<f32> };
+fn filterVertexPosition(aPosition : vec2<f32>) -> vec4<f32> {
+  var position = aPosition * gfu.uOutputFrame.zw + gfu.uOutputFrame.xy;
+  position.x = position.x * (2.0 / gfu.uOutputTexture.x) - 1.0;
+  position.y = position.y * (2.0 * gfu.uOutputTexture.z / gfu.uOutputTexture.y) - gfu.uOutputTexture.z;
+  return vec4<f32>(position, 0.0, 1.0);
+}
+fn filterTextureCoord(aPosition : vec2<f32>) -> vec2<f32> {
+  return aPosition * (gfu.uOutputFrame.zw * gfu.uInputSize.zw);
+}
+@vertex
+fn mainVertex(@location(0) aPosition : vec2<f32>) -> VSOutput {
+  return VSOutput(filterVertexPosition(aPosition), filterTextureCoord(aPosition));
+}
+@fragment
+fn mainFragment(@location(0) uv : vec2<f32>) -> @location(0) vec4<f32> {
+  var acc = vec4<f32>(0.0);
+  for (var i = 0; i < ${DISC_TAPS}; i++) {
+    let r = sqrt((f32(i) + 0.5) / ${DISC_TAPS}.0) * disc.uRadius;
+    let a = f32(i) * 2.39996323;
+    acc += textureSampleLevel(uTexture, uSampler, uv + vec2<f32>(cos(a), sin(a)) * r * gfu.uInputSize.zw, 0.0);
+  }
+  return acc / ${DISC_TAPS}.0;
+}`;
+var DiscBlurFilter = class extends pixi_js.Filter {
+  constructor(radius = 8) {
+    super({
+      glProgram: pixi_js.GlProgram.from({ vertex: GL_VERTEX, fragment: GL_FRAGMENT, name: "disc-blur" }),
+      gpuProgram: pixi_js.GpuProgram.from({ vertex: { source: WGSL, entryPoint: "mainVertex" }, fragment: { source: WGSL, entryPoint: "mainFragment" } }),
+      resources: { disc: new pixi_js.UniformGroup({ uRadius: { value: radius, type: "f32" } }) }
+    });
+    this.radius = radius;
+  }
+  /** Blur radius in pixels. The padding follows it, so the blurred edge is not cut off. */
+  get radius() {
+    return this.resources.disc.uniforms.uRadius;
+  }
+  set radius(v) {
+    const r = Math.max(0, v);
+    this.resources.disc.uniforms.uRadius = r;
+    this.padding = Math.ceil(r) + 2;
+  }
+};
+
+// src/space/Layer3D.ts
 var MAX_TEXTURE_SIZE = 4096;
 var SUPERSAMPLE = 2;
 var MAX_TEXTURE_PIXELS = 2048 * 2048;
@@ -65,8 +152,8 @@ function readLayerTransform(target) {
     x: c.x,
     y: c.y,
     z: c.z ?? 0,
-    rotationX: (c.rotationX ?? 0) * chunkNO26HWR7_cjs.DEG,
-    rotationY: (c.rotationY ?? 0) * chunkNO26HWR7_cjs.DEG,
+    rotationX: (c.rotationX ?? 0) * chunkIFZOI3JQ_cjs.DEG,
+    rotationY: (c.rotationY ?? 0) * chunkIFZOI3JQ_cjs.DEG,
     rotationZ: c.rotation,
     scaleX: c.scale.x,
     scaleY: c.scale.y,
@@ -100,6 +187,11 @@ var Layer3D = class {
   retired = [];
   size = null;
   warnedBehind = false;
+  /** Depth-of-field blur radius (px) from the last `setBlur`; 0 = no filter. */
+  blur = 0;
+  blurFilter = null;
+  blendWas = "normal";
+  blendFilter = null;
   update(host, basis) {
     this.flushRetired();
     const target = this.seq.target;
@@ -111,19 +203,19 @@ var Layer3D = class {
     if (!(needW >= 1 && needH >= 1) || !Number.isFinite(bounds.x) || !Number.isFinite(bounds.y)) return this.hide();
     const size = this.sizeFor(needW, needH);
     const frame = { x: bounds.x - pad, y: bounds.y - pad, width: size.w, height: size.h };
-    const projected = chunkNO26HWR7_cjs.projectLayer(readLayerTransform(target), frame, basis);
+    const projected = chunkIFZOI3JQ_cjs.projectLayer(readLayerTransform(target), frame, basis);
     this.depth = projected.depth;
     if (!projected.visible) {
       if (!this.warnedBehind) {
         this.warnedBehind = true;
         if (this.seq.spec.hideBehindCamera) return this.hide();
-        if (projected.depth > chunkNO26HWR7_cjs.NEAR) {
+        if (projected.depth > chunkIFZOI3JQ_cjs.NEAR) {
           console.warn(
-            `pixi-effects: ${chunkNO26HWR7_cjs.describeLayer(this.seq.spec)}: part of it (a corner) reaches the camera plane (z = ${(target.z ?? 0).toFixed(0)}, rotationX ${(target.rotationX ?? 0).toFixed(0)}\xB0, rotationY ${(target.rotationY ?? 0).toFixed(0)}\xB0), and a layer is hidden whole when any corner is at or behind it. Tilt it less (rotationX / rotationY), make it smaller, or keep the camera further away from it (the default camera sits at z = (height/2)/tan(fov/2), about 989 for 720p at fov 40).`
+            `pixi-effects: ${chunkBPTW7L25_cjs.describeLayer(this.seq.spec)}: part of it (a corner) reaches the camera plane (z = ${(target.z ?? 0).toFixed(0)}, rotationX ${(target.rotationX ?? 0).toFixed(0)}\xB0, rotationY ${(target.rotationY ?? 0).toFixed(0)}\xB0), and a layer is hidden whole when any corner is at or behind it. Tilt it less (rotationX / rotationY), make it smaller, or keep the camera further away from it (the default camera sits at z = (height/2)/tan(fov/2), about 989 for 720p at fov 40).`
           );
         } else {
           console.warn(
-            `pixi-effects: ${chunkNO26HWR7_cjs.describeLayer(this.seq.spec)} is at or behind the camera plane (z = ${(target.z ?? 0).toFixed(0)}) and is hidden. If that is unintended, lower its z or move the camera back (the default camera sits at z = (height/2)/tan(fov/2), about 989 for 720p at fov 40).`
+            `pixi-effects: ${chunkBPTW7L25_cjs.describeLayer(this.seq.spec)} is at or behind the camera plane (z = ${(target.z ?? 0).toFixed(0)}) and is hidden. If that is unintended, lower its z or move the camera back (the default camera sits at z = (height/2)/tan(fov/2), about 989 for 720p at fov 40).`
           );
         }
       }
@@ -140,7 +232,46 @@ var Layer3D = class {
     this.display.geometry.setCorners(...projected.corners);
     this.display.visible = true;
   }
+  /**
+   * Depth-of-field blur on the projected mesh (screen space), so a tilted or scaled layer blurs by the size it is drawn at.
+   * A radius under MIN_BLUR removes the filter: a sharp layer costs nothing. A blend mode moves to the filter while it is on
+   * (a filtered object blends as a whole), and comes back when it goes.
+   */
+  setBlur(radius) {
+    const d = this.display;
+    const r = radius > chunkIFZOI3JQ_cjs.MIN_BLUR ? Math.min(radius, chunkIFZOI3JQ_cjs.MAX_BLUR) : 0;
+    this.blur = r;
+    if (r === 0) {
+      if (this.blurFilter) {
+        d.filters = null;
+        d.blendMode = this.blendWas;
+        this.blurFilter.destroy();
+        this.blurFilter = null;
+        this.blendFilter?.destroy();
+        this.blendFilter = null;
+      }
+      return;
+    }
+    if (!this.blurFilter) {
+      this.blurFilter = new DiscBlurFilter(r);
+      this.blendWas = d.blendMode ?? "normal";
+      const chain = [this.blurFilter];
+      if (chunkK4JVI5HK_cjs.isAdvancedBlend(this.blendWas)) {
+        this.blendFilter = chunkK4JVI5HK_cjs.blendFilterFor(this.blendWas);
+        if (this.blendFilter) {
+          chain.push(this.blendFilter);
+          d.blendMode = "normal";
+        }
+      } else if (this.blendWas !== "normal" && this.blendWas !== "inherit") {
+        this.blurFilter.blendMode = this.blendWas;
+        d.blendMode = "normal";
+      }
+      d.filters = chain;
+    }
+    this.blurFilter.radius = r;
+  }
   destroy() {
+    this.setBlur(0);
     this.display.destroy();
     this.rt?.destroy(true);
     this.rt = null;
@@ -192,6 +323,7 @@ var Layer3D = class {
 // src/space/lint.ts
 var defaultWarn = (m) => console.warn(m);
 var FOV_HINT = `perspective is the camera's "fov" \u2014 add a { type: "camera" } layer and set fov in its initial / keyframes`;
+var DOF_HINT = `depth of field is the camera's "focus" (the plane that is sharp: a layer name or a z) and "aperture" (how shallow: 0 = off, 30 = default) \u2014 put them in the camera's initial / keyframes`;
 var LAYER_ALIASES = {
   rotateX: 'did you mean "rotationX"?',
   rotateY: 'did you mean "rotationY"?',
@@ -205,14 +337,21 @@ var LAYER_ALIASES = {
 };
 var CAMERA_ALIASES = {
   pointOfInterest: 'did you mean "lookAtX / lookAtY / lookAtZ"?',
-  lookAt: 'did you mean "lookAtX / lookAtY / lookAtZ"?'
+  lookAt: 'did you mean "lookAtX / lookAtY / lookAtZ"?',
+  depthOfField: DOF_HINT,
+  dof: DOF_HINT,
+  focalDistance: DOF_HINT,
+  focusDistance: DOF_HINT,
+  fStop: DOF_HINT,
+  blurAmount: DOF_HINT
 };
-var CAMERA_PROPS = ["x", "y", "z", "fov", "lookAtX", "lookAtY", "lookAtZ", "offsetX", "offsetY", "offsetZ", "lookOffsetX", "lookOffsetY", "lookOffsetZ"];
+var CAMERA_PROPS = ["x", "y", "z", "fov", "focus", "aperture", "lookAtX", "lookAtY", "lookAtZ", "offsetX", "offsetY", "offsetZ", "lookOffsetX", "lookOffsetY", "lookOffsetZ"];
 var NEEDS_THREE_D = ["z", "rotationX", "rotationY"];
+var CAMERA_ONLY = ["focus", "aperture"];
 var SKEW_KEYS = ["skew", "skewX", "skewY"];
 function lintSequence(spec, warn = defaultWarn) {
-  const who = chunkNO26HWR7_cjs.describeLayer(spec);
-  const keys = chunkNO26HWR7_cjs.collectPropKeys(spec);
+  const who = chunkBPTW7L25_cjs.describeLayer(spec);
+  const keys = chunkBPTW7L25_cjs.collectPropKeys(spec);
   const explained = /* @__PURE__ */ new Set();
   for (const k of keys) {
     const hint = LAYER_ALIASES[k] ?? (spec.type === "camera" ? CAMERA_ALIASES[k] : void 0);
@@ -237,6 +376,9 @@ function lintSequence(spec, warn = defaultWarn) {
     }
     return;
   }
+  for (const k of CAMERA_ONLY) {
+    if (keys.has(k)) warn(`pixi-effects: ${who}: "${k}" is a camera property and does nothing on this layer: write it in the initial / keyframes of a { type: 'camera' } layer`);
+  }
   if (spec.type === "audio") {
     if (spec.threeD) warn(`pixi-effects: ${who}: threeD has no effect on audio`);
     return;
@@ -251,31 +393,32 @@ function lintSequence(spec, warn = defaultWarn) {
     }
   }
 }
-
-// src/core/blend.ts
-var MODES = ["normal", "add", "screen", "multiply"];
-function applyBlendMode(spec, display) {
-  const mode = spec.blendMode;
-  if (mode === void 0) return;
-  if (!MODES.includes(mode)) {
-    console.warn(`pixi-effects: ${chunkNO26HWR7_cjs.describeLayer(spec)}: blendMode "${mode}" is not supported (use ${MODES.join(", ")})`);
-    return;
-  }
-  const filters = display.filters;
-  if (Array.isArray(filters) && filters.length > 0) {
-    filters[filters.length - 1].blendMode = mode;
-    return;
+function lintFocus(camera, siblings, warn = defaultWarn) {
+  if (camera.type !== "camera") return;
+  const who = chunkBPTW7L25_cjs.describeLayer(camera);
+  for (const p of chunkIFZOI3JQ_cjs.focusProblems(camera, siblings)) {
+    if (p.kind === "missing") {
+      warn(`pixi-effects: ${who}: focus: no layer named "${p.name}"${p.hint ? `; did you mean "${p.hint}"?` : ""} (the z = 0 plane is used). Write a threeD layer's name or a z number`);
+    } else if (p.kind === "not-threeD") {
+      warn(`pixi-effects: ${who}: focus "${p.name}" is not a threeD layer, so it has no depth (the z = 0 plane is used). Write a threeD layer's name or a z number`);
+    } else if (p.kind === "duplicate") {
+      warn(`pixi-effects: ${who}: focus "${p.name}": ${p.count} layers are named "${p.name}"; the first threeD one is used. Give the layers different names`);
+    } else {
+      warn(`pixi-effects: ${who}: focus "${p.name}" reads only the first z of that layer; its z moves later and the focus does not follow. Animate focus itself with numbers to follow it`);
+    }
   }
-  display.blendMode = mode;
 }
 
 // src/sequences/Composition.ts
-var CompositionSequence = class extends chunkNO26HWR7_cjs.Sequence {
+var CompositionSequence = class extends chunkIFZOI3JQ_cjs.Sequence {
   _innerContainer = null;
   _compositionShape = null;
   _children = [];
   _cameras = [];
   _layers3d = [];
+  _dofSaid = { behind: false, many: false };
+  /** What this composition made for blend modes (filters added to layers' chains, groups and their carrier filters): destroyed with it. */
+  _blendOwned = [];
   /** Drawn children in stack order (cameras and target-less sequences excluded). */
   _visual = [];
   /** Layers drawn inside a null layer (`parent`): they are not in the composition's own stack. */
@@ -328,27 +471,46 @@ var CompositionSequence = class extends chunkNO26HWR7_cjs.Sequence {
     this.intrinsicWidth = width;
     this.intrinsicHeight = height;
     this._innerContainer = inner;
-    const base = chunkNO26HWR7_cjs.timeRemapOf(this.spec);
-    const span = base ? chunkNO26HWR7_cjs.contentLength(base, this.duration) : this.duration;
-    this._remap = base ? chunkNO26HWR7_cjs.remapOf(this.spec, "time", span) : null;
+    const base = chunkIFZOI3JQ_cjs.timeRemapOf(this.spec);
+    const span = base ? chunkIFZOI3JQ_cjs.contentLength(base, this.duration) : this.duration;
+    this._remap = base ? chunkIFZOI3JQ_cjs.remapOf(this.spec, "time", span) : null;
     this._contentSpan = span;
     this._compositionShape = { width, height, duration: span };
     const lateKeyframes = [];
     for (const s of this.spec.sequences ?? []) {
       lintSequence(s);
-      chunkNO26HWR7_cjs.lintTiming(s, span, (message, kind) => kind === "late-keyframe" ? lateKeyframes.push(message) : console.warn(message));
-      chunkNO26HWR7_cjs.lintText(s);
-      chunkNO26HWR7_cjs.lintKeys(s);
+      lintFocus(s, this.spec.sequences ?? []);
+      chunkBPTW7L25_cjs.lintTiming(s, span, (message, kind) => kind === "late-keyframe" ? lateKeyframes.push(message) : console.warn(message));
+      chunkBPTW7L25_cjs.lintText(s);
+      chunkBPTW7L25_cjs.lintKeys(s);
     }
-    for (const message of chunkNO26HWR7_cjs.summarizeWarnings(lateKeyframes)) console.warn(message);
-    this._children = await chunkNO26HWR7_cjs.buildSequenceTree(
+    for (const message of chunkBPTW7L25_cjs.summarizeWarnings(lateKeyframes)) console.warn(message);
+    const crowd = chunkK4JVI5HK_cjs.maxConcurrentAdvanced(this.spec.sequences ?? [], span);
+    if (crowd >= chunkK4JVI5HK_cjs.MANY_ADVANCED) {
+      console.warn(`pixi-effects: ${chunkBPTW7L25_cjs.describeLayer(this.spec)}: ${crowd} layers with an advanced blendMode are on screen at once (a composition with one counts each layer inside it, since its children blend one by one); each is a full-frame pass (about 2 ms on WebGL). Put fewer layers in the blend (or draw the glow as one layer), or use add / screen / multiply`);
+    }
+    this._children = await chunkIFZOI3JQ_cjs.buildSequenceTree(
       this.spec.sequences ?? [],
       this._compositionShape,
       this.root
     );
     this._resolveParents();
+    const layerNames = new Set(this._children.map((c) => c.spec.name).filter((n) => !!n));
+    for (const cam of this._children) {
+      if (!(cam instanceof chunkIFZOI3JQ_cjs.CameraSequence)) continue;
+      cam.resolveFocusNames((name) => {
+        const hit = this._children.find((c) => c.spec.name === name && c.spec.threeD);
+        return hit ? chunkIFZOI3JQ_cjs.layerInitialZ(hit.spec, hit.scope()) : void 0;
+      }, layerNames);
+    }
+    const blendSaid = /* @__PURE__ */ new Map();
+    const report = (message, spec) => {
+      const seen = blendSaid.get(message);
+      if (seen) seen.n++;
+      else blendSaid.set(message, { spec, n: 1 });
+    };
     for (const child of this._children) {
-      if (child instanceof chunkNO26HWR7_cjs.CameraSequence) {
+      if (child instanceof chunkIFZOI3JQ_cjs.CameraSequence) {
         this._cameras.push(child);
         continue;
       }
@@ -361,25 +523,57 @@ var CompositionSequence = class extends chunkNO26HWR7_cjs.Sequence {
         inner.addChild(layer.display);
         this._layers3d.push(layer);
         this._visual.push({ seq: child, layer });
-        applyBlendMode(child.spec, layer.display);
+        const added3d = chunkK4JVI5HK_cjs.applyBlendMode(child.spec, layer.display, report);
+        if (added3d) this._blendOwned.push(added3d);
         if (maskSpec) {
-          console.warn(`pixi-effects: ${chunkNO26HWR7_cjs.describeLayer(child.spec)}: mask is not supported on threeD layers yet; ignored`);
+          console.warn(`pixi-effects: ${chunkBPTW7L25_cjs.describeLayer(child.spec)}: mask is not supported on threeD layers yet; ignored`);
         }
         continue;
       }
-      into.addChild(child.target);
+      const mode = child.spec.blendMode;
+      const eraseMask = !!maskSpec && child.spec.maskInverted === true && mode !== void 0 && mode !== "normal" && chunkK4JVI5HK_cjs.blendProblem(mode) === null;
+      const alphaMaskLosesBlend = !!maskSpec && (maskSpec.type === "text" || maskSpec.type === "image" || maskSpec.type === "video") && !eraseMask && mode !== void 0 && mode !== "normal" && chunkK4JVI5HK_cjs.blendProblem(mode) === null;
+      if (alphaMaskLosesBlend) {
+        report(`blendMode "${mode}" cannot be used together with ${maskSpec.type === "image" ? "an" : "a"} ${maskSpec.type} layer as the mask (the blend is lost); the layer is drawn normal. Put the ${maskSpec.type} on a layer of its own with the blendMode instead of masking with it, or use maskInverted`, child.spec);
+      }
+      let wrap;
+      if (eraseMask) {
+        wrap = new pixi_js.Container();
+        wrap.addChild(child.target);
+        let carrier = null;
+        if (chunkK4JVI5HK_cjs.isAdvancedBlend(mode)) carrier = chunkK4JVI5HK_cjs.blendFilterFor(mode);
+        else {
+          const f = new pixi_js.AlphaFilter({ alpha: 1 });
+          f.blendMode = mode;
+          carrier = f;
+        }
+        if (carrier) {
+          wrap.filters = [carrier];
+          this._blendOwned.push(carrier);
+        } else report(chunkK4JVI5HK_cjs.blendUnavailableMessage(mode), child.spec);
+        this._blendOwned.push(wrap);
+        into.addChild(wrap);
+      } else into.addChild(child.target);
       if (holder) this._nested.push(child);
-      else this._visual.push({ seq: child, layer: null });
-      applyBlendMode(child.spec, child.target);
+      else this._visual.push({ seq: child, layer: null, wrap });
+      if (!wrap && !alphaMaskLosesBlend) {
+        const added = chunkK4JVI5HK_cjs.applyBlendMode(child.spec, child.target, report);
+        if (added) this._blendOwned.push(added);
+      }
       if (maskSpec) {
         const lifetime = maskSpec.at === void 0 ? { at: child.at, duration: maskSpec.duration ?? child.duration } : {};
-        const built = await chunkNO26HWR7_cjs.buildSequenceTree([{ ...maskSpec, ...lifetime }], this._compositionShape, this.root);
+        const built = await chunkIFZOI3JQ_cjs.buildSequenceTree([{ ...maskSpec, ...lifetime }], this._compositionShape, this.root);
         const maskSeq = built[0];
         if (maskSeq?.target) {
-          into.addChild(maskSeq.target);
+          (wrap ?? into).addChild(maskSeq.target);
           const inverse = child.spec.maskInverted ?? false;
           const t = child.target;
-          if (inverse || maskSpec.type === "text") {
+          if (wrap) {
+            const mt = maskSeq.target;
+            const mf = Array.isArray(mt.filters) && mt.filters.length > 0 ? mt.filters[mt.filters.length - 1] : null;
+            if (mf) mf.blendMode = "erase";
+            else mt.blendMode = "erase";
+          } else if (inverse || maskSpec.type === "text") {
             const effect = new pixi_js.AlphaMask({ mask: maskSeq.target });
             effect.inverse = inverse;
             t.setMask?.({ mask: void 0, inverse });
@@ -390,14 +584,17 @@ var CompositionSequence = class extends chunkNO26HWR7_cjs.Sequence {
             t.mask = maskSeq.target;
           }
           child.maskSequence = maskSeq;
-          maskSeq.keepHidden = maskSpec.type === "image" || maskSpec.type === "video";
+          maskSeq.keepHidden = !wrap && (maskSpec.type === "image" || maskSpec.type === "video");
         }
       }
     }
+    for (const [message, seen] of blendSaid) {
+      console.warn(`pixi-effects: ${chunkBPTW7L25_cjs.describeLayer(seen.spec)}: ${message}${seen.n > 1 ? ` (and ${seen.n - 1} more layers have the same mistake)` : ""}`);
+    }
     if (this._layers3d.length > 0) {
       inner.sortableChildren = true;
       this._visual.forEach((v, i) => {
-        (v.layer?.display ?? v.seq.target).zIndex = i;
+        (v.layer?.display ?? v.wrap ?? v.seq.target).zIndex = i;
       });
     } else if (this._cameras.length > 0) {
       console.warn("pixi-effects: camera has no effect: this composition has no threeD layers");
@@ -445,11 +642,11 @@ var CompositionSequence = class extends chunkNO26HWR7_cjs.Sequence {
     this._clock = clock;
     const scope = this.scope();
     if (remap.start !== void 0 && remap.timeKfs.length === 0) clock.time = remap.start;
-    chunkNO26HWR7_cjs.bindClock(timeline, clock, "time", remap, this.duration, offset + this.at, scope);
+    chunkIFZOI3JQ_cjs.bindClock(timeline, clock, "time", remap, this.duration, offset + this.at, scope);
     inner.time(inner.duration());
     inner.time(0);
     last = NaN;
-    this._warnUnreachable(chunkNO26HWR7_cjs.clockTable(remap, "time", this.duration, offset + this.at, scope, offset + this.at + this.duration), offset + this.at, offset + this.at + this.duration);
+    this._warnUnreachable(chunkIFZOI3JQ_cjs.clockTable(remap, "time", this.duration, offset + this.at, scope, offset + this.at + this.duration), offset + this.at, offset + this.at + this.duration);
   }
   /**
    * A child the clock never dwells in is never visible: say so. Its `at` is in THIS composition's local time, so the usual mistake is
@@ -473,7 +670,7 @@ var CompositionSequence = class extends chunkNO26HWR7_cjs.Sequence {
       }
       if (dwell >= 2) continue;
       console.warn(
-        `pixi-effects: ${chunkNO26HWR7_cjs.describeLayer(child.spec)} starts at ${at}s of ${chunkNO26HWR7_cjs.describeLayer(this.spec)}'s own time, but its clock only reaches ${Number(table.min.toFixed(3))}\u2013${Number(table.max.toFixed(3))}s (${how}), so it is never visible. Layers inside a remapped composition are placed in that composition's local time.`
+        `pixi-effects: ${chunkBPTW7L25_cjs.describeLayer(child.spec)} starts at ${at}s of ${chunkBPTW7L25_cjs.describeLayer(this.spec)}'s own time, but its clock only reaches ${Number(table.min.toFixed(3))}\u2013${Number(table.max.toFixed(3))}s (${how}), so it is never visible. Layers inside a remapped composition are placed in that composition's local time.`
       );
     }
   }
@@ -487,26 +684,27 @@ var CompositionSequence = class extends chunkNO26HWR7_cjs.Sequence {
       for (let p = this._parentOf.get(seq); p; p = this._parentOf.get(p)) out.push(p);
       return out;
     };
-    return [...this._visual.map((v) => v.seq), ...this._nested].filter((seq) => !(seq instanceof chunkNO26HWR7_cjs.NullSequence)).map((seq) => {
+    return [...this._visual.map((v) => v.seq), ...this._nested].filter((seq) => !(seq instanceof chunkIFZOI3JQ_cjs.NullSequence)).map((seq) => {
       const layer = this._visual.find((v) => v.seq === seq)?.layer ?? null;
       return {
         seq,
         display: layer?.display ?? seq.target,
         threeD: layer !== null,
-        carriers: carriersOf(seq)
+        carriers: carriersOf(seq),
+        depthBlur: layer?.blur ?? 0
       };
     });
   }
   /** Match every `parent: 'name'` to a null layer; anything that cannot work is said out loud and drawn unparented. */
   _resolveParents() {
-    const nulls = this._children.filter((c) => c instanceof chunkNO26HWR7_cjs.NullSequence);
+    const nulls = this._children.filter((c) => c instanceof chunkIFZOI3JQ_cjs.NullSequence);
     const nullNames = nulls.map((n) => n.spec.name).filter((n) => !!n);
     const warned = /* @__PURE__ */ new Set();
     for (const child of this._children) {
       const want = child.spec.parent;
       if (want === void 0) continue;
-      const who = chunkNO26HWR7_cjs.describeLayer(child.spec);
-      if (child instanceof chunkNO26HWR7_cjs.CameraSequence) {
+      const who = chunkBPTW7L25_cjs.describeLayer(child.spec);
+      if (child instanceof chunkIFZOI3JQ_cjs.CameraSequence) {
         console.warn(`pixi-effects: ${who}: a camera cannot have a parent; ignored`);
         continue;
       }
@@ -516,11 +714,11 @@ var CompositionSequence = class extends chunkNO26HWR7_cjs.Sequence {
       }
       const same = this._children.filter((c) => c.spec.name === want);
       if (same.length === 0) {
-        const hint = chunkWTRKDIKH_cjs.suggestName(want, nullNames);
+        const hint = chunkUZTKEYFP_cjs.suggestName(want, nullNames);
         console.warn(`pixi-effects: ${who}: parent "${want}": no layer with that name${hint ? `; did you mean "${hint}"?` : ""} (the layer is drawn without a parent)`);
         continue;
       }
-      const holder = same.find((c) => c instanceof chunkNO26HWR7_cjs.NullSequence);
+      const holder = same.find((c) => c instanceof chunkIFZOI3JQ_cjs.NullSequence);
       if (!holder) {
         console.warn(`pixi-effects: ${who}: parent "${want}" is a ${same[0].spec.type} layer; only { type: 'null' } layers can be parents (the layer is drawn without a parent)`);
         continue;
@@ -560,12 +758,14 @@ var CompositionSequence = class extends chunkNO26HWR7_cjs.Sequence {
     const { width, height } = this._compositionShape;
     const compEnd = this._childBase + (this.duration ?? 0);
     const active = pickActiveCamera(
-      this._cameras.map((cam) => ({ cam, ...cam.window() })),
+      this._cameras.map((cam2) => ({ cam: cam2, ...cam2.window() })),
       childT,
       compEnd
     );
-    const basis = chunkNO26HWR7_cjs.cameraBasis(active ? active.cam.state() : chunkNO26HWR7_cjs.homeCamera(width, height), width, height);
+    const cam = active ? active.cam.state() : chunkIFZOI3JQ_cjs.homeCamera(width, height);
+    const basis = chunkIFZOI3JQ_cjs.cameraBasis(cam, width, height);
     for (const layer of this._layers3d) layer.update(host, basis);
+    this._applyDepthOfField(cam, basis);
     const order = assignDepthOrder(
       this._visual.map((v, i) => ({ stackIndex: i, threeD: v.layer !== null, depth: v.layer?.depth ?? 0 }))
     );
@@ -573,6 +773,32 @@ var CompositionSequence = class extends chunkNO26HWR7_cjs.Sequence {
       if (v.layer) v.layer.display.zIndex = order[i];
     });
   }
+  /** Depth of field: each threeD layer is blurred by how far its depth is from the focal plane (a pure function of the camera and the layers). */
+  _applyDepthOfField(cam, basis) {
+    const aperture = cam.aperture ?? 0;
+    if (!(aperture > 0)) {
+      for (const l of this._layers3d) l.setBlur(0);
+      return;
+    }
+    const focusDepth = chunkIFZOI3JQ_cjs.projectPoint(basis, { x: cam.lookAtX, y: cam.lookAtY, z: cam.focus ?? 0 }).depth;
+    if (!(focusDepth > chunkIFZOI3JQ_cjs.NEAR)) {
+      if (!this._dofSaid.behind) {
+        this._dofSaid.behind = true;
+        console.warn(`pixi-effects: ${chunkBPTW7L25_cjs.describeLayer(this.spec)}: the camera's focus (z = ${(cam.focus ?? 0).toFixed(0)}) is at or behind the camera, so nothing is blurred. Put focus in front of the camera (a z below the camera's z)`);
+      }
+      for (const l of this._layers3d) l.setBlur(0);
+      return;
+    }
+    let blurred = 0;
+    for (const l of this._layers3d) {
+      l.setBlur(l.display.visible ? chunkIFZOI3JQ_cjs.blurRadius(aperture, basis.focal, l.depth, focusDepth) : 0);
+      if (l.blur > 0) blurred++;
+    }
+    if (blurred >= chunkIFZOI3JQ_cjs.MANY_BLURRED && !this._dofSaid.many) {
+      this._dofSaid.many = true;
+      console.warn(`pixi-effects: ${chunkBPTW7L25_cjs.describeLayer(this.spec)}: ${blurred} layers are blurred by depth of field at once; each costs a filter pass per frame (WebGPU more). Merge the far layers or lower aperture`);
+    }
+  }
   collectAudio(out, baseTime) {
     super.collectAudio(out, baseTime);
     const remap = this._remap;
@@ -584,7 +810,7 @@ var CompositionSequence = class extends chunkNO26HWR7_cjs.Sequence {
     const inner = [];
     for (const child of this._children) child.collectAudio(inner, 0);
     const lo = baseTime + this.at, hi = lo + this.duration;
-    const table = chunkNO26HWR7_cjs.clockTable(remap, "time", this.duration, lo, this.scope(), hi);
+    const table = chunkIFZOI3JQ_cjs.clockTable(remap, "time", this.duration, lo, this.scope(), hi);
     for (const d of inner) {
       const prev = d.warp;
       out.push({ ...d, warp: (t) => t < lo || t > hi ? NaN : prev ? prev(table.at(t)) : table.at(t) });
@@ -597,6 +823,8 @@ var CompositionSequence = class extends chunkNO26HWR7_cjs.Sequence {
     for (const l of this._layers3d) l.destroy();
     this._layers3d = [];
     for (const c of this._children) c.destroy();
+    for (const o of this._blendOwned) o.destroy();
+    this._blendOwned = [];
     super.destroy();
   }
 };
@@ -608,5 +836,5 @@ function frameOf(child) {
 }
 
 exports.CompositionSequence = CompositionSequence;
-//# sourceMappingURL=chunk-FFYA3UBU.cjs.map
-//# sourceMappingURL=chunk-FFYA3UBU.cjs.map
+//# sourceMappingURL=chunk-MHOO2CVU.cjs.map
+//# sourceMappingURL=chunk-MHOO2CVU.cjs.map