melonjs 19.0.0 → 19.2.0

package/build/index.js

@@ -1,5 +1,5 @@
 /*!
- * melonJS Game Engine - 19.0.0
+ * melonJS Game Engine - 19.2.0
  * http://www.melonjs.org
  * melonjs is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license
@@ -6228,6 +6228,7 @@ var defaultApplicationSettings = {
   blendMode: "normal",
   physic: "builtin",
   failIfMajorPerformanceCaveat: true,
+  highPrecisionShader: true,
   subPixel: false,
   verbose: false,
   legacy: false,
@@ -7059,31 +7060,8 @@ function unbindKey(keyCode) {
   delete _preventDefaultForKeys[keyCode];
 }
 
-// src/lang/console.js
-function warning(deprecated, replacement, version2) {
-  const msg = "melonJS: %s is deprecated since version %s, please use %s";
-  const stack = new Error().stack;
-  if (console.groupCollapsed) {
-    console.groupCollapsed(
-      "%c" + msg,
-      "font-weight:normal;color:yellow;",
-      deprecated,
-      version2,
-      replacement
-    );
-  } else {
-    console.warn(msg, deprecated, version2, replacement);
-  }
-  if (typeof stack !== "undefined") {
-    console.warn(stack);
-  }
-  if (console.groupCollapsed) {
-    console.groupEnd();
-  }
-}
-
 // src/geometries/ellipse.ts
-var Ellipse = class _Ellipse {
+var Ellipse = class {
   /**
    * the center coordinates of the ellipse
    */
@@ -7351,7 +7329,7 @@ var Ellipse = class _Ellipse {
    * @returns new Ellipse
    */
   clone() {
-    const clone = new _Ellipse(
+    const clone = ellipsePool.get(
       this.pos.x,
       this.pos.y,
       this.radiusV.x * 2,
@@ -8985,6 +8963,73 @@ var Matrix3d = class {
     a[15] = b0 * a03 + b1 * a13 + b2 * a23 + b3 * a33;
     return this;
   }
+  transform(b00, b01, b02, b03, b10, b11, b12, b13, b20, b21, b22, b23, b30, b31, b32, b33) {
+    const argc = arguments.length;
+    if (argc !== 6 && argc !== 16) {
+      throw new Error(`transform() requires 6 or 16 arguments, got ${argc}`);
+    }
+    let c0, c1, c2, c3;
+    let c4, c5, c6, c7;
+    let c8, c9, c10, c11;
+    let c12, c13, c14, c15;
+    if (argc === 6) {
+      c0 = b00;
+      c1 = b01;
+      c2 = 0;
+      c3 = 0;
+      c4 = b02;
+      c5 = b03;
+      c6 = 0;
+      c7 = 0;
+      c8 = 0;
+      c9 = 0;
+      c10 = 1;
+      c11 = 0;
+      c12 = b10;
+      c13 = b11;
+      c14 = 0;
+      c15 = 1;
+    } else {
+      c0 = b00;
+      c1 = b01;
+      c2 = b02;
+      c3 = b03;
+      c4 = b10;
+      c5 = b11;
+      c6 = b12;
+      c7 = b13;
+      c8 = b20;
+      c9 = b21;
+      c10 = b22;
+      c11 = b23;
+      c12 = b30;
+      c13 = b31;
+      c14 = b32;
+      c15 = b33;
+    }
+    const a = this.val;
+    const a00 = a[0], a01 = a[1], a02 = a[2], a03 = a[3];
+    const a10 = a[4], a11 = a[5], a12 = a[6], a13 = a[7];
+    const a20 = a[8], a21 = a[9], a22 = a[10], a23 = a[11];
+    const a30 = a[12], a31 = a[13], a32 = a[14], a33 = a[15];
+    a[0] = c0 * a00 + c1 * a10 + c2 * a20 + c3 * a30;
+    a[1] = c0 * a01 + c1 * a11 + c2 * a21 + c3 * a31;
+    a[2] = c0 * a02 + c1 * a12 + c2 * a22 + c3 * a32;
+    a[3] = c0 * a03 + c1 * a13 + c2 * a23 + c3 * a33;
+    a[4] = c4 * a00 + c5 * a10 + c6 * a20 + c7 * a30;
+    a[5] = c4 * a01 + c5 * a11 + c6 * a21 + c7 * a31;
+    a[6] = c4 * a02 + c5 * a12 + c6 * a22 + c7 * a32;
+    a[7] = c4 * a03 + c5 * a13 + c6 * a23 + c7 * a33;
+    a[8] = c8 * a00 + c9 * a10 + c10 * a20 + c11 * a30;
+    a[9] = c8 * a01 + c9 * a11 + c10 * a21 + c11 * a31;
+    a[10] = c8 * a02 + c9 * a12 + c10 * a22 + c11 * a32;
+    a[11] = c8 * a03 + c9 * a13 + c10 * a23 + c11 * a33;
+    a[12] = c12 * a00 + c13 * a10 + c14 * a20 + c15 * a30;
+    a[13] = c12 * a01 + c13 * a11 + c14 * a21 + c15 * a31;
+    a[14] = c12 * a02 + c13 * a12 + c14 * a22 + c15 * a32;
+    a[15] = c12 * a03 + c13 * a13 + c14 * a23 + c15 * a33;
+    return this;
+  }
   /**
    * Transpose the value of this matrix.
    * @returns Reference to this object for method chaining
@@ -9435,12 +9480,12 @@ var Matrix2d = class {
   }
   /**
    * Multiplies the current transformation with the matrix described by the arguments of this method.
-   * @param a a component
-   * @param b b component
-   * @param c c component
-   * @param d d component
-   * @param e e component
-   * @param f f component
+   * @param a - a component (scale x / cos)
+   * @param b - b component (skew y / sin)
+   * @param c - c component (skew x / -sin)
+   * @param d - d component (scale y / cos)
+   * @param e - e component (translate x)
+   * @param f - f component (translate y)
    * @returns Reference to this object for method chaining
    */
   transform(a, b, c, d, e, f) {
@@ -10243,6 +10288,238 @@ function unloadAll() {
   }
 }
 
+// src/camera/effects/camera_effect.ts
+var CameraEffect = class {
+  /**
+   * the camera this effect is attached to
+   */
+  camera;
+  /**
+   * whether this effect has finished and should be removed
+   */
+  isComplete;
+  /**
+   * whether this effect should persist across camera/game resets
+   * (e.g. transition effects that span state changes)
+   * @default false
+   */
+  isPersistent;
+  /**
+   * @param camera - the camera this effect is attached to
+   */
+  constructor(camera) {
+    this.camera = camera;
+    this.isComplete = false;
+    this.isPersistent = false;
+  }
+  /**
+   * Called each frame to update the effect state (e.g. modify camera offset, countdown duration).
+   * @param _dt - time elapsed since last frame in milliseconds
+   */
+  update(_dt) {
+  }
+  // eslint-disable-line @typescript-eslint/no-unused-vars
+  /**
+   * Called after the scene renders to draw visual overlays (e.g. color fills for fading).
+   * @param _renderer - the renderer to draw with
+   * @param _width - the camera viewport width
+   * @param _height - the camera viewport height
+   */
+  draw(_renderer2, _width, _height) {
+  }
+  // eslint-disable-line @typescript-eslint/no-unused-vars
+  /**
+   * Called when the effect is removed from the camera. Override to clean up resources.
+   */
+  destroy() {
+  }
+};
+
+// src/camera/effects/fade_effect.ts
+var FadeEffect = class extends CameraEffect {
+  /**
+   * the overlay color
+   */
+  color;
+  /**
+   * the tween controlling alpha transition
+   */
+  tween;
+  /**
+   * fade direction: "in" fades to the color, "out" fades from the color back to transparent
+   */
+  direction;
+  /**
+   * target alpha value for completion check
+   * @ignore
+   */
+  _targetAlpha;
+  /**
+   * @param camera - the camera to apply the fade to
+   * @param options - fade parameters
+   * @param options.color - CSS color value or Color instance
+   * @param [options.duration=1000] - fade duration in milliseconds
+   * @param [options.direction="in"] - "in" fades to color, "out" fades from color to transparent
+   * @param [options.onComplete] - callback when the fade finishes
+   */
+  constructor(camera, options) {
+    super(camera);
+    const duration = options.duration ?? 1e3;
+    this.direction = options.direction ?? "in";
+    this.color = colorPool.get(options.color);
+    if (this.direction === "in") {
+      this._targetAlpha = this.color.alpha;
+      this.color.alpha = 0;
+      this.tween = tweenPool.get(this.color).to({ alpha: this._targetAlpha }, { duration });
+    } else {
+      this._targetAlpha = 0;
+      this.tween = tweenPool.get(this.color).to({ alpha: 0 }, { duration });
+    }
+    if (options.onComplete) {
+      this.tween.onComplete(options.onComplete);
+    }
+    this.tween.isPersistent = true;
+    this.tween.start();
+  }
+  draw(renderer2, width, height) {
+    if (this.color.alpha === 0) {
+      return;
+    }
+    const r = renderer2;
+    r.save();
+    r.resetTransform();
+    r.setColor(this.color);
+    r.fillRect(0, 0, width, height);
+    r.restore();
+  }
+  update() {
+    if (this.direction === "in" && this.color.alpha >= this._targetAlpha) {
+      this.isComplete = true;
+    } else if (this.direction === "out" && this.color.alpha <= 0) {
+      this.isComplete = true;
+    }
+  }
+  destroy() {
+    this.tween.stop();
+    tweenPool.release(this.tween);
+    colorPool.release(this.color);
+  }
+};
+
+// src/camera/effects/mask_effect.ts
+var MaskEffect = class extends CameraEffect {
+  /**
+   * the transition fill color
+   */
+  color;
+  /**
+   * the mask shape template (unit-sized, centered at origin)
+   */
+  shape;
+  /**
+   * current progress value (0 = fully covered, 1 = fully visible)
+   */
+  progress;
+  /**
+   * the tween controlling progress
+   */
+  tween;
+  /**
+   * transition direction
+   */
+  direction;
+  /**
+   * optional callback when transition completes
+   */
+  onComplete;
+  /**
+   * pooled shape used for rendering (avoids per-frame allocation)
+   * @ignore
+   */
+  _maskShape;
+  /**
+   * @param camera - the camera to apply the transition to
+   * @param options - transition parameters
+   * @param options.shape - an Ellipse or Polygon (unit-sized, centered at origin) defining the mask shape
+   * @param options.color - CSS color value or Color instance for the transition fill
+   * @param [options.duration=500] - transition duration in milliseconds
+   * @param [options.direction="hide"] - "hide" shrinks the visible area, "reveal" grows it
+   * @param [options.onComplete] - callback when the transition finishes
+   */
+  constructor(camera, options) {
+    super(camera);
+    this.color = colorPool.get(options.color);
+    this.direction = options.direction ?? "hide";
+    this.onComplete = options.onComplete;
+    this.shape = options.shape;
+    this._maskShape = this.shape.clone();
+    const duration = options.duration ?? 500;
+    if (this.direction === "hide") {
+      this.progress = { value: 1 };
+      this.tween = tweenPool.get(this.progress).to({ value: 0 }, { duration });
+    } else {
+      this.progress = { value: 0 };
+      this.tween = tweenPool.get(this.progress).to({ value: 1 }, { duration });
+    }
+    this.tween.isPersistent = true;
+    this.tween.start();
+  }
+  update() {
+    if (this.direction === "hide" && this.progress.value <= 0 || this.direction === "reveal" && this.progress.value >= 1) {
+      this.progress.value = this.direction === "hide" ? 0 : 1;
+      this.isComplete = true;
+      if (typeof this.onComplete === "function") {
+        this.onComplete();
+      }
+      return;
+    }
+    const width = this.camera.width;
+    const height = this.camera.height;
+    const maxRadius = Math.sqrt(width * width + height * height) / 2;
+    const scale2 = this.progress.value * maxRadius;
+    const cx = width / 2;
+    const cy = height / 2;
+    if (this._maskShape.type === "Ellipse") {
+      this._maskShape.setShape(cx, cy, scale2 * 2, scale2 * 2);
+    } else {
+      const mask = this._maskShape;
+      const srcPoints = this.shape.points;
+      for (let i = 0; i < srcPoints.length; i++) {
+        mask.points[i].set(srcPoints[i].x * scale2, srcPoints[i].y * scale2);
+      }
+      mask.pos.set(cx, cy);
+    }
+  }
+  draw(renderer2, width, height) {
+    if (this.isComplete && this.direction === "reveal") {
+      return;
+    }
+    const r = renderer2;
+    r.save();
+    r.resetTransform();
+    if (this.progress.value <= 0) {
+      r.setColor(this.color);
+      r.fillRect(0, 0, width, height);
+    } else {
+      r.setMask(this._maskShape, true);
+      r.setColor(this.color);
+      r.fillRect(0, 0, width, height);
+      r.clearMask();
+    }
+    r.restore();
+  }
+  destroy() {
+    this.tween.stop();
+    tweenPool.release(this.tween);
+    colorPool.release(this.color);
+    if (this._maskShape.type === "Ellipse") {
+      ellipsePool.release(this._maskShape);
+    } else {
+      polygonPool.release(this._maskShape);
+    }
+  }
+};
+
 // src/geometries/observablePoint.ts
 var ObservablePoint = class _ObservablePoint {
   _callback;
@@ -11460,7 +11737,8 @@ var Renderable = class _Renderable extends Rect {
     this.alpha = 1;
     this.ancestor = void 0;
     this.mask = void 0;
-    this.shader = void 0;
+    this.postEffects = [];
+    this._postEffectManaged = false;
     this.blendMode = "normal";
     this.name = "";
     this.isRenderable = true;
@@ -11538,6 +11816,82 @@ var Renderable = class _Renderable extends Rect {
       }
     }
   }
+  /**
+   * @deprecated since 19.2.0 — use {@link addPostEffect} / {@link getPostEffect} / {@link removePostEffect} instead
+   * @type {GLShader|ShaderEffect|undefined}
+   */
+  get shader() {
+    return this.postEffects[0];
+  }
+  set shader(value) {
+    for (const effect of this.postEffects) {
+      if (typeof effect.destroy === "function") {
+        effect.destroy();
+      }
+    }
+    if (typeof value === "undefined") {
+      this.postEffects.length = 0;
+    } else {
+      this.postEffects = [value];
+    }
+  }
+  /**
+   * Add a post-processing shader effect to this renderable.
+   * @param {GLShader|ShaderEffect} effect - the effect to add
+   * @returns {GLShader|ShaderEffect} the added effect
+   * @example
+   * mySprite.addPostEffect(new DesaturateEffect(renderer));
+   */
+  addPostEffect(effect) {
+    this.postEffects.push(effect);
+    return effect;
+  }
+  /**
+   * Get post-processing shader effects.
+   * When called with a class, returns the first effect matching the given class.
+   * When called without arguments, returns the full effects array.
+   * @param {Function} [effectClass] - the effect class to search for
+   * @returns {GLShader|ShaderEffect|Array|undefined} the matching effect, the effects array, or undefined
+   * @example
+   * const desat = sprite.getPostEffect(DesaturateEffect);
+   * const allEffects = sprite.getPostEffect();
+   */
+  getPostEffect(effectClass) {
+    if (typeof effectClass === "undefined") {
+      return this.postEffects;
+    }
+    return this.postEffects.find((fx) => {
+      return fx instanceof effectClass;
+    });
+  }
+  /**
+   * Remove all post-processing shader effects.
+   * @example
+   * sprite.clearPostEffects();
+   */
+  clearPostEffects() {
+    for (const effect of this.postEffects) {
+      if (typeof effect.destroy === "function") {
+        effect.destroy();
+      }
+    }
+    this.postEffects.length = 0;
+  }
+  /**
+   * Remove a specific post-processing shader effect.
+   * @param {GLShader|ShaderEffect} effect - the effect to remove
+   * @example
+   * sprite.removePostEffect(effect);
+   */
+  removePostEffect(effect) {
+    const idx = this.postEffects.indexOf(effect);
+    if (idx !== -1) {
+      this.postEffects.splice(idx, 1);
+      if (typeof effect.destroy === "function") {
+        effect.destroy();
+      }
+    }
+  }
   /**
    * returns true if this renderable is flipped on the horizontal axis
    * @public
@@ -11819,8 +12173,8 @@ var Renderable = class _Renderable extends Rect {
       renderer2.setMask(this.mask);
       renderer2.translate(-this.pos.x, -this.pos.y);
     }
-    if (this.shader) {
-      renderer2.customShader = this.shader;
+    if (!this._postEffectManaged) {
+      renderer2.beginPostEffect(this);
     }
     if (this.autoTransform === true && !this.currentTransform.isIdentity()) {
       renderer2.translate(this.pos.x, this.pos.y);
@@ -11860,8 +12214,8 @@ var Renderable = class _Renderable extends Rect {
     if (this.mask) {
       renderer2.clearMask();
     }
-    if (this.shader) {
-      renderer2.customShader = void 0;
+    if (!this._postEffectManaged) {
+      renderer2.endPostEffect(this);
     }
     renderer2.restore();
     this.isDirty = false;
@@ -11923,10 +12277,12 @@ var Renderable = class _Renderable extends Rect {
     }
     releaseAllPointerEvents(this);
     this.onDestroyEvent.apply(this, arguments);
-    if (this.shader && typeof this.shader.destroy === "function") {
-      this.shader.destroy();
-      this.shader = void 0;
+    for (const effect of this.postEffects) {
+      if (typeof effect.destroy === "function") {
+        effect.destroy();
+      }
     }
+    this.postEffects.length = 0;
   }
   /**
    * OnDestroy Notification function<br>
@@ -11965,6 +12321,29 @@ __export(loader_exports, {
   withCredentials: () => withCredentials
 });
 
+// src/lang/console.js
+function warning(deprecated, replacement, version2) {
+  const msg = "melonJS: %s is deprecated since version %s, please use %s";
+  const stack = new Error().stack;
+  if (console.groupCollapsed) {
+    console.groupCollapsed(
+      "%c" + msg,
+      "font-weight:normal;color:yellow;",
+      deprecated,
+      version2,
+      replacement
+    );
+  } else {
+    console.warn(msg, deprecated, version2, replacement);
+  }
+  if (typeof stack !== "undefined") {
+    console.warn(stack);
+  }
+  if (console.groupCollapsed) {
+    console.groupEnd();
+  }
+}
+
 // src/utils/file.ts
 var file_exports = {};
 __export(file_exports, {
@@ -13804,6 +14183,97 @@ var TMX_FLIP_AD = 536870912;
 var TMX_CLEAR_BIT_MASK = ~(TMX_FLIP_H | TMX_FLIP_V | TMX_FLIP_AD);
 var COLLISION_GROUP = "collision";
 
+// src/video/rendertarget/rendertarget.ts
+var RenderTarget = class {
+  /**
+   * Bind this render target as the active draw destination.
+   * All subsequent draw calls will render into this target until {@link unbind} is called.
+   * No-op by default — subclasses override for GPU render targets (e.g. WebGL FBOs).
+   */
+  bind() {
+  }
+  /**
+   * Unbind this render target, restoring the default (screen) output.
+   * No-op by default — subclasses override for GPU render targets.
+   */
+  unbind() {
+  }
+  /**
+   * Creates a Blob object representing the image contained in this render target.
+   * @param type - a string indicating the image format (default "image/png")
+   * @param quality - a number between 0 and 1 for lossy formats (e.g. image/jpeg)
+   * @returns a Promise resolving to a Blob
+   */
+  toBlob(type = "image/png", quality) {
+    const imageData = this.getImageData();
+    if (typeof OffscreenCanvas !== "undefined") {
+      const canvas2 = new OffscreenCanvas(this.width, this.height);
+      const ctx2 = canvas2.getContext("2d");
+      if (!ctx2) {
+        return Promise.reject(new Error("Failed to get 2d context"));
+      }
+      ctx2.putImageData(imageData, 0, 0);
+      const options = { type };
+      if (typeof quality !== "undefined") {
+        options.quality = quality;
+      }
+      return canvas2.convertToBlob(options);
+    }
+    const canvas = document.createElement("canvas");
+    canvas.width = this.width;
+    canvas.height = this.height;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) {
+      return Promise.reject(new Error("Failed to get 2d context"));
+    }
+    ctx.putImageData(imageData, 0, 0);
+    return new Promise((resolve, reject) => {
+      canvas.toBlob(
+        (blob) => {
+          if (blob) {
+            resolve(blob);
+          } else {
+            reject(new Error(`toBlob failed for type "${type}"`));
+          }
+        },
+        type,
+        quality
+      );
+    });
+  }
+  /**
+   * Creates an ImageBitmap object from the current contents of this render target.
+   * @returns a Promise resolving to an ImageBitmap
+   */
+  toImageBitmap() {
+    const imageData = this.getImageData();
+    return globalThis.createImageBitmap(imageData);
+  }
+  /**
+   * Returns a data URL containing a representation of the current contents.
+   * @param type - a string indicating the image format (default "image/png")
+   * @param quality - a number between 0 and 1 for lossy formats (e.g. image/jpeg)
+   * @returns a Promise resolving to a data URL string
+   */
+  toDataURL(type = "image/png", quality) {
+    return this.toBlob(type, quality).then((blob) => {
+      const reader = new FileReader();
+      return new Promise((resolve, reject) => {
+        reader.onload = () => {
+          resolve(reader.result);
+        };
+        reader.onerror = () => {
+          reject(new Error(reader.error?.message ?? "FileReader failed"));
+        };
+        reader.onabort = () => {
+          reject(new Error("FileReader aborted"));
+        };
+        reader.readAsDataURL(blob);
+      });
+    });
+  }
+};
+
 // src/video/rendertarget/canvasrendertarget.js
 var defaultAttributes = {
   offscreenCanvas: false,
@@ -13854,7 +14324,7 @@ function createContext(canvas, attributes) {
   }
   return context;
 }
-var CanvasRenderTarget = class {
+var CanvasRenderTarget = class extends RenderTarget {
   /**
    * @param {number} width - the desired width of the canvas
    * @param {number} height - the desired height of the canvas
@@ -13867,6 +14337,7 @@ var CanvasRenderTarget = class {
    * @param {boolean} [attributes.antiAlias=false] - Whether to enable anti-aliasing, use false (default) for a pixelated effect.
    */
   constructor(width, height, attributes = defaultAttributes) {
+    super();
     this.attributes = Object.assign({}, defaultAttributes, attributes);
     if (typeof attributes.context === "undefined") {
       attributes.context = "2d";
@@ -13946,64 +14417,48 @@ var CanvasRenderTarget = class {
     return this.context.getImageData(x, y, width, height);
   }
   /**
-   * creates a Blob object representing the image contained in this canvas texture
+   * Returns a data URL directly from the canvas (avoids the getImageData/Blob round-trip).
+   * Note: not supported by OffscreenCanvas — falls back to the base implementation.
    * @param {string} [type="image/png"] - A string indicating the image format
-   * @param {number} [quality] - A Number between 0 and 1 indicating the image quality to be used when creating images using file formats that support lossy compression (such as image/jpeg or image/webp). A user agent will use its default quality value if this option is not specified, or if the number is outside the allowed range.
-   * @returns {Promise} A Promise returning a Blob object representing the image contained in this canvas texture
-   * @example
-   * renderTarget.convertToBlob().then((blob) => console.log(blob));
+   * @param {number} [quality] - A number between 0 and 1 for lossy formats (image/jpeg, image/webp)
+   * @returns {Promise<string>} A Promise resolving to a data URL string
    */
-  toBlob(type = "image/png", quality) {
-    if (typeof this.canvas.convertToBlob === "function") {
-      return this.canvas.convertToBlob({ type, quality });
-    } else {
-      return new Promise((resolve) => {
-        this.canvas.toBlob(
-          (blob) => {
-            resolve(blob);
-          },
-          type,
-          quality
-        );
-      });
+  toDataURL(type = "image/png", quality) {
+    if (typeof this.canvas.toDataURL === "function") {
+      return Promise.resolve(this.canvas.toDataURL(type, quality));
     }
+    return super.toDataURL(type, quality);
   }
   /**
-   * creates an ImageBitmap object from the most recently rendered image of this canvas texture
+   * Creates a Blob directly from the canvas (avoids the getImageData round-trip).
    * @param {string} [type="image/png"] - A string indicating the image format
-   * @param {number} [quality] - A Number between 0 and 1 indicating the image quality to be used when creating images using file formats that support lossy compression (such as image/jpeg or image/webp). A user agent will use its default quality value if this option is not specified, or if the number is outside the allowed range.
-   * @returns {Promise} A Promise returning an ImageBitmap.
-   * @example
-   * renderTarget.transferToImageBitmap().then((bitmap) => console.log(bitmap));
+   * @param {number} [quality] - A number between 0 and 1 for lossy formats (image/jpeg, image/webp)
+   * @returns {Promise<Blob>} A Promise resolving to a Blob
    */
-  toImageBitmap(type = "image/png", quality) {
-    return new Promise((resolve) => {
-      if (typeof this.canvas.transferToImageBitmap === "function") {
-        resolve(this.canvas.transferToImageBitmap());
-      } else {
-        const image = new Image();
-        image.src = this.canvas.toDataURL(type, quality);
-        image.onload = () => {
-          globalThis.createImageBitmap(image).then((bitmap) => {
-            return resolve(bitmap);
-          });
-        };
-      }
+  toBlob(type = "image/png", quality) {
+    if (typeof this.canvas.convertToBlob === "function") {
+      return this.canvas.convertToBlob({ type, quality });
+    }
+    return new Promise((resolve, reject) => {
+      this.canvas.toBlob(
+        (blob) => {
+          if (blob) {
+            resolve(blob);
+          } else {
+            reject(new Error(`toBlob failed for type "${type}"`));
+          }
+        },
+        type,
+        quality
+      );
     });
   }
   /**
-   * returns a data URL containing a representation of the most recently rendered image of this canvas texture
-   * (not supported by OffscreenCanvas)
-   * @param {string} [type="image/png"] - A string indicating the image format
-   * @param {number} [quality] - A Number between 0 and 1 indicating the image quality to be used when creating images using file formats that support lossy compression (such as image/jpeg or image/webp). A user agent will use its default quality value if this option is not specified, or if the number is outside the allowed range.
-   * @returns {Promise} A Promise returning a string containing the requested data URL.
-   * @example
-   * renderer.toDataURL().then((dataURL) => console.log(dataURL));
+   * Creates an ImageBitmap directly from the canvas (avoids the getImageData round-trip).
+   * @returns {Promise<ImageBitmap>} A Promise resolving to an ImageBitmap
    */
-  toDataURL(type = "image/png", quality) {
-    return new Promise((resolve) => {
-      resolve(this.canvas.toDataURL(type, quality));
-    });
+  toImageBitmap() {
+    return globalThis.createImageBitmap(this.canvas);
   }
   /**
    * invalidate the current CanvasRenderTarget, and force a reupload of the corresponding texture
@@ -14012,6 +14467,7 @@ var CanvasRenderTarget = class {
    */
   invalidate(renderer2) {
     if (typeof renderer2.gl !== "undefined") {
+      renderer2.flush();
       renderer2.setBatcher("quad");
       this.glTextureUnit = renderer2.cache.getUnit(
         renderer2.cache.get(this.canvas)
@@ -14865,6 +15321,7 @@ var RenderState = class {
     this.currentGradient = null;
     this.lineDash = [];
     this.currentBlendMode = "none";
+    this.currentShader = void 0;
     this._stackCapacity = 32;
     this._stackDepth = 0;
     this._colorStack = Array.from({ length: this._stackCapacity }, () => {
@@ -14883,6 +15340,7 @@ var RenderState = class {
     this._scissorActive = new Uint8Array(this._stackCapacity);
     this._gradientStack = new Array(this._stackCapacity);
     this._blendStack = new Array(this._stackCapacity);
+    this._shaderStack = new Array(this._stackCapacity);
   }
   /**
    * Save the current state onto the stack (zero allocations).
@@ -14899,6 +15357,7 @@ var RenderState = class {
     this._gradientStack[depth] = this.currentGradient;
     this._lineDashStack[depth] = this.lineDash;
     this._blendStack[depth] = this.currentBlendMode;
+    this._shaderStack[depth] = this.currentShader;
     if (scissorTestActive) {
       this._scissorStack[depth].set(this.currentScissor);
       this._scissorActive[depth] = 1;
@@ -14924,6 +15383,7 @@ var RenderState = class {
       this.currentTransform.copy(this._matrixStack[depth]);
       this.currentGradient = this._gradientStack[depth];
       this.lineDash = this._lineDashStack[depth];
+      this.currentShader = this._shaderStack[depth];
       const scissorActive = !!this._scissorActive[depth];
       if (scissorActive) {
         this.currentScissor.set(this._scissorStack[depth]);
@@ -14949,6 +15409,7 @@ var RenderState = class {
     this.currentScissor[1] = 0;
     this.currentScissor[2] = width;
     this.currentScissor[3] = height;
+    this.currentShader = void 0;
   }
   /** @private — doubles stack capacity when exceeded */
   _growStacks() {
@@ -14962,6 +15423,7 @@ var RenderState = class {
       this._gradientStack.push(null);
       this._lineDashStack.push([]);
       this._blendStack.push(void 0);
+      this._shaderStack.push(void 0);
     }
     const newScissorActive = new Uint8Array(newCap);
     newScissorActive.set(this._scissorActive);
@@ -14988,6 +15450,7 @@ var Renderer = class {
     this.isContextValid = true;
     this.GPURenderer = void 0;
     this.customShader = void 0;
+    this._renderTargetPool = null;
     this.path2D = new path2d_default();
     this.type = "Generic";
     this.backgroundColor = new Color(
@@ -15106,14 +15569,107 @@ var Renderer = class {
   hasSupportedCompressedFormats(format) {
     const supportedFormats = this.getSupportedCompressedTextureFormats();
     for (const supportedFormat in supportedFormats) {
-      for (const extension in supportedFormats[supportedFormat]) {
-        if (format === supportedFormats[supportedFormat][extension]) {
+      const entry = supportedFormats[supportedFormat];
+      if (entry === null || typeof entry === "undefined") {
+        continue;
+      }
+      for (const extension in entry) {
+        if (format === entry[extension]) {
           return true;
         }
       }
     }
     return false;
   }
+  /**
+   * Begin capturing rendering to an offscreen buffer for post-effect processing.
+   * Call endPostEffect() after rendering to blit the result to the screen.
+   * No-op on Canvas renderer.
+   * @param {Renderable} renderable - the renderable with postEffects to apply
+   * @returns {boolean} false (Canvas renderer does not support post-effect processing)
+   * @ignore
+   */
+  beginPostEffect(renderable) {
+    const effects = renderable.postEffects.filter((fx) => {
+      return fx.enabled !== false;
+    });
+    if (effects.length === 1) {
+      this.customShader = effects[0];
+    } else {
+      this.customShader = void 0;
+    }
+    return false;
+  }
+  /**
+   * End post-effect capture and blit the offscreen buffer to the screen
+   * through the renderable's post-effects.
+   * No-op on Canvas renderer.
+   * @param {Renderable} renderable - the renderable with postEffects to apply
+   * @ignore
+   */
+  // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
+  endPostEffect(renderable) {
+  }
+  /**
+   * Blit a texture to the screen through a shader effect.
+   * Draws a screen-aligned quad using the given texture as source
+   * and the given shader for post-processing (e.g. scanlines, desaturation).
+   * No-op on Canvas renderer.
+   * @param {WebGLTexture} source - the source texture to blit
+   * @param {number} x - destination x position
+   * @param {number} y - destination y position
+   * @param {number} width - destination width
+   * @param {number} height - destination height
+   * @param {ShaderEffect} shader - the shader effect to apply
+   * @param {boolean} [keepBlend=false] - if true, keep current blend mode (for sprite compositing)
+   */
+  // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
+  blitEffect(source, x, y, width, height, shader, keepBlend) {
+  }
+  /**
+   * Sets the viewport for the renderer.
+   * Defines the affine transformation from normalized device coordinates to window coordinates.
+   * No-op on Canvas renderer.
+   * @param {number} [x=0] - x coordinate of the viewport origin
+   * @param {number} [y=0] - y coordinate of the viewport origin
+   * @param {number} [w] - width of the viewport (defaults to canvas width)
+   * @param {number} [h] - height of the viewport (defaults to canvas height)
+   */
+  // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
+  setViewport(x = 0, y = 0, w, h) {
+  }
+  /**
+   * Clear the current render target to transparent black (color + stencil).
+   * Used to prepare FBOs for post-effect capture.
+   * No-op on Canvas renderer.
+   */
+  clearRenderTarget() {
+  }
+  /**
+   * Enable the scissor test with the given rectangle.
+   * No-op on Canvas renderer.
+   * @param {number} x - x coordinate of the scissor rectangle
+   * @param {number} y - y coordinate of the scissor rectangle
+   * @param {number} width - width of the scissor rectangle
+   * @param {number} height - height of the scissor rectangle
+   */
+  // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
+  enableScissor(x, y, width, height) {
+  }
+  /**
+   * Disable the scissor test, allowing rendering to the full viewport.
+   * No-op on Canvas renderer.
+   */
+  disableScissor() {
+  }
+  /**
+   * Enable or disable alpha blending.
+   * No-op on Canvas renderer (Canvas always blends).
+   * @param {boolean} enable - true to enable blending, false to disable
+   */
+  // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
+  setBlendEnabled(enable2) {
+  }
   /**
    * returns the current blend mode for this renderer
    * @returns {string} blend mode
@@ -16128,6 +16684,19 @@ var TextureCache = class {
     this.usedUnits.add(0);
     return 0;
   }
+  /**
+   * Reset all texture unit assignments without clearing the texture cache.
+   * Used by multi-texture batching when the shader's sampler range is exceeded.
+   * @ignore
+   */
+  resetUnitAssignments() {
+    if (this.renderer.currentBatcher) {
+      this.renderer.currentBatcher.boundTextures.length = 0;
+      this.renderer.currentBatcher.currentTextureUnit = -1;
+    }
+    this.units.clear();
+    this.usedUnits.clear();
+  }
   /**
    * @ignore
    */
@@ -16995,6 +17564,7 @@ var CanvasRenderer = class extends Renderer {
     if (result !== null) {
       this.setBlendMode(result.blendMode);
     }
+    this.customShader = this.renderState.currentShader;
     if (typeof context.fillStyle === "string") {
       this.currentColor.copy(context.fillStyle);
     }
@@ -17019,6 +17589,7 @@ var CanvasRenderer = class extends Renderer {
    */
   save() {
     this.getContext().save();
+    this.renderState.currentShader = this.customShader;
     this.renderState.save();
   }
   /**
@@ -17266,9 +17837,8 @@ var CanvasRenderer = class extends Renderer {
     }
     this.maskLevel++;
     if (invert === true) {
-      context.closePath();
-      context.globalCompositeOperation = "destination-atop";
-      context.fill();
+      context.rect(0, 0, this.getCanvas().width, this.getCanvas().height);
+      context.clip("evenodd");
     } else {
       context.clip();
     }
@@ -21349,6 +21919,723 @@ var Sprite = class extends Renderable {
   }
 };
 
+// src/math/color_matrix.ts
+var ColorMatrix = class extends Matrix3d {
+  /**
+   * Apply a brightness adjustment.
+   * @param amount - brightness multiplier (1.0 = normal, >1 brighter, <1 darker)
+   * @returns this instance for chaining
+   */
+  brightness(amount) {
+    return this.transform(
+      amount,
+      0,
+      0,
+      0,
+      0,
+      amount,
+      0,
+      0,
+      0,
+      0,
+      amount,
+      0,
+      0,
+      0,
+      0,
+      1
+    );
+  }
+  /**
+   * Apply a contrast adjustment.
+   * @param amount - contrast multiplier (1.0 = normal, >1 more contrast, <1 less)
+   * @returns this instance for chaining
+   */
+  contrast(amount) {
+    const o = (1 - amount) / 2;
+    return this.transform(
+      amount,
+      0,
+      0,
+      0,
+      0,
+      amount,
+      0,
+      0,
+      0,
+      0,
+      amount,
+      0,
+      o,
+      o,
+      o,
+      1
+    );
+  }
+  /**
+   * Apply a saturation adjustment.
+   * @param amount - saturation level (0.0 = grayscale, 1.0 = normal, >1 over-saturated)
+   * @returns this instance for chaining
+   */
+  saturate(amount) {
+    const ir = 0.299 * (1 - amount);
+    const ig = 0.587 * (1 - amount);
+    const ib = 0.114 * (1 - amount);
+    return this.transform(
+      ir + amount,
+      ir,
+      ir,
+      0,
+      ig,
+      ig + amount,
+      ig,
+      0,
+      ib,
+      ib,
+      ib + amount,
+      0,
+      0,
+      0,
+      0,
+      1
+    );
+  }
+  /**
+   * Apply a hue rotation.
+   * @param angle - rotation angle in radians
+   * @returns this instance for chaining
+   */
+  hueRotate(angle) {
+    const cos = Math.cos(angle);
+    const sin = Math.sin(angle);
+    const lumR = 0.299;
+    const lumG = 0.587;
+    const lumB = 0.114;
+    return this.transform(
+      lumR + cos * (1 - lumR) + sin * -lumR,
+      lumR + cos * -lumR + sin * 0.143,
+      lumR + cos * -lumR + sin * -(1 - lumR),
+      0,
+      lumG + cos * -lumG + sin * -lumG,
+      lumG + cos * (1 - lumG) + sin * 0.14,
+      lumG + cos * -lumG + sin * lumG,
+      0,
+      lumB + cos * -lumB + sin * (1 - lumB),
+      lumB + cos * -lumB + sin * -0.283,
+      lumB + cos * (1 - lumB) + sin * lumB,
+      0,
+      0,
+      0,
+      0,
+      1
+    );
+  }
+  /**
+   * Apply a sepia tone.
+   * @param amount - sepia intensity (0.0 = original, 1.0 = full sepia)
+   * @returns this instance for chaining
+   */
+  sepia(amount = 1) {
+    if (amount >= 1) {
+      return this.transform(
+        0.393,
+        0.349,
+        0.272,
+        0,
+        0.769,
+        0.686,
+        0.534,
+        0,
+        0.189,
+        0.168,
+        0.131,
+        0,
+        0,
+        0,
+        0,
+        1
+      );
+    }
+    const a = amount;
+    const b = 1 - a;
+    return this.transform(
+      b + 0.393 * a,
+      0.349 * a,
+      0.272 * a,
+      0,
+      0.769 * a,
+      b + 0.686 * a,
+      0.534 * a,
+      0,
+      0.189 * a,
+      0.168 * a,
+      b + 0.131 * a,
+      0,
+      0,
+      0,
+      0,
+      1
+    );
+  }
+  /**
+   * Apply a color inversion.
+   * @param amount - inversion amount (0.0 = original, 1.0 = fully inverted)
+   * @returns this instance for chaining
+   */
+  invertColors(amount = 1) {
+    const c = 1 - 2 * amount;
+    return this.transform(
+      c,
+      0,
+      0,
+      0,
+      0,
+      c,
+      0,
+      0,
+      0,
+      0,
+      c,
+      0,
+      amount,
+      amount,
+      amount,
+      1
+    );
+  }
+};
+
+// src/video/webgl/utils/attributes.js
+function extractAttributes(gl, shader) {
+  const attributes = {};
+  const attrRx = /attribute\s+\w+\s+(\w+)/g;
+  let match;
+  let i = 0;
+  while (match = attrRx.exec(shader.vertex)) {
+    attributes[match[1]] = i++;
+  }
+  return attributes;
+}
+
+// src/video/webgl/utils/precision.js
+function setPrecision(src, precision) {
+  if (src.substring(0, 9) !== "precision") {
+    return "precision " + precision + " float;\n" + src;
+  }
+  return src;
+}
+function getMaxShaderPrecision(gl, highPrecision = true) {
+  if (highPrecision && gl.getShaderPrecisionFormat(gl.VERTEX_SHADER, gl.HIGH_FLOAT).precision > 0 && gl.getShaderPrecisionFormat(gl.FRAGMENT_SHADER, gl.HIGH_FLOAT).precision > 0) {
+    return "highp";
+  }
+  if (gl.getShaderPrecisionFormat(gl.VERTEX_SHADER, gl.MEDIUM_FLOAT).precision > 0 && gl.getShaderPrecisionFormat(gl.FRAGMENT_SHADER, gl.MEDIUM_FLOAT).precision > 0) {
+    return "mediump";
+  }
+  return "lowp";
+}
+
+// src/video/webgl/utils/program.js
+function compileShader(gl, type, source) {
+  const shader = gl.createShader(type);
+  gl.shaderSource(shader, source);
+  gl.compileShader(shader);
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+    throw new Error(gl.getShaderInfoLog(shader));
+  }
+  return shader;
+}
+function compileProgram(gl, vertex, fragment, attributes) {
+  const vertShader = compileShader(gl, gl.VERTEX_SHADER, vertex);
+  const fragShader = compileShader(gl, gl.FRAGMENT_SHADER, fragment);
+  const program = gl.createProgram();
+  gl.attachShader(program, vertShader);
+  gl.attachShader(program, fragShader);
+  for (const location in attributes) {
+    gl.bindAttribLocation(program, attributes[location], location);
+  }
+  gl.linkProgram(program);
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    const error_msg = "Error initializing Shader " + this + "\ngl.VALIDATE_STATUS: " + gl.getProgramParameter(program, gl.VALIDATE_STATUS) + "\ngl.getError()" + gl.getError() + "\ngl.getProgramInfoLog()" + gl.getProgramInfoLog(program);
+    gl.deleteProgram(program);
+    throw new Error(error_msg);
+  }
+  gl.useProgram(program);
+  gl.deleteShader(vertShader);
+  gl.deleteShader(fragShader);
+  return program;
+}
+
+// src/video/webgl/utils/string.js
+function minify(src) {
+  src = src.replace(/\/\*[\s\S]*?\*\/|([^\\:]|^)\/\/.*$/gm, "$1");
+  src = src.replace(/(\\n\s+)|(\s+\\n)/g, "");
+  src = src.replace(/(\\r|\\n)+/g, "");
+  src = src.replace(/[ \t]*([;,[\](){}\\\/\-+*|^&!=<>?~%])[ \t]*/g, "$1");
+  return src;
+}
+
+// src/video/webgl/utils/uniforms.js
+var fnHash = {
+  bool: "1i",
+  int: "1i",
+  float: "1f",
+  vec2: "2fv",
+  vec3: "3fv",
+  vec4: "4fv",
+  bvec2: "2iv",
+  bvec3: "3iv",
+  bvec4: "4iv",
+  ivec2: "2iv",
+  ivec3: "3iv",
+  ivec4: "4iv",
+  mat2: "Matrix2fv",
+  mat3: "Matrix3fv",
+  mat4: "Matrix4fv",
+  sampler2D: "1i"
+};
+function extractUniforms(gl, shader) {
+  const uniforms = {};
+  const uniRx = /uniform\s+(\w+)\s+(\w+)/g;
+  const uniformsData = {};
+  const descriptor = {};
+  const locations = {};
+  let match;
+  [shader.vertex, shader.fragment].forEach((shader2) => {
+    while (match = uniRx.exec(shader2)) {
+      uniformsData[match[2]] = match[1];
+    }
+  });
+  Object.keys(uniformsData).forEach((name) => {
+    const type = uniformsData[name];
+    locations[name] = gl.getUniformLocation(shader.program, name);
+    descriptor[name] = {
+      get: /* @__PURE__ */ (function(name2) {
+        return function() {
+          return locations[name2];
+        };
+      })(name),
+      set: (function(name2, type2, fn) {
+        if (/^mat/.test(type2)) {
+          return function(val) {
+            gl[fn](locations[name2], false, val);
+          };
+        } else {
+          return function(val) {
+            let fnv = fn;
+            if (val.length && !/v$/.test(fn)) {
+              fnv += "v";
+            }
+            gl[fnv](locations[name2], val);
+          };
+        }
+      })(name, type, "uniform" + fnHash[type])
+    };
+  });
+  Object.defineProperties(uniforms, descriptor);
+  return uniforms;
+}
+
+// src/video/webgl/glshader.js
+var GLShader = class {
+  /**
+   * @param {WebGLRenderingContext} gl - the current WebGL rendering context
+   * @param {string} vertex - a string containing the GLSL source code to set
+   * @param {string} fragment - a string containing the GLSL source code to set
+   * @param {string} [precision=auto detected] - float precision ('lowp', 'mediump' or 'highp').
+   * @see https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders
+   * @example
+   * // create a basic shader
+   * let myShader = new me.GLShader(
+   *    // WebGL rendering context
+   *    gl,
+   *    // vertex shader
+   *    [
+   *        "void main() {",
+   *        "    gl_Position = doMathToMakeClipspaceCoordinates;",
+   *        "}"
+   *    ].join("\n"),
+   *    // fragment shader
+   *    [
+   *        "void main() {",
+   *        "    gl_FragColor = doMathToMakeAColor;",
+   *        "}"
+   *    ].join("\n")
+   *  )
+   * // use the shader
+   * myShader.bind();
+   */
+  constructor(gl, vertex, fragment, precision) {
+    this.gl = gl;
+    this.vertex = setPrecision(
+      minify(vertex),
+      precision || getMaxShaderPrecision(this.gl)
+    );
+    this.fragment = setPrecision(
+      minify(fragment),
+      precision || getMaxShaderPrecision(this.gl)
+    );
+    this.attributes = extractAttributes(this.gl, this);
+    this.program = compileProgram(
+      this.gl,
+      this.vertex,
+      this.fragment,
+      this.attributes
+    );
+    this.uniforms = extractUniforms(this.gl, this);
+    on(ONCONTEXT_LOST, this.destroy, this);
+  }
+  /**
+   * Installs this shader program as part of current rendering state
+   */
+  bind() {
+    this.gl.useProgram(this.program);
+  }
+  /**
+   * returns the location of an attribute variable in this shader program
+   * @param {string} name - the name of the attribute variable whose location to get.
+   * @returns {GLint} number indicating the location of the variable name if found. Returns -1 otherwise
+   */
+  getAttribLocation(name) {
+    const attr = this.attributes[name];
+    if (typeof attr !== "undefined") {
+      return attr;
+    } else {
+      return -1;
+    }
+  }
+  /**
+   * Set the uniform to the given value
+   * @param {string} name - the uniform name
+   * @param {object|Float32Array} value - the value to assign to that uniform
+   * @example
+   * myShader.setUniform("uProjectionMatrix", this.projectionMatrix);
+   */
+  setUniform(name, value) {
+    const uniforms = this.uniforms;
+    if (typeof uniforms[name] !== "undefined") {
+      this.bind();
+      if (typeof value === "object" && typeof value.toArray === "function") {
+        uniforms[name] = value.toArray();
+      } else {
+        uniforms[name] = value;
+      }
+    } else {
+      throw new Error("undefined (" + name + ") uniform for shader " + this);
+    }
+  }
+  /**
+   * activate the given vertex attribute for this shader
+   * @param {WebGLRenderingContext} gl - the current WebGL rendering context
+   * @param {object[]} attributes - an array of vertex attributes
+   * @param {number} stride - the size of a single vertex in bytes
+   */
+  setVertexAttributes(gl, attributes, stride) {
+    for (let index = 0; index < attributes.length; ++index) {
+      const element = attributes[index];
+      const location = this.getAttribLocation(element.name);
+      if (location !== -1) {
+        gl.enableVertexAttribArray(location);
+        gl.vertexAttribPointer(
+          location,
+          element.size,
+          element.type,
+          element.normalized,
+          stride,
+          element.offset
+        );
+      } else {
+        gl.disableVertexAttribArray(index);
+      }
+    }
+  }
+  /**
+   * destroy this shader objects resources (program, attributes, uniforms)
+   */
+  destroy() {
+    this.uniforms = null;
+    this.attributes = null;
+    this.gl.deleteProgram(this.program);
+    this.vertex = null;
+    this.fragment = null;
+  }
+};
+
+// src/video/webgl/shaders/quad.vert
+var quad_default = "// Current vertex point\nattribute vec2 aVertex;\nattribute vec2 aRegion;\nattribute vec4 aColor;\n\n// Projection matrix\nuniform mat4 uProjectionMatrix;\n\nvarying vec2 vRegion;\nvarying vec4 vColor;\n\nvoid main(void) {\n    // Transform the vertex position by the projection matrix\n    gl_Position = uProjectionMatrix * vec4(aVertex, 0.0, 1.0);\n    // Pass the remaining attributes to the fragment shader\n    vColor = vec4(aColor.bgr * aColor.a, aColor.a);\n    vRegion = aRegion;\n}\n";
+
+// src/video/webgl/shadereffect.js
+var ShaderEffect = class {
+  /**
+   * whether this effect is active (false in Canvas mode)
+   * @type {boolean}
+   */
+  enabled = false;
+  /**
+   * @param {WebGLRenderer|CanvasRenderer} renderer - the current renderer instance
+   * @param {string} fragmentBody - GLSL code containing a `vec4 apply(vec4 color, vec2 uv)` function
+   *   that receives the sampled pixel color and UV coordinates, and returns the modified color.
+   *   You can declare additional `uniform` variables before the `apply()` function.
+   * @param {string} [precision=auto detected] - float precision ('lowp', 'mediump' or 'highp')
+   */
+  constructor(renderer2, fragmentBody, precision) {
+    if (typeof renderer2.gl === "undefined") {
+      console.warn(
+        "ShaderEffect requires WebGL and is disabled in Canvas mode"
+      );
+      return;
+    }
+    const fragment = [
+      "uniform sampler2D uSampler;",
+      "varying vec4 vColor;",
+      "varying vec2 vRegion;",
+      // user-provided fragment body (uniforms + apply function)
+      fragmentBody,
+      "void main(void) {",
+      "    vec4 texColor = texture2D(uSampler, vRegion) * vColor;",
+      "    gl_FragColor = apply(texColor, vRegion);",
+      "}"
+    ].join("\n");
+    this._shader = new GLShader(
+      renderer2.gl,
+      quad_default,
+      fragment,
+      precision || renderer2.shaderPrecision
+    );
+    this.enabled = true;
+  }
+  /**
+   * Set the uniform to the given value
+   * @param {string} name - the uniform name
+   * @param {object|Float32Array} value - the value to assign to that uniform
+   */
+  setUniform(name, value) {
+    if (this.enabled) {
+      this._shader.setUniform(name, value);
+    }
+  }
+  /** @ignore */
+  bind() {
+    if (this.enabled) {
+      this._shader.bind();
+    }
+  }
+  /** @ignore */
+  getAttribLocation(name) {
+    return this.enabled ? this._shader.getAttribLocation(name) : -1;
+  }
+  /** @ignore */
+  setVertexAttributes(gl, attributes, stride) {
+    if (this.enabled) {
+      this._shader.setVertexAttributes(gl, attributes, stride);
+    }
+  }
+  /** @ignore */
+  get program() {
+    return this.enabled ? this._shader.program : null;
+  }
+  /** @ignore */
+  get vertex() {
+    return this.enabled ? this._shader.vertex : null;
+  }
+  /** @ignore */
+  get fragment() {
+    return this.enabled ? this._shader.fragment : null;
+  }
+  /** @ignore */
+  get attributes() {
+    return this.enabled ? this._shader.attributes : {};
+  }
+  /** @ignore */
+  get uniforms() {
+    return this.enabled ? this._shader.uniforms : {};
+  }
+  /**
+   * destroy this shader effect
+   */
+  destroy() {
+    if (this.enabled) {
+      this._shader.destroy();
+      this.enabled = false;
+    }
+  }
+};
+
+// src/video/webgl/effects/colorMatrix.js
+var ColorMatrixEffect = class extends ShaderEffect {
+  /**
+   * @param {import("../webgl_renderer.js").default} renderer - the current renderer instance
+   * @param {object} [options] - effect options
+   * @param {ColorMatrix} [options.matrix] - an initial color matrix. Defaults to identity.
+   */
+  constructor(renderer2, options = {}) {
+    super(
+      renderer2,
+      `
+			uniform mat4 uColorMatrix;
+			vec4 apply(vec4 color, vec2 uv) {
+				return uColorMatrix * color;
+			}
+			`
+    );
+    this._matrix = options.matrix || new ColorMatrix();
+    this._syncUniform();
+  }
+  /**
+   * Push the current matrix values to the GPU.
+   * @ignore
+   */
+  _syncUniform() {
+    this.setUniform("uColorMatrix", this._matrix.val);
+  }
+  /**
+   * Reset the color matrix to identity (no color change).
+   * @returns {this} this instance for chaining
+   */
+  reset() {
+    this._matrix.identity();
+    this._syncUniform();
+    return this;
+  }
+  /**
+   * Apply a brightness adjustment.
+   * @param {number} amount - brightness multiplier (1.0 = normal, >1 brighter, <1 darker)
+   * @returns {this} this instance for chaining
+   */
+  brightness(amount) {
+    this._matrix.brightness(amount);
+    this._syncUniform();
+    return this;
+  }
+  /**
+   * Apply a contrast adjustment.
+   * @param {number} amount - contrast multiplier (1.0 = normal, >1 more contrast, <1 less)
+   * @returns {this} this instance for chaining
+   */
+  contrast(amount) {
+    this._matrix.contrast(amount);
+    this._syncUniform();
+    return this;
+  }
+  /**
+   * Apply a saturation adjustment.
+   * @param {number} amount - saturation level (0.0 = grayscale, 1.0 = normal, >1 over-saturated)
+   * @returns {this} this instance for chaining
+   */
+  saturate(amount) {
+    this._matrix.saturate(amount);
+    this._syncUniform();
+    return this;
+  }
+  /**
+   * Apply a hue rotation.
+   * @param {number} angle - rotation angle in radians
+   * @returns {this} this instance for chaining
+   */
+  hueRotate(angle) {
+    this._matrix.hueRotate(angle);
+    this._syncUniform();
+    return this;
+  }
+  /**
+   * Apply a sepia tone.
+   * @param {number} [amount=1.0] - sepia intensity (0.0 = original, 1.0 = full sepia)
+   * @returns {this} this instance for chaining
+   */
+  sepia(amount = 1) {
+    this._matrix.sepia(amount);
+    this._syncUniform();
+    return this;
+  }
+  /**
+   * Apply a color inversion.
+   * @param {number} [amount=1.0] - inversion amount (0.0 = original, 1.0 = fully inverted)
+   * @returns {this} this instance for chaining
+   */
+  invertColors(amount = 1) {
+    this._matrix.invertColors(amount);
+    this._syncUniform();
+    return this;
+  }
+  /**
+   * Multiply the current matrix by another color matrix.
+   * @param {ColorMatrix} matrix - the matrix to multiply with
+   * @returns {this} this instance for chaining
+   */
+  multiply(matrix) {
+    this._matrix.multiply(matrix);
+    this._syncUniform();
+    return this;
+  }
+  /**
+   * Multiplies the current matrix with a transform described by individual values.
+   * Accepts either 6 values (2D affine: a, b, c, d, e, f) or 16 values (full 4x4 column-major).
+   * @param {...number} args - 6 or 16 numeric values
+   * @returns {this} this instance for chaining
+   */
+  transform(...args) {
+    this._matrix.transform(...args);
+    this._syncUniform();
+    return this;
+  }
+};
+
+// src/camera/effects/shake_effect.ts
+var ShakeEffect = class extends CameraEffect {
+  /**
+   * maximum pixel offset during shake
+   */
+  intensity;
+  /**
+   * remaining duration in milliseconds
+   */
+  duration;
+  /**
+   * which axes to shake (use camera.AXIS constants)
+   */
+  axis;
+  /**
+   * optional callback when shake completes
+   */
+  onComplete;
+  /**
+   * @param camera - the camera to shake
+   * @param options - shake parameters
+   * @param options.intensity - maximum offset in pixels
+   * @param options.duration - duration in milliseconds
+   * @param [options.axis=3] - which axes (NONE=0, HORIZONTAL=1, VERTICAL=2, BOTH=3)
+   * @param [options.onComplete] - callback when the shake finishes
+   */
+  constructor(camera, options) {
+    super(camera);
+    this.intensity = options.intensity;
+    this.duration = options.duration;
+    this.axis = options.axis ?? camera.AXIS.BOTH;
+    this.onComplete = options.onComplete;
+  }
+  update(dt) {
+    this.duration -= dt;
+    if (this.duration <= 0) {
+      this.duration = 0;
+      this.camera.offset.setZero();
+      this.isComplete = true;
+      if (typeof this.onComplete === "function") {
+        this.onComplete();
+      }
+    } else {
+      const axis = this.camera.AXIS;
+      if (this.axis === axis.BOTH || this.axis === axis.HORIZONTAL) {
+        this.camera.offset.x = (Math.random() - 0.5) * this.intensity;
+      }
+      if (this.axis === axis.BOTH || this.axis === axis.VERTICAL) {
+        this.camera.offset.y = (Math.random() - 0.5) * this.intensity;
+      }
+    }
+  }
+  destroy() {
+    this.camera.offset.setZero();
+  }
+};
+
 // src/camera/camera2d.ts
 var targetV = new Vector2d();
 var Camera2d = class extends Renderable {
@@ -21439,20 +22726,23 @@ var Camera2d = class extends Renderable {
   /** default value follow */
   follow_axis;
   /**
-   * shake variables
-   * @ignore
+   * active camera effects (shake, fade, etc.)
    */
-  _shake;
+  cameraEffects;
   /**
-   * flash variables
-   * @ignore
-   */
-  _fadeOut;
-  /**
-   * fade variables
-   * @ignore
+   * A built-in color transformation matrix applied as the final post-processing pass.
+   * Provides convenient color grading (brightness, contrast, saturation, etc.)
+   * that is always applied after any effects added via {@link addPostEffect}.
+   * When set to identity (default), no effect is applied and there is zero overhead.
+   * @example
+   * // warm HDR-like color grading
+   * camera.colorMatrix.contrast(1.2).saturate(1.1);
+   * // reset to no color grading
+   * camera.colorMatrix.identity();
    */
-  _fadeIn;
+  colorMatrix;
+  /** @ignore */
+  _colorMatrixEffect;
   /** the camera deadzone */
   deadzone;
   /**
@@ -21479,20 +22769,7 @@ var Camera2d = class extends Renderable {
     this.offset = new Vector2d();
     this.target = null;
     this.follow_axis = this.AXIS.NONE;
-    this._shake = {
-      intensity: 0,
-      duration: 0,
-      axis: this.AXIS.BOTH,
-      onComplete: null
-    };
-    this._fadeOut = {
-      color: null,
-      tween: null
-    };
-    this._fadeIn = {
-      color: null,
-      tween: null
-    };
+    this.cameraEffects = [];
     this.screenX = 0;
     this.screenY = 0;
     this.zoom = 1;
@@ -21504,6 +22781,9 @@ var Camera2d = class extends Renderable {
     this.setDeadzone(this.width / 6, this.height / 6);
     this.anchorPoint.set(0, 0);
     this.isKinematic = false;
+    this._postEffectManaged = true;
+    this.colorMatrix = new ColorMatrix();
+    this._colorMatrixEffect = null;
     this.bounds.setMinMax(minX, minY, maxX, maxY);
     this._updateProjectionMatrix();
     on(GAME_RESET, this.reset, this);
@@ -21619,6 +22899,12 @@ var Camera2d = class extends Renderable {
     this.worldProjection.identity();
     this.screenProjection.identity();
     this._updateProjectionMatrix();
+    for (let i = this.cameraEffects.length - 1; i >= 0; i--) {
+      if (!this.cameraEffects[i].isPersistent) {
+        this.cameraEffects[i].destroy();
+        this.cameraEffects.splice(i, 1);
+      }
+    }
   }
   /**
    * change the deadzone settings.
@@ -21777,20 +23063,14 @@ var Camera2d = class extends Renderable {
   /** @ignore */
   update(dt) {
     this.updateTarget(dt);
-    if (this._shake.duration > 0) {
-      this._shake.duration -= dt ?? 0;
-      if (this._shake.duration <= 0) {
-        this._shake.duration = 0;
-        this.offset.setZero();
-        if (typeof this._shake.onComplete === "function") {
-          this._shake.onComplete();
-        }
-      } else {
-        if (this._shake.axis === this.AXIS.BOTH || this._shake.axis === this.AXIS.HORIZONTAL) {
-          this.offset.x = (Math.random() - 0.5) * this._shake.intensity;
-        }
-        if (this._shake.axis === this.AXIS.BOTH || this._shake.axis === this.AXIS.VERTICAL) {
-          this.offset.y = (Math.random() - 0.5) * this._shake.intensity;
+    if (this.cameraEffects.length > 0) {
+      for (const fx of this.cameraEffects) {
+        fx.update(dt ?? 0);
+      }
+      for (let i = this.cameraEffects.length - 1; i >= 0; i--) {
+        if (this.cameraEffects[i].isComplete) {
+          this.cameraEffects[i].destroy();
+          this.cameraEffects.splice(i, 1);
         }
       }
       this.isDirty = true;
@@ -21798,9 +23078,6 @@ var Camera2d = class extends Renderable {
     if (this.isDirty) {
       emit(VIEWPORT_ONCHANGE, this.pos);
     }
-    if (this._fadeIn.tween != null || this._fadeOut.tween != null) {
-      this.isDirty = true;
-    }
     if (!this.currentTransform.isIdentity()) {
       this.invCurrentTransform.copy(this.currentTransform).invert();
     } else {
@@ -21821,12 +23098,21 @@ var Camera2d = class extends Renderable {
    * app.viewport.shake(10, 500, app.viewport.AXIS.BOTH);
    */
   shake(intensity, duration, axis, onComplete, force) {
-    if (this._shake.duration === 0 || force === true) {
-      this._shake.intensity = intensity;
-      this._shake.duration = duration;
-      this._shake.axis = axis || this.AXIS.BOTH;
-      this._shake.onComplete = typeof onComplete === "function" ? onComplete : void 0;
+    const existing = this.getCameraEffect(ShakeEffect);
+    if (existing && force !== true) {
+      return;
+    }
+    if (existing) {
+      this.removeCameraEffect(existing);
     }
+    this.addCameraEffect(
+      new ShakeEffect(this, {
+        intensity,
+        duration,
+        axis: axis || this.AXIS.BOTH,
+        onComplete
+      })
+    );
   }
   /**
    * fadeOut(flash) effect<p>
@@ -21843,13 +23129,14 @@ var Camera2d = class extends Renderable {
    * });
    */
   fadeOut(color, duration = 1e3, onComplete) {
-    this._fadeOut.color = colorPool.get(color);
-    this._fadeOut.tween = tweenPool.get(this._fadeOut.color).to({ alpha: 0 }, { duration });
-    if (onComplete) {
-      this._fadeOut.tween.onComplete(onComplete);
-    }
-    this._fadeOut.tween.isPersistent = true;
-    this._fadeOut.tween.start();
+    this.addCameraEffect(
+      new FadeEffect(this, {
+        color,
+        duration,
+        direction: "out",
+        onComplete
+      })
+    );
   }
   /**
    * fadeIn effect <p>
@@ -21862,15 +23149,49 @@ var Camera2d = class extends Renderable {
    * app.viewport.fadeIn("#FFFFFF", 75);
    */
   fadeIn(color, duration = 1e3, onComplete) {
-    this._fadeIn.color = colorPool.get(color);
-    const _alpha = this._fadeIn.color.alpha;
-    this._fadeIn.color.alpha = 0;
-    this._fadeIn.tween = tweenPool.get(this._fadeIn.color).to({ alpha: _alpha }, { duration });
-    if (onComplete) {
-      this._fadeIn.tween.onComplete(onComplete);
+    this.addCameraEffect(
+      new FadeEffect(this, {
+        color,
+        duration,
+        direction: "in",
+        onComplete
+      })
+    );
+  }
+  /**
+   * Add a camera effect to this camera.
+   * @param effect - the camera effect to add
+   * @returns the added effect
+   * @example
+   * camera.addCameraEffect(new ShakeEffect(camera, { intensity: 10, duration: 500 }));
+   */
+  addCameraEffect(effect) {
+    this.cameraEffects.push(effect);
+    return effect;
+  }
+  /**
+   * Get the first camera effect matching the given class.
+   * @param effectClass - the effect class to search for
+   * @returns the first matching effect, or undefined
+   * @example
+   * const shake = camera.getCameraEffect(ShakeEffect);
+   */
+  getCameraEffect(effectClass) {
+    return this.cameraEffects.find((fx) => fx instanceof effectClass);
+  }
+  /**
+   * Remove a specific camera effect instance.
+   * @param effect - the effect to remove
+   * @example
+   * const fade = camera.getCameraEffect(FadeEffect);
+   * if (fade) camera.removeCameraEffect(fade);
+   */
+  removeCameraEffect(effect) {
+    const idx = this.cameraEffects.indexOf(effect);
+    if (idx !== -1) {
+      effect.destroy();
+      this.cameraEffects.splice(idx, 1);
     }
-    this._fadeIn.tween.isPersistent = true;
-    this._fadeIn.tween.start();
   }
   /**
    * set the camera position around the specified object
@@ -21934,30 +23255,8 @@ var Camera2d = class extends Renderable {
    * @ignore
    */
   drawFX(renderer2) {
-    const r = renderer2;
-    if (this._fadeIn.tween) {
-      r.save();
-      r.resetTransform();
-      r.setColor(this._fadeIn.color);
-      r.fillRect(0, 0, this.width, this.height);
-      r.restore();
-      if (this._fadeIn.color.alpha === 1) {
-        this._fadeIn.tween = null;
-        colorPool.release(this._fadeIn.color);
-        this._fadeIn.color = null;
-      }
-    }
-    if (this._fadeOut.tween) {
-      r.save();
-      r.resetTransform();
-      r.setColor(this._fadeOut.color);
-      r.fillRect(0, 0, this.width, this.height);
-      r.restore();
-      if (this._fadeOut.color.alpha === 0) {
-        this._fadeOut.tween = null;
-        colorPool.release(this._fadeOut.color);
-        this._fadeOut.color = null;
-      }
+    for (const fx of this.cameraEffects) {
+      fx.draw(renderer2, this.width, this.height);
     }
   }
   /**
@@ -21971,9 +23270,19 @@ var Camera2d = class extends Renderable {
     const containerOffsetY = isNonDefault ? container.pos.y : 0;
     const translateX = this.pos.x + this.offset.x + containerOffsetX;
     const translateY = this.pos.y + this.offset.y + containerOffsetY;
+    if (!this.colorMatrix.isIdentity()) {
+      if (!this._colorMatrixEffect) {
+        this._colorMatrixEffect = new ColorMatrixEffect(renderer2);
+      }
+      this._colorMatrixEffect.reset().multiply(this.colorMatrix);
+      this.postEffects.push(this._colorMatrixEffect);
+    }
+    const usePostEffect = r.beginPostEffect(this);
     container.translate(-translateX, -translateY);
     this.preDraw(r);
-    r.clipRect(this.screenX, this.screenY, this.width, this.height);
+    if (!usePostEffect) {
+      r.clipRect(this.screenX, this.screenY, this.width, this.height);
+    }
     if (isNonDefault) {
       const left = -this.screenX / this.zoom;
       const top = -this.screenY / this.zoom;
@@ -22015,8 +23324,27 @@ var Camera2d = class extends Renderable {
     this.drawFX(renderer2);
     container.postDraw(r);
     this.postDraw(r);
+    r.endPostEffect(this);
+    if (this._colorMatrixEffect) {
+      const idx = this.postEffects.indexOf(this._colorMatrixEffect);
+      if (idx !== -1) {
+        this.postEffects.splice(idx, 1);
+      }
+    }
     container.translate(translateX, translateY);
   }
+  /**
+   * @ignore
+   */
+  destroy() {
+    if (this._colorMatrixEffect) {
+      if (typeof this._colorMatrixEffect.destroy === "function") {
+        this._colorMatrixEffect.destroy();
+      }
+      this._colorMatrixEffect = null;
+    }
+    super.destroy();
+  }
 };
 
 // src/state/stage.ts
@@ -22308,13 +23636,19 @@ var _state = -1;
 var _animFrameId = -1;
 var _isPaused = false;
 var _stages = {};
-var _fade = {
+var _transitionType = "fade";
+var _transitionConfig = {
   color: "",
   duration: 0
 };
 var _onSwitchComplete = null;
 var _extraArgs = null;
 var _pauseTime = 0;
+var _freezeTimer = null;
+var _freezeEndsAt = 0;
+var _freezeMusic = false;
+var _freezeStartedPause = false;
+var _freezeResolvers = [];
 function _startRunLoop() {
   if (_animFrameId === -1 && _state !== -1) {
     _animFrameId = globalThis.requestAnimationFrame(_renderFrame);
@@ -22328,6 +23662,32 @@ function _resumeRunLoop() {
 function _pauseRunLoop() {
   _isPaused = true;
 }
+function _resolveFreezeWaiters() {
+  const resolvers = _freezeResolvers;
+  _freezeResolvers = [];
+  for (const resolve of resolvers) {
+    resolve();
+  }
+}
+function _endFreeze() {
+  _freezeTimer = null;
+  _freezeEndsAt = 0;
+  const wasOwnedPause = _freezeStartedPause;
+  _freezeStartedPause = false;
+  if (wasOwnedPause) {
+    state.resume(_freezeMusic);
+  }
+  _resolveFreezeWaiters();
+}
+function _cancelFreeze() {
+  if (_freezeTimer !== null) {
+    clearTimeout(_freezeTimer);
+    _freezeTimer = null;
+    _freezeEndsAt = 0;
+    _freezeStartedPause = false;
+    _resolveFreezeWaiters();
+  }
+}
 function _renderFrame(time) {
   emit(TICK, time);
   if (_animFrameId !== -1) {
@@ -22354,6 +23714,7 @@ function _switchState(stateId) {
     emit(STATE_CHANGE);
     if (_onSwitchComplete) {
       _onSwitchComplete();
+      _onSwitchComplete = null;
     }
   }
 }
@@ -22367,6 +23728,9 @@ once(BOOT, () => {
   once(VIDEO_INIT, () => {
     state.change(state.DEFAULT, true);
   });
+  on(BLUR, () => {
+    _cancelFreeze();
+  });
 });
 var state = {
   /**
@@ -22425,6 +23789,7 @@ var state = {
    */
   stop(shouldPauseTrack = false) {
     if (_state !== this.LOADING && this.isRunning()) {
+      _cancelFreeze();
       _stopRunLoop();
       if (shouldPauseTrack) {
         pauseTrack();
@@ -22467,6 +23832,7 @@ var state = {
    */
   resume(music = false) {
     if (this.isPaused()) {
+      _cancelFreeze();
       _resumeRunLoop();
       if (music) {
         resumeTrack();
@@ -22475,6 +23841,59 @@ var state = {
       emit(STATE_RESUME, _pauseTime);
     }
   },
+  /**
+   * Freeze the current stage for a fixed duration, then automatically resume.
+   * Useful for hit-stop / hit-pause effects on impact.
+   *
+   * Behaviour notes:
+   * - If `freeze()` is called again while a freeze is already active, the
+   *   freeze is *extended* to whichever end-time is later (calls do not
+   *   stack). The `music` flag from the initial call is preserved.
+   * - If the game was already paused when `freeze()` was called, the freeze
+   *   timer will *not* unpause it on expiry — the game stays paused.
+   * - Calling `state.resume()` or `state.stop()` while a freeze is active
+   *   cancels the timer and resolves the returned promise immediately.
+   * - The freeze is also cancelled when the window loses focus (BLUR) since
+   *   the hit-stop's "moment" is short enough that the user has missed it
+   *   by the time they return. The regular `pauseOnBlur` behaviour still
+   *   keeps the game paused while away.
+   * - Negative, `NaN`, and `Infinity` durations silently no-op.
+   * @param duration - duration of the freeze in milliseconds
+   * @param [music=false] - also pause the current music track during the freeze
+   * @returns a Promise that resolves once the freeze ends (or is cancelled)
+   * @example
+   * // simple hit-stop on impact
+   * state.freeze(80);
+   *
+   * // chain VFX after the freeze
+   * await state.freeze(120);
+   * spawnImpactParticles();
+   */
+  freeze(duration, music = false) {
+    if (!Number.isFinite(duration) || duration < 0) {
+      return Promise.resolve();
+    }
+    const now = globalThis.performance.now();
+    const newEndsAt = now + duration;
+    if (_freezeTimer !== null) {
+      if (newEndsAt > _freezeEndsAt) {
+        clearTimeout(_freezeTimer);
+        _freezeEndsAt = newEndsAt;
+        _freezeTimer = setTimeout(_endFreeze, newEndsAt - now);
+      }
+    } else {
+      _freezeMusic = music;
+      _freezeEndsAt = newEndsAt;
+      _freezeStartedPause = !this.isPaused();
+      if (_freezeStartedPause) {
+        this.pause(music);
+      }
+      _freezeTimer = setTimeout(_endFreeze, duration);
+    }
+    return new Promise((resolve) => {
+      _freezeResolvers.push(resolve);
+    });
+  },
   /**
    * return the running state of the state manager
    * @returns true if a "process is running"
@@ -22552,15 +23971,28 @@ var state = {
   },
   /**
    * specify a global transition effect
-   * @param effect - (only "fade" is supported for now)
+   * @param effect - "fade" for a color fade, "mask" for a shape-based mask transition
    * @param color - a CSS color value
    * @param [duration=1000] - expressed in milliseconds
-   */
-  transition(effect, color, duration) {
-    if (effect === "fade") {
-      _fade.color = color;
-      _fade.duration = duration;
-    }
+   * @param [shape] - an Ellipse or Polygon defining the mask shape (required when effect is "mask")
+   * @example
+   * // classic fade to black
+   * state.transition("fade", "#000", 500);
+   * @example
+   * // iris (circle) mask transition
+   * state.transition("mask", "#000", 500, new Ellipse(0, 0, 1, 1));
+   * @example
+   * // diamond mask transition
+   * state.transition("mask", "#000", 400, new Polygon(0, 0, [
+   *     { x: 0, y: -1 }, { x: 1, y: 0 },
+   *     { x: 0, y: 1 }, { x: -1, y: 0 },
+   * ]));
+   */
+  transition(effect, color, duration = 1e3, shape) {
+    _transitionType = effect;
+    _transitionConfig.color = color;
+    _transitionConfig.duration = duration;
+    _transitionConfig.shape = shape;
   },
   /**
    * enable/disable the transition to a particular state (by default enabled for all)
@@ -22586,21 +24018,74 @@ var state = {
     }
     if (!this.isCurrent(stateId)) {
       _extraArgs = extraArgs.length > 0 ? extraArgs : null;
-      if (_fade.duration && _stages[stateId].transition) {
-        _onSwitchComplete = () => {
-          _app.viewport.fadeOut(_fade.color, _fade.duration);
+      if (_transitionConfig.duration && _stages[stateId].transition) {
+        const onComplete = () => {
+          defer(
+            _switchState,
+            state,
+            stateId
+          );
         };
-        _app.viewport.fadeIn(
-          _fade.color,
-          _fade.duration,
-          function() {
-            defer(
-              _switchState,
-              this,
-              stateId
-            );
+        switch (_transitionType) {
+          case "fade": {
+            const color = _transitionConfig.color;
+            const duration = _transitionConfig.duration;
+            _onSwitchComplete = () => {
+              _app.viewport.addCameraEffect(
+                new FadeEffect(_app.viewport, {
+                  color,
+                  duration,
+                  direction: "out"
+                })
+              );
+            };
+            const fadeEffect = new FadeEffect(_app.viewport, {
+              color,
+              duration,
+              direction: "in",
+              onComplete
+            });
+            fadeEffect.isPersistent = true;
+            _app.viewport.addCameraEffect(fadeEffect);
+            break;
           }
-        );
+          case "mask": {
+            if (!_transitionConfig.shape) {
+              console.warn(
+                "melonJS: mask transition requires a shape, falling back to direct switch"
+              );
+              onComplete();
+              break;
+            }
+            const shape = _transitionConfig.shape;
+            const color = _transitionConfig.color;
+            const duration = _transitionConfig.duration;
+            _onSwitchComplete = () => {
+              _app.viewport.addCameraEffect(
+                new MaskEffect(_app.viewport, {
+                  shape,
+                  color,
+                  duration,
+                  direction: "reveal"
+                })
+              );
+            };
+            const maskEffect = new MaskEffect(_app.viewport, {
+              shape,
+              color,
+              duration,
+              direction: "hide",
+              onComplete
+            });
+            maskEffect.isPersistent = true;
+            _app.viewport.addCameraEffect(maskEffect);
+            break;
+          }
+          default:
+            throw new Error(
+              `Invalid transition type: ${_transitionType}`
+            );
+        }
       } else {
         if (forceChange) {
           _switchState(stateId);
@@ -23124,6 +24609,7 @@ var Tween = class {
   _yoyo;
   _reversed;
   _delayTime;
+  _repeatDelayTime;
   _startTime;
   _easingFunction;
   _interpolationFunction;
@@ -23173,6 +24659,7 @@ var Tween = class {
     this._yoyo = false;
     this._reversed = false;
     this._delayTime = 0;
+    this._repeatDelayTime = void 0;
     this._startTime = null;
     this._easingFunction = Easing.Linear.None;
     this._interpolationFunction = Interpolation.Linear;
@@ -23260,6 +24747,7 @@ var Tween = class {
    * @param [options.delay] - delay before starting, in milliseconds
    * @param [options.yoyo] - bounce back to original values when finished (use with `repeat`)
    * @param [options.repeat] - number of times to repeat (use `Infinity` for endless loops)
+   * @param [options.repeatDelay] - delay in milliseconds before each repeat cycle
    * @param [options.interpolation] - interpolation function for array values
    * @param [options.autoStart] - start the tween immediately without calling `start()`
    * @returns this instance for object chaining
@@ -23282,6 +24770,9 @@ var Tween = class {
       if (options.delay !== void 0) {
         this.delay(options.delay);
       }
+      if (options.repeatDelay !== void 0) {
+        this.repeatDelay(options.repeatDelay);
+      }
       if (options.interpolation !== void 0) {
         this.interpolation(options.interpolation);
       }
@@ -23348,6 +24839,15 @@ var Tween = class {
     this._repeat = times;
     return this;
   }
+  /**
+   * Set a delay before each repeat.
+   * @param amount - delay in milliseconds before each repeat cycle
+   * @returns this instance for object chaining
+   */
+  repeatDelay(amount) {
+    this._repeatDelayTime = amount;
+    return this;
+  }
   /**
    * Allows the tween to bounce back to their original value when finished.
    * To be used together with repeat to create endless loops.
@@ -23471,7 +24971,7 @@ var Tween = class {
         if (this._yoyo) {
           this._reversed = !this._reversed;
         }
-        this._startTime = time + this._delayTime;
+        this._startTime = time + (this._repeatDelayTime ?? this._delayTime);
         return true;
       } else {
         this._unsubscribe();
@@ -23764,7 +25264,7 @@ var Text = class extends Renderable {
    * @param {number} [settings.wordWrapWidth] - the maximum length in CSS pixel for a single segment of text
    * @param {(string|string[])} [settings.text=""] - a string, or an array of strings
    * @example
-   * let font = new me.Text(0, 0, {font: "Arial", size: 8, fillStyle: this.color});
+   * let font = new Text(0, 0, {font: "Arial", size: 8, fillStyle: this.color});
    */
   constructor(x, y, settings) {
     super(x, y, settings.width || 0, settings.height || 0);
@@ -23825,6 +25325,7 @@ var Text = class extends Renderable {
     this.canvasTexture = new canvasrendertarget_default(2, 2, {
       offscreenCanvas: false
     });
+    this._visibleCharacters = -1;
     this.metrics = new textmetrics_default(this);
     this.setText(settings.text);
   }
@@ -23923,6 +25424,53 @@ var Text = class extends Renderable {
     this.isDirty = true;
     return this;
   }
+  /**
+   * the number of characters to display (use -1 to show all).
+   * Useful for typewriter effects combined with Tween.
+   * @public
+   * @type {number}
+   * @default -1
+   * @see Text#visibleRatio
+   * @example
+   * // typewriter effect
+   * text.visibleCharacters = 0;
+   * new Tween(text).to({ visibleRatio: 1.0 }, { duration: 2000 }).start();
+   */
+  get visibleCharacters() {
+    return this._visibleCharacters;
+  }
+  set visibleCharacters(value) {
+    if (this._visibleCharacters !== value) {
+      this._visibleCharacters = value;
+      this.isDirty = true;
+    }
+  }
+  /**
+   * the ratio of visible characters (0.0 to 1.0).
+   * Setting this automatically updates {@link visibleCharacters}.
+   * @public
+   * @type {number}
+   */
+  get visibleRatio() {
+    if (this._visibleCharacters === -1) {
+      return 1;
+    }
+    const total = this._text.reduce((sum, line) => {
+      return sum + line.length;
+    }, 0);
+    return total > 0 ? this._visibleCharacters / total : 1;
+  }
+  set visibleRatio(value) {
+    const clamped = Math.max(0, Math.min(1, isFinite(value) ? value : 1));
+    if (clamped >= 1) {
+      this.visibleCharacters = -1;
+    } else {
+      const total = this._text.reduce((sum, line) => {
+        return sum + line.length;
+      }, 0);
+      this.visibleCharacters = Math.floor(clamped * total);
+    }
+  }
   /**
    * update the bounding box for this Text, accounting for textAlign and textBaseline.
    * @param {boolean} [absolute=true] - update in absolute coordinates
@@ -23979,6 +25527,16 @@ var Text = class extends Renderable {
    * @param {CanvasRenderer|WebGLRenderer} renderer - Reference to the destination renderer instance
    */
   draw(renderer2) {
+    if (this.isDirty) {
+      this.canvasTexture.invalidate(renderer2);
+      this.canvasTexture.clear();
+      this._drawFont(
+        this.canvasTexture.context,
+        this._text,
+        this.pos.x - this.metrics.x,
+        this.pos.y - this.metrics.y
+      );
+    }
     let x = this.metrics.x;
     let y = this.metrics.y;
     if (renderer2.settings.subPixel === false) {
@@ -23992,8 +25550,16 @@ var Text = class extends Renderable {
    */
   _drawFont(context, text, x, y) {
     setContextStyle(context, this);
+    let remaining = this.visibleCharacters;
     for (let i = 0; i < text.length; i++) {
-      const string = text[i].trimEnd();
+      let string = text[i].trimEnd();
+      if (remaining !== -1) {
+        if (remaining <= 0) {
+          break;
+        }
+        string = string.substring(0, remaining);
+        remaining -= string.length;
+      }
       if (this.fillStyle.alpha > 0) {
         context.fillText(string, x, y);
       }
@@ -24173,13 +25739,13 @@ var BitmapText = class extends Renderable {
    * @param {number} [settings.wordWrapWidth] - the maximum length in CSS pixel for a single segment of text
    * @param {(string|string[])} [settings.text] - a string, or an array of strings
    * @example
-   * // Use me.loader.preload or me.loader.load to load assets
-   * me.loader.preload([
-   *     { name: "arial", type: "binary" src: "data/font/arial.fnt" },
-   *     { name: "arial", type: "image" src: "data/font/arial.png" },
+   * // Use loader.preload or loader.load to load assets
+   * loader.preload([
+   *     { name: "arial", type: "binary", src: "data/font/arial.fnt" },
+   *     { name: "arial", type: "image", src: "data/font/arial.png" },
    * ])
    * // Then create an instance of your bitmap font:
-   * let myFont = new me.BitmapText(x, y, {font:"arial", text:"Hello"});
+   * let myFont = new BitmapText(x, y, {font:"arial", text:"Hello"});
    * // two possibilities for using "myFont"
    * // either call the draw function from your Renderable draw function
    * myFont.draw(renderer, "Hello!", 0, 0);
@@ -24214,6 +25780,7 @@ var BitmapText = class extends Renderable {
     } else {
       this.anchorPoint.set(0, 0);
     }
+    this._visibleCharacters = -1;
     this.metrics = new textmetrics_default(this);
     if (typeof settings.size === "number" && settings.size !== 1) {
       this.resize(settings.size);
@@ -24255,6 +25822,55 @@ var BitmapText = class extends Renderable {
     this.updateBounds();
     return this;
   }
+  /**
+   * the number of characters to display (use -1 to show all).
+   * Useful for typewriter effects combined with Tween.
+   * @public
+   * @type {number}
+   * @default -1
+   * @see BitmapText#visibleRatio
+   * @example
+   * // show only the first 5 characters
+   * bitmapText.visibleCharacters = 5;
+   * // typewriter effect
+   * bitmapText.visibleCharacters = 0;
+   * new Tween(bitmapText).to({ visibleRatio: 1.0 }, { duration: 2000 }).start();
+   */
+  get visibleCharacters() {
+    return this._visibleCharacters;
+  }
+  set visibleCharacters(value) {
+    if (this._visibleCharacters !== value) {
+      this._visibleCharacters = value;
+      this.isDirty = true;
+    }
+  }
+  /**
+   * the ratio of visible characters (0.0 to 1.0).
+   * Setting this automatically updates {@link visibleCharacters}.
+   * @public
+   * @type {number}
+   */
+  get visibleRatio() {
+    if (this._visibleCharacters === -1) {
+      return 1;
+    }
+    const total = this._text.reduce((sum, line) => {
+      return sum + line.length;
+    }, 0);
+    return total > 0 ? this._visibleCharacters / total : 1;
+  }
+  set visibleRatio(value) {
+    const clamped = Math.max(0, Math.min(1, isFinite(value) ? value : 1));
+    if (clamped >= 1) {
+      this.visibleCharacters = -1;
+    } else {
+      const total = this._text.reduce((sum, line) => {
+        return sum + line.length;
+      }, 0);
+      this.visibleCharacters = Math.floor(clamped * total);
+    }
+  }
   /**
    * update the bounding box for this Bitmap Text.
    * @param {boolean} [absolute=true] - update the bounds size and position in (world) absolute coordinates
@@ -24357,6 +25973,8 @@ var BitmapText = class extends Renderable {
       default:
         break;
     }
+    let charCount = 0;
+    const maxChars = this.visibleCharacters;
     for (let i = 0; i < this._text.length; i++) {
       x = lX;
       const string = this._text[i].trimEnd();
@@ -24373,6 +25991,9 @@ var BitmapText = class extends Renderable {
       }
       let lastGlyph = null;
       for (let c = 0, len = string.length; c < len; c++) {
+        if (maxChars !== -1 && charCount >= maxChars) {
+          return;
+        }
         const ch = string.charCodeAt(c);
         const glyph = this.fontData.glyphs[ch];
         if (typeof glyph !== "undefined") {
@@ -24401,6 +26022,7 @@ var BitmapText = class extends Renderable {
             "BitmapText: no defined Glyph in for " + String.fromCharCode(ch)
           );
         }
+        charCount++;
       }
       y += stringHeight;
     }
@@ -24477,7 +26099,9 @@ function registerTiledObjectFactory(type, factory) {
     throw new Error("invalid factory function for " + type);
   }
   if (typeof factories.get(type) !== "undefined") {
-    warning("overriding Tiled object factory for " + type + " type");
+    console.warn(
+      "melonJS: overriding Tiled object factory for " + type + " type"
+    );
   }
   factories.set(type, factory);
 }
@@ -24568,18 +26192,22 @@ var Particle = class extends Renderable {
   wind;
   followTrajectory;
   onlyInViewport;
+  accurateBounds;
   _deltaInv;
+  _halfW;
+  _halfH;
   _angle;
   alive;
   /**
    * @param emitter - the particle emitter
    */
   constructor(emitter) {
+    const image = emitter.settings.image;
     super(
       emitter.getRandomPointX(),
       emitter.getRandomPointY(),
-      emitter.settings.image.width,
-      emitter.settings.image.height
+      image.width,
+      image.height
     );
     this.vel = vector2dPool.get();
     this.onResetEvent(emitter, true);
@@ -24588,13 +26216,17 @@ var Particle = class extends Renderable {
    * @ignore
    */
   onResetEvent(emitter, newInstance = false) {
+    const image = emitter.settings.image;
     if (!newInstance) {
       this.pos.set(emitter.getRandomPointX(), emitter.getRandomPointY());
-      this.resize(emitter.settings.image.width, emitter.settings.image.height);
+      this.resize(image.width, image.height);
       this.currentTransform.identity();
     }
-    this.image = emitter.settings.image;
+    this.image = image;
+    this._halfW = this.width / 2;
+    this._halfH = this.height / 2;
     this.alwaysUpdate = true;
+    this.anchorPoint.set(0, 0);
     if (typeof emitter.settings.tint === "string") {
       this.tint.parseCSS(emitter.settings.tint);
     }
@@ -24602,21 +26234,16 @@ var Particle = class extends Renderable {
     if (emitter.settings.blendMode !== "normal") {
       this.blendMode = emitter.settings.blendMode;
     }
-    const angle = emitter.settings.angle + (emitter.settings.angleVariation > 0 ? (randomFloat(0, 2) - 1) * emitter.settings.angleVariation : 0);
-    const speed = emitter.settings.speed + (emitter.settings.speedVariation > 0 ? (randomFloat(0, 2) - 1) * emitter.settings.speedVariation : 0);
+    const angle = emitter.settings.angle + (Math.random() * 2 - 1) * emitter.settings.angleVariation;
+    const speed = emitter.settings.speed + (Math.random() * 2 - 1) * emitter.settings.speedVariation;
     this.vel.set(speed * Math.cos(angle), -speed * Math.sin(angle));
     this.life = randomFloat(emitter.settings.minLife, emitter.settings.maxLife);
     this.startLife = this.life;
-    this.startScale = clamp(
-      randomFloat(
-        emitter.settings.minStartScale,
-        emitter.settings.maxStartScale
-      ),
+    this.startScale = randomFloat(
       emitter.settings.minStartScale,
       emitter.settings.maxStartScale
     );
-    this.endScale = clamp(
-      randomFloat(emitter.settings.minEndScale, emitter.settings.maxEndScale),
+    this.endScale = randomFloat(
       emitter.settings.minEndScale,
       emitter.settings.maxEndScale
     );
@@ -24624,7 +26251,8 @@ var Particle = class extends Renderable {
     this.wind = emitter.settings.wind;
     this.followTrajectory = emitter.settings.followTrajectory;
     this.onlyInViewport = emitter.settings.onlyInViewport;
-    this._deltaInv = timer_default.maxfps / 1e3;
+    this.accurateBounds = emitter.settings.accurateBounds;
+    this._deltaInv = emitter._deltaInv;
     if (!emitter.settings.followTrajectory) {
       this._angle = randomFloat(
         emitter.settings.minRotation,
@@ -24664,24 +26292,33 @@ var Particle = class extends Renderable {
     const angle = this.followTrajectory ? Math.atan2(this.vel.y, this.vel.x) : this._angle;
     this.pos.x += this.vel.x * skew;
     this.pos.y += this.vel.y * skew;
+    const halfW = this._halfW;
+    const halfH = this._halfH;
+    const cos = Math.cos(angle);
+    const sin = Math.sin(angle);
+    const sCos = scale2 * cos;
+    const sSin = scale2 * sin;
     this.currentTransform.setTransform(
-      scale2,
-      0,
+      sCos,
+      sSin,
       0,
       0,
-      0,
-      scale2,
+      -sSin,
+      sCos,
       0,
       0,
       0,
       0,
       1,
       0,
-      this.pos.x,
-      this.pos.y,
+      this.pos.x - scale2 * (halfW * cos - halfH * sin),
+      this.pos.y - scale2 * (halfW * sin + halfH * cos),
       0,
       1
-    ).rotate(angle);
+    );
+    if (this.accurateBounds) {
+      this.updateBounds();
+    }
     this.isDirty = this.inViewport || !this.onlyInViewport;
     return super.update(dt);
   }
@@ -24691,7 +26328,7 @@ var Particle = class extends Renderable {
   draw(renderer2) {
     const w = this.width;
     const h = this.height;
-    renderer2.drawImage(this.image, 0, 0, w, h, -w / 2, -h / 2, w, h);
+    renderer2.drawImage(this.image, 0, 0, w, h, 0, 0, w, h);
   }
 };
 var particlePool = createPool(
@@ -25093,13 +26730,27 @@ var ImageLayer = class extends Sprite {
     this.isDirty = true;
   }
   /**
-   * override the default predraw function
-   * as repeat and anchor are managed directly in the draw method
+   * Override the default preDraw to skip the base class's anchor offset
+   * translation and `autoTransform` application — `ImageLayer.draw()`
+   * computes its own world-space position from the viewport, the parallax
+   * `ratio`, anchor, and zoom, so applying anchor/transform here would
+   * double-translate the layer.
+   *
+   * Coordinate-sensitive setup (flip, stencil mask) is intentionally
+   * deferred to `draw()` where it runs *after* the per-camera zoom
+   * translate/scale — that way it stays correctly aligned at any
+   * `viewport.zoom` and across multiple cameras. Coordinate-independent
+   * setup (alpha, post-effects, tint, blend) stays here. The inherited
+   * `Renderable.postDraw` cleans up symmetrically (`clearTint` /
+   * `clearMask` / `endPostEffect` / `restore`).
    * @ignore
    */
   preDraw(renderer2) {
     renderer2.save();
     renderer2.setGlobalAlpha(renderer2.globalAlpha() * this.getOpacity());
+    if (!this._postEffectManaged) {
+      renderer2.beginPostEffect(this);
+    }
     renderer2.setTint(this.tint);
     if (this.blendMode !== renderer2.getBlendMode()) {
       renderer2.setBlendMode(this.blendMode);
@@ -25137,6 +26788,16 @@ var ImageLayer = class extends Sprite {
     }
     renderer2.translate(x * vZoom, y * vZoom);
     renderer2.scale(vZoom, vZoom);
+    if (this._flip.x || this._flip.y) {
+      const px = viewport.width;
+      const py = viewport.height;
+      renderer2.translate(px, py);
+      renderer2.scale(this._flip.x ? -1 : 1, this._flip.y ? -1 : 1);
+      renderer2.translate(-px, -py);
+    }
+    if (this.mask) {
+      renderer2.setMask(this.mask);
+    }
     renderer2.drawPattern(
       this._pattern,
       0,
@@ -25559,8 +27220,10 @@ var Trigger = class extends Renderable {
    * @param {number} [settings.width] - width of the trigger area
    * @param {number} [settings.height] - height of the trigger area
    * @param {Rect[]|Polygon[]|Line[]|Ellipse[]} [settings.shapes] - collision shape(s) that will trigger the event
-   * @param {string} [settings.duration] - Fade duration (in ms)
-   * @param {string|Color} [settings.color] - Fade color
+   * @param {number} [settings.duration] - Transition duration (in ms)
+   * @param {string|Color} [settings.color] - Transition color (also accepts legacy `fade` property)
+   * @param {string} [settings.transition="fade"] - Transition type: "fade" for a color fade, "mask" for a shape-based mask transition
+   * @param {Ellipse|Polygon} [settings.shape] - Mask shape for "mask" transition type (e.g. an Ellipse for iris, a Polygon for diamond/star)
    * @param {string} [settings.event="level"] - the type of event to trigger (only "level" supported for now)
    * @param {string} [settings.to] - level to load if level trigger
    * @param {string|Container} [settings.container] - Target container. See {@link level.load}
@@ -25568,41 +27231,64 @@ var Trigger = class extends Renderable {
    * @param {boolean} [settings.flatten] - Flatten all objects into the target container. See {@link level.load}
    * @param {boolean} [settings.setViewportBounds] - Resize the viewport to match the level. See {@link level.load}
    * @example
-   * world.addChild(new me.Trigger(
-   *     x, y, {
-   *         shapes: [new me.Rect(0, 0, 100, 100)],
-   *         "duration" : 250,
-   *         "color" : "#000",
-   *         "to" : "mymap2"
-   *     }
-   * ));
+   * // fade transition (default)
+   * world.addChild(new Trigger(x, y, {
+   *     shapes: [new Rect(0, 0, 100, 100)],
+   *     color: "#000",
+   *     duration: 250,
+   *     to: "mymap2",
+   * }));
+   * @example
+   * // mask transition with iris (ellipse) shape
+   * world.addChild(new Trigger(x, y, {
+   *     shapes: [new Rect(0, 0, 100, 100)],
+   *     transition: "mask",
+   *     shape: new Ellipse(0, 0, 1, 1),
+   *     color: "#000",
+   *     duration: 500,
+   *     to: "mymap2",
+   * }));
+   * @example
+   * // mask transition with diamond polygon
+   * world.addChild(new Trigger(x, y, {
+   *     shapes: [new Rect(0, 0, 100, 100)],
+   *     transition: "mask",
+   *     shape: new Polygon(0, 0, [
+   *         { x: 0, y: -1 }, { x: 1, y: 0 },
+   *         { x: 0, y: 1 }, { x: -1, y: 0 },
+   *     ]),
+   *     color: "#000",
+   *     duration: 400,
+   *     to: "mymap2",
+   * }));
    */
   constructor(x, y, settings) {
     super(x, y, settings.width || 0, settings.height || 0);
     this.anchorPoint.set(0, 0);
-    this.fade = settings.fade;
+    this.color = settings.color || settings.fade;
     this.duration = settings.duration;
+    this.transition = settings.transition || "fade";
+    this.transitionShape = settings.shape;
     this.fading = false;
     this.name = "Trigger";
     this.type = settings.type;
     this.id = settings.id;
     this.gotolevel = settings.to;
     this.triggerSettings = {
-      // the default (and only for now) action
       event: "level"
     };
-    [
+    for (const property of [
       "type",
       "container",
       "onLoaded",
       "flatten",
       "setViewportBounds",
       "to"
-    ].forEach((property) => {
+    ]) {
       if (typeof settings[property] !== "undefined") {
         this.triggerSettings[property] = settings[property];
       }
-    });
+    }
     let shape = settings.shapes;
     if (typeof shape === "undefined") {
       shape = polygonPool.get(0, 0, [
@@ -25630,28 +27316,73 @@ var Trigger = class extends Renderable {
     return this.triggerSettings;
   }
   /**
-   * @ignore
-   */
-  onFadeComplete() {
-    const world = this.ancestor.getRootAncestor();
-    level.load(this.gotolevel, this.getTriggerSettings());
-    world.app.viewport.fadeOut(this.fade, this.duration);
-  }
-  /**
-   * trigger this event
+   * Trigger this event. Override in subclasses to customize behavior.
    * @protected
    */
   triggerEvent() {
     const triggerSettings = this.getTriggerSettings();
     const world = this.ancestor.getRootAncestor();
+    const app = world.app;
+    const viewport = app.viewport;
     if (triggerSettings.event === "level") {
       this.gotolevel = triggerSettings.to;
-      if (this.fade && this.duration) {
+      if (this.color && this.duration) {
         if (!this.fading) {
           this.fading = true;
-          world.app.viewport.fadeIn(this.fade, this.duration, () => {
-            return this.onFadeComplete();
-          });
+          const gotolevel = this.gotolevel;
+          const settings = this.getTriggerSettings();
+          const color = this.color;
+          const duration = this.duration;
+          const useMask = this.transition === "mask" && this.transitionShape;
+          const shape = this.transitionShape;
+          const userOnLoaded = settings.onLoaded;
+          settings.onLoaded = function(levelId) {
+            const vp = app.viewport;
+            if (useMask) {
+              vp.addCameraEffect(
+                new MaskEffect(vp, {
+                  shape,
+                  color,
+                  duration,
+                  direction: "reveal"
+                })
+              );
+            } else {
+              vp.addCameraEffect(
+                new FadeEffect(vp, {
+                  color,
+                  duration,
+                  direction: "out"
+                })
+              );
+            }
+            if (typeof userOnLoaded === "function") {
+              userOnLoaded.call(this, levelId);
+            }
+          };
+          const onComplete = () => {
+            level.load(gotolevel, settings);
+          };
+          if (useMask) {
+            viewport.addCameraEffect(
+              new MaskEffect(viewport, {
+                shape,
+                color,
+                duration,
+                direction: "hide",
+                onComplete
+              })
+            );
+          } else {
+            viewport.addCameraEffect(
+              new FadeEffect(viewport, {
+                color,
+                duration,
+                direction: "in",
+                onComplete
+              })
+            );
+          }
         }
       } else {
         level.load(this.gotolevel, triggerSettings);
@@ -25668,14 +27399,14 @@ var Trigger = class extends Renderable {
    */
   onCollision() {
     if (this.name === "Trigger") {
-      this.triggerEvent.apply(this);
+      this.triggerEvent();
     }
     return false;
   }
 };
 
 // src/version.ts
-var version = "19.0.0";
+var version = "19.2.0";
 
 // src/system/bootstrap.ts
 var initialized = false;
@@ -27539,7 +29270,7 @@ var QuadTree = class {
    * @param {Container} container - group of objects to be added
    */
   insertContainer(container) {
-    const children = container.children;
+    const children = container.getChildren();
     const childrenLength = children.length;
     for (let i = childrenLength, child; i--, child = children[i]; ) {
       if (child.isKinematic !== true) {
@@ -27815,6 +29546,327 @@ var World = class extends Container {
   }
 };
 
+// src/video/rendertarget/render_target_pool.js
+var RenderTargetPool = class {
+  /**
+   * @param {function(number, number): RenderTarget} factory - creates a RenderTarget with the given width and height
+   */
+  constructor(factory) {
+    this._factory = factory;
+    this._pool = [];
+    this._activeBase = -1;
+    this._previousBase = -1;
+  }
+  /**
+   * Get or create a render target at the given pool index, resized to the given dimensions.
+   * @param {number} index - pool index
+   * @param {number} width - desired width in pixels
+   * @param {number} height - desired height in pixels
+   * @returns {RenderTarget} the render target
+   */
+  get(index, width, height) {
+    if (!this._pool[index]) {
+      this._pool[index] = this._factory(width, height);
+    } else {
+      this._pool[index].resize(width, height);
+    }
+    return this._pool[index];
+  }
+  /**
+   * Prepare render targets for a post-effect pass.
+   * Allocates/resizes the capture target and optionally the ping-pong target.
+   * @param {boolean} isCamera - true for camera effects (indices 0+1), false for sprite (indices 2+3)
+   * @param {number} effectCount - number of enabled effects
+   * @param {number} width - target width in pixels
+   * @param {number} height - target height in pixels
+   * @returns {RenderTarget} the capture target (ready to bind)
+   */
+  begin(isCamera, effectCount, width, height) {
+    const newBase = isCamera ? 0 : 2;
+    if (!isCamera && this._activeBase === newBase) {
+      return this.get(this._activeBase, width, height);
+    }
+    this._previousBase = this._activeBase;
+    this._activeBase = newBase;
+    const rt = this.get(this._activeBase, width, height);
+    if (effectCount > 1) {
+      this.get(this._activeBase + 1, width, height);
+    }
+    return rt;
+  }
+  /**
+   * Get the capture render target for the current active pass.
+   * @returns {RenderTarget|undefined} the capture target, or undefined if no active pass
+   */
+  getCaptureTarget() {
+    if (this._activeBase < 0) {
+      return void 0;
+    }
+    return this._pool[this._activeBase];
+  }
+  /**
+   * Get the ping-pong render target for the current active pass.
+   * @returns {RenderTarget|undefined} the ping-pong target, or undefined if no active pass
+   */
+  getPingPongTarget() {
+    if (this._activeBase < 0) {
+      return void 0;
+    }
+    return this._pool[this._activeBase + 1];
+  }
+  /**
+   * End the current pass and restore the previous active base.
+   * Returns the parent render target to rebind (or null for screen).
+   * @returns {RenderTarget|null} the parent target, or null if returning to screen
+   */
+  end() {
+    this._activeBase = this._previousBase;
+    this._previousBase = -1;
+    if (this._activeBase >= 0 && this._pool[this._activeBase]) {
+      return this._pool[this._activeBase];
+    }
+    return null;
+  }
+  /**
+   * Resize all existing render targets in the pool to the given dimensions.
+   * @param {number} width - new width in pixels
+   * @param {number} height - new height in pixels
+   */
+  resizeAll(width, height) {
+    for (const rt of this._pool) {
+      if (rt) {
+        rt.resize(width, height);
+      }
+    }
+  }
+  /**
+   * Destroy all render targets and clear the pool.
+   */
+  destroy() {
+    for (const rt of this._pool) {
+      if (rt) {
+        rt.destroy();
+      }
+    }
+    this._pool.length = 0;
+    this._activeBase = -1;
+    this._previousBase = -1;
+  }
+};
+
+// src/video/rendertarget/webglrendertarget.js
+var DEPTH_STENCIL = 34041;
+var DEPTH_STENCIL_ATTACHMENT = 33306;
+function attachDepthStencil(gl, framebuffer, renderbuffer, width, height) {
+  const depthStencil = gl.DEPTH_STENCIL ?? DEPTH_STENCIL;
+  const depthStencilAttachment = gl.DEPTH_STENCIL_ATTACHMENT ?? DEPTH_STENCIL_ATTACHMENT;
+  gl.bindRenderbuffer(gl.RENDERBUFFER, renderbuffer);
+  gl.renderbufferStorage(gl.RENDERBUFFER, depthStencil, width, height);
+  gl.framebufferRenderbuffer(
+    gl.FRAMEBUFFER,
+    depthStencilAttachment,
+    gl.RENDERBUFFER,
+    renderbuffer
+  );
+  if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) === gl.FRAMEBUFFER_COMPLETE) {
+    return { hasStencil: true, isComplete: true };
+  }
+  gl.framebufferRenderbuffer(
+    gl.FRAMEBUFFER,
+    depthStencilAttachment,
+    gl.RENDERBUFFER,
+    null
+  );
+  gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, width, height);
+  gl.framebufferRenderbuffer(
+    gl.FRAMEBUFFER,
+    gl.DEPTH_ATTACHMENT,
+    gl.RENDERBUFFER,
+    renderbuffer
+  );
+  const status = gl.checkFramebufferStatus(gl.FRAMEBUFFER);
+  return {
+    hasStencil: false,
+    isComplete: status === gl.FRAMEBUFFER_COMPLETE
+  };
+}
+var WebGLRenderTarget = class extends RenderTarget {
+  /**
+   * @param {WebGLRenderingContext|WebGL2RenderingContext} gl - the WebGL context
+   * @param {number} width - initial width in pixels
+   * @param {number} height - initial height in pixels
+   */
+  constructor(gl, width, height) {
+    super();
+    this.gl = gl;
+    this.width = width;
+    this.height = height;
+    this.framebuffer = gl.createFramebuffer();
+    const prevUnit = gl.getParameter(gl.ACTIVE_TEXTURE);
+    this.texture = gl.createTexture();
+    gl.activeTexture(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_2D, this.texture);
+    gl.texImage2D(
+      gl.TEXTURE_2D,
+      0,
+      gl.RGBA,
+      width,
+      height,
+      0,
+      gl.RGBA,
+      gl.UNSIGNED_BYTE,
+      null
+    );
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    this.depthStencilBuffer = gl.createRenderbuffer();
+    gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffer);
+    gl.framebufferTexture2D(
+      gl.FRAMEBUFFER,
+      gl.COLOR_ATTACHMENT0,
+      gl.TEXTURE_2D,
+      this.texture,
+      0
+    );
+    this._applyDepthStencil(width, height);
+    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+    gl.bindRenderbuffer(gl.RENDERBUFFER, null);
+    gl.bindTexture(gl.TEXTURE_2D, null);
+    gl.activeTexture(prevUnit);
+  }
+  /**
+   * (Re)attach the depth/stencil renderbuffer at the given size and
+   * update `_hasStencil` based on the resulting framebuffer status.
+   * Falls back to depth-only when packed depth+stencil fails; warns
+   * once if even depth-only is incomplete.
+   * @ignore
+   */
+  _applyDepthStencil(width, height) {
+    const result = attachDepthStencil(
+      this.gl,
+      this.framebuffer,
+      this.depthStencilBuffer,
+      width,
+      height
+    );
+    this._hasStencil = result.hasStencil;
+    if (!result.isComplete) {
+      console.warn(
+        "WebGLRenderTarget: framebuffer incomplete after depth-only fallback \u2014 rendering into this target may fail"
+      );
+    } else if (!result.hasStencil) {
+      console.warn(
+        "WebGLRenderTarget: depth+stencil attachment failed; using depth-only \u2014 stencil masking disabled for this target"
+      );
+    }
+  }
+  /**
+   * Bind this FBO as the active render target.
+   * All subsequent draw calls will render into this FBO's texture.
+   */
+  bind() {
+    this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, this.framebuffer);
+  }
+  /**
+   * Unbind this FBO and restore rendering to the screen.
+   */
+  unbind() {
+    this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, null);
+  }
+  /**
+   * Resize the FBO texture and renderbuffer.
+   * @param {number} width - new width in pixels
+   * @param {number} height - new height in pixels
+   */
+  resize(width, height) {
+    if (this.width === width && this.height === height) {
+      return;
+    }
+    const gl = this.gl;
+    this.width = width;
+    this.height = height;
+    const prevUnit = gl.getParameter(gl.ACTIVE_TEXTURE);
+    gl.activeTexture(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_2D, this.texture);
+    gl.texImage2D(
+      gl.TEXTURE_2D,
+      0,
+      gl.RGBA,
+      width,
+      height,
+      0,
+      gl.RGBA,
+      gl.UNSIGNED_BYTE,
+      null
+    );
+    gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffer);
+    this._applyDepthStencil(width, height);
+    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+    gl.bindTexture(gl.TEXTURE_2D, null);
+    gl.bindRenderbuffer(gl.RENDERBUFFER, null);
+    gl.activeTexture(prevUnit);
+  }
+  /**
+   * Clear the FBO contents to transparent black.
+   */
+  clear() {
+    const gl = this.gl;
+    this.bind();
+    gl.clearColor(0, 0, 0, 0);
+    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT | gl.STENCIL_BUFFER_BIT);
+    this.unbind();
+  }
+  /**
+   * Returns an ImageData object representing the pixel contents of this render target.
+   * @param {number} [x=0] - x coordinate of the top-left corner
+   * @param {number} [y=0] - y coordinate of the top-left corner
+   * @param {number} [width=this.width] - width of the area to read
+   * @param {number} [height=this.height] - height of the area to read
+   * @returns {ImageData} the pixel data
+   */
+  getImageData(x = 0, y = 0, width = this.width, height = this.height) {
+    const gl = this.gl;
+    x = Math.max(0, Math.min(Math.floor(x), this.width - 1));
+    y = Math.max(0, Math.min(Math.floor(y), this.height - 1));
+    width = Math.max(1, Math.min(width, this.width - x));
+    height = Math.max(1, Math.min(height, this.height - y));
+    const pixels = new Uint8ClampedArray(width * height * 4);
+    this.bind();
+    gl.readPixels(x, y, width, height, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
+    this.unbind();
+    const rowSize = width * 4;
+    const temp = new Uint8ClampedArray(rowSize);
+    for (let i = 0; i < Math.floor(height / 2); i++) {
+      const topOffset = i * rowSize;
+      const bottomOffset = (height - 1 - i) * rowSize;
+      temp.set(pixels.subarray(topOffset, topOffset + rowSize));
+      pixels.copyWithin(topOffset, bottomOffset, bottomOffset + rowSize);
+      pixels.set(temp, bottomOffset);
+    }
+    return new ImageData(pixels, width, height);
+  }
+  /**
+   * Release all GPU resources.
+   */
+  destroy() {
+    const gl = this.gl;
+    if (this.framebuffer) {
+      gl.deleteFramebuffer(this.framebuffer);
+      this.framebuffer = null;
+    }
+    if (this.texture) {
+      gl.deleteTexture(this.texture);
+      this.texture = null;
+    }
+    if (this.depthStencilBuffer) {
+      gl.deleteRenderbuffer(this.depthStencilBuffer);
+      this.depthStencilBuffer = null;
+    }
+  }
+};
+
 // src/video/utils/dash.js
 var _dashPathResult = [];
 function dashPath(pts, pattern) {
@@ -27962,96 +30014,7 @@ var mesh_default = "uniform sampler2D uSampler;\nvarying vec4 vColor;\nvarying v
 // src/video/webgl/shaders/mesh.vert
 var mesh_default2 = "// Current vertex point (3D position for mesh rendering)\nattribute vec3 aVertex;\nattribute vec2 aRegion;\nattribute vec4 aColor;\n\n// Projection matrix\nuniform mat4 uProjectionMatrix;\n\nvarying vec2 vRegion;\nvarying vec4 vColor;\n\nvoid main(void) {\n    // Transform the vertex position by the projection matrix\n    gl_Position = uProjectionMatrix * vec4(aVertex, 1.0);\n    // Pass the remaining attributes to the fragment shader\n    vColor = vec4(aColor.bgr * aColor.a, aColor.a);\n    vRegion = aRegion;\n}\n";
 
-// src/video/webgl/buffer/index.js
-var IndexBuffer = class {
-  /**
-   * @param {WebGLRenderingContext|WebGL2RenderingContext} gl - the WebGL context
-   * @param {number} maxIndices - maximum number of indices this buffer can hold
-   * @param {boolean} [useUint32=false] - use Uint32 indices (WebGL2) instead of Uint16 (WebGL1)
-   * @param {boolean} [dynamic=false] - if true, use STREAM_DRAW for frequent updates; if false, use STATIC_DRAW
-   */
-  constructor(gl, maxIndices, useUint32 = false, dynamic = false) {
-    this.gl = gl;
-    this.dynamic = dynamic;
-    if (useUint32) {
-      this.type = gl.UNSIGNED_INT;
-      this.data = new Uint32Array(maxIndices);
-    } else {
-      this.type = gl.UNSIGNED_SHORT;
-      this.data = new Uint16Array(maxIndices);
-    }
-    this.length = 0;
-    this.buffer = gl.createBuffer();
-  }
-  /**
-   * Fill the buffer with a repeating quad index pattern [0,1,2, 2,1,3, 4,5,6, ...]
-   * and upload as a static buffer.
-   * @param {number} maxQuads - number of quads to generate indices for
-   */
-  fillQuadPattern(maxQuads) {
-    for (let i = 0, vertex = 0; i < maxQuads * 6; i += 6, vertex += 4) {
-      this.data[i] = vertex;
-      this.data[i + 1] = vertex + 1;
-      this.data[i + 2] = vertex + 2;
-      this.data[i + 3] = vertex + 2;
-      this.data[i + 4] = vertex + 1;
-      this.data[i + 5] = vertex + 3;
-    }
-    this.length = maxQuads * 6;
-    this.bind();
-    this.gl.bufferData(
-      this.gl.ELEMENT_ARRAY_BUFFER,
-      this.data,
-      this.gl.STATIC_DRAW
-    );
-  }
-  /**
-   * Reset the index count (for dynamic buffers)
-   */
-  clear() {
-    this.length = 0;
-  }
-  /**
-   * Add indices to the buffer, rebased by the given vertex offset
-   * @param {number[]} indices - source indices to add
-   * @param {number} vertexOffset - value to add to each index (vertex count at time of insertion)
-   */
-  add(indices, vertexOffset) {
-    for (let i = 0; i < indices.length; i++) {
-      this.data[this.length + i] = indices[i] + vertexOffset;
-    }
-    this.length += indices.length;
-  }
-  /**
-   * Add pre-computed absolute indices to the buffer (no rebasing)
-   * @param {number[]} indices - absolute index values to add
-   */
-  addRaw(indices) {
-    for (let i = 0; i < indices.length; i++) {
-      this.data[this.length + i] = indices[i];
-    }
-    this.length += indices.length;
-  }
-  /**
-   * Upload the current index data to the GPU (for dynamic buffers)
-   */
-  upload() {
-    this.bind();
-    this.gl.bufferData(
-      this.gl.ELEMENT_ARRAY_BUFFER,
-      this.data.subarray(0, this.length),
-      this.gl.STREAM_DRAW
-    );
-  }
-  /**
-   * bind this index buffer
-   */
-  bind() {
-    this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, this.buffer);
-  }
-};
-
-// src/video/webgl/buffer/vertex.js
+// src/video/buffer/vertex.js
 var VertexArrayBuffer = class {
   constructor(vertexSize, maxVertex) {
     this.vertexSize = vertexSize;
@@ -28078,16 +30041,25 @@ var VertexArrayBuffer = class {
     return this.vertexCount + vertex >= this.maxVertex;
   }
   /**
-   * push a new vertex to the buffer (quad format: x, y, u, v, tint)
+   * push a new vertex to the buffer
+   * @param {number} x - x position
+   * @param {number} y - y position
+   * @param {number} u - texture U coordinate
+   * @param {number} v - texture V coordinate
+   * @param {number} tint - tint color in UINT32 (argb) format
+   * @param {number} [textureId] - texture unit index for multi-texture batching
    * @ignore
    */
-  push(x, y, u, v, tint) {
+  push(x, y, u, v, tint, textureId) {
     const offset = this.vertexCount * this.vertexSize;
     this.bufferF32[offset] = x;
     this.bufferF32[offset + 1] = y;
     this.bufferF32[offset + 2] = u;
     this.bufferF32[offset + 3] = v;
     this.bufferU32[offset + 4] = tint;
+    if (this.vertexSize > 5) {
+      this.bufferF32[offset + 5] = textureId || 0;
+    }
     this.vertexCount++;
     return this;
   }
@@ -28145,258 +30117,102 @@ var VertexArrayBuffer = class {
   }
 };
 
-// src/video/webgl/utils/attributes.js
-function extractAttributes(gl, shader) {
-  const attributes = {};
-  const attrRx = /attribute\s+\w+\s+(\w+)/g;
-  let match;
-  let i = 0;
-  while (match = attrRx.exec(shader.vertex)) {
-    attributes[match[1]] = i++;
-  }
-  return attributes;
-}
-
-// src/video/webgl/utils/precision.js
-function setPrecision(src, precision) {
-  if (src.substring(0, 9) !== "precision") {
-    return "precision " + precision + " float;\n" + src;
-  }
-  return src;
-}
-function getMaxShaderPrecision(gl) {
-  if (gl.getShaderPrecisionFormat(gl.VERTEX_SHADER, gl.HIGH_FLOAT).precision > 0 && gl.getShaderPrecisionFormat(gl.FRAGMENT_SHADER, gl.HIGH_FLOAT).precision > 0) {
-    return "highp";
-  }
-  if (gl.getShaderPrecisionFormat(gl.VERTEX_SHADER, gl.MEDIUM_FLOAT).precision > 0 && gl.getShaderPrecisionFormat(gl.FRAGMENT_SHADER, gl.MEDIUM_FLOAT).precision > 0) {
-    return "mediump";
-  }
-  return "lowp";
-}
-
-// src/video/webgl/utils/program.js
-function compileShader(gl, type, source) {
-  const shader = gl.createShader(type);
-  gl.shaderSource(shader, source);
-  gl.compileShader(shader);
-  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
-    throw new Error(gl.getShaderInfoLog(shader));
-  }
-  return shader;
-}
-function compileProgram(gl, vertex, fragment, attributes) {
-  const vertShader = compileShader(gl, gl.VERTEX_SHADER, vertex);
-  const fragShader = compileShader(gl, gl.FRAGMENT_SHADER, fragment);
-  const program = gl.createProgram();
-  gl.attachShader(program, vertShader);
-  gl.attachShader(program, fragShader);
-  for (const location in attributes) {
-    gl.bindAttribLocation(program, attributes[location], location);
-  }
-  gl.linkProgram(program);
-  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
-    const error_msg = "Error initializing Shader " + this + "\ngl.VALIDATE_STATUS: " + gl.getProgramParameter(program, gl.VALIDATE_STATUS) + "\ngl.getError()" + gl.getError() + "\ngl.getProgramInfoLog()" + gl.getProgramInfoLog(program);
-    gl.deleteProgram(program);
-    throw new Error(error_msg);
+// src/video/buffer/index.js
+var IndexBuffer = class {
+  /**
+   * @param {number} maxIndices - maximum number of indices this buffer can hold
+   * @param {boolean} [useUint32=false] - use Uint32 indices instead of Uint16
+   */
+  constructor(maxIndices, useUint32 = false) {
+    this.data = useUint32 ? new Uint32Array(maxIndices) : new Uint16Array(maxIndices);
+    this.length = 0;
   }
-  gl.useProgram(program);
-  gl.deleteShader(vertShader);
-  gl.deleteShader(fragShader);
-  return program;
-}
-
-// src/video/webgl/utils/string.js
-function minify(src) {
-  src = src.replace(/\/\*[\s\S]*?\*\/|([^\\:]|^)\/\/.*$/gm, "$1");
-  src = src.replace(/(\\n\s+)|(\s+\\n)/g, "");
-  src = src.replace(/(\\r|\\n)+/g, "");
-  src = src.replace(/[ \t]*([;,[\](){}\\\/\-+*|^&!=<>?~%])[ \t]*/g, "$1");
-  return src;
-}
-
-// src/video/webgl/utils/uniforms.js
-var fnHash = {
-  bool: "1i",
-  int: "1i",
-  float: "1f",
-  vec2: "2fv",
-  vec3: "3fv",
-  vec4: "4fv",
-  bvec2: "2iv",
-  bvec3: "3iv",
-  bvec4: "4iv",
-  ivec2: "2iv",
-  ivec3: "3iv",
-  ivec4: "4iv",
-  mat2: "Matrix2fv",
-  mat3: "Matrix3fv",
-  mat4: "Matrix4fv",
-  sampler2D: "1i"
-};
-function extractUniforms(gl, shader) {
-  const uniforms = {};
-  const uniRx = /uniform\s+(\w+)\s+(\w+)/g;
-  const uniformsData = {};
-  const descriptor = {};
-  const locations = {};
-  let match;
-  [shader.vertex, shader.fragment].forEach((shader2) => {
-    while (match = uniRx.exec(shader2)) {
-      uniformsData[match[2]] = match[1];
-    }
-  });
-  Object.keys(uniformsData).forEach((name) => {
-    const type = uniformsData[name];
-    locations[name] = gl.getUniformLocation(shader.program, name);
-    descriptor[name] = {
-      get: /* @__PURE__ */ (function(name2) {
-        return function() {
-          return locations[name2];
-        };
-      })(name),
-      set: (function(name2, type2, fn) {
-        if (/^mat/.test(type2)) {
-          return function(val) {
-            gl[fn](locations[name2], false, val);
-          };
-        } else {
-          return function(val) {
-            let fnv = fn;
-            if (val.length && !/v$/.test(fn)) {
-              fnv += "v";
-            }
-            gl[fnv](locations[name2], val);
-          };
-        }
-      })(name, type, "uniform" + fnHash[type])
-    };
-  });
-  Object.defineProperties(uniforms, descriptor);
-  return uniforms;
-}
-
-// src/video/webgl/glshader.js
-var GLShader = class {
   /**
-   * @param {WebGLRenderingContext} gl - the current WebGL rendering context
-   * @param {string} vertex - a string containing the GLSL source code to set
-   * @param {string} fragment - a string containing the GLSL source code to set
-   * @param {string} [precision=auto detected] - float precision ('lowp', 'mediump' or 'highp').
-   * @see https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders
-   * @example
-   * // create a basic shader
-   * let myShader = new me.GLShader(
-   *    // WebGL rendering context
-   *    gl,
-   *    // vertex shader
-   *    [
-   *        "void main() {",
-   *        "    gl_Position = doMathToMakeClipspaceCoordinates;",
-   *        "}"
-   *    ].join("\n"),
-   *    // fragment shader
-   *    [
-   *        "void main() {",
-   *        "    gl_FragColor = doMathToMakeAColor;",
-   *        "}"
-   *    ].join("\n")
-   *  )
-   * // use the shader
-   * myShader.bind();
+   * Fill the buffer with a repeating quad index pattern [0,1,2, 2,1,3, 4,5,6, ...]
+   * @param {number} maxQuads - number of quads to generate indices for
    */
-  constructor(gl, vertex, fragment, precision) {
-    this.gl = gl;
-    this.vertex = setPrecision(
-      minify(vertex),
-      precision || getMaxShaderPrecision(this.gl)
-    );
-    this.fragment = setPrecision(
-      minify(fragment),
-      precision || getMaxShaderPrecision(this.gl)
-    );
-    this.attributes = extractAttributes(this.gl, this);
-    this.program = compileProgram(
-      this.gl,
-      this.vertex,
-      this.fragment,
-      this.attributes
-    );
-    this.uniforms = extractUniforms(this.gl, this);
-    on(ONCONTEXT_LOST, this.destroy, this);
+  fillQuadPattern(maxQuads) {
+    for (let i = 0, vertex = 0; i < maxQuads * 6; i += 6, vertex += 4) {
+      this.data[i] = vertex;
+      this.data[i + 1] = vertex + 1;
+      this.data[i + 2] = vertex + 2;
+      this.data[i + 3] = vertex + 2;
+      this.data[i + 4] = vertex + 1;
+      this.data[i + 5] = vertex + 3;
+    }
+    this.length = maxQuads * 6;
   }
   /**
-   * Installs this shader program as part of current rendering state
+   * Reset the index count
    */
-  bind() {
-    this.gl.useProgram(this.program);
+  clear() {
+    this.length = 0;
   }
   /**
-   * returns the location of an attribute variable in this shader program
-   * @param {string} name - the name of the attribute variable whose location to get.
-   * @returns {GLint} number indicating the location of the variable name if found. Returns -1 otherwise
+   * Add indices to the buffer, rebased by the given vertex offset
+   * @param {number[]} indices - source indices to add
+   * @param {number} vertexOffset - value to add to each index
    */
-  getAttribLocation(name) {
-    const attr = this.attributes[name];
-    if (typeof attr !== "undefined") {
-      return attr;
-    } else {
-      return -1;
+  add(indices, vertexOffset) {
+    for (let i = 0; i < indices.length; i++) {
+      this.data[this.length + i] = indices[i] + vertexOffset;
     }
+    this.length += indices.length;
   }
   /**
-   * Set the uniform to the given value
-   * @param {string} name - the uniform name
-   * @param {object|Float32Array} value - the value to assign to that uniform
-   * @example
-   * myShader.setUniform("uProjectionMatrix", this.projectionMatrix);
+   * Add pre-computed absolute indices to the buffer (no rebasing)
+   * @param {number[]} indices - absolute index values to add
    */
-  setUniform(name, value) {
-    const uniforms = this.uniforms;
-    if (typeof uniforms[name] !== "undefined") {
-      this.bind();
-      if (typeof value === "object" && typeof value.toArray === "function") {
-        uniforms[name] = value.toArray();
-      } else {
-        uniforms[name] = value;
-      }
-    } else {
-      throw new Error("undefined (" + name + ") uniform for shader " + this);
+  addRaw(indices) {
+    for (let i = 0; i < indices.length; i++) {
+      this.data[this.length + i] = indices[i];
     }
+    this.length += indices.length;
   }
+};
+
+// src/video/webgl/buffer/index.js
+var WebGLIndexBuffer = class extends IndexBuffer {
   /**
-   * activate the given vertex attribute for this shader
-   * @param {WebGLRenderingContext} gl - the current WebGL rendering context
-   * @param {object[]} attributes - an array of vertex attributes
-   * @param {number} stride - the size of a single vertex in bytes
+   * @param {WebGLRenderingContext|WebGL2RenderingContext} gl - the WebGL context
+   * @param {number} maxIndices - maximum number of indices this buffer can hold
+   * @param {boolean} [useUint32=false] - use Uint32 indices (WebGL2) instead of Uint16 (WebGL1)
    */
-  setVertexAttributes(gl, attributes, stride) {
-    for (let index = 0; index < attributes.length; ++index) {
-      const element = attributes[index];
-      const location = this.getAttribLocation(element.name);
-      if (location !== -1) {
-        gl.enableVertexAttribArray(location);
-        gl.vertexAttribPointer(
-          location,
-          element.size,
-          element.type,
-          element.normalized,
-          stride,
-          element.offset
-        );
-      } else {
-        gl.disableVertexAttribArray(index);
-      }
-    }
+  constructor(gl, maxIndices, useUint32 = false) {
+    super(maxIndices, useUint32);
+    this.gl = gl;
+    this.type = useUint32 ? gl.UNSIGNED_INT : gl.UNSIGNED_SHORT;
+    this.buffer = gl.createBuffer();
   }
   /**
-   * destroy this shader objects resources (program, attributes, uniforms)
+   * Fill the buffer with a repeating quad index pattern and upload as static.
+   * @param {number} maxQuads - number of quads to generate indices for
    */
-  destroy() {
-    this.uniforms = null;
-    this.attributes = null;
-    this.gl.deleteProgram(this.program);
-    this.vertex = null;
-    this.fragment = null;
+  fillQuadPattern(maxQuads) {
+    super.fillQuadPattern(maxQuads);
+    this.bind();
+    this.gl.bufferData(
+      this.gl.ELEMENT_ARRAY_BUFFER,
+      this.data,
+      this.gl.STATIC_DRAW
+    );
+  }
+  /**
+   * Upload the current index data to the GPU (for dynamic buffers)
+   */
+  upload() {
+    this.bind();
+    this.gl.bufferData(
+      this.gl.ELEMENT_ARRAY_BUFFER,
+      this.data.subarray(0, this.length),
+      this.gl.STREAM_DRAW
+    );
+  }
+  /**
+   * Bind this index buffer
+   */
+  bind() {
+    this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, this.buffer);
   }
 };
 
@@ -28456,7 +30272,8 @@ var Batcher = class {
       this.defaultShader = new GLShader(
         this.gl,
         settings.shader.vertex,
-        settings.shader.fragment
+        settings.shader.fragment,
+        this.renderer.shaderPrecision
       );
     } else {
       throw new Error("shader definition missing");
@@ -28468,7 +30285,7 @@ var Batcher = class {
     if (this.useIndexBuffer) {
       const gl = this.gl;
       this.glVertexBuffer = gl.createBuffer();
-      this.indexBuffer = new IndexBuffer(gl, maxVertices * 3, false, true);
+      this.indexBuffer = new WebGLIndexBuffer(gl, maxVertices * 3, false);
     }
   }
   /**
@@ -28672,7 +30489,7 @@ var MaterialBatcher = class extends Batcher {
    * @param {boolean} [mipmap=true] - Whether mipmap levels should be generated
    * @returns {WebGLTexture} a WebGL texture
    */
-  createTexture2D(unit, pixels = null, filter, repeat = "no-repeat", w = pixels.width, h = pixels.height, premultipliedAlpha = true, mipmap = true, texture) {
+  createTexture2D(unit, pixels = null, filter, repeat = "no-repeat", w = pixels.width, h = pixels.height, premultipliedAlpha = true, mipmap = true, texture, flush = true) {
     const gl = this.gl;
     const isPOT = isPowerOfTwo(w) && isPowerOfTwo(h);
     const rs = repeat.search(/^repeat(-x)?$/) === 0 && (isPOT || this.renderer.WebGLVersion > 1) ? gl.REPEAT : gl.CLAMP_TO_EDGE;
@@ -28681,7 +30498,7 @@ var MaterialBatcher = class extends Batcher {
     if (!currentTexture) {
       currentTexture = gl.createTexture();
     }
-    this.bindTexture2D(currentTexture, unit);
+    this.bindTexture2D(currentTexture, unit, flush);
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, rs);
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, rt);
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, filter);
@@ -28786,10 +30603,12 @@ var MaterialBatcher = class extends Batcher {
    * @param {WebGLTexture} texture - a WebGL texture
    * @param {number} unit - Texture unit to which the given texture is bound
    */
-  bindTexture2D(texture, unit) {
+  bindTexture2D(texture, unit, flush = true) {
     const gl = this.gl;
     if (texture !== this.boundTextures[unit]) {
-      this.flush();
+      if (flush) {
+        this.flush();
+      }
       if (this.currentTextureUnit !== unit) {
         this.currentTextureUnit = unit;
         gl.activeTexture(gl.TEXTURE0 + unit);
@@ -28797,7 +30616,9 @@ var MaterialBatcher = class extends Batcher {
       gl.bindTexture(gl.TEXTURE_2D, texture);
       this.boundTextures[unit] = texture;
     } else if (this.currentTextureUnit !== unit) {
-      this.flush();
+      if (flush) {
+        this.flush();
+      }
       this.currentTextureUnit = unit;
       gl.activeTexture(gl.TEXTURE0 + unit);
     }
@@ -28823,7 +30644,7 @@ var MaterialBatcher = class extends Batcher {
   /**
    * @ignore
    */
-  uploadTexture(texture, w, h, force = false) {
+  uploadTexture(texture, w, h, force = false, flush = true) {
     const unit = this.renderer.cache.getUnit(texture);
     const texture2D = this.boundTextures[unit];
     if (typeof texture2D === "undefined" || force) {
@@ -28836,12 +30657,13 @@ var MaterialBatcher = class extends Batcher {
         h,
         texture.premultipliedAlpha,
         void 0,
-        texture2D
+        texture2D,
+        flush
       );
     } else {
-      this.bindTexture2D(texture2D, unit);
+      this.bindTexture2D(texture2D, unit, flush);
     }
-    return this.currentTextureUnit;
+    return flush ? this.currentTextureUnit : unit;
   }
 };
 
@@ -29118,11 +30940,37 @@ var PrimitiveBatcher = class extends Batcher {
   }
 };
 
-// src/video/webgl/shaders/quad.frag
-var quad_default = "uniform sampler2D uSampler;\nvarying vec4 vColor;\nvarying vec2 vRegion;\n\nvoid main(void) {\n    gl_FragColor = texture2D(uSampler, vRegion) * vColor;\n}\n";
+// src/video/webgl/shaders/multitexture.js
+function buildMultiTextureFragment(maxTextures) {
+  const count = Math.max(maxTextures, 1);
+  const lines = [];
+  for (let i = 0; i < count; i++) {
+    lines.push("uniform sampler2D uSampler" + i + ";");
+  }
+  lines.push("varying vec4 vColor;");
+  lines.push("varying vec2 vRegion;");
+  lines.push("varying float vTextureId;");
+  lines.push("");
+  lines.push("void main(void) {");
+  lines.push("    vec4 color;");
+  for (let i = 0; i < count; i++) {
+    if (i === 0) {
+      lines.push("    if (vTextureId < 0.5) {");
+    } else {
+      lines.push("    } else if (vTextureId < " + (i + 0.5) + ") {");
+    }
+    lines.push("        color = texture2D(uSampler" + i + ", vRegion);");
+  }
+  lines.push("    } else {");
+  lines.push("        color = texture2D(uSampler0, vRegion);");
+  lines.push("    }");
+  lines.push("    gl_FragColor = color * vColor;");
+  lines.push("}");
+  return lines.join("\n");
+}
 
-// src/video/webgl/shaders/quad.vert
-var quad_default2 = "// Current vertex point\nattribute vec2 aVertex;\nattribute vec2 aRegion;\nattribute vec4 aColor;\n\n// Projection matrix\nuniform mat4 uProjectionMatrix;\n\nvarying vec2 vRegion;\nvarying vec4 vColor;\n\nvoid main(void) {\n    // Transform the vertex position by the projection matrix\n    gl_Position = uProjectionMatrix * vec4(aVertex, 0.0, 1.0);\n    // Pass the remaining attributes to the fragment shader\n    vColor = vec4(aColor.bgr * aColor.a, aColor.a);\n    vRegion = aRegion;\n}\n";
+// src/video/webgl/shaders/quad-multi.vert
+var quad_multi_default = "// Current vertex point\nattribute vec2 aVertex;\nattribute vec2 aRegion;\nattribute vec4 aColor;\nattribute float aTextureId;\n\n// Projection matrix\nuniform mat4 uProjectionMatrix;\n\nvarying vec2 vRegion;\nvarying vec4 vColor;\nvarying float vTextureId;\n\nvoid main(void) {\n    // Transform the vertex position by the projection matrix\n    gl_Position = uProjectionMatrix * vec4(aVertex, 0.0, 1.0);\n    // Pass the remaining attributes to the fragment shader\n    vColor = vec4(aColor.bgr * aColor.a, aColor.a);\n    vRegion = aRegion;\n    vTextureId = aTextureId;\n}\n";
 
 // src/video/webgl/batchers/quad_batcher.js
 var V_ARRAY = [
@@ -29137,6 +30985,7 @@ var QuadBatcher = class extends MaterialBatcher {
    * @ignore
    */
   init(renderer2) {
+    this.maxBatchTextures = Math.min(renderer2.maxTextures, 16);
     super.init(renderer2, {
       attributes: [
         {
@@ -29159,21 +31008,44 @@ var QuadBatcher = class extends MaterialBatcher {
           type: renderer2.gl.UNSIGNED_BYTE,
           normalized: true,
           offset: 4 * Float32Array.BYTES_PER_ELEMENT
+        },
+        {
+          name: "aTextureId",
+          size: 1,
+          type: renderer2.gl.FLOAT,
+          normalized: false,
+          offset: 5 * Float32Array.BYTES_PER_ELEMENT
         }
       ],
       shader: {
-        vertex: quad_default2,
-        fragment: quad_default
+        vertex: quad_multi_default,
+        fragment: buildMultiTextureFragment(this.maxBatchTextures)
       }
     });
+    for (let i = 0; i < this.maxBatchTextures; i++) {
+      this.defaultShader.setUniform("uSampler" + i, i);
+    }
+    this.useMultiTexture = true;
     const maxQuads = this.vertexData.maxVertex / 4;
-    this.indexBuffer = new IndexBuffer(
+    this.indexBuffer = new WebGLIndexBuffer(
       this.gl,
       maxQuads * 6,
       this.renderer.WebGLVersion > 1
     );
     this.indexBuffer.fillQuadPattern(maxQuads);
   }
+  /**
+   * Select the shader to use for compositing.
+   * Multi-texture batching is automatically enabled when the default
+   * shader is active, and disabled for custom ShaderEffect shaders.
+   * @see GLShader
+   * @see ShaderEffect
+   * @param {GLShader|ShaderEffect} shader - a reference to a GLShader or ShaderEffect instance
+   */
+  useShader(shader) {
+    super.useShader(shader);
+    this.useMultiTexture = shader === this.defaultShader;
+  }
   /**
    * Reset compositor internal state
    * @ignore
@@ -29181,12 +31053,16 @@ var QuadBatcher = class extends MaterialBatcher {
   reset() {
     super.reset();
     const maxQuads = this.vertexData.maxVertex / 4;
-    this.indexBuffer = new IndexBuffer(
+    this.indexBuffer = new WebGLIndexBuffer(
       this.gl,
       maxQuads * 6,
       this.renderer.WebGLVersion > 1
     );
     this.indexBuffer.fillQuadPattern(maxQuads);
+    for (let i = 0; i < this.maxBatchTextures; i++) {
+      this.defaultShader.setUniform("uSampler" + i, i);
+    }
+    this.useMultiTexture = true;
   }
   /**
    * Flush batched texture data to the GPU using indexed drawing.
@@ -29219,6 +31095,34 @@ var QuadBatcher = class extends MaterialBatcher {
       vertex.clear();
     }
   }
+  /**
+   * Draw a screen-aligned quad with the given raw WebGL texture through the given shader.
+   * Binds the texture to unit 0, pushes 4 vertices (Y-flipped UVs), flushes,
+   * then unbinds the texture.
+   * @param {WebGLTexture} source - the raw GL texture to blit
+   * @param {number} x - destination x
+   * @param {number} y - destination y
+   * @param {number} width - destination width
+   * @param {number} height - destination height
+   * @param {GLShader|ShaderEffect} shader - the shader effect to apply
+   */
+  blitTexture(source, x, y, width, height, shader) {
+    const gl = this.gl;
+    this.useShader(shader);
+    gl.activeTexture(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_2D, source);
+    shader.setUniform("uSampler", 0);
+    const tint = 4294967295;
+    this.vertexData.push(x, y, 0, 1, tint, 0);
+    this.vertexData.push(x + width, y, 1, 1, tint, 0);
+    this.vertexData.push(x, y + height, 0, 0, tint, 0);
+    this.vertexData.push(x + width, y + height, 1, 0, tint, 0);
+    this.flush();
+    gl.activeTexture(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_2D, null);
+    delete this.boundTextures[0];
+    this.useShader(this.defaultShader);
+  }
   /**
    * Add a textured quad
    * @param {TextureAtlas} texture - Source texture atlas
@@ -29238,10 +31142,20 @@ var QuadBatcher = class extends MaterialBatcher {
     if (vertexData.isFull(4)) {
       this.flush();
     }
-    const unit = this.uploadTexture(texture, w, h, reupload);
-    if (unit !== this.currentSamplerUnit) {
-      this.currentShader.setUniform("uSampler", unit);
-      this.currentSamplerUnit = unit;
+    let unit;
+    if (this.useMultiTexture) {
+      unit = this.uploadTexture(texture, w, h, reupload, false);
+      if (unit >= this.maxBatchTextures) {
+        this.flush();
+        this.renderer.cache.resetUnitAssignments();
+        unit = this.uploadTexture(texture, w, h, reupload, false);
+      }
+    } else {
+      unit = this.uploadTexture(texture, w, h, reupload);
+      if (unit !== this.currentSamplerUnit) {
+        this.currentShader.setUniform("uSampler", unit);
+        this.currentSamplerUnit = unit;
+      }
     }
     const m = this.viewMatrix;
     const vec0 = V_ARRAY[0].set(x, y);
@@ -29254,15 +31168,18 @@ var QuadBatcher = class extends MaterialBatcher {
       m.apply(vec2);
       m.apply(vec3);
     }
-    vertexData.push(vec0.x, vec0.y, u0, v0, tint);
-    vertexData.push(vec1.x, vec1.y, u1, v0, tint);
-    vertexData.push(vec2.x, vec2.y, u0, v1, tint);
-    vertexData.push(vec3.x, vec3.y, u1, v1, tint);
+    const textureId = this.useMultiTexture ? unit : 0;
+    vertexData.push(vec0.x, vec0.y, u0, v0, tint, textureId);
+    vertexData.push(vec1.x, vec1.y, u1, v0, tint, textureId);
+    vertexData.push(vec2.x, vec2.y, u0, v1, tint, textureId);
+    vertexData.push(vec3.x, vec3.y, u1, v1, tint, textureId);
   }
 };
 
 // src/video/webgl/webgl_renderer.js
 var _tempMatrix = new Matrix3d();
+var _savedTransform = new Matrix3d();
+var _savedProjection = new Matrix3d();
 var supportedCompressedTextureFormats;
 var WebGLRenderer = class extends Renderer {
   /**
@@ -29273,10 +31190,18 @@ var WebGLRenderer = class extends Renderer {
     this.GPUVendor = void 0;
     this.GPURenderer = void 0;
     this.gl = this.renderTarget.context;
+    this._renderTargetPool = new RenderTargetPool((w, h) => {
+      return new WebGLRenderTarget(this.gl, w, h);
+    });
+    this._savedEffectProjection = new Matrix3d();
     this.lineWidth = 1;
     this.lineJoin = "round";
     this.vertexBuffer = this.gl.createBuffer();
     this.maxTextures = this.gl.getParameter(this.gl.MAX_TEXTURE_IMAGE_UNITS);
+    this.shaderPrecision = getMaxShaderPrecision(
+      this.gl,
+      this.settings.highPrecisionShader !== false
+    );
     this._rectTriangles = Array.from({ length: 6 }, () => {
       return { x: 0, y: 0 };
     });
@@ -29294,6 +31219,7 @@ var WebGLRenderer = class extends Renderer {
     this.gl.disable(this.gl.DEPTH_TEST);
     this.gl.depthMask(false);
     this.gl.disable(this.gl.SCISSOR_TEST);
+    this._scissorActive = false;
     this.gl.enable(this.gl.BLEND);
     this.setBlendMode(this.settings.blendMode);
     const debugInfo = this.gl.getExtension("WEBGL_debug_renderer_info");
@@ -29346,6 +31272,9 @@ var WebGLRenderer = class extends Renderer {
   getSupportedCompressedTextureFormats() {
     if (typeof supportedCompressedTextureFormats === "undefined") {
       const gl = this.gl;
+      if (typeof gl === "undefined" || gl === null) {
+        return super.getSupportedCompressedTextureFormats();
+      }
       supportedCompressedTextureFormats = {
         astc: gl.getExtension("WEBGL_compressed_texture_astc") || this._gl.getExtension("WEBKIT_WEBGL_compressed_texture_astc"),
         bptc: gl.getExtension("EXT_texture_compression_bptc") || this._gl.getExtension("WEBKIT_EXT_texture_compression_bptc"),
@@ -29401,6 +31330,8 @@ var WebGLRenderer = class extends Renderer {
     });
     this.setBatcher("quad");
     this.gl.disable(this.gl.SCISSOR_TEST);
+    this._scissorActive = false;
+    this._renderTargetPool.destroy();
   }
   /**
    * add a new batcher to this renderer
@@ -29487,6 +31418,148 @@ var WebGLRenderer = class extends Renderer {
   flush() {
     this.currentBatcher.flush();
   }
+  /**
+   * Begin capturing rendering to an offscreen FBO for post-effect processing.
+   * @param {Renderable} renderable - the renderable requesting post-effect processing
+   * @returns {boolean} true if FBO capture started, false if skipped
+   * @ignore
+   */
+  beginPostEffect(renderable) {
+    const effects = renderable.postEffects.filter((fx) => {
+      return fx.enabled !== false;
+    });
+    if (effects.length === 0) {
+      this.customShader = void 0;
+      return false;
+    }
+    if (effects.length === 1 && !renderable._postEffectManaged) {
+      this.customShader = effects[0];
+      return false;
+    }
+    this.customShader = void 0;
+    const isCamera = renderable._postEffectManaged;
+    const canvas = this.getCanvas();
+    const w = canvas.width;
+    const h = canvas.height;
+    this.flush();
+    this.save();
+    this._savedEffectProjection.copy(this.projectionMatrix);
+    const rt = this._renderTargetPool.begin(isCamera, effects.length, w, h);
+    if (this.currentBatcher && this.currentBatcher.boundTextures) {
+      delete this.currentBatcher.boundTextures[0];
+    }
+    rt.bind();
+    this.setViewport(0, 0, w, h);
+    this.disableScissor();
+    this.setGlobalAlpha(1);
+    this.setBlendMode("normal");
+    if (isCamera) {
+      this.clear();
+    } else {
+      this.clearRenderTarget();
+    }
+    return true;
+  }
+  /** @ignore */
+  endPostEffect(renderable) {
+    const effects = renderable.postEffects.filter((fx) => {
+      return fx.enabled !== false;
+    });
+    if (effects.length === 0) {
+      return;
+    }
+    if (effects.length === 1 && !renderable._postEffectManaged) {
+      return;
+    }
+    const isCamera = renderable._postEffectManaged;
+    const rt1 = this._renderTargetPool.getCaptureTarget();
+    const rt2 = this._renderTargetPool.getPingPongTarget();
+    const keepBlend = !isCamera;
+    const canvas = this.getCanvas();
+    const w = canvas.width;
+    const h = canvas.height;
+    this.flush();
+    rt1.unbind();
+    const parentRT = this._renderTargetPool.end();
+    if (isCamera && renderable.isDefault === false) {
+      this.clipRect(
+        renderable.screenX,
+        renderable.screenY,
+        renderable.width,
+        renderable.height
+      );
+    }
+    if (parentRT) {
+      parentRT.bind();
+    }
+    this.setViewport(0, 0, w, h);
+    if (effects.length === 1) {
+      this.blitEffect(rt1.texture, 0, 0, w, h, effects[0], keepBlend);
+    } else {
+      let src = rt1;
+      let dst = rt2;
+      for (let i = 0; i < effects.length - 1; i++) {
+        dst.bind();
+        this.setViewport(0, 0, w, h);
+        this.clearRenderTarget();
+        this.blitEffect(src.texture, 0, 0, w, h, effects[i]);
+        dst.unbind();
+        const tmp = src;
+        src = dst;
+        dst = tmp;
+      }
+      if (parentRT) {
+        parentRT.bind();
+      }
+      this.setViewport(0, 0, w, h);
+      this.blitEffect(
+        src.texture,
+        0,
+        0,
+        w,
+        h,
+        effects[effects.length - 1],
+        keepBlend
+      );
+    }
+    if (isCamera && renderable.isDefault === false) {
+      this.disableScissor();
+    }
+    this.restore();
+    this.projectionMatrix.copy(this._savedEffectProjection);
+    this.currentBatcher.setProjection(this.projectionMatrix);
+  }
+  /**
+   * Blit a texture to the screen through a shader effect.
+   * Draws a screen-aligned quad using the given texture as source
+   * and the given shader for post-processing (e.g. scanlines, desaturation).
+   * @param {WebGLTexture} source - the source texture to blit
+   * @param {number} x - destination x position
+   * @param {number} y - destination y position
+   * @param {number} width - destination width
+   * @param {number} height - destination height
+   * @param {ShaderEffect} shader - the shader effect to apply
+   * @param {boolean} [keepBlend=false] - if true, keep current blend mode (for sprite compositing)
+   */
+  blitEffect(source, x, y, width, height, shader, keepBlend = false) {
+    this.flush();
+    const batcher = this.setBatcher("quad");
+    _savedTransform.copy(this.currentTransform);
+    _savedProjection.copy(this.projectionMatrix);
+    this.currentTransform.identity();
+    this.projectionMatrix.ortho(0, width, height, 0, -1, 1);
+    batcher.setProjection(this.projectionMatrix);
+    if (!keepBlend) {
+      this.setBlendEnabled(false);
+    }
+    batcher.blitTexture(source, x, y, width, height, shader);
+    if (!keepBlend) {
+      this.setBlendEnabled(true);
+    }
+    this.currentTransform.copy(_savedTransform);
+    this.projectionMatrix.copy(_savedProjection);
+    batcher.setProjection(this.projectionMatrix);
+  }
   /**
    * set/change the current projection matrix (WebGL only)
    * @param {Matrix3d} matrix - the new projection matrix
@@ -29506,6 +31579,61 @@ var WebGLRenderer = class extends Renderer {
   setViewport(x = 0, y = 0, w = this.getCanvas().width, h = this.getCanvas().height) {
     this.gl.viewport(x, y, w, h);
   }
+  /**
+   * Clear the current render target to transparent black.
+   *
+   * Only clears the color buffer — `setMask()` clears `STENCIL_BUFFER_BIT`
+   * itself when starting a mask, and including it here would emit a WebGL
+   * `Clear called for non-existing buffers` warning when the active FBO
+   * has no stencil attachment (rare, but happens on drivers that fail
+   * the depth+stencil renderbuffer attachment for the FBO).
+   */
+  clearRenderTarget() {
+    const gl = this.gl;
+    gl.clearColor(0, 0, 0, 0);
+    gl.clear(gl.COLOR_BUFFER_BIT);
+  }
+  /**
+   * Enable the scissor test with the given rectangle.
+   * @param {number} x - x coordinate of the scissor rectangle
+   * @param {number} y - y coordinate of the scissor rectangle
+   * @param {number} width - width of the scissor rectangle
+   * @param {number} height - height of the scissor rectangle
+   */
+  enableScissor(x, y, width, height) {
+    const gl = this.gl;
+    this.flush();
+    gl.enable(gl.SCISSOR_TEST);
+    this._scissorActive = true;
+    gl.scissor(
+      x + this.currentTransform.tx,
+      this.getCanvas().height - height - y - this.currentTransform.ty,
+      width,
+      height
+    );
+    this.currentScissor[0] = x;
+    this.currentScissor[1] = y;
+    this.currentScissor[2] = width;
+    this.currentScissor[3] = height;
+  }
+  /**
+   * Disable the scissor test, allowing rendering to the full viewport.
+   */
+  disableScissor() {
+    this.gl.disable(this.gl.SCISSOR_TEST);
+    this._scissorActive = false;
+  }
+  /**
+   * Enable or disable alpha blending.
+   * @param {boolean} enable - true to enable blending, false to disable
+   */
+  setBlendEnabled(enable2) {
+    if (enable2) {
+      this.gl.enable(this.gl.BLEND);
+    } else {
+      this.gl.disable(this.gl.BLEND);
+    }
+  }
   /**
    * Clear the frame buffer
    */
@@ -29920,6 +32048,7 @@ var WebGLRenderer = class extends Renderer {
         const gl = this.gl;
         const s = this.currentScissor;
         gl.enable(gl.SCISSOR_TEST);
+        this._scissorActive = true;
         gl.scissor(
           s[0] + this.currentTransform.tx,
           canvas.height - s[3] - s[1] - this.currentTransform.ty,
@@ -29928,9 +32057,11 @@ var WebGLRenderer = class extends Renderer {
         );
       } else {
         this.gl.disable(this.gl.SCISSOR_TEST);
+        this._scissorActive = false;
       }
     }
     this._currentGradient = this.renderState.currentGradient;
+    this.customShader = this.renderState.currentShader;
   }
   /**
    * saves the entire state of the renderer by pushing the current state onto a stack.
@@ -29946,7 +32077,8 @@ var WebGLRenderer = class extends Renderer {
    * renderer.restore();
    */
   save() {
-    this.renderState.save(this.gl.isEnabled(this.gl.SCISSOR_TEST));
+    this.renderState.currentShader = this.customShader;
+    this.renderState.save(this._scissorActive === true);
   }
   /**
    * adds a rotation to the transformation matrix.
@@ -30596,13 +32728,14 @@ var WebGLRenderer = class extends Renderer {
     const gl = this.gl;
     if (x !== 0 || y !== 0 || width !== canvas.width || height !== canvas.height) {
       const currentScissor = this.currentScissor;
-      if (gl.isEnabled(gl.SCISSOR_TEST)) {
+      if (this._scissorActive) {
         if (currentScissor[0] === x && currentScissor[1] === y && currentScissor[2] === width && currentScissor[3] === height) {
           return;
         }
       }
       this.flush();
       gl.enable(this.gl.SCISSOR_TEST);
+      this._scissorActive = true;
       gl.scissor(
         // scissor does not account for currentTransform, so manually adjust
         x + this.currentTransform.tx,
@@ -30616,6 +32749,7 @@ var WebGLRenderer = class extends Renderer {
       currentScissor[3] = height;
     } else {
       gl.disable(gl.SCISSOR_TEST);
+      this._scissorActive = false;
     }
   }
   /**
@@ -31107,6 +33241,45 @@ var Application = class {
   repaint() {
     this.isDirty = true;
   }
+  /**
+   * Pause the current stage. Convenience proxy for {@link state.pause}.
+   * @param [music=false] - also pause the current music track
+   * @example
+   * app.pause();        // pause game updates, keep music playing
+   * app.pause(true);    // pause game updates and music
+   */
+  pause(music = false) {
+    state_default.pause(music);
+  }
+  /**
+   * Resume the current stage. Convenience proxy for {@link state.resume}.
+   * @param [music=false] - also resume the current music track
+   */
+  resume(music = false) {
+    state_default.resume(music);
+  }
+  /**
+   * Freeze the current stage for a fixed duration, then automatically resume.
+   * Useful for hit-stop / hit-pause effects on impact.
+   *
+   * Convenience proxy for {@link state.freeze}; see that method's
+   * documentation for the full behaviour matrix (extend-not-stack semantics,
+   * interaction with manual `state.pause()` / `state.resume()`, automatic
+   * cancellation on window blur, etc.).
+   * @param duration - duration of the freeze in milliseconds
+   * @param [music=false] - also pause the current music track during the freeze
+   * @returns a Promise that resolves once the freeze ends (or is cancelled)
+   * @example
+   * // simple hit-stop on impact
+   * app.freeze(80);
+   *
+   * // chain VFX after the freeze
+   * await app.freeze(120);
+   * spawnImpactParticles();
+   */
+  freeze(duration, music = false) {
+    return state_default.freeze(duration, music);
+  }
   /** @ignore */
   _tick(time) {
     this.update(time);
@@ -31179,197 +33352,42 @@ function setDefaultGame(app) {
   game = app;
 }
 
-// src/particles/settings.js
-var ParticleEmitterSettings = {
-  /**
-   * Width of the particle spawn area.
-   * @type {number}
-   * @default 1
-   */
+// src/particles/settings.ts
+var defaultParticleEmitterSettings = {
   width: 1,
-  /**
-   * Height of the particle spawn area
-   * @type {number}
-   * @default 1
-   */
   height: 1,
-  /**
-   * image used for particles texture
-   * (by default melonJS will create a white 8x8 texture image)
-   * @type {HTMLCanvasElement}
-   * @default undefined
-   * @see {@link textureSize}
-   */
   image: void 0,
-  /**
-   * default texture size used for particles if no image is specified
-   * (by default melonJS will create a white 8x8 texture image)
-   * @type {number}
-   * @default 8
-   * @see {@link image}
-   */
   textureSize: 8,
-  /**
-   * tint to be applied to particles
-   * @type {string}
-   * @default "#fff"
-   */
   tint: "#fff",
-  /**
-   * Total number of particles in the emitter
-   * @type {number}
-   * @default 50
-   */
   totalParticles: 50,
-  /**
-   * Start angle for particle launch in Radians
-   * @type {number}
-   * @default Math.PI / 2
-   */
   angle: Math.PI / 2,
-  /**
-   * letiation in the start angle for particle launch in Radians.
-   * @type {number}
-   * @default 0
-   */
   angleVariation: 0,
-  /**
-   * Minimum time each particle lives once it is emitted in ms.
-   * @type {number}
-   * @default 1000
-   */
   minLife: 1e3,
-  /**
-   * Maximum time each particle lives once it is emitted in ms.
-   * @type {number}
-   * @default 3000
-   */
   maxLife: 3e3,
-  /**
-   * Start speed of particles.<br>
-   * @type {number}
-   * @default 2
-   */
   speed: 2,
-  /**
-   * letiation in the start speed of particles
-   * @type {number}
-   * @default 1
-   */
   speedVariation: 1,
-  /**
-   * Minimum start rotation for particles sprites in Radians
-   * @type {number}
-   * @default 0
-   */
   minRotation: 0,
-  /**
-   * Maximum start rotation for particles sprites in Radians
-   * @type {number}
-   * @default 0
-   */
   maxRotation: 0,
-  /**
-   * Minimum start scale ratio for particles (1 = no scaling)
-   * @type {number}
-   * @default 1
-   */
   minStartScale: 1,
-  /**
-   * Maximum start scale ratio for particles (1 = no scaling)
-   * @type {number}
-   * @default 1
-   */
   maxStartScale: 1,
-  /**
-   * Minimum end scale ratio for particles
-   * @type {number}
-   * @default 0
-   */
   minEndScale: 0,
-  /**
-   * Maximum end scale ratio for particles
-   * @type {number}
-   * @default 0
-   */
   maxEndScale: 0,
-  /**
-   * Vertical force (Gravity) for each particle
-   * @type {number}
-   * @default 0
-   * @see {@link World.gravity}
-   */
   gravity: 0,
-  /**
-   * Horizontal force (like a Wind) for each particle
-   * @type {number}
-   * @default 0
-   */
   wind: 0,
-  /**
-   * Update the rotation of particle in accordance the particle trajectory.<br>
-   * The particle sprite should aim at zero angle (draw from left to right).<br>
-   * Override the particle minRotation and maxRotation.<br>
-   * @type {boolean}
-   * @default false
-   */
   followTrajectory: false,
-  /**
-   * Enable the Texture Additive by composite operation ("additive" blendMode)
-   * @type {boolean}
-   * @default false
-   * @see {@link blendMode}
-   */
   textureAdditive: false,
-  /**
-   * the blend mode to be applied when rendering particles.
-   * (note: this will superseed the `textureAdditive` setting if different than "normal")
-   * @type {string}
-   * @default normal
-   * @see {@link CanvasRenderer#setBlendMode}
-   * @see {@link WebGLRenderer#setBlendMode}
-   */
   blendMode: "normal",
-  /**
-   * Update particles only in the viewport, remove it when out of viewport.
-   * @type {boolean}
-   * @default true
-   */
   onlyInViewport: true,
-  /**
-   * Render particles in screen space.
-   * @type {boolean}
-   * @default false
-   */
   floating: false,
-  /**
-   * Maximum number of particles launched each time in this emitter (used only if emitter is Stream).
-   * @type {number}
-   * @default 10
-   */
   maxParticles: 10,
-  /**
-   * How often a particle is emitted in ms (used only if emitter is a Stream).
-   * @type {number}
-   * @default 100
-   */
   frequency: 100,
-  /**
-   * Duration that the emitter releases particles in ms (used only if emitter is Stream).
-   * After this period, the emitter stop the launch of particles.
-   * @type {number}
-   * @default Infinity
-   */
   duration: Infinity,
-  /**
-   * Skip n frames after updating the particle system once.
-   * This can be used to reduce the performance impact of emitters with many particles.
-   * @type {number}
-   * @default 0
-   */
-  framesToSkip: 0
+  framesToSkip: 0,
+  accurateBounds: false,
+  autoDestroyOnComplete: false,
+  onComplete: void 0
 };
-var settings_default = ParticleEmitterSettings;
+var settings_default = defaultParticleEmitterSettings;
 
 // src/particles/emitter.ts
 function createDefaultParticleTexture(w = 8, h = 8) {
@@ -31380,9 +33398,14 @@ function createDefaultParticleTexture(w = 8, h = 8) {
   defaultParticleTexture.context.fillRect(0, 0, w, h);
   return defaultParticleTexture;
 }
+function clampMinToMax(settings, minKey, maxKey) {
+  if (settings[minKey] > settings[maxKey]) {
+    settings[minKey] = settings[maxKey];
+  }
+}
 var ParticleEmitter = class extends Container {
   /**
-   * the current (active) emitter settings
+   * the current (active) emitter settings (with defaults merged in)
    */
   settings;
   /** @ignore */
@@ -31399,6 +33422,19 @@ var ParticleEmitter = class extends Container {
   _dt;
   /** @ignore */
   _defaultParticle;
+  /**
+   * whether at least one particle has been spawned by this emitter — used as
+   * the precondition for completion detection (a brand-new emitter with zero
+   * children must not count as "complete")
+   * @ignore
+   */
+  _hasSpawned;
+  /**
+   * cached `timer.maxfps / 1000` — particles read this directly instead of
+   * recomputing it on every spawn.
+   * @ignore
+   */
+  _deltaInv;
   /**
    * @param x - x position of the particle emitter
    * @param y - y position of the particle emitter
@@ -31430,8 +33466,8 @@ var ParticleEmitter = class extends Container {
    * app.world.removeChild(emitter);
    */
   constructor(x, y, settings = {}) {
-    super(x, y, settings.width | 1, settings.height | 1);
-    this.settings = {};
+    super(x, y, settings.width ?? 1, settings.height ?? 1);
+    this.settings = { ...settings_default };
     this.centerOn(x, y);
     this._stream = false;
     this._frequencyTimer = 0;
@@ -31441,18 +33477,29 @@ var ParticleEmitter = class extends Container {
     this.autoSort = false;
     this._updateCount = 0;
     this._dt = 0;
+    this._hasSpawned = false;
+    this._deltaInv = timer_default.maxfps / 1e3;
     this.reset(settings);
   }
   /**
    * Reset the emitter with particle emitter settings.
-   * @param settings - [optional] object with emitter settings. See {@link ParticleEmitterSettings}
+   * @param settings - object with emitter settings. See {@link ParticleEmitterSettings}
    */
   reset(settings = {}) {
     Object.assign(this.settings, settings_default, settings);
+    clampMinToMax(this.settings, "minLife", "maxLife");
+    clampMinToMax(this.settings, "minStartScale", "maxStartScale");
+    clampMinToMax(this.settings, "minEndScale", "maxEndScale");
+    clampMinToMax(this.settings, "minRotation", "maxRotation");
+    this._deltaInv = timer_default.maxfps / 1e3;
+    if (typeof this._defaultParticle !== "undefined") {
+      this._defaultParticle.destroy();
+      this._defaultParticle = void 0;
+    }
     if (typeof this.settings.image === "undefined") {
       this._defaultParticle = createDefaultParticleTexture(
-        settings.textureSize,
-        settings.textureSize
+        this.settings.textureSize,
+        this.settings.textureSize
       );
       this.settings.image = this._defaultParticle.canvas;
     }
@@ -31476,8 +33523,12 @@ var ParticleEmitter = class extends Container {
   // Add count particles in the game world
   /** @ignore */
   addParticles(count) {
+    const z = this.pos.z;
     for (let i = 0; i < count; i++) {
-      this.addChild(particlePool.get(this), this.pos.z);
+      this.addChild(particlePool.get(this), z);
+    }
+    if (count > 0) {
+      this._hasSpawned = true;
     }
     this.isDirty = true;
   }
@@ -31520,15 +33571,17 @@ var ParticleEmitter = class extends Container {
    * @ignore
    */
   update(dt) {
-    if (++this._updateCount > this.settings.framesToSkip) {
-      this._updateCount = 0;
-    }
-    if (this._updateCount > 0) {
-      this._dt += dt;
-      return this.isDirty;
+    if (this.settings.framesToSkip > 0) {
+      if (++this._updateCount > this.settings.framesToSkip) {
+        this._updateCount = 0;
+      }
+      if (this._updateCount > 0) {
+        this._dt += dt;
+        return this.isDirty;
+      }
+      dt += this._dt;
+      this._dt = 0;
     }
-    dt += this._dt;
-    this._dt = 0;
     this.isDirty = this.isDirty || super.update(dt);
     if (this._enabled && this._stream) {
       if (this._durationTimer !== Infinity) {
@@ -31539,17 +33592,27 @@ var ParticleEmitter = class extends Container {
         }
       }
       this._frequencyTimer += dt;
-      const particlesCount = this.children?.length ?? 0;
+      const particlesCount = this.getChildren().length;
       if (particlesCount < this.settings.totalParticles && this._frequencyTimer >= this.settings.frequency) {
-        if (particlesCount + this.settings.maxParticles <= this.settings.totalParticles) {
-          this.addParticles(this.settings.maxParticles);
-        } else {
-          this.addParticles(this.settings.totalParticles - particlesCount);
-        }
+        this.addParticles(
+          Math.min(
+            this.settings.maxParticles,
+            this.settings.totalParticles - particlesCount
+          )
+        );
         this._frequencyTimer = 0;
         this.isDirty = true;
       }
     }
+    if (this._hasSpawned && !this._enabled && this.getChildren().length === 0) {
+      this._hasSpawned = false;
+      if (typeof this.settings.onComplete === "function") {
+        this.settings.onComplete.call(this);
+      }
+      if (this.settings.autoDestroyOnComplete && this.ancestor) {
+        this.ancestor.removeChild(this);
+      }
+    }
     return this.isDirty;
   }
   /**
@@ -32957,98 +35020,6 @@ var UITextButton = class extends UIBaseElement {
   }
 };
 
-// src/video/webgl/shadereffect.js
-var ShaderEffect = class {
-  /**
-   * whether this effect is active (false in Canvas mode)
-   * @type {boolean}
-   */
-  enabled = false;
-  /**
-   * @param {WebGLRenderer|CanvasRenderer} renderer - the current renderer instance
-   * @param {string} fragmentBody - GLSL code containing a `vec4 apply(vec4 color, vec2 uv)` function
-   *   that receives the sampled pixel color and UV coordinates, and returns the modified color.
-   *   You can declare additional `uniform` variables before the `apply()` function.
-   * @param {string} [precision=auto detected] - float precision ('lowp', 'mediump' or 'highp')
-   */
-  constructor(renderer2, fragmentBody, precision) {
-    if (typeof renderer2.gl === "undefined") {
-      console.warn(
-        "ShaderEffect requires WebGL and is disabled in Canvas mode"
-      );
-      return;
-    }
-    const fragment = [
-      "uniform sampler2D uSampler;",
-      "varying vec4 vColor;",
-      "varying vec2 vRegion;",
-      // user-provided fragment body (uniforms + apply function)
-      fragmentBody,
-      "void main(void) {",
-      "    vec4 texColor = texture2D(uSampler, vRegion) * vColor;",
-      "    gl_FragColor = apply(texColor, vRegion);",
-      "}"
-    ].join("\n");
-    this._shader = new GLShader(renderer2.gl, quad_default2, fragment, precision);
-    this.enabled = true;
-  }
-  /**
-   * Set the uniform to the given value
-   * @param {string} name - the uniform name
-   * @param {object|Float32Array} value - the value to assign to that uniform
-   */
-  setUniform(name, value) {
-    if (this.enabled) {
-      this._shader.setUniform(name, value);
-    }
-  }
-  /** @ignore */
-  bind() {
-    if (this.enabled) {
-      this._shader.bind();
-    }
-  }
-  /** @ignore */
-  getAttribLocation(name) {
-    return this.enabled ? this._shader.getAttribLocation(name) : -1;
-  }
-  /** @ignore */
-  setVertexAttributes(gl, attributes, stride) {
-    if (this.enabled) {
-      this._shader.setVertexAttributes(gl, attributes, stride);
-    }
-  }
-  /** @ignore */
-  get program() {
-    return this.enabled ? this._shader.program : null;
-  }
-  /** @ignore */
-  get vertex() {
-    return this.enabled ? this._shader.vertex : null;
-  }
-  /** @ignore */
-  get fragment() {
-    return this.enabled ? this._shader.fragment : null;
-  }
-  /** @ignore */
-  get attributes() {
-    return this.enabled ? this._shader.attributes : {};
-  }
-  /** @ignore */
-  get uniforms() {
-    return this.enabled ? this._shader.uniforms : {};
-  }
-  /**
-   * destroy this shader effect
-   */
-  destroy() {
-    if (this.enabled) {
-      this._shader.destroy();
-      this.enabled = false;
-    }
-  }
-};
-
 // src/video/webgl/effects/blur.js
 var BlurEffect = class extends ShaderEffect {
   /**
@@ -33151,25 +35122,16 @@ var ChromaticAberrationEffect = class extends ShaderEffect {
 };
 
 // src/video/webgl/effects/desaturate.js
-var DesaturateEffect = class extends ShaderEffect {
+var DesaturateEffect = class extends ColorMatrixEffect {
   /**
    * @param {import("../webgl_renderer.js").default} renderer - the current renderer instance
    * @param {object} [options] - effect options
    * @param {number} [options.intensity=1.0] - desaturation intensity (0.0 = full color, 1.0 = grayscale)
    */
   constructor(renderer2, options = {}) {
-    super(
-      renderer2,
-      `
-			uniform float uDesatIntensity;
-			vec4 apply(vec4 color, vec2 uv) {
-				float gray = dot(color.rgb, vec3(0.299, 0.587, 0.114));
-				return vec4(mix(color.rgb, vec3(gray), uDesatIntensity), color.a);
-			}
-			`
-    );
+    super(renderer2);
     this.intensity = typeof options.intensity === "number" ? options.intensity : 1;
-    this.setUniform("uDesatIntensity", this.intensity);
+    this.saturate(1 - this.intensity);
   }
   /**
    * set the desaturation intensity
@@ -33177,7 +35139,7 @@ var DesaturateEffect = class extends ShaderEffect {
    */
   setIntensity(value) {
     this.intensity = Math.max(0, Math.min(1, value));
-    this.setUniform("uDesatIntensity", this.intensity);
+    this.reset().saturate(1 - this.intensity);
   }
 };
 
@@ -33488,25 +35450,16 @@ var HologramEffect = class extends ShaderEffect {
 };
 
 // src/video/webgl/effects/invert.js
-var InvertEffect = class extends ShaderEffect {
+var InvertEffect = class extends ColorMatrixEffect {
   /**
    * @param {import("../webgl_renderer.js").default} renderer - the current renderer instance
    * @param {object} [options] - effect options
    * @param {number} [options.intensity=1.0] - inversion intensity (0.0 = original, 1.0 = fully inverted)
    */
   constructor(renderer2, options = {}) {
-    super(
-      renderer2,
-      `
-			uniform float uInvertIntensity;
-			vec4 apply(vec4 color, vec2 uv) {
-				vec3 inverted = vec3(color.a) - color.rgb;
-				return vec4(mix(color.rgb, inverted, uInvertIntensity), color.a);
-			}
-			`
-    );
+    super(renderer2);
     this.intensity = typeof options.intensity === "number" ? options.intensity : 1;
-    this.setUniform("uInvertIntensity", this.intensity);
+    this.invertColors(this.intensity);
   }
   /**
    * set the inversion intensity
@@ -33514,7 +35467,7 @@ var InvertEffect = class extends ShaderEffect {
    */
   setIntensity(value) {
     this.intensity = Math.max(0, Math.min(1, value));
-    this.setUniform("uInvertIntensity", this.intensity);
+    this.reset().invertColors(this.intensity);
   }
 };
 
@@ -33704,28 +35657,16 @@ var ScanlineEffect = class extends ShaderEffect {
 };
 
 // src/video/webgl/effects/sepia.js
-var SepiaEffect = class extends ShaderEffect {
+var SepiaEffect = class extends ColorMatrixEffect {
   /**
    * @param {import("../webgl_renderer.js").default} renderer - the current renderer instance
    * @param {object} [options] - effect options
    * @param {number} [options.intensity=1.0] - sepia intensity (0.0 = original, 1.0 = full sepia)
    */
   constructor(renderer2, options = {}) {
-    super(
-      renderer2,
-      `
-			uniform float uSepiaIntensity;
-			vec4 apply(vec4 color, vec2 uv) {
-				vec3 sepia;
-				sepia.r = dot(color.rgb, vec3(0.393, 0.769, 0.189));
-				sepia.g = dot(color.rgb, vec3(0.349, 0.686, 0.168));
-				sepia.b = dot(color.rgb, vec3(0.272, 0.534, 0.131));
-				return vec4(mix(color.rgb, sepia, uSepiaIntensity), color.a);
-			}
-			`
-    );
+    super(renderer2);
     this.intensity = typeof options.intensity === "number" ? options.intensity : 1;
-    this.setUniform("uSepiaIntensity", this.intensity);
+    this.sepia(this.intensity);
   }
   /**
    * set the sepia intensity
@@ -33733,7 +35674,7 @@ var SepiaEffect = class extends ShaderEffect {
    */
   setIntensity(value) {
     this.intensity = Math.max(0, Math.min(1, value));
-    this.setUniform("uSepiaIntensity", this.intensity);
+    this.reset().sepia(this.intensity);
   }
 };
 
@@ -33782,6 +35723,50 @@ var TintPulseEffect = class extends ShaderEffect {
   }
 };
 
+// src/video/webgl/effects/vignette.js
+var VignetteEffect = class extends ShaderEffect {
+  /**
+   * @param {import("../webgl_renderer.js").default} renderer - the current renderer instance
+   * @param {object} [options] - effect options
+   * @param {number} [options.strength=0.15] - edge darkening power (lower = stronger darkening, higher = softer falloff)
+   * @param {number} [options.size=25.0] - vignette spread multiplier (higher = smaller dark area)
+   */
+  constructor(renderer2, options = {}) {
+    super(
+      renderer2,
+      `
+			uniform float uStrength;
+			uniform float uSize;
+			vec4 apply(vec4 color, vec2 uv) {
+				vec2 vig = uv * (1.0 - uv);
+				float v = clamp(pow(vig.x * vig.y * uSize, uStrength), 0.0, 1.0);
+				return vec4(color.rgb * v, color.a);
+			}
+			`
+    );
+    this.strength = options.strength ?? 0.15;
+    this.size = options.size ?? 25;
+    this.setUniform("uStrength", this.strength);
+    this.setUniform("uSize", this.size);
+  }
+  /**
+   * set the vignette strength
+   * @param {number} strength - edge darkening power (lower = stronger, higher = softer)
+   */
+  setStrength(strength) {
+    this.strength = Math.max(0, strength);
+    this.setUniform("uStrength", this.strength);
+  }
+  /**
+   * set the vignette size
+   * @param {number} size - spread multiplier (higher = smaller dark area)
+   */
+  setSize(size) {
+    this.size = Math.max(0, size);
+    this.setUniform("uSize", this.size);
+  }
+};
+
 // src/video/webgl/effects/wave.js
 var WaveEffect = class extends ShaderEffect {
   /**
@@ -34366,6 +36351,7 @@ export {
   Bounds,
   CANVAS,
   Camera2d,
+  CameraEffect,
   canvasrendertarget_default as CanvasRenderTarget,
   CanvasRenderer,
   CanvasTexture,
@@ -34373,6 +36359,8 @@ export {
   Collectable,
   Color,
   ColorLayer,
+  ColorMatrix,
+  ColorMatrixEffect,
   Compositor,
   Container,
   DesaturateEffect,
@@ -34382,6 +36370,7 @@ export {
   DropTarget,
   Ellipse,
   Entity,
+  FadeEffect,
   FlashEffect,
   GLShader,
   GlowEffect,
@@ -34391,6 +36380,7 @@ export {
   InvertEffect,
   Light2d,
   Line,
+  MaskEffect,
   math_exports as Math,
   Matrix2d,
   Matrix3d,
@@ -34414,6 +36404,7 @@ export {
   QuadTree,
   Rect,
   RenderState,
+  RenderTarget,
   Renderable,
   Renderer,
   RoundRect,
@@ -34421,6 +36412,7 @@ export {
   ScanlineEffect,
   SepiaEffect,
   ShaderEffect,
+  ShakeEffect,
   Sprite,
   Stage,
   TMXHexagonalRenderer,
@@ -34445,6 +36437,7 @@ export {
   UITextButton,
   Vector2d,
   Vector3d,
+  VignetteEffect,
   WEBGL,
   WaveEffect,
   WebGLRenderer,