melonjs 20.9.0 → 20.10.0

package/build/index.js

@@ -1,5 +1,5 @@
 /*!
- * melonJS Game Engine - 20.9.0
+ * melonJS Game Engine - 20.10.0
  * http://www.melonjs.org
  * melonjs is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license
@@ -10130,6 +10130,9 @@ var Tween = class {
    * @internal
    */
   _onTick(timestamp) {
+    if (!this._isRunning) {
+      return;
+    }
     if (!this._isPaused || this.updateWhenPaused) {
       const dt = timestamp - this._lastTick;
       this._lastTick = timestamp;
@@ -13370,10 +13373,17 @@ var Renderable = class _Renderable extends Rect {
       this.postEffects.length = 0;
     } else {
       this.postEffects = [value];
+      value._renderer?._queueWarm?.(this);
     }
   }
   /**
    * Add a post-processing shader effect to this renderable.
+   *
+   * With the `prewarm` application setting on (the default), what the
+   * effect will need to draw here is compiled from this call, off the
+   * frame, rather than on the frame the renderable first draws with it.
+   * That takes a moment to finish, so attach effects when the renderable
+   * is built (a pool, a stage starting) rather than when it is shown.
    * @param {GLShader|ShaderEffect} effect - the effect to add
    * @returns {GLShader|ShaderEffect} the added effect
    * @example
@@ -13381,6 +13391,7 @@ var Renderable = class _Renderable extends Rect {
    */
   addPostEffect(effect) {
     this.postEffects.push(effect);
+    effect?._renderer?._queueWarm?.(this);
     return effect;
   }
   /**
@@ -15409,6 +15420,7 @@ var ShaderEffect = class _ShaderEffect {
     this._renderer = renderer;
     this._fragmentBody = body;
     this._precision = precision;
+    this._vertexScale = { x: 1, y: 1 };
     const bodies = typeof body === "string" ? { glsl: body } : body ?? {};
     const language2 = renderer.shaderLanguage;
     const source = language2 !== null ? bodies[language2] : void 0;
@@ -17562,6 +17574,7 @@ var FrameAnimation = class {
 
 // src/renderable/sprite.js
 var FLICKER_INTERVAL_MS = 33;
+var VIDEO_GESTURES = ["touchstart", "touchend", "click", "keydown"];
 var Sprite = class extends Renderable {
   /**
    * @param {number} x - the x coordinates of the sprite object
@@ -17668,8 +17681,12 @@ var Sprite = class extends Renderable {
         }
         this.removeStatePauseListener = on(STATE_PAUSE, () => {
           this.image.pause();
+          this._cancelVideoPlay();
         });
         this._lastVideoFrameVersion = -1;
+        this._videoPlayPending = false;
+        this._videoPlayRequest = 0;
+        this._videoGestureListener = void 0;
         if (typeof this.image.requestVideoFrameCallback === "function") {
           this.image.version ??= 0;
           const tick2 = () => {
@@ -18144,8 +18161,8 @@ var Sprite = class extends Renderable {
     if (this.isVideo) {
       if (this.animationpause) {
         this.image.pause();
-      } else if (this.image.paused) {
-        this.image.play();
+      } else if (this.image.paused && this._videoPlayPending !== true) {
+        this._playVideo();
       }
       if (this.image.version === void 0) {
         if (!this.image.paused) {
@@ -18241,6 +18258,86 @@ var Sprite = class extends Renderable {
       // dw,dh
     );
   }
+  /**
+   * Start the video and handle the browser's answer. Before the user has
+   * interacted with the page, browsers refuse playback: calling `play()`
+   * again on every frame only logged an uncaught error per frame, so a
+   * refusal now waits for the next gesture instead. Any other failure
+   * (e.g. a `pause()` interrupting the request) retries on the next frame.
+   * @ignore
+   * @internal
+   */
+  _playVideo() {
+    const request = ++this._videoPlayRequest;
+    this._videoPlayPending = true;
+    Promise.resolve(this.image.play()).then(
+      () => {
+        this._videoPlayPending = false;
+      },
+      (error) => {
+        if (request !== this._videoPlayRequest) {
+          return;
+        }
+        if (error?.name === "NotAllowedError") {
+          this._awaitVideoGesture();
+        } else {
+          this._videoPlayPending = false;
+        }
+      }
+    );
+  }
+  /**
+   * Wait for the next user gesture and start the video from inside its
+   * handler, the moment a browser that refused playback allows it.
+   * @ignore
+   * @internal
+   */
+  _awaitVideoGesture() {
+    if (this._videoGestureListener !== void 0) {
+      return;
+    }
+    this._videoGestureListener = () => {
+      this._removeVideoGestureListener();
+      this._videoPlayPending = false;
+      if (this.animationpause !== true && this.image.paused) {
+        this._playVideo();
+      }
+    };
+    for (const type of VIDEO_GESTURES) {
+      globalThis.document.addEventListener(
+        type,
+        this._videoGestureListener,
+        true
+      );
+    }
+  }
+  /**
+   * Drop a pending `play()` request and stop waiting for a gesture.
+   * @ignore
+   * @internal
+   */
+  _cancelVideoPlay() {
+    this._videoPlayRequest++;
+    this._videoPlayPending = false;
+    this._removeVideoGestureListener();
+  }
+  /**
+   * @ignore
+   * @internal
+   */
+  _removeVideoGestureListener() {
+    if (this._videoGestureListener === void 0) {
+      return;
+    }
+    for (const type of VIDEO_GESTURES) {
+      globalThis.document.removeEventListener(
+        type,
+        this._videoGestureListener,
+        true
+      );
+    }
+    this._videoGestureListener = void 0;
+  }
   /**
    * Destroy function<br>
    * @ignore
@@ -18252,6 +18349,7 @@ var Sprite = class extends Renderable {
     this.offset = void 0;
     if (this.isVideo) {
       this.removeStatePauseListener();
+      this._cancelVideoPlay();
       if (typeof this._videoFrameHandle !== "undefined") {
         this.image.cancelVideoFrameCallback(this._videoFrameHandle);
         delete this.image.version;
@@ -21693,6 +21791,85 @@ var Path2D = class {
 };
 var path2d_default = Path2D;
 
+// src/video/blendmodes.js
+var ADVANCED_BLEND_MODES = [
+  "difference",
+  "overlay",
+  "hard-light",
+  "color-dodge",
+  "color-burn",
+  "soft-light",
+  // `darken` and `lighten` joined the shader path in 20.2: fixed-function
+  // MIN/MAX compute `min(src, dst)` and nothing else, so there is nowhere to
+  // put the `(1 - srcAlpha) * dst` term source-over contributes after the
+  // blend. A translucent source lost the backdrop's share entirely — a white
+  // `lighten` glow over a light backdrop rendered invisible. APPENDED, never
+  // inserted: the index is the shader's branch value.
+  "darken",
+  "lighten"
+];
+function isAdvancedBlendMode(mode) {
+  return ADVANCED_BLEND_MODES.indexOf(mode) !== -1;
+}
+function advancedBlendModeIndex(mode) {
+  return ADVANCED_BLEND_MODES.indexOf(mode);
+}
+function normalizeBlendMode(mode) {
+  switch (mode) {
+    case "none":
+    case "multiply":
+    case "screen":
+    case "exclusion":
+    case "normal":
+      return mode;
+    case "additive":
+    case "add":
+    case "lighter":
+      return "additive";
+    default:
+      return "normal";
+  }
+}
+function isSupportedBlendMode(mode) {
+  return isAdvancedBlendMode(mode) || mode === "normal" || normalizeBlendMode(mode) !== "normal";
+}
+function reportedBlendMode(mode) {
+  return isSupportedBlendMode(mode) ? mode : "normal";
+}
+function blendStateFor(mode, premultipliedAlpha) {
+  const src = premultipliedAlpha ? "one" : "src-alpha";
+  switch (mode) {
+    case "none":
+      return void 0;
+    case "additive":
+      return { operation: "add", srcFactor: src, dstFactor: "one" };
+    case "multiply":
+      return {
+        operation: "add",
+        srcFactor: "dst",
+        dstFactor: "one-minus-src-alpha"
+      };
+    case "exclusion":
+      return {
+        operation: "add",
+        srcFactor: "one-minus-dst",
+        dstFactor: "one-minus-src"
+      };
+    case "screen":
+      return {
+        operation: "add",
+        srcFactor: "one",
+        dstFactor: "one-minus-src"
+      };
+    default:
+      return {
+        operation: "add",
+        srcFactor: src,
+        dstFactor: "one-minus-src-alpha"
+      };
+  }
+}
+
 // src/video/effects/tonemap.js
 var CURVES = {
   /**
@@ -22171,12 +22348,25 @@ var Renderer = class _Renderer {
    *
    * Two consequences worth knowing:
    *
-   * - **A game that never calls `loader.preload()` is never warmed.** There
-   *   is no other hook. Call this yourself if you load assets some other way
-   *   and still want the warm-up.
+   * - **A game that never calls `loader.preload()` never gets this part.**
+   *   Call it yourself if you load assets some other way and still want it.
    * - It is deliberately NOT called from `Application.init()`. That runs
    *   before anything is on screen, so warming there would only lengthen a
    *   blank page instead of hiding behind a progress bar.
+   *
+   * This is the half that needs no renderable. The other half cannot run
+   * here, because what it compiles depends on the renderable drawing: under
+   * WebGPU a pipeline is keyed by blend mode, culling, transparency and the
+   * format of the target as well as by shader. So, behind the same
+   * `prewarm` setting, the renderer also warms a renderable when it gains
+   * a post effect ({@link Renderable#addPostEffect}) and when it is added
+   * to the world ({@link Container#addChild}): its effect pipelines, its
+   * own draw, the render targets its effect chain composites through, and
+   * the advanced blend machinery if its blend mode needs it. That work is
+   * started after the caller's code has run and finishes off the frame, so
+   * it pays off when a renderable is set up at least a frame before it is
+   * first drawn: build pools and attach their effects when a stage starts,
+   * not when the object is first shown.
    * @returns {Promise<void>} settles when the built-in programs are ready
    * @example
    * // the usual case: nothing to write. `preload()` warms on the way through
@@ -23096,6 +23286,152 @@ var Renderer = class _Renderer {
     }
     return effects;
   }
+  /**
+   * How many effects a renderable's chain has to have render targets for:
+   * every one attached, not just the ones enabled right now.
+   *
+   * Sizing the pool by the enabled count meant the ping-pong target was
+   * only created on the frame a second effect was switched on, which is a
+   * frame in the middle of play by construction (a hit flash, a power-up),
+   * and creating a target there is a stall in that frame. A disabled effect
+   * is one the game intends to turn on, so its target is made up front.
+   * @param {Renderable} renderable - the renderable whose chain this is
+   * @param {ShaderEffect[]} effects - its enabled chain, from `_effectChainFor`
+   * @returns {number} the number of chain slots to provision
+   * @ignore
+   * @internal
+   */
+  _postEffectCapacity(renderable, effects) {
+    return Math.max(effects.length, renderable.postEffects.length);
+  }
+  /**
+   * Warm, ahead of its first draw, what a renderable will need: the
+   * pipelines, programs and render targets that would otherwise be built
+   * on the frame it first shows up.
+   *
+   * Called when a renderable gains a post effect
+   * ({@link Renderable#addPostEffect}) and when it enters the world
+   * ({@link Container#addChild}), the two moments its draw becomes
+   * knowable. Deferred to a microtask so it runs once the caller's own code
+   * has finished, which is when the rest of the picture exists: a
+   * renderable usually gets its effect before it is added to the world,
+   * sized, or given its blend mode, and those all decide which pipeline its
+   * draw will ask for. Several requests in one task collapse into one
+   * warm-up per renderable.
+   *
+   * Honours the `prewarm` setting, the same switch as the loading-screen
+   * warm-up.
+   * @param {Renderable} renderable - the renderable to warm for
+   * @ignore
+   * @internal
+   */
+  _queueWarm(renderable) {
+    if (this.settings?.prewarm !== true || this.shaderLanguage == null) {
+      return;
+    }
+    if (this._warmHosts === void 0) {
+      this._warmHosts = /* @__PURE__ */ new Set();
+    }
+    if (this._warmHosts.size === 0) {
+      queueMicrotask(() => {
+        this._flushWarm();
+      });
+    }
+    this._warmHosts.add(renderable);
+  }
+  /**
+   * Run the warm-ups queued by {@link Renderer#_queueWarm}.
+   * @ignore
+   * @internal
+   */
+  _flushWarm() {
+    const hosts = [...this._warmHosts];
+    this._warmHosts.clear();
+    for (const host of hosts) {
+      try {
+        this._warmRenderable(host);
+      } catch {
+      }
+    }
+  }
+  /**
+   * Warm one renderable, and everything under it when it is a container:
+   * adding a container to the world brings its whole subtree in with it,
+   * without an `addChild` per descendant.
+   * @param {Renderable} renderable - the renderable to warm for
+   * @ignore
+   * @internal
+   */
+  _warmRenderable(renderable) {
+    if (renderable == null) {
+      return;
+    }
+    if (renderable.postEffects?.length > 0) {
+      this._warmPostEffects(renderable);
+    }
+    this._warmDraw(renderable);
+    if (isAdvancedBlendMode(renderable.blendMode)) {
+      this._warmAdvancedBlend();
+    }
+    const children = renderable.children;
+    if (Array.isArray(children)) {
+      for (const child of children) {
+        this._warmRenderable(child);
+      }
+    }
+  }
+  /**
+   * Warm everything one renderable's post effects will need. Each backend
+   * knows what that is; this base has no shaders, so nothing.
+   * @param {Renderable} renderable - the renderable to warm for
+   * @ignore
+   * @internal
+   */
+  // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
+  _warmPostEffects(renderable) {
+  }
+  /**
+   * Warm the renderable's own draw, the one it makes without any effect.
+   * Only meaningful where that is a pipeline keyed by draw state; nothing
+   * to do on this base.
+   * @param {Renderable} renderable - the renderable to warm for
+   * @ignore
+   * @internal
+   */
+  // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
+  _warmDraw(renderable) {
+  }
+  /**
+   * Warm the advanced blend modes' machinery: the blend shader, built on
+   * the first draw that uses one of those modes, and its offscreen target.
+   * Nothing to do on this base.
+   * @ignore
+   * @internal
+   */
+  _warmAdvancedBlend() {
+  }
+  /**
+   * Whether a renderable draws through `drawMesh`, where a lone effect is
+   * spliced into the mesh shader instead of being drawn as a quad.
+   * Duck-typed on fields only a `Mesh` carries, so the renderer does not
+   * have to import the renderable classes. An instanced mesh never hosts
+   * an effect: its shading is a separate family that knows nothing of one.
+   * @param {Renderable} renderable - the renderable to test
+   * @returns {boolean} true for a non-instanced mesh
+   * @ignore
+   * @internal
+   */
+  _hostsMeshEffect(renderable) {
+    return typeof renderable.cullBackFaces === "boolean" && renderable.indices !== void 0 && renderable.instanceLayout === void 0;
+  }
+  /**
+   * Warm the tone curve's pipeline once it exists. Nothing to do on a
+   * backend that compiles it in its constructor.
+   * @ignore
+   * @internal
+   */
+  _warmToneMap() {
+  }
   /**
    * Set the tone curve applied at the end of the camera's chain.
    *
@@ -23172,6 +23508,7 @@ var Renderer = class _Renderer {
       this._toneMapEffect?.destroy?.();
       this._toneMapEffect = new ToneMappingEffect(this, { mode });
       this._toneMapEffect.shared = true;
+      this._warmToneMap();
     }
     this._toneMapEffect.setExposure(this.settings.toneMappingExposure ?? 1);
     this._toneMapEffect.setWhite(this.settings.toneMappingWhite ?? 0);
@@ -28585,6 +28922,7 @@ var Container = class _Container extends Renderable {
           registerChildBody(cchild, worldContainer);
         });
       }
+      worldContainer?.app?.renderer?._queueWarm?.(child);
     }
     if (typeof child.onActivateEvent === "function" && this.isAttachedToRoot()) {
       child.onActivateEvent();
@@ -28627,6 +28965,7 @@ var Container = class _Container extends Renderable {
             registerChildBody(cchild, worldContainer);
           });
         }
+        worldContainer?.app?.renderer?._queueWarm?.(child);
       }
       if (typeof child.onActivateEvent === "function" && this.isAttachedToRoot()) {
         child.onActivateEvent();
@@ -41909,6 +42248,23 @@ var WebGLIndexBuffer = class extends IndexBuffer {
   }
 };
 
+// src/video/webgl/buffer/deletable.js
+var lostOnce = /* @__PURE__ */ new WeakSet();
+function markContextLost(gl) {
+  if (gl) {
+    lostOnce.add(gl);
+  }
+}
+function deletable(gl, probe, handle) {
+  if (gl.isContextLost() === true) {
+    return false;
+  }
+  if (lostOnce.has(gl) === false) {
+    return true;
+  }
+  return probe.call(gl, handle) === true;
+}
+
 // src/video/webgl/buffer/vertexstate.js
 function bufferGroups(descriptor) {
   if (Array.isArray(descriptor.buffers)) {
@@ -42057,12 +42413,15 @@ var WebGLVertexState = class {
   /**
    * Delete the underlying vertex array object, if any. Idempotent, and
    * safe on a lost context: deleting an object belonging to a lost
-   * context would queue `INVALID_OPERATION` (deletion counts as *using*
-   * it — only the `is*` queries are exempt), so probe first.
+   * context would queue `INVALID_OPERATION`, because deletion counts as
+   * *using* it.
+   *
+   * The probe behind `deletable` is synchronous, so it is skipped unless
+   * this context has actually lost one — see `buffer/deletable.js`.
    */
   release() {
     if (this.handle !== null) {
-      if (this.gl.isVertexArray(this.handle)) {
+      if (deletable(this.gl, this.gl.isVertexArray, this.handle)) {
         this.gl.deleteVertexArray(this.handle);
       }
       this.handle = null;
@@ -43054,6 +43413,14 @@ function transformQuadCorners(m, x, y, w, h, z) {
   }
   return corners;
 }
+var scaled = new Float64Array(4);
+function scaleQuad(x, y, w, h, sx, sy) {
+  scaled[0] = x + w * (1 - sx) / 2;
+  scaled[1] = y + h * (1 - sy) / 2;
+  scaled[2] = w * sx;
+  scaled[3] = h * sy;
+  return scaled;
+}
 
 // src/video/webgl/shaders/multitexture.js
 function buildMultiTextureFragment(maxTextures) {
@@ -43092,6 +43459,8 @@ var immutableStorage = /* @__PURE__ */ new WeakMap();
 function mipLevels(w, h) {
   return Math.floor(Math.log2(Math.max(w, h))) + 1;
 }
+var COMPRESSED_RGB_ETC1_WEBGL3 = 36196;
+var COMPRESSED_RGB8_ETC22 = 37492;
 var MaterialBatcher = class extends WebGLBatcher {
   /**
    * Initialize the textured batcher
@@ -43201,11 +43570,20 @@ var MaterialBatcher = class extends WebGLBatcher {
     this.currentTextureUnit = unit;
     const resourceOwned = pixels !== null && typeof pixels.upload === "function";
     const compressed = pixels !== null && pixels.compressed === true;
+    let compressedFormat = compressed ? pixels.format : void 0;
+    let mutableETC1 = false;
+    if (compressedFormat === COMPRESSED_RGB_ETC1_WEBGL3) {
+      if (this.renderer.getSupportedCompressedTextureFormats().etc2) {
+        compressedFormat = COMPRESSED_RGB8_ETC22;
+      } else {
+        mutableETC1 = true;
+      }
+    }
     if (!resourceOwned) {
       const storageW = Math.max(1, w | 0);
       const storageH = Math.max(1, h | 0);
       const levels2 = compressed ? pixels.mipmaps.length : mipmap === true ? mipLevels(storageW, storageH) : 1;
-      const format = compressed ? pixels.format : gl.RGBA8;
+      const format = compressed ? compressedFormat : gl.RGBA8;
       let storage = immutableStorage.get(currentTexture);
       if (storage && (storage.width !== storageW || storage.height !== storageH || storage.levels !== levels2 || storage.format !== format)) {
         gl.deleteTexture(currentTexture);
@@ -43214,7 +43592,7 @@ var MaterialBatcher = class extends WebGLBatcher {
         this.boundTextures[unit] = currentTexture;
         storage = void 0;
       }
-      if (!storage) {
+      if (!storage && !mutableETC1) {
         gl.texStorage2D(gl.TEXTURE_2D, levels2, format, storageW, storageH);
         immutableStorage.set(currentTexture, {
           width: storageW,
@@ -43233,18 +43611,37 @@ var MaterialBatcher = class extends WebGLBatcher {
       pixels.upload(gl, gl.TEXTURE_2D);
     } else if (compressed) {
       const mipmaps = pixels.mipmaps;
-      for (let i = 0; i < mipmaps.length; i++) {
-        gl.compressedTexSubImage2D(
+      if (mutableETC1) {
+        gl.texParameteri(
           gl.TEXTURE_2D,
-          i,
-          0,
-          0,
-          mipmaps[i].width,
-          mipmaps[i].height,
-          pixels.format,
-          mipmaps[i].data
+          gl.TEXTURE_MAX_LEVEL,
+          mipmaps.length - 1
         );
       }
+      for (let i = 0; i < mipmaps.length; i++) {
+        if (mutableETC1) {
+          gl.compressedTexImage2D(
+            gl.TEXTURE_2D,
+            i,
+            compressedFormat,
+            mipmaps[i].width,
+            mipmaps[i].height,
+            0,
+            mipmaps[i].data
+          );
+        } else {
+          gl.compressedTexSubImage2D(
+            gl.TEXTURE_2D,
+            i,
+            0,
+            0,
+            mipmaps[i].width,
+            mipmaps[i].height,
+            compressedFormat,
+            mipmaps[i].data
+          );
+        }
+      }
     } else if (pixels === null) {
     } else if (typeof pixels.byteLength !== "undefined") {
       gl.texSubImage2D(
@@ -43653,6 +44050,14 @@ var QuadBatcher = class extends MaterialBatcher {
         );
       }
       this.currentShader._setUVYDir?.(1);
+      const scale2 = this.currentShader._vertexScale;
+      if (scale2 !== void 0 && (scale2.x !== 1 || scale2.y !== 1)) {
+        const q = scaleQuad(x, y, w, h, scale2.x, scale2.y);
+        x = q[0];
+        y = q[1];
+        w = q[2];
+        h = q[3];
+      }
     }
     const [vec0, vec1, vec2, vec3] = transformQuadCorners(
       this.viewMatrix,
@@ -43670,85 +44075,6 @@ var QuadBatcher = class extends MaterialBatcher {
   }
 };
 
-// src/video/blendmodes.js
-var ADVANCED_BLEND_MODES = [
-  "difference",
-  "overlay",
-  "hard-light",
-  "color-dodge",
-  "color-burn",
-  "soft-light",
-  // `darken` and `lighten` joined the shader path in 20.2: fixed-function
-  // MIN/MAX compute `min(src, dst)` and nothing else, so there is nowhere to
-  // put the `(1 - srcAlpha) * dst` term source-over contributes after the
-  // blend. A translucent source lost the backdrop's share entirely — a white
-  // `lighten` glow over a light backdrop rendered invisible. APPENDED, never
-  // inserted: the index is the shader's branch value.
-  "darken",
-  "lighten"
-];
-function isAdvancedBlendMode(mode) {
-  return ADVANCED_BLEND_MODES.indexOf(mode) !== -1;
-}
-function advancedBlendModeIndex(mode) {
-  return ADVANCED_BLEND_MODES.indexOf(mode);
-}
-function normalizeBlendMode(mode) {
-  switch (mode) {
-    case "none":
-    case "multiply":
-    case "screen":
-    case "exclusion":
-    case "normal":
-      return mode;
-    case "additive":
-    case "add":
-    case "lighter":
-      return "additive";
-    default:
-      return "normal";
-  }
-}
-function isSupportedBlendMode(mode) {
-  return isAdvancedBlendMode(mode) || mode === "normal" || normalizeBlendMode(mode) !== "normal";
-}
-function reportedBlendMode(mode) {
-  return isSupportedBlendMode(mode) ? mode : "normal";
-}
-function blendStateFor(mode, premultipliedAlpha) {
-  const src = premultipliedAlpha ? "one" : "src-alpha";
-  switch (mode) {
-    case "none":
-      return void 0;
-    case "additive":
-      return { operation: "add", srcFactor: src, dstFactor: "one" };
-    case "multiply":
-      return {
-        operation: "add",
-        srcFactor: "dst",
-        dstFactor: "one-minus-src-alpha"
-      };
-    case "exclusion":
-      return {
-        operation: "add",
-        srcFactor: "one-minus-dst",
-        dstFactor: "one-minus-src"
-      };
-    case "screen":
-      return {
-        operation: "add",
-        srcFactor: "one",
-        dstFactor: "one-minus-src"
-      };
-    default:
-      return {
-        operation: "add",
-        srcFactor: src,
-        dstFactor: "one-minus-src-alpha"
-      };
-  }
-}
-
 // src/video/effects/blendEffect.js
 var wgslFragment2 = `
 struct BlendUniforms {
@@ -44032,6 +44358,26 @@ var RenderTargetPool = class {
     }
     return rt;
   }
+  /**
+   * Create, ahead of the pass that will use them, the targets a top-level
+   * chain needs: the camera pair, or the first sprite pair. Targets that
+   * already exist are left as they are (the pass resizes them when it
+   * begins), and the active-pass stack is not touched, so this is safe
+   * outside any pass.
+   * @param {boolean} isCamera - true for the camera pair (0/1), false for the first sprite pair (2/3)
+   * @param {number} effectCount - the number of effects in the chain
+   * @param {number} width - target width in pixels
+   * @param {number} height - target height in pixels
+   */
+  reserve(isCamera, effectCount, width, height) {
+    const base = isCamera ? 0 : 2;
+    if (!this._pool[base]) {
+      this.get(base, width, height);
+    }
+    if (effectCount > 1 && !this._pool[base + 1]) {
+      this.get(base + 1, width, height);
+    }
+  }
   /**
    * Get the capture render target for the current active pass.
    * @returns {RenderTarget|undefined} the capture target, or undefined if no active pass
@@ -44751,7 +45097,7 @@ var UniformBlock = class {
   destroy() {
     const gl = this.gl;
     if (this.buffer !== null) {
-      if (gl.isBuffer(this.buffer)) {
+      if (deletable(gl, gl.isBuffer, this.buffer)) {
         gl.deleteBuffer(this.buffer);
       }
       this.buffer = null;
@@ -45004,14 +45350,13 @@ var WebGLInstanceBuffer = class {
     );
   }
   /**
-   * Release the GL buffer. Safe to call twice, and on a lost context — the
-   * `isBuffer` probe is itself error-free, whereas deleting a handle whose
-   * context died raises INVALID_OPERATION.
+   * Release the GL buffer. Safe to call twice, and on a lost context:
+   * deleting a handle whose context died raises INVALID_OPERATION.
    */
   destroy() {
     const gl = this.gl;
     if (this.buffer !== null) {
-      if (gl.isBuffer(this.buffer)) {
+      if (deletable(gl, gl.isBuffer, this.buffer)) {
         gl.deleteBuffer(this.buffer);
       }
       this.buffer = null;
@@ -45097,13 +45442,13 @@ var RetainedGeometry = class {
       this.vertexState = null;
     }
     if (this.vertexBuffer !== null) {
-      if (gl.isBuffer(this.vertexBuffer)) {
+      if (deletable(gl, gl.isBuffer, this.vertexBuffer)) {
         gl.deleteBuffer(this.vertexBuffer);
       }
       this.vertexBuffer = null;
     }
     if (this.glIndexBuffer !== null) {
-      if (gl.isBuffer(this.glIndexBuffer)) {
+      if (deletable(gl, gl.isBuffer, this.glIndexBuffer)) {
         gl.deleteBuffer(this.glIndexBuffer);
       }
       this.glIndexBuffer = null;
@@ -45142,6 +45487,14 @@ var _EYE_POSITION = new Float32Array(3);
 var _FOG_COLOR = new Float32Array(3);
 var _FOG_PARAMS = new Float32Array(4);
 var _FOG_HEIGHT = new Float32Array(4);
+function prewarmYield() {
+  if (globalThis.document?.hidden === true) {
+    return Promise.resolve();
+  }
+  return new Promise((resolve) => {
+    setTimeout(resolve, 0);
+  });
+}
 var MeshBatcher = class extends MaterialBatcher {
   /**
    * Initialize the mesh batcher
@@ -45725,7 +46078,21 @@ var MeshBatcher = class extends MaterialBatcher {
    * @internal
    */
   effectShaderFor(effect) {
-    const fog = this._fogDefine();
+    return this._effectShader(effect, this._fogDefine());
+  }
+  /**
+   * The spliced program for one effect under one fog state.
+   *
+   * Split out of {@link MeshBatcher#effectShaderFor} so `prewarm` can build
+   * BOTH fog variants at load, rather than only the one the current scene
+   * happens to be using.
+   * @param {object} effect - the hosted ShaderEffect
+   * @param {string} fog - the fog define, or ""
+   * @returns {GLShader|null} the spliced program, or null if it will not build
+   * @ignore
+   * @internal
+   */
+  _effectShader(effect, fog) {
     const sources = this._shaderSources();
     const fragment2 = spliceEffect(sources.fragment, effect._meshBody);
     if (fragment2 === null) {
@@ -45858,17 +46225,14 @@ var MeshBatcher = class extends MaterialBatcher {
    * @ignore
    * @internal
    */
-  async prewarm() {
-    const yieldToFrame = () => {
-      if (globalThis.document?.hidden === true) {
-        return Promise.resolve();
-      }
-      return new Promise((resolve) => {
-        setTimeout(resolve, 0);
-      });
-    };
+  /**
+   * @param {object[]} [effects] - hosted ShaderEffects to warm the spliced
+   * mesh variants for, normally every preloaded `{type: "shader"}` asset
+   */
+  async prewarm(effects = []) {
+    const yieldToFrame = prewarmYield;
     const alive = () => {
-      return this.gl !== null && this.gl?.isContextLost?.() !== true;
+      return this._prewarmAlive();
     };
     const sources = this._shaderSources();
     const instanced = this._instancedShaderSources();
@@ -45906,6 +46270,54 @@ var MeshBatcher = class extends MaterialBatcher {
         return;
       }
     }
+    await this.prewarmEffects(effects);
+  }
+  /**
+   * Build the spliced mesh variant of each effect, in both fog states.
+   *
+   * A ShaderEffect hosted on a mesh does NOT draw with the program its
+   * asset compiled to: the body is spliced into the mesh shader, which is a
+   * different program again, and it was built on the frame the effect first
+   * drew. Preloading the shader looked like it covered this and did not, so
+   * a game that declared every effect in its manifest still stuttered the
+   * first time each one appeared. Warming them here is what makes the
+   * preload mean what it looks like it means.
+   *
+   * Separate from {@link MeshBatcher#prewarm} because the two halves have
+   * different lifetimes: the batcher's own variants are built once, while
+   * the effects grow with every preload.
+   * @param {object[]} [effects] - hosted ShaderEffects, normally the
+   * preloaded `{type: "shader"}` assets
+   * @returns {Promise<void>} settles once every variant is linked
+   * @ignore
+   * @internal
+   */
+  async prewarmEffects(effects = []) {
+    for (const fogDefine of ["", "#define FOG\n"]) {
+      for (const effect of effects) {
+        if (effect?._meshBody === void 0) {
+          continue;
+        }
+        this._effectShader(effect, fogDefine);
+        await prewarmYield();
+        if (!this._prewarmAlive()) {
+          return;
+        }
+      }
+    }
+  }
+  /**
+   * Whether a warm-up may keep building into this batcher. A yield is a
+   * window in which the application can be destroyed or the context lost,
+   * and building into a batcher that has been torn down leaks a `GLShader`
+   * per remaining variant, each subscribed to the global context-loss
+   * events with nothing left to destroy it.
+   * @returns {boolean} true while the context is live
+   * @ignore
+   * @internal
+   */
+  _prewarmAlive() {
+    return this.gl !== null && this.gl?.isContextLost?.() !== true;
   }
   /**
    * Whether the bound program is one this batcher would pick for a plain
@@ -47418,6 +47830,14 @@ var LitQuadBatcher = class extends QuadBatcher {
         );
       }
       this.currentShader._setUVYDir?.(1);
+      const scale2 = this.currentShader._vertexScale;
+      if (scale2 !== void 0 && (scale2.x !== 1 || scale2.y !== 1)) {
+        const q = scaleQuad(x, y, w, h, scale2.x, scale2.y);
+        x = q[0];
+        y = q[1];
+        w = q[2];
+        h = q[3];
+      }
     }
     let normalTextureId = -1;
     let shininess = 0;
@@ -48123,6 +48543,7 @@ function initBlendEnums(gl) {
     "one-minus-dst-alpha": gl.ONE_MINUS_DST_ALPHA
   };
 }
+var MESH_EFFECT_LINK_BUDGET = 4;
 var WebGLRenderer = class _WebGLRenderer extends Renderer {
   /**
    * @param {ApplicationSettings} [options] - optional parameters for the renderer
@@ -48214,6 +48635,7 @@ var WebGLRenderer = class _WebGLRenderer extends Renderer {
       (e) => {
         e.preventDefault();
         this.isContextValid = false;
+        markContextLost(this.gl);
         this.vertexBuffer = null;
         emit(ONCONTEXT_LOST, this);
       },
@@ -48252,6 +48674,11 @@ var WebGLRenderer = class _WebGLRenderer extends Renderer {
       if (renderer === this) {
         this.currentProgram = void 0;
         this._prewarmed = void 0;
+        this._prewarmedEffects = /* @__PURE__ */ new WeakSet();
+        if (this.settings.prewarm === true) {
+          this.prewarm().catch(() => {
+          });
+        }
       }
     };
     this.onCanvasResize = (width, height) => {
@@ -48407,18 +48834,181 @@ var WebGLRenderer = class _WebGLRenderer extends Renderer {
    * @see {@link Renderer#prewarm}
    */
   prewarm() {
+    this._prewarmedEffects ??= /* @__PURE__ */ new WeakSet();
+    const effects = Object.values(shaderList).filter((effect) => {
+      return effect != null && !this._prewarmedEffects.has(effect);
+    });
+    for (const effect of effects) {
+      this._prewarmedEffects.add(effect);
+    }
+    const batchers = [...this.batchers.values()];
     if (this._prewarmed === void 0) {
       this._prewarmed = Promise.all(
-        [...this.batchers.values()].map((batcher) => {
-          return batcher.prewarm();
+        batchers.map((batcher) => {
+          return batcher.prewarm(effects);
         })
       ).then(() => {
         this.setBatcher("quad");
       });
+    } else if (effects.length > 0) {
+      this._prewarmed = this._prewarmed.then(() => {
+        return Promise.all(
+          batchers.map((batcher) => {
+            return batcher.prewarmEffects?.(effects);
+          })
+        ).then(() => {
+          this.setBatcher("quad");
+        });
+      });
     }
     return this._prewarmed;
   }
+  /**
+   * Warm what one renderable's post effects will need on this backend.
+   *
+   * An effect's own program is linked when the effect is constructed, so
+   * what is left is what depends on where it is drawn: a mesh does not
+   * draw an effect with that program but with the effect spliced into the
+   * mesh shader, built on first draw; and a chain composites through
+   * render targets, built on the frame the chain first runs or grows a
+   * second effect.
+   * @param {Renderable} renderable - the renderable to warm for
+   * @override
+   * @ignore
+   * @internal
+   */
+  _warmPostEffects(renderable) {
+    const gl = this.gl;
+    if (gl === null || gl.isContextLost?.() === true) {
+      return;
+    }
+    const effects = renderable.postEffects.filter((fx) => {
+      return fx != null;
+    });
+    if (effects.length === 0) {
+      return;
+    }
+    const isCamera = renderable._postEffectManaged === true;
+    if (this._effectPassDepth === 0 && (isCamera || effects.length > 1 || renderable.postEffectNeedsCapture === true)) {
+      const { width, height } = this.getCanvas();
+      this.flush();
+      this._renderTargetPool.reserve(
+        isCamera,
+        this._postEffectCapacity(renderable, effects),
+        width,
+        height
+      );
+      this.invalidateTextureUnit(0);
+    }
+    if (!this._hostsMeshEffect(renderable)) {
+      return;
+    }
+    const batcher = this.batchers.get(
+      renderable.lit === true ? "litMesh" : "mesh"
+    );
+    if (batcher === void 0) {
+      return;
+    }
+    this._meshEffectWarmQueue ??= [];
+    for (const fx of effects) {
+      this._meshEffectWarmQueue.push(batcher, fx);
+    }
+    if (this._meshEffectWarmScheduled !== true) {
+      this._meshEffectWarmScheduled = true;
+      queueMicrotask(() => {
+        this._linkQueuedMeshEffects();
+      });
+    }
+  }
+  /**
+   * Link the spliced mesh programs queued by `_warmPostEffects`, a few
+   * milliseconds' worth per task, so a pool's worth spreads over the next
+   * frames instead of landing in one. A draw that comes first simply links
+   * its own program, as it would have without the warm-up.
+   * @ignore
+   * @internal
+   */
+  _linkQueuedMeshEffects() {
+    const queue = this._meshEffectWarmQueue;
+    const gl = this.gl;
+    if (gl === null || gl.isContextLost?.() === true) {
+      queue.length = 0;
+      this._meshEffectWarmScheduled = false;
+      return;
+    }
+    const start = globalThis.performance.now();
+    const previous = this.currentProgram;
+    try {
+      while (queue.length > 0 && globalThis.performance.now() - start < MESH_EFFECT_LINK_BUDGET) {
+        const batcher = queue.shift();
+        const fx = queue.shift();
+        if (fx.destroyed !== true && batcher.canHostEffect?.(fx) === true) {
+          batcher.effectShaderFor(fx);
+        }
+      }
+    } finally {
+      this._restoreProgram(previous);
+    }
+    if (queue.length === 0) {
+      this._meshEffectWarmScheduled = false;
+    } else if (globalThis.document?.hidden === true) {
+      this._linkQueuedMeshEffects();
+    } else {
+      setTimeout(() => {
+        this._linkQueuedMeshEffects();
+      }, 0);
+    }
+  }
+  /**
+   * Build the advanced blend shader and its offscreen target before the
+   * first draw in one of those modes, which otherwise compiles the shader
+   * and creates the target in the middle of that frame.
+   * @override
+   * @ignore
+   * @internal
+   */
+  _warmAdvancedBlend() {
+    const gl = this.gl;
+    if (gl === null || gl.isContextLost?.() === true) {
+      return;
+    }
+    if (typeof this._advancedBlendEffect === "undefined") {
+      const previous = this.currentProgram;
+      try {
+        this._advancedBlendEffect = new BlendEffect(this);
+      } finally {
+        this._restoreProgram(previous);
+      }
+    }
+    if (typeof this._advancedBlendTarget === "undefined" && this._effectPassDepth === 0 && this._advancedBlendOpen !== true) {
+      const { width, height } = this.getCanvas();
+      this.flush();
+      this._advancedBlendTarget = new WebGLRenderTarget(gl, width, height, {
+        samples: 0,
+        format: gl.RGBA8
+      });
+      this.invalidateTextureUnit(0);
+    }
+  }
+  /**
+   * Put back the program a warm-up found bound. Linking leaves the new
+   * program bound, and the batchers trust what they last bound, so a
+   * warm-up between two draws would otherwise hand the next one a
+   * stranger's program.
+   * @param {WebGLProgram|undefined} previous - what was bound before
+   * @ignore
+   * @internal
+   */
+  _restoreProgram(previous) {
+    if (previous != null && this.currentProgram !== previous) {
+      this.gl.useProgram(previous);
+      this.currentProgram = previous;
+    }
+  }
   destroy() {
+    if (this._meshEffectWarmQueue !== void 0) {
+      this._meshEffectWarmQueue.length = 0;
+    }
     this._toneMapEffect?.destroy?.();
     this._toneMapEffect = void 0;
     off(GAME_RESET, this.onGameReset);
@@ -48956,7 +49546,12 @@ var WebGLRenderer = class _WebGLRenderer extends Renderer {
     }
     savedProjection.copy(this.projectionMatrix);
     this._effectPassDepth++;
-    const rt = this._renderTargetPool.begin(isCamera, effects.length, w, h);
+    const rt = this._renderTargetPool.begin(
+      isCamera,
+      this._postEffectCapacity(renderable, effects),
+      w,
+      h
+    );
     this.invalidateTextureUnit(0);
     rt.bind();
     this.setViewport(0, 0, w, h);
@@ -56056,7 +56651,7 @@ var Trigger = class extends Renderable {
 };
 
 // src/version.ts
-var version = "20.9.0";
+var version = "20.10.0";
 
 // src/system/bootstrap.ts
 var initialized = false;
@@ -58499,6 +59094,8 @@ function gpuBlendState(mode, premultipliedAlpha) {
   return typeof component === "undefined" ? void 0 : { color: component, alpha: component };
 }
 var MAX_QUAD_TEXTURES = 8;
+var MAX_WARM_IN_FLIGHT = 16;
+var MISS_KEYS_KEPT = 64;
 var DEPTH_STENCIL_FORMAT = "depth24plus-stencil8";
 var STENCIL_STATES = {
   none: {
@@ -58575,6 +59172,15 @@ var WebGPUPipelineCache = class _WebGPUPipelineCache {
     this.sampleCount = 1;
     this.pipelines = /* @__PURE__ */ new Map();
     this.vertexLayouts = /* @__PURE__ */ new Map();
+    this.inFrame = false;
+    this.inFrameMisses = 0;
+    this.inFrameMissKeys = [];
+    this.pending = /* @__PURE__ */ new Map();
+    this.warmQueue = [];
+    this.warmInFlight = 0;
+    this.touchQueue = /* @__PURE__ */ new Map();
+    this.scratchTargets = /* @__PURE__ */ new Map();
+    this.generation = 0;
     this.frameLayout = device.createBindGroupLayout({
       label: "melonJS frame globals layout",
       entries: [
@@ -58800,24 +59406,33 @@ var WebGPUPipelineCache = class _WebGPUPipelineCache {
     );
   }
   /**
-   * Fetch (building on first use) the pipeline for the given state tuple.
-   * @param {string} shaderKey - "quad" | "primitive" | "clear"
+   * The cache key for a pipeline state tuple.
+   *
+   * The ONE place a key is composed. A draw looks its pipeline up through
+   * {@link WebGPUPipelineCache#get} and a warm-up builds one ahead of time
+   * through {@link WebGPUPipelineCache#warm}, and both come here, so the two
+   * cannot drift into building the same pipeline under two names: a warm-up
+   * whose key differs from the draw's by one character compiles a pipeline
+   * nothing will ever ask for, and the draw still compiles its own.
+   *
+   * The colour format and sample count default to the cache's CURRENT ones,
+   * which the renderer rewrites per render target. A warm-up runs outside
+   * any pass, where those describe whatever was bound last, so it passes
+   * the target it is warming for explicitly.
+   * @param {string} shaderKey - "quad" | "primitive" | "clear" | a registered family
    * @param {string} topology - portable topology name ("triangle-list", …)
    * @param {string} blendMode - blend mode (normalized internally)
    * @param {boolean} premultipliedAlpha - source premultiplication flag
    * @param {string} [stencilMode="none"] - "none" | "write" | "test" | "tag" | "mark"
-   * @param {{cullMode: string, frontFace: string, depthWrite?: boolean, depthTest?: boolean, fog?: boolean}} [meshState] - mesh pass
-   *   state: its presence switches the depth half of the attachment on —
-   *   depth writes enabled, "less-equal" testing (the GL mesh mode's
-   *   LEQUAL, keeping coplanar geometry stable) — and sets the per-mesh
-   *   face-culling axes. Omitted by the whole 2D tier, whose keys and
-   *   descriptors stay byte-identical to a build without a mesh path.
-   * @returns {GPURenderPipeline} the pipeline
+   * @param {object} [meshState] - the mesh pass state, see {@link WebGPUPipelineCache#get}
+   * @param {string} [format] - colour target format, the current one by default
+   * @param {number} [sampleCount] - pass sample count, the current one by default
+   * @returns {string} the key
    */
-  get(shaderKey, topology, blendMode, premultipliedAlpha, stencilMode = "none", meshState) {
+  keyFor(shaderKey, topology, blendMode, premultipliedAlpha, stencilMode = "none", meshState, format = this.format, sampleCount = this.sampleCount) {
     const blend = normalizeBlendMode(blendMode);
-    const pma = premultipliedAlpha !== false;
-    let key = `${shaderKey}|${topology}|${blend}|${pma ? 1 : 0}|${stencilMode}|${this.format}|${this.sampleCount}`;
+    const pma = blend === "none" || premultipliedAlpha !== false;
+    let key = `${shaderKey}|${topology}|${blend}|${pma ? 1 : 0}|${stencilMode}|${format}|${sampleCount}`;
     if (meshState) {
       key += `|mesh:${meshState.cullMode}:${meshState.frontFace}`;
       if (meshState.depthWrite === false) {
@@ -58830,32 +59445,257 @@ var WebGPUPipelineCache = class _WebGPUPipelineCache {
         key += "|fog";
       }
     }
-    const fogFlag = meshState?.fog === true ? 1 : 0;
+    return key;
+  }
+  /**
+   * Fetch (building on first use) the pipeline for the given state tuple.
+   * @param {string} shaderKey - "quad" | "primitive" | "clear"
+   * @param {string} topology - portable topology name ("triangle-list", …)
+   * @param {string} blendMode - blend mode (normalized internally)
+   * @param {boolean} premultipliedAlpha - source premultiplication flag
+   * @param {string} [stencilMode="none"] - "none" | "write" | "test" | "tag" | "mark"
+   * @param {{cullMode: string, frontFace: string, depthWrite?: boolean, depthTest?: boolean, fog?: boolean}} [meshState] - mesh pass
+   *   state: its presence switches the depth half of the attachment on —
+   *   depth writes enabled, "less-equal" testing (the GL mesh mode's
+   *   LEQUAL, keeping coplanar geometry stable) — and sets the per-mesh
+   *   face-culling axes. Omitted by the whole 2D tier, whose keys and
+   *   descriptors stay byte-identical to a build without a mesh path.
+   * @returns {GPURenderPipeline} the pipeline
+   */
+  get(shaderKey, topology, blendMode, premultipliedAlpha, stencilMode = "none", meshState) {
+    const key = this.keyFor(
+      shaderKey,
+      topology,
+      blendMode,
+      premultipliedAlpha,
+      stencilMode,
+      meshState
+    );
     let pipeline = this.pipelines.get(key);
     if (typeof pipeline === "undefined") {
-      const stencil = STENCIL_STATES[stencilMode] ?? STENCIL_STATES.none;
-      const vertexLayout = this.vertexLayouts.get(
-        this.vertexLayoutAliases.get(shaderKey) ?? shaderKey
-      );
-      const primitive = {
-        topology,
-        stripIndexFormat: topology.endsWith("-strip") ? "uint32" : void 0
-      };
-      if (meshState) {
-        primitive.cullMode = meshState.cullMode;
-        primitive.frontFace = meshState.frontFace;
-      }
       pipeline = this.device.createRenderPipeline(
-        this._descriptor(key, shaderKey, blend, pma, stencil, primitive, {
-          vertexLayout,
+        this._descriptor(
+          key,
+          shaderKey,
+          topology,
+          blendMode,
+          premultipliedAlpha,
+          stencilMode,
           meshState,
-          fogFlag
-        })
+          this.format,
+          this.sampleCount
+        )
       );
       this.pipelines.set(key, pipeline);
+      if (this.inFrame === true) {
+        this.inFrameMisses++;
+        this.inFrameMissKeys.push(key);
+        if (this.inFrameMissKeys.length > MISS_KEYS_KEPT) {
+          this.inFrameMissKeys.shift();
+        }
+      }
     }
     return pipeline;
   }
+  /**
+   * Build a pipeline ahead of the draw that will need it, without blocking.
+   *
+   * Takes the same tuple as {@link WebGPUPipelineCache#get}, plus the colour
+   * format and sample count of the target the draw will land on, since a
+   * warm-up runs outside any pass. Compiles through
+   * `createRenderPipelineAsync` where the device has it, so the work
+   * happens off the frame, and files the result under the same key `get`
+   * will look up. Asking twice for one pipeline compiles it once.
+   *
+   * Never rejects. A pipeline that fails to build is left for the draw to
+   * build and report, exactly as it would have without the warm-up.
+   * @param {string} shaderKey - the family, already registered
+   * @param {string} topology - portable topology name
+   * @param {string} blendMode - blend mode
+   * @param {boolean} premultipliedAlpha - source premultiplication flag
+   * @param {string} stencilMode - stencil mode
+   * @param {object|undefined} meshState - mesh pass state, read NOW: a later
+   *   change to the object does not reach the pipeline being built
+   * @param {string} format - colour target format the draw will use
+   * @param {number} sampleCount - sample count the draw will use
+   * @returns {Promise<void>} settles once the pipeline is in the cache, or
+   *   has failed to get there
+   */
+  warm(shaderKey, topology, blendMode, premultipliedAlpha, stencilMode, meshState, format, sampleCount) {
+    const key = this.keyFor(
+      shaderKey,
+      topology,
+      blendMode,
+      premultipliedAlpha,
+      stencilMode,
+      meshState,
+      format,
+      sampleCount
+    );
+    if (this.pipelines.has(key)) {
+      return Promise.resolve();
+    }
+    const inFlight = this.pending.get(key);
+    if (inFlight !== void 0) {
+      return inFlight;
+    }
+    const descriptor = this._descriptor(
+      key,
+      shaderKey,
+      topology,
+      blendMode,
+      premultipliedAlpha,
+      stencilMode,
+      meshState,
+      format,
+      sampleCount
+    );
+    const generation = this.generation;
+    const promise = new Promise((resolve) => {
+      this.warmQueue.push({
+        run: () => {
+          return typeof this.device.createRenderPipelineAsync === "function" ? this.device.createRenderPipelineAsync(descriptor) : this.device.createRenderPipeline(descriptor);
+        },
+        resolve: (pipeline) => {
+          this.pending.delete(key);
+          if (pipeline !== void 0 && generation === this.generation && !this.pipelines.has(key)) {
+            this.pipelines.set(key, pipeline);
+            this._touch(pipeline, format, sampleCount);
+          }
+          resolve();
+        }
+      });
+    });
+    this.pending.set(key, promise);
+    this._pumpWarmQueue();
+    return promise;
+  }
+  /**
+   * Start queued warm-ups until {@link MAX_WARM_IN_FLIGHT} are compiling.
+   * @ignore
+   * @internal
+   */
+  _pumpWarmQueue() {
+    while (this.warmInFlight < MAX_WARM_IN_FLIGHT && this.warmQueue.length > 0) {
+      const job = this.warmQueue.shift();
+      this.warmInFlight++;
+      Promise.resolve().then(job.run).then(job.resolve, () => {
+        job.resolve(void 0);
+      }).finally(() => {
+        this.warmInFlight--;
+        this._pumpWarmQueue();
+      });
+    }
+  }
+  /**
+   * Bind a freshly warmed pipeline once, in a pass of its own, so it is
+   * compiled now rather than at the first draw that uses it.
+   *
+   * Some implementations accept `createRenderPipelineAsync` and still defer
+   * the native compile to the first `setPipeline`, which puts it right back
+   * in the frame the warm-up was meant to keep it out of. Setting it on a
+   * throwaway 1×1 pass makes that first use happen here, while nothing is
+   * on screen waiting for it. Where the compile already happened this is
+   * one cheap bind.
+   * @param {GPURenderPipeline} pipeline - the pipeline to bind
+   * @param {string} format - its colour format
+   * @param {number} sampleCount - its sample count
+   * @ignore
+   * @internal
+   */
+  _touch(pipeline, format, sampleCount) {
+    const target = `${format}|${sampleCount}`;
+    let batch = this.touchQueue.get(target);
+    if (batch === void 0) {
+      batch = [];
+      this.touchQueue.set(target, batch);
+    }
+    batch.push(pipeline);
+    if (this.touchQueue.size === 1 && batch.length === 1) {
+      queueMicrotask(() => {
+        this._flushTouches();
+      });
+    }
+  }
+  /**
+   * Record and submit the passes queued by {@link WebGPUPipelineCache#_touch}.
+   * @ignore
+   * @internal
+   */
+  _flushTouches() {
+    const device = this.device;
+    const batches = [...this.touchQueue];
+    this.touchQueue.clear();
+    if (typeof device.createCommandEncoder !== "function") {
+      return;
+    }
+    try {
+      const encoder = device.createCommandEncoder({
+        label: "melonJS pipeline warm-up"
+      });
+      for (const [target, pipelines] of batches) {
+        const [format, samples] = target.split("|");
+        const scratch = this._scratchTarget(format, Number(samples));
+        const pass = encoder.beginRenderPass({
+          label: "melonJS pipeline warm-up",
+          colorAttachments: [
+            { view: scratch.colorView, loadOp: "clear", storeOp: "discard" }
+          ],
+          depthStencilAttachment: {
+            view: scratch.depthView,
+            depthClearValue: 1,
+            depthLoadOp: "clear",
+            depthStoreOp: "discard",
+            stencilLoadOp: "clear",
+            stencilStoreOp: "discard"
+          }
+        });
+        for (const pipeline of pipelines) {
+          pass.setPipeline(pipeline);
+        }
+        pass.end();
+      }
+      device.queue.submit([encoder.finish()]);
+    } catch {
+    }
+  }
+  /**
+   * The 1×1 colour + depth-stencil pair a warm-up pass binds for one
+   * target shape, built once per shape.
+   * @param {string} format - colour format
+   * @param {number} sampleCount - sample count
+   * @returns {{colorView: GPUTextureView, depthView: GPUTextureView}} the views
+   * @ignore
+   * @internal
+   */
+  _scratchTarget(format, sampleCount) {
+    const key = `${format}|${sampleCount}`;
+    let scratch = this.scratchTargets.get(key);
+    if (scratch === void 0) {
+      const color = this.device.createTexture({
+        label: "melonJS warm-up target",
+        size: [1, 1],
+        format,
+        sampleCount,
+        usage: GPUTextureUsage.RENDER_ATTACHMENT
+      });
+      const depth = this.device.createTexture({
+        label: "melonJS warm-up depth",
+        size: [1, 1],
+        format: DEPTH_STENCIL_FORMAT,
+        sampleCount,
+        usage: GPUTextureUsage.RENDER_ATTACHMENT
+      });
+      scratch = {
+        color,
+        depth,
+        colorView: color.createView(),
+        depthView: depth.createView()
+      };
+      this.scratchTargets.set(key, scratch);
+    }
+    return scratch;
+  }
   /**
    * Assemble a pipeline descriptor.
    *
@@ -58866,17 +59706,33 @@ var WebGPUPipelineCache = class _WebGPUPipelineCache {
    * silently builds a second one under a key nothing will hit again.
    * @param {string} key - the cache key, used as the label
    * @param {string} shaderKey - the module family
-   * @param {string} blend - normalized blend mode
-   * @param {boolean} pma - premultiplied alpha
-   * @param {object} stencil - the resolved stencil state
-   * @param {object} primitive - the resolved primitive state
-   * @param {object} opts - `{vertexLayout, meshState, fogFlag}`
+   * @param {string} topology - portable topology name
+   * @param {string} blendMode - blend mode (normalized here)
+   * @param {boolean} premultipliedAlpha - source premultiplication flag
+   * @param {string} stencilMode - stencil mode
+   * @param {object|undefined} meshState - mesh pass state
+   * @param {string} format - colour target format
+   * @param {number} sampleCount - pass sample count
    * @returns {GPURenderPipelineDescriptor} the descriptor
    * @ignore
    * @internal
    */
-  _descriptor(key, shaderKey, blend, pma, stencil, primitive, opts) {
-    const { vertexLayout, meshState, fogFlag } = opts;
+  _descriptor(key, shaderKey, topology, blendMode, premultipliedAlpha, stencilMode, meshState, format, sampleCount) {
+    const blend = normalizeBlendMode(blendMode);
+    const pma = premultipliedAlpha !== false;
+    const stencil = STENCIL_STATES[stencilMode] ?? STENCIL_STATES.none;
+    const vertexLayout = this.vertexLayouts.get(
+      this.vertexLayoutAliases.get(shaderKey) ?? shaderKey
+    );
+    const primitive = {
+      topology,
+      stripIndexFormat: topology.endsWith("-strip") ? "uint32" : void 0
+    };
+    if (meshState) {
+      primitive.cullMode = meshState.cullMode;
+      primitive.frontFace = meshState.frontFace;
+    }
+    const fogFlag = meshState?.fog === true ? 1 : 0;
     return {
       label: `melonJS ${key}`,
       layout: this.pipelineLayouts[shaderKey],
@@ -58892,7 +59748,7 @@ var WebGPUPipelineCache = class _WebGPUPipelineCache {
         ...meshState ? { constants: { enable_fog: fogFlag } } : {},
         targets: [
           {
-            format: this.format,
+            format,
             blend: shaderKey === "clear" ? void 0 : gpuBlendState(blend, pma),
             writeMask: stencil.colorWriteMask
           }
@@ -58915,7 +59771,7 @@ var WebGPUPipelineCache = class _WebGPUPipelineCache {
         stencilReadMask: stencil.readMask,
         stencilWriteMask: stencil.writeMask
       },
-      multisample: { count: this.sampleCount }
+      multisample: { count: sampleCount }
     };
   }
   /**
@@ -58924,6 +59780,17 @@ var WebGPUPipelineCache = class _WebGPUPipelineCache {
    */
   clear() {
     this.pipelines.clear();
+    this.generation++;
+    for (const job of this.warmQueue.splice(0)) {
+      job.resolve(void 0);
+    }
+    this.pending.clear();
+    this.touchQueue.clear();
+    for (const scratch of this.scratchTargets.values()) {
+      scratch.color.destroy?.();
+      scratch.depth.destroy?.();
+    }
+    this.scratchTargets.clear();
   }
 };
 
@@ -59049,7 +59916,13 @@ var WebGPUQuadBatcher = class extends WebGPUBatcher {
         Math.min(u0, u1),
         Math.min(v0, v1)
       );
-      this.pushQuadVertices(x, y, w, h, u0, v0, u1, v1, tint, 0);
+      const scale2 = effect._vertexScale;
+      if (scale2 !== void 0 && (scale2.x !== 1 || scale2.y !== 1)) {
+        const q = scaleQuad(x, y, w, h, scale2.x, scale2.y);
+        this.pushQuadVertices(q[0], q[1], q[2], q[3], u0, v0, u1, v1, tint, 0);
+      } else {
+        this.pushQuadVertices(x, y, w, h, u0, v0, u1, v1, tint, 0);
+      }
       this.flush();
       return;
     }
@@ -60708,7 +61581,11 @@ function uploadCompressedTexture(device, texture, image, metrics) {
         bytesPerRow: blocksPerRow * metrics.bytes,
         rowsPerImage: rows
       },
-      [mip.width, mip.height]
+      // whole blocks: a level smaller than one block (the 2×2 and 1×1
+      // tail of a 4×4-block chain) is stored padded to a full block,
+      // and a copy of its logical size fails validation, leaving the
+      // level empty
+      [blocksPerRow * metrics.blockW, rows * metrics.blockH]
     );
   }
 }
@@ -60978,6 +61855,71 @@ var WebGPUTextureStore = class extends TextureStore {
     this.lastRecord = record;
     return this.bindGroupFor(record, texture, wrap, options.mipmaps === true);
   }
+  /**
+   * Build the mip-chain blitter, once. Split out of
+   * {@link WebGPUTextureStore#generateMipmaps} so the warm-up can build it
+   * before the first mipmapped texture is uploaded, which is otherwise in
+   * the middle of the frame that first draws a mesh.
+   * @ignore
+   * @internal
+   */
+  ensureMipPipeline() {
+    if (typeof this.mipPipeline !== "undefined") {
+      return;
+    }
+    const device = this.device;
+    const module = device.createShaderModule({
+      label: "melonJS mip blit",
+      code: mipblit_default
+    });
+    this.mipLayout = device.createBindGroupLayout({
+      label: "melonJS mip blit layout",
+      entries: [
+        { binding: 0, visibility: GPUShaderStage.FRAGMENT, texture: {} },
+        { binding: 1, visibility: GPUShaderStage.FRAGMENT, sampler: {} }
+      ]
+    });
+    this.mipPipeline = device.createRenderPipeline({
+      label: "melonJS mip blit",
+      layout: device.createPipelineLayout({
+        bindGroupLayouts: [this.mipLayout]
+      }),
+      vertex: { module, entryPoint: "vertex_main" },
+      fragment: {
+        module,
+        entryPoint: "fragment_main",
+        targets: [{ format: "rgba8unorm" }]
+      },
+      primitive: { topology: "triangle-list" }
+    });
+    this.mipSampler = device.createSampler({
+      label: "melonJS mip blit sampler",
+      magFilter: "linear",
+      minFilter: "linear"
+    });
+  }
+  /**
+   * Build the mip-chain blitter and run it once, on a throwaway 2×2
+   * texture, so its native compile has happened before the first real
+   * texture needs it. Creating a pipeline is not enough on every
+   * implementation: some defer the compile to first use, so this uses it.
+   * @ignore
+   * @internal
+   */
+  warmMipmaps() {
+    if (typeof this.mipPipeline !== "undefined") {
+      return;
+    }
+    const texture = this.device.createTexture({
+      label: "melonJS mip warm-up",
+      size: [2, 2],
+      format: "rgba8unorm",
+      mipLevelCount: 2,
+      usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.RENDER_ATTACHMENT
+    });
+    this.generateMipmaps({ texture, mipLevelCount: 2 });
+    texture.destroy();
+  }
   /**
    * Build the full mip chain of a freshly-uploaded record: one blit pass
    * per level, each rendering the previous level with linear filtering.
@@ -60990,37 +61932,7 @@ var WebGPUTextureStore = class extends TextureStore {
    */
   generateMipmaps(record) {
     const device = this.device;
-    if (typeof this.mipPipeline === "undefined") {
-      const module = device.createShaderModule({
-        label: "melonJS mip blit",
-        code: mipblit_default
-      });
-      this.mipLayout = device.createBindGroupLayout({
-        label: "melonJS mip blit layout",
-        entries: [
-          { binding: 0, visibility: GPUShaderStage.FRAGMENT, texture: {} },
-          { binding: 1, visibility: GPUShaderStage.FRAGMENT, sampler: {} }
-        ]
-      });
-      this.mipPipeline = device.createRenderPipeline({
-        label: "melonJS mip blit",
-        layout: device.createPipelineLayout({
-          bindGroupLayouts: [this.mipLayout]
-        }),
-        vertex: { module, entryPoint: "vertex_main" },
-        fragment: {
-          module,
-          entryPoint: "fragment_main",
-          targets: [{ format: "rgba8unorm" }]
-        },
-        primitive: { topology: "triangle-list" }
-      });
-      this.mipSampler = device.createSampler({
-        label: "melonJS mip blit sampler",
-        magFilter: "linear",
-        minFilter: "linear"
-      });
-    }
+    this.ensureMipPipeline();
     const encoder = device.createCommandEncoder({ label: "melonJS mipgen" });
     for (let level2 = 1; level2 < record.mipLevelCount; level2++) {
       const bindGroup = device.createBindGroup({
@@ -61541,6 +62453,7 @@ var WebGPURenderer = class _WebGPURenderer extends Renderer {
     this.uniformRing.reset();
     this.effectUniformArena.reset();
     this.frameId++;
+    this.pipelineCache.inFrame = true;
     this.currentRenderTarget = null;
     this.pendingColorClear = false;
     this.effectPassDepth = 0;
@@ -61935,6 +62848,361 @@ var WebGPURenderer = class _WebGPURenderer extends Renderer {
     );
     return frame;
   }
+  /**
+   * The post-effect render-target pool, created on first use.
+   * @returns {RenderTargetPool} the pool
+   * @ignore
+   * @internal
+   */
+  _postEffectPool() {
+    this._renderTargetPool ??= new RenderTargetPool(
+      (w, h, isCapture, index) => {
+        return new WebGPURenderTarget(this, w, h, {
+          sampleCount: isCapture === true ? this.canvasSampleCount : 1,
+          format: index < 2 ? this._colorFormat : this.preferredFormat
+        });
+      }
+    );
+    return this._renderTargetPool;
+  }
+  /**
+   * The pipeline-cache family of an effect's WGSL realization, building its
+   * module and layouts first if this device has not seen it yet.
+   * @param {ShaderEffect} effect - an effect with a valid WGSL realization
+   * @returns {string} the family key
+   * @ignore
+   * @internal
+   */
+  _effectFamily(effect) {
+    const realization = effect.wgslRealization;
+    if (realization.gpu === null || realization.gpu.epoch !== this.pipelineCache.epoch) {
+      buildEffectGPU(this, effect, realization);
+    }
+    return realization.gpu.key;
+  }
+  /**
+   * Build, off the frame, every pipeline a renderable's post effects can
+   * draw with, and the render targets its chain will composite through.
+   *
+   * Which pipeline an effect draws with depends on where it sits: an
+   * effect alone on a sprite draws the sprite itself (blended with the
+   * sprite's own mode), one alone on a mesh is spliced into the mesh
+   * shader, and one in a chain is a full-screen blit into either the next
+   * offscreen target or the one below. Its colour format depends on that
+   * target too, and under `hdr` the camera's targets are half-float while
+   * the canvas is not. So this warms every position the effect can reach
+   * with the effects ATTACHED, enabled or not, since turning one on moves
+   * the others: enabling a camera's second effect sends its first one
+   * from the canvas into the ping-pong target, a different pipeline.
+   *
+   * Each key is composed by the same function the draw uses, from the
+   * renderable's own state (blend mode, culling, transparency, fog), so
+   * what is built here is what the draw will ask for.
+   * @param {Renderable} renderable - the renderable to warm for
+   * @override
+   * @ignore
+   * @internal
+   */
+  _warmPostEffects(renderable) {
+    if (!this._canWarm()) {
+      return;
+    }
+    const cache3 = this.pipelineCache;
+    const effects = renderable.postEffects.filter((fx) => {
+      return fx?.wgslRealization?.valid === true;
+    });
+    const count = effects.length;
+    if (count === 0) {
+      return;
+    }
+    const isCamera = renderable._postEffectManaged === true;
+    const needsCapture = renderable.postEffectNeedsCapture === true;
+    const pooled = isCamera || count > 1 || needsCapture;
+    const canvas = [this.canvasFormat, this.canvasSampleCount];
+    const scene = this._sceneTargets();
+    const blit = (family, blendMode2, [format, sampleCount]) => {
+      void cache3.warm(
+        family,
+        "triangle-list",
+        blendMode2,
+        true,
+        "none",
+        void 0,
+        format,
+        sampleCount
+      );
+    };
+    if (pooled) {
+      const pool2 = this._postEffectPool();
+      const { width, height } = this.getCanvas();
+      pool2.reserve(
+        isCamera,
+        this._postEffectCapacity(renderable, effects),
+        width,
+        height
+      );
+    }
+    if (isCamera) {
+      for (const fx of effects) {
+        const family = this._effectFamily(fx);
+        blit(family, "none", [this._colorFormat, 1]);
+        blit(family, "none", canvas);
+      }
+      this._warmToneMap();
+      return;
+    }
+    const blendMode = renderable.blendMode ?? "normal";
+    const meshHost = this._hostsMeshEffect(renderable);
+    for (let i = 0; i < count; i++) {
+      const fx = effects[i];
+      const family = this._effectFamily(fx);
+      if (!needsCapture) {
+        if (meshHost) {
+          this._warmHostedEffect(renderable, fx, scene);
+        } else {
+          for (const target of scene) {
+            blit(family, blendMode, target);
+          }
+        }
+      }
+      if (pooled) {
+        for (const target of scene) {
+          blit(family, blendMode, target);
+        }
+        if (i < count - 1) {
+          blit(family, "none", [this.preferredFormat, 1]);
+        }
+      }
+    }
+    if (pooled && !meshHost) {
+      blit("quad", blendMode, [this.preferredFormat, this.canvasSampleCount]);
+    }
+  }
+  /**
+   * The `[format, sampleCount]` targets an ordinary renderable can be drawn
+   * into: the canvas, or the camera's capture target when the camera runs
+   * an effect chain of its own. The two differ only in format, and only
+   * under `hdr`, so this is usually one target.
+   * @returns {Array<Array<string|number>>} the targets
+   * @ignore
+   * @internal
+   */
+  _sceneTargets() {
+    const canvas = [this.canvasFormat, this.canvasSampleCount];
+    return this._colorFormat === this.canvasFormat ? [canvas] : [canvas, [this._colorFormat, this.canvasSampleCount]];
+  }
+  /**
+   * Whether the warm-ups can run: a live device and a pipeline cache.
+   * @returns {boolean} true when ready
+   * @ignore
+   * @internal
+   */
+  _canWarm() {
+    return this.pipelineCache != null && typeof this.device !== "undefined" && this.isContextValid !== false;
+  }
+  /**
+   * The mesh batcher a mesh draws through.
+   * @param {object} mesh - the mesh
+   * @returns {object|undefined} the batcher
+   * @ignore
+   * @internal
+   */
+  _meshBatcherFor(mesh) {
+    return this.batchers.get(
+      mesh.lit === true && this.batchers.has("litMesh") ? "litMesh" : "mesh"
+    );
+  }
+  /**
+   * Warm the pipelines a mesh will draw with when it hosts an effect: the
+   * effect spliced into the mesh shader.
+   * @param {object} mesh - the hosting mesh
+   * @param {ShaderEffect} effect - the effect it hosts
+   * @param {Array<Array<string|number>>} scene - the targets it can land on
+   * @ignore
+   * @internal
+   */
+  _warmHostedEffect(mesh, effect, scene) {
+    const realization = effect.wgslRealization;
+    if (meshHostingBlocker(realization.builtins, realization.textures, "wgsl") !== null) {
+      return;
+    }
+    const batcher = this._meshBatcherFor(mesh);
+    if (batcher === void 0 || realization.meshModule(batcher.shaderSource?.() ?? "") === null) {
+      return;
+    }
+    const previous = batcher.hostedEffect;
+    let family;
+    batcher.hostedEffect = effect;
+    try {
+      family = batcher.activeShaderKey();
+    } finally {
+      batcher.hostedEffect = previous;
+    }
+    this._warmMeshDraw(mesh, family, scene);
+  }
+  /**
+   * Warm the pipelines one mesh draw resolves to, keyed on the mesh's own
+   * culling, depth test and transparency exactly as `drawMesh` keys them:
+   * the opaque pass, the transparent pass, or both when `transparent` is
+   * left unset (blended whenever the mesh is faded).
+   * @param {object} mesh - the mesh
+   * @param {string} family - the pipeline family it draws with
+   * @param {Array<Array<string|number>>} scene - the targets it can land on
+   * @ignore
+   * @internal
+   */
+  _warmMeshDraw(mesh, family, scene) {
+    const culling = mesh.cullBackFaces === true;
+    const state4 = {
+      cullMode: culling ? "back" : "none",
+      // the retained path's winding rule, see `drawMesh`
+      frontFace: culling && this.supportsRetainedMesh === true && mesh.rightHanded !== true ? "cw" : "ccw",
+      depthWrite: void 0,
+      depthTest: mesh.depthTest === false ? false : void 0,
+      fog: this._fog3d != null ? true : void 0
+    };
+    const blendedOnly = mesh.transparent === true || mesh._blendedDraw === true;
+    const blended = mesh.transparent !== false || mesh._blendedDraw === true;
+    for (const [format, sampleCount] of scene) {
+      if (!blendedOnly) {
+        void this.pipelineCache.warm(
+          family,
+          "triangle-list",
+          "none",
+          true,
+          "none",
+          state4,
+          format,
+          sampleCount
+        );
+      }
+      if (blended) {
+        void this.pipelineCache.warm(
+          family,
+          "triangle-list",
+          mesh._blendedDraw === true ? "normal" : mesh.blendMode,
+          true,
+          "none",
+          { ...state4, depthWrite: false },
+          format,
+          sampleCount
+        );
+      }
+    }
+  }
+  /**
+   * Warm the renderable's own draw: a mesh through its mesh family, and
+   * everything else that draws a texture through the quad family, each with
+   * the renderable's blend mode. Containers draw nothing of their own, and
+   * a camera is a chain, warmed with its effects.
+   * @param {Renderable} renderable - the renderable to warm for
+   * @override
+   * @ignore
+   * @internal
+   */
+  _warmDraw(renderable) {
+    if (!this._canWarm() || renderable._postEffectManaged === true || Array.isArray(renderable.children)) {
+      return;
+    }
+    const scene = this._sceneTargets();
+    if (this._hostsMeshEffect(renderable)) {
+      const batcher = this._meshBatcherFor(renderable);
+      if (batcher?.shaderKey !== void 0) {
+        this._warmMeshDraw(renderable, batcher.shaderKey, scene);
+      }
+      return;
+    }
+    if (renderable.instanceLayout !== void 0) {
+      return;
+    }
+    const blendMode = renderable.blendMode ?? "normal";
+    for (const [format, sampleCount] of scene) {
+      void this.pipelineCache.warm(
+        "quad",
+        "triangle-list",
+        blendMode,
+        true,
+        "none",
+        void 0,
+        format,
+        sampleCount
+      );
+    }
+  }
+  /**
+   * Build the advanced blend shader and its offscreen target before the
+   * first draw in one of those modes, and warm the two pipelines a bracket
+   * uses: the draw itself into the 8-bit offscreen, and the composite back
+   * onto the scene.
+   * @override
+   * @ignore
+   * @internal
+   */
+  _warmAdvancedBlend() {
+    if (!this._canWarm()) {
+      return;
+    }
+    if (typeof this._advancedBlendEffect === "undefined") {
+      this._advancedBlendEffect = new BlendEffect(this);
+    }
+    const effect = this._advancedBlendEffect;
+    if (effect.enabled !== true || effect.wgslRealization?.valid !== true) {
+      return;
+    }
+    const { width, height } = this.getCanvas();
+    if (typeof this._advancedBlendTarget === "undefined") {
+      this._advancedBlendTarget = new WebGPURenderTarget(this, width, height, {
+        sampleCount: 1,
+        format: this.preferredFormat
+      });
+    }
+    void this.pipelineCache.warm(
+      "quad",
+      "triangle-list",
+      "normal",
+      true,
+      "none",
+      void 0,
+      this.preferredFormat,
+      1
+    );
+    const family = this._effectFamily(effect);
+    for (const [format, sampleCount] of this._sceneTargets()) {
+      void this.pipelineCache.warm(
+        family,
+        "triangle-list",
+        "normal",
+        true,
+        "none",
+        void 0,
+        format,
+        sampleCount
+      );
+    }
+  }
+  /**
+   * Warm the tone curve's pipeline: always the last step of a camera chain,
+   * so a full-screen blit onto the canvas with blending off.
+   * @override
+   * @ignore
+   * @internal
+   */
+  _warmToneMap() {
+    const toneMap = this._toneMapEffect;
+    if (this.settings?.prewarm !== true || toneMap?.wgslRealization?.valid !== true || !this._canWarm()) {
+      return;
+    }
+    void this.pipelineCache.warm(
+      this._effectFamily(toneMap),
+      "triangle-list",
+      "none",
+      true,
+      "none",
+      void 0,
+      this.canvasFormat,
+      this.canvasSampleCount
+    );
+  }
   /**
    * Begin a post-effect pass for the given renderable — the WebGPU
    * realization of the WebGL FBO path: the renderable's whole content
@@ -61967,17 +63235,9 @@ var WebGPURenderer = class _WebGPURenderer extends Renderer {
     }
     savedProjection.copy(this.projectionMatrix);
     this.effectPassDepth++;
-    this._renderTargetPool ??= new RenderTargetPool(
-      (w, h, isCapture, index) => {
-        return new WebGPURenderTarget(this, w, h, {
-          sampleCount: isCapture === true ? this.canvasSampleCount : 1,
-          format: index < 2 ? this._colorFormat : this.preferredFormat
-        });
-      }
-    );
-    const rt = this._renderTargetPool.begin(
+    const rt = this._postEffectPool().begin(
       isCamera,
-      effects.length,
+      this._postEffectCapacity(renderable, effects),
       canvas.width,
       canvas.height
     );
@@ -62222,23 +63482,24 @@ var WebGPURenderer = class _WebGPURenderer extends Renderer {
    * WebGPU splits what WebGL fuses into one program. The **modules** for
    * the engine's own families — quad, blit, primitive, clear, and the mesh
    * tiers — are already created when the pipeline cache and the batchers
-   * are constructed, so there is nothing lazy there to warm. A **pipeline**
-   * is lazy, but it is keyed by draw state (blend, cull, depth-write) as
-   * well as by shader, so the set a scene will ask for cannot be known from
-   * here — and creating one costs almost nothing anyway, because WebGPU
-   * records the intent and leaves the work to first use.
-   *
-   * What IS both lazy and knowable is a `ShaderEffect`'s module:
-   * `prepareEffectBinding` builds it, and it is only ever called from
-   * inside the draw path. Every effect the loader compiled from a
-   * `{type: "shader"}` asset is already in `shaderList`, so those are
-   * exactly the ones that can be brought forward — which is what makes
-   * declaring a level's effects alongside that level's assets worth doing.
-   *
-   * Effects constructed inline when a stage builds are not here yet and
-   * cannot be warmed; that is a property of when they come into existence,
-   * not a limitation of this method.
-   * @returns {Promise<void>} settles once those modules are built
+   * are constructed. A **pipeline** is where the real compile happens, and
+   * it is the expensive part: tens of milliseconds each, paid in the frame
+   * that first draws with it. But it is keyed by draw state (blend, cull,
+   * depth write) and by the format of the target being drawn into, as well
+   * as by shader, so the set a scene will ask for cannot be known from
+   * here. Those are warmed when an effect is attached to a renderable
+   * ({@link Renderable#addPostEffect}), which is the first moment the
+   * renderable that decides them is known.
+   *
+   * What this does warm is what needs no renderable. A `ShaderEffect`'s
+   * module: `prepareEffectBinding` builds it, and only ever from inside the
+   * draw path. Every effect the loader compiled from a `{type: "shader"}`
+   * asset is already in `shaderList`, so those can be brought forward —
+   * which is what makes declaring a level's effects alongside that level's
+   * assets worth doing. And the mip-chain blitter every mipmapped texture
+   * goes through on upload, when textures are filtered (`textureFilter`
+   * resolving to `"linear"`; nearest filtering never builds a chain).
+   * @returns {Promise<void>} settles once those are built
    * @see {@link Renderer#prewarm}
    */
   prewarm() {
@@ -62252,6 +63513,23 @@ var WebGPURenderer = class _WebGPURenderer extends Renderer {
           buildEffectGPU(this, effect, realization);
         }
       }
+      if (this.getDefaultTextureFilter() === "linear") {
+        this.textureStore.warmMipmaps();
+      }
+      if (this._canWarm()) {
+        for (const [format, sampleCount] of this._sceneTargets()) {
+          void this.pipelineCache.warm(
+            "clear",
+            "triangle-list",
+            "none",
+            true,
+            "none",
+            void 0,
+            format,
+            sampleCount
+          );
+        }
+      }
     });
   }
   /**
@@ -62273,6 +63551,9 @@ var WebGPURenderer = class _WebGPURenderer extends Renderer {
       this.frameTextureView = null;
       this.frameTexture = null;
     }
+    if (this.pipelineCache != null) {
+      this.pipelineCache.inFrame = false;
+    }
     this.destroyRetiredTextures();
   }
   /**
@@ -62292,6 +63573,9 @@ var WebGPURenderer = class _WebGPURenderer extends Renderer {
     }
     this.frameTextureView = null;
     this.frameTexture = null;
+    if (this.pipelineCache != null) {
+      this.pipelineCache.inFrame = false;
+    }
     this.currentRenderTarget = null;
     this.pendingColorClear = false;
     this.pendingDepthClear = false;
@@ -64050,6 +65334,10 @@ var WebGPURenderer = class _WebGPURenderer extends Renderer {
       batcher.init(this);
     }
     emit(ONCONTEXT_RESTORED, this);
+    if (this.settings.prewarm === true) {
+      this.prewarm().catch(() => {
+      });
+    }
   }
   /**
    * Returns the WebGPU canvas context
@@ -69963,8 +71251,110 @@ var ShineEffect = class extends ShaderEffect {
   }
 };
 
-// src/video/effects/tintPulse.js
+// src/video/effects/squish.js
 var wgslFragment15 = `
+struct SquishUniforms {
+	uSquishFrame : vec4f,
+	uSquishXFactor : f32,
+	uSquishBulge : f32,
+};
+@group(3) @binding(0) var<uniform> fx : SquishUniforms;
+
+fn apply(color : vec4f, uv : vec2f) -> vec4f {
+	// -1..1 across the quad: the sprite's frame, stretched by the vertex scale
+	var p = (uv - fx.uSquishFrame.xy) / fx.uSquishFrame.zw * 2.0 - 1.0;
+	// undo the stretch: the sprite keeps its width, in the middle of the
+	// wider quad, with room on both sides
+	p.x = p.x * fx.uSquishXFactor;
+	// each row widens by its share of the bulge: all of it across the
+	// middle, none at the top and bottom
+	p.x = p.x / max(1.0 + fx.uSquishBulge * sqrt(max(1.0 - p.y * p.y, 0.0)), 0.0001);
+	let local = (p + 1.0) * 0.5;
+	// sampled before the test, since textureSample needs uniform control flow
+	let texel = textureSample(uTexture, uSampler, fx.uSquishFrame.xy + clamp(local, vec2f(0.0), vec2f(1.0)) * fx.uSquishFrame.zw) * vColor;
+	let inside = all(local >= vec2f(0.0)) && all(local <= vec2f(1.0));
+	return select(vec4f(0.0), texel, inside);
+}
+`;
+var SquishEffect = class _SquishEffect extends ShaderEffect {
+  /**
+   * @param {Renderer} renderer - the current renderer instance
+   * @param {object} [options] - effect options
+   * @param {number} [options.bulge=0] - how far the middle bulges out (positive) or pinches in (negative), from -1 to 1
+   */
+  constructor(renderer, options = {}) {
+    super(renderer, {
+      glsl: `
+			uniform vec4 uSquishFrame;
+			uniform float uSquishXFactor;
+			uniform float uSquishBulge;
+			vec4 apply(vec4 color, vec2 uv) {
+				// -1..1 across the quad: the sprite's frame, stretched by the vertex scale
+				vec2 p = (uv - uSquishFrame.xy) / uSquishFrame.zw * 2.0 - 1.0;
+				// undo the stretch: the sprite keeps its width, in the middle
+				// of the wider quad, with room on both sides
+				p.x *= uSquishXFactor;
+				// each row widens by its share of the bulge: all of it across
+				// the middle, none at the top and bottom
+				p.x /= max(1.0 + uSquishBulge * sqrt(max(1.0 - p.y * p.y, 0.0)), 0.0001);
+				vec2 local = (p + 1.0) * 0.5;
+				// transparent past the sprite: the room around it, or the
+				// indent of a pinch
+				if (local.x < 0.0 || local.x > 1.0 || local.y < 0.0 || local.y > 1.0) {
+					return vec4(0.0);
+				}
+				return texture2D(uSampler, uSquishFrame.xy + local * uSquishFrame.zw) * vColor;
+			}
+			`,
+      wgsl: wgslFragment15
+    });
+    this._bulge = 0;
+    this._frame = new Float32Array([0, 0, 1, 1]);
+    this.setUniform("uSquishFrame", this._frame);
+    this.setBulge(options.bulge ?? 0);
+  }
+  /**
+   * set how far the middle of the sprite bulges out, or pinches in
+   * @param {number} bulge - from -1 to 1: positive bulges out, up to twice the width across the middle; negative pinches in, down to nothing at -1; 0 leaves the sprite as it is
+   */
+  setBulge(bulge) {
+    const value = Math.min(Math.max(bulge, -1), 1);
+    this._bulge = value;
+    const xFactor = 1 + Math.max(value, 0);
+    this._vertexScale.x = xFactor;
+    this.setUniform("uSquishXFactor", xFactor);
+    this.setUniform("uSquishBulge", value);
+  }
+  /**
+   * The batchers hand every effect the frame it draws through here (it is
+   * what `noise_uv` runs across), and the bulge is measured against the
+   * same frame: where the sprite sits in its atlas, in UV units. A render
+   * target blit hands over the whole target.
+   * @ignore
+   * @internal
+   */
+  _setNoiseUVRect(sourceWidth, sourceHeight, objectWidth, objectHeight, u0, v0) {
+    const frame = this._frame;
+    frame[0] = u0;
+    frame[1] = v0;
+    frame[2] = Math.max(Math.abs(objectWidth), 1) / Math.max(sourceWidth, 1);
+    frame[3] = Math.max(Math.abs(objectHeight), 1) / Math.max(sourceHeight, 1);
+    this.setUniform("uSquishFrame", frame);
+  }
+  /**
+   * Create an independent copy of this effect, with the same bulge.
+   * @returns {SquishEffect} a new effect
+   */
+  clone() {
+    if (this.destroyed) {
+      throw new Error("SquishEffect.clone: effect has been destroyed");
+    }
+    return new _SquishEffect(this._renderer, { bulge: this._bulge });
+  }
+};
+
+// src/video/effects/tintPulse.js
+var wgslFragment16 = `
 struct TintPulseUniforms {
 	uPulseColor : vec3f,
 	uPulseSpeed : f32,
@@ -69998,7 +71388,7 @@ var TintPulseEffect = class extends ShaderEffect {
 				return vec4(mix(color.rgb, uPulseColor * color.a, pulse), color.a);
 			}
 			`,
-      wgsl: wgslFragment15
+      wgsl: wgslFragment16
     });
     const color = options.color ?? [1, 0, 0];
     this.setUniform("uPulseColor", new Float32Array(color));
@@ -70025,7 +71415,7 @@ var fragment = `
 				return vec4(color.rgb * v, color.a);
 			}
 			`;
-var wgslFragment16 = `
+var wgslFragment17 = `
 struct VignetteUniforms {
 	uStrength : f32,
 	uSize : f32,
@@ -70046,7 +71436,7 @@ var VignetteEffect = class extends ShaderEffect {
    * @param {number} [options.size=25.0] - vignette spread multiplier (higher = smaller dark area)
    */
   constructor(renderer, options = {}) {
-    super(renderer, { glsl: fragment, wgsl: wgslFragment16 });
+    super(renderer, { glsl: fragment, wgsl: wgslFragment17 });
     this.strength = options.strength ?? 0.15;
     this.size = options.size ?? 25;
     this.setUniform("uStrength", this.strength);
@@ -70071,7 +71461,7 @@ var VignetteEffect = class extends ShaderEffect {
 };
 
 // src/video/effects/wave.js
-var wgslFragment17 = `
+var wgslFragment18 = `
 struct WaveUniforms {
 	uAmplitude : f32,
 	uFrequency : f32,
@@ -70107,7 +71497,7 @@ var WaveEffect = class extends ShaderEffect {
 				return texture2D(uSampler, distorted) * vColor;
 			}
 			`,
-      wgsl: wgslFragment17
+      wgsl: wgslFragment18
     });
     this.setUniform("uAmplitude", options.amplitude ?? 0.01);
     this.setUniform("uFrequency", options.frequency ?? 10);
@@ -71704,6 +73094,7 @@ export {
   Sphere,
   Sprite,
   Sprite3d,
+  SquishEffect,
   Stage,
   TMXHexagonalRenderer,
   TMXIsometricRenderer,