@supersoniks/concorde 4.9.98-visual-stack.0 → 4.9.98-visual-stack.2

package/src/core/components/functional/shader/gl-runtime.ts

@@ -7,9 +7,11 @@ import {
   ChannelSource,
   PassChannels,
   ReadRectResult,
+  ShaderBufferFormat,
   ShaderCompileError,
   ShaderPassId,
   ShaderSources,
+  parseBufferFormat,
 } from "./types";
 
 const PASS_ORDER: ShaderPassId[] = [
@@ -235,27 +237,110 @@ function getUniforms(
   };
 }
 
+type BufferGlFormat = {
+  requested: ShaderBufferFormat;
+  active: ShaderBufferFormat;
+  internal: number;
+  format: number;
+  type: number;
+  filter: number;
+  float: boolean;
+};
+
+let warnedFloatFallback = false;
+
+/**
+ * Résout le format GPU des buffers A–D.
+ * Exporté pour tests (mock `getExtension`).
+ */
+export function resolveBufferGlFormat(
+  gl: WebGL2RenderingContext,
+  requested: ShaderBufferFormat,
+): BufferGlFormat {
+  const want = parseBufferFormat(requested);
+  if (want === "rgba8") {
+    return {
+      requested: want,
+      active: "rgba8",
+      internal: gl.RGBA8,
+      format: gl.RGBA,
+      type: gl.UNSIGNED_BYTE,
+      filter: gl.LINEAR,
+      float: false,
+    };
+  }
+  const ext = gl.getExtension("EXT_color_buffer_float");
+  if (!ext) {
+    if (!warnedFloatFallback) {
+      warnedFloatFallback = true;
+      console.warn(
+        `[sonic-shader] buffer-format="${want}" indisponible (pas d'EXT_color_buffer_float) → rgba8`,
+      );
+    }
+    return resolveBufferGlFormat(gl, "rgba8");
+  }
+  if (want === "rgba16f") {
+    return {
+      requested: want,
+      active: "rgba16f",
+      internal: gl.RGBA16F,
+      format: gl.RGBA,
+      type: gl.HALF_FLOAT,
+      filter: gl.LINEAR,
+      float: true,
+    };
+  }
+  // rgba32f
+  const linearOk = !!gl.getExtension("OES_texture_float_linear");
+  return {
+    requested: want,
+    active: "rgba32f",
+    internal: gl.RGBA32F,
+    format: gl.RGBA,
+    type: gl.FLOAT,
+    filter: linearOk ? gl.LINEAR : gl.NEAREST,
+    float: true,
+  };
+}
+
+/** Reset du warn unique (tests). */
+export function resetBufferFormatWarnFlag() {
+  warnedFloatFallback = false;
+}
+
 function createEmptyTexture(
   gl: WebGL2RenderingContext,
   width: number,
   height: number,
+  fmt?: BufferGlFormat,
 ): WebGLTexture {
+  const f =
+    fmt ??
+    ({
+      requested: "rgba8",
+      active: "rgba8",
+      internal: gl.RGBA8,
+      format: gl.RGBA,
+      type: gl.UNSIGNED_BYTE,
+      filter: gl.LINEAR,
+      float: false,
+    } satisfies BufferGlFormat);
   const tex = gl.createTexture();
   if (!tex) throw new Error("Unable to create texture");
   gl.bindTexture(gl.TEXTURE_2D, tex);
-  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_MIN_FILTER, f.filter);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, f.filter);
   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);
   gl.texImage2D(
     gl.TEXTURE_2D,
     0,
-    gl.RGBA8,
+    f.internal,
     width,
     height,
     0,
-    gl.RGBA,
-    gl.UNSIGNED_BYTE,
+    f.format,
+    f.type,
     null,
   );
   return tex;
@@ -287,10 +372,11 @@ function createPingPong(
   gl: WebGL2RenderingContext,
   width: number,
   height: number,
+  fmt: BufferGlFormat,
 ): PingPong {
   const textures: [WebGLTexture, WebGLTexture] = [
-    createEmptyTexture(gl, width, height),
-    createEmptyTexture(gl, width, height),
+    createEmptyTexture(gl, width, height, fmt),
+    createEmptyTexture(gl, width, height, fmt),
   ];
   const framebuffers: [WebGLFramebuffer, WebGLFramebuffer] = [
     createFramebuffer(gl, textures[0]),
@@ -349,6 +435,7 @@ export class ShaderToyRuntime {
   private activePasses: ShaderPassId[] = [];
   private blackTexture: WebGLTexture | null = null;
   private elementResolver: ((key: string) => Element | null) | null = null;
+  private bufferFmt: BufferGlFormat;
 
   constructor(canvas: HTMLCanvasElement) {
     const gl = canvas.getContext("webgl2", {
@@ -364,6 +451,7 @@ export class ShaderToyRuntime {
     }
     this.canvas = canvas;
     this.gl = gl;
+    this.bufferFmt = resolveBufferGlFormat(gl, "rgba8");
     this.initGeometry();
     this.blackTexture = createEmptyTexture(gl, 1, 1);
     gl.bindTexture(gl.TEXTURE_2D, this.blackTexture);
@@ -380,6 +468,42 @@ export class ShaderToyRuntime {
     );
   }
 
+  /** Format réellement utilisé pour les buffers A–D (après repli éventuel). */
+  get activeBufferFormat(): ShaderBufferFormat {
+    return this.bufferFmt.active;
+  }
+
+  /**
+   * Change le format des buffers A–D. Recrée les FBO si la taille est déjà connue.
+   * Retourne le format actif (peut différer si extension manquante).
+   */
+  setBufferFormat(requested: ShaderBufferFormat): ShaderBufferFormat {
+    const next = resolveBufferGlFormat(this.gl, requested);
+    if (
+      next.active === this.bufferFmt.active &&
+      next.filter === this.bufferFmt.filter
+    ) {
+      this.bufferFmt = next;
+      return next.active;
+    }
+    this.bufferFmt = next;
+    if (this.width >= 1 && this.height >= 1) {
+      for (const id of BUFFER_PASSES) {
+        const existing = this.buffers.get(id);
+        if (existing) destroyPingPong(this.gl, existing);
+        if (this.programs.has(id)) {
+          this.buffers.set(
+            id,
+            createPingPong(this.gl, this.width, this.height, this.bufferFmt),
+          );
+        } else {
+          this.buffers.delete(id);
+        }
+      }
+    }
+    return next.active;
+  }
+
   /** True si le contexte a été perdu / déjà disposé. */
   get isLost(): boolean {
     return this.gl.isContextLost();
@@ -416,7 +540,10 @@ export class ShaderToyRuntime {
       const existing = this.buffers.get(id);
       if (existing) destroyPingPong(this.gl, existing);
       if (this.programs.has(id)) {
-        this.buffers.set(id, createPingPong(this.gl, w, h));
+        this.buffers.set(
+          id,
+          createPingPong(this.gl, w, h, this.bufferFmt),
+        );
       }
     }
   }
@@ -458,7 +585,10 @@ export class ShaderToyRuntime {
       if (pass !== "image" && this.width > 0) {
         const prev = this.buffers.get(pass);
         if (prev) destroyPingPong(this.gl, prev);
-        this.buffers.set(pass, createPingPong(this.gl, this.width, this.height));
+        this.buffers.set(
+          pass,
+          createPingPong(this.gl, this.width, this.height, this.bufferFmt),
+        );
       }
     }
 
@@ -471,6 +601,18 @@ export class ShaderToyRuntime {
     }
   }
 
+  /**
+   * Met à jour les bindings de canaux sans recompiler les programmes.
+   * Les URLs / clés `#élément` absentes des textures sont allouées à la demande
+   * (via `ensureTextures` / `ensureElementTexture` côté composant).
+   */
+  setPassChannels(channels: Map<ShaderPassId, PassChannels>) {
+    if (this.gl.isContextLost()) {
+      throw new Error("WebGL context lost");
+    }
+    this.passChannels = channels;
+  }
+
   async ensureTextures(urls: string[]) {
     const unique = [...new Set(urls.filter(Boolean))];
     await Promise.all(unique.map((url) => this.loadTexture(url)));
@@ -846,6 +988,7 @@ export class ShaderToyRuntime {
 
   /**
    * Lit un rectangle d’un buffer ping-pong (dernier write) ou de l’Image (`pass === "image"`).
+   * Les buffers flottants renvoient un `Float32Array` ; Image / rgba8 → `Uint8Array`.
    */
   readBufferRect(
     pass: ShaderPassId,
@@ -857,7 +1000,14 @@ export class ShaderToyRuntime {
     if (pass === "image") return this.readRect(x, y, w, h);
     const pp = this.buffers.get(pass);
     if (!pp) return null;
-    return this.readFramebufferRect(pp.framebuffers[pp.index], x, y, w, h);
+    return this.readFramebufferRect(
+      pp.framebuffers[pp.index],
+      x,
+      y,
+      w,
+      h,
+      this.bufferFmt.float,
+    );
   }
 
   /**
@@ -876,6 +1026,7 @@ export class ShaderToyRuntime {
     y: number,
     w: number,
     h: number,
+    asFloat = false,
   ): ReadRectResult | null {
     const gl = this.gl;
     if (gl.isContextLost() || this.width < 1 || this.height < 1) return null;
@@ -895,9 +1046,15 @@ export class ShaderToyRuntime {
     if (px + pw > this.width) pw = this.width - px;
     if (py + ph > this.height) ph = this.height - py;
     if (pw < 1 || ph < 1) return null;
-    const data = new Uint8Array(pw * ph * 4);
     gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
-    gl.readPixels(px, py, pw, ph, gl.RGBA, gl.UNSIGNED_BYTE, data);
+    let data: Uint8Array | Float32Array;
+    if (asFloat) {
+      data = new Float32Array(pw * ph * 4);
+      gl.readPixels(px, py, pw, ph, gl.RGBA, gl.FLOAT, data);
+    } else {
+      data = new Uint8Array(pw * ph * 4);
+      gl.readPixels(px, py, pw, ph, gl.RGBA, gl.UNSIGNED_BYTE, data);
+    }
     gl.bindFramebuffer(gl.FRAMEBUFFER, null);
     return { x: px, y: py, width: pw, height: ph, data };
   }

package/src/core/components/functional/shader/shader.md

@@ -44,8 +44,8 @@ Live 3D → shader (no JPEG): [Visual stack](#docs/_misc/visual-stack.md/visual-
 |--------|-----------|
 | Sortie d’un effet → entrée du suivant | `image-ch0="buffer-a"` (ou `buffer-b`… / `self`) — **même contexte GPU**, FBO ping-pong |
 | Scene 3D / autre canvas → post | `channel0="#plateau"` — copie `texImage2D` chaque `frameSeq` |
-| Params / sync UI | `dataProvider` → `uParam0…3` **et** canaux (`channel0`, `bufferACh0`…) — string URL, `#id`, ou `SonicMediaRef` (`url` / `element`) |
-| Hors viewport | `release-offscreen` (défaut) : libère textures/FBO, garde le contexte |
+| Params / sync UI | `dataProvider` → `uParam0…3` **et** canaux (`channel0`, `bufferACh0`…) — string URL, `#id`, ou `SonicMediaRef` (`url` / `element`). Changer un canal ne recompile pas (rebind). |
+| Hors viewport | `release-offscreen` : `auto` (défaut) libère sauf si une passe lit `self` ; `true` / `false` forcent |
 
 Les passes intermédiaires sont **déjà offscreen** (FBO). Pas besoin d’un second `sonic-shader` invisible pour du multipass interne.
 
@@ -138,6 +138,22 @@ onExtract() {
 
 Live Harris → patches → WebGPU: [Visual stack](#docs/_misc/visual-stack.md/visual-stack).
 
+## Précision des buffers (`buffer-format`)
+
+Par défaut, les buffers A–D sont en **RGBA8** (unsigned). Un tenseur Harris naïf (`Ix*Ix`, `Iy*Iy`, `Ix*Iy`) **perd le signe** de `IxIy` et sature les carrés → bords au lieu de coins.
+
+| Valeur | Usage |
+|--------|--------|
+| `rgba8` (défaut) | Couleur / masques 0–1 |
+| `rgba16f` | Calculs signés (Harris, gradients) — recommandé |
+| `rgba32f` | Haute précision ; filtrage `NEAREST` si `OES_texture_float_linear` manque |
+
+Repli auto en `rgba8` si `EXT_color_buffer_float` est absent (`console.warn` une fois). L’attribut reflété `active-buffer-format` indique le format réellement utilisé. La passe Image reste le canvas RGBA8.
+
+```html
+<sonic-shader buffer-format="rgba16f" buffer-a="…" …></sonic-shader>
+```
+
 ## API typée (`SonicShaderConfig`)
 
 | Champ / attribut | Type | Rôle |
@@ -145,6 +161,7 @@ Live Harris → patches → WebGPU: [Visual stack](#docs/_misc/visual-stack.md/v
 | `image` | `string` | GLSL pass Image (**requis**, propriété JS) |
 | `bufferA`…`bufferD` / `buffer-a`… | `string` | Passes multipass |
 | `common` | `string` | GLSL partagé |
+| `bufferFormat` / `buffer-format` | `rgba8` \| `rgba16f` \| `rgba32f` | Format buffers A–D (défaut `rgba8`) ; `active-buffer-format` reflète le format réellement utilisé |
 | `channel0`…`channel3` | `string` | URLs, `#id` élément, ou refs buffers (toutes passes) |
 | `imageCh0`… / `image-ch0`… | `string` | Override canal : URL, `#id`, `self`, `buffer-a`…, `none` |
 | `play` | `boolean` | Boucle RAF (défaut `true`) |
@@ -170,7 +187,13 @@ Live Harris → patches → WebGPU: [Visual stack](#docs/_misc/visual-stack.md/v
 | `extractDataProvider` / `extract-data-provider` | `string` | Publisher extract (défaut = out) |
 | `aspectRatio` / `aspect-ratio` | `string` | Ratio CSS forcé |
 | `dprMax` / `dpr-max` | `number` | Plafond DPR (défaut `2`) |
-| `releaseOffscreen` / `release-offscreen` | `boolean` | Hors viewport : libère textures/FBO (garde le contexte). `dispose` + loseContext au disconnect (défaut `true`) |
+| `releaseOffscreen` / `release-offscreen` | `boolean` \| `"auto"` | Hors viewport : libère textures/FBO (garde le contexte). `auto` (défaut) : ne libère pas si une passe lit `self`. `dispose` + loseContext au disconnect |
+
+## État et visibilité
+
+Un shader qui garde un état via `self` (feedback frame précédente) n’est plus réinitialisé quand il sort de l’écran : avec `release-offscreen="auto"` (défaut), seuls le RAF et les vidéos sont mis en pause ; les FBO restent. Forcer `release-offscreen` (attribut booléen / `true`) restaure l’ancien comportement (libération hors viewport même avec `self`).
+
+Changer `channel0…3` / `*-ch*` re-lie les textures **sans** recompiler ni vider les buffers.
 
 ## Markup
 
@@ -184,7 +207,7 @@ Live Harris → patches → WebGPU: [Visual stack](#docs/_misc/visual-stack.md/v
   hover-speed="12"
   play
   play-on-hover
-  release-offscreen
+  release-offscreen="auto"
   channel0="/docs/shader-samples/color.jpg"
 &gt;&lt;/sonic-shader&gt;
   </template>

package/src/core/components/functional/shader/shader.spec.ts

@@ -8,6 +8,88 @@ import { buildFragmentSource } from "./shadertoy-prelude";
 import "./shader";
 import { SonicShader, channelFormValue } from "./shader";
 
+describe("parseBufferFormat", () => {
+  it("accepte rgba8 / rgba16f / rgba32f", async () => {
+    const { parseBufferFormat } = await import("./types");
+    expect(parseBufferFormat("rgba8")).toBe("rgba8");
+    expect(parseBufferFormat("rgba16f")).toBe("rgba16f");
+    expect(parseBufferFormat("half")).toBe("rgba16f");
+    expect(parseBufferFormat("rgba32f")).toBe("rgba32f");
+    expect(parseBufferFormat("float")).toBe("rgba32f");
+    expect(parseBufferFormat("")).toBe("rgba8");
+    expect(parseBufferFormat("nope")).toBe("rgba8");
+  });
+});
+
+describe("resolveBufferGlFormat", () => {
+  it("reste rgba8 sans extension float", async () => {
+    const { resolveBufferGlFormat, resetBufferFormatWarnFlag } = await import(
+      "./gl-runtime"
+    );
+    resetBufferFormatWarnFlag();
+    const gl = {
+      RGBA8: 0x8058,
+      RGBA16F: 0x881a,
+      RGBA32F: 0x8814,
+      RGBA: 0x1908,
+      UNSIGNED_BYTE: 0x1401,
+      HALF_FLOAT: 0x140b,
+      FLOAT: 0x1406,
+      LINEAR: 0x2601,
+      NEAREST: 0x2600,
+      getExtension: () => null,
+    } as unknown as WebGL2RenderingContext;
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    const fmt = resolveBufferGlFormat(gl, "rgba16f");
+    expect(fmt.active).toBe("rgba8");
+    expect(fmt.float).toBe(false);
+    expect(warn).toHaveBeenCalledOnce();
+    warn.mockRestore();
+  });
+
+  it("accepte rgba16f avec EXT_color_buffer_float", async () => {
+    const { resolveBufferGlFormat, resetBufferFormatWarnFlag } = await import(
+      "./gl-runtime"
+    );
+    resetBufferFormatWarnFlag();
+    const gl = {
+      RGBA8: 0x8058,
+      RGBA16F: 0x881a,
+      RGBA32F: 0x8814,
+      RGBA: 0x1908,
+      UNSIGNED_BYTE: 0x1401,
+      HALF_FLOAT: 0x140b,
+      FLOAT: 0x1406,
+      LINEAR: 0x2601,
+      NEAREST: 0x2600,
+      getExtension: (name: string) =>
+        name === "EXT_color_buffer_float" ? {} : null,
+    } as unknown as WebGL2RenderingContext;
+    const fmt = resolveBufferGlFormat(gl, "rgba16f");
+    expect(fmt.active).toBe("rgba16f");
+    expect(fmt.float).toBe(true);
+    expect(fmt.type).toBe(gl.HALF_FLOAT);
+  });
+});
+
+describe("findPeaks float", () => {
+  it("lit des scores Float32 déjà normalisés", async () => {
+    const { findPeaks } = await import("./types");
+    const w = 8;
+    const h = 8;
+    const data = new Float32Array(w * h * 4);
+    data[(3 * w + 3) * 4] = 0.9;
+    data[(3 * w + 4) * 4] = 0.4;
+    const peaks = findPeaks(data, w, h, {
+      threshold: 0.5,
+      maxCount: 2,
+      minDistance: 2,
+    });
+    expect(peaks.length).toBeGreaterThanOrEqual(1);
+    expect(peaks[0].score).toBeCloseTo(0.9, 5);
+  });
+});
+
 describe("parseChannelSource", () => {
   it("résout self / buffers / url / fallback", () => {
     expect(parseChannelSource("self", "")).toEqual({ kind: "self" });
@@ -224,6 +306,39 @@ describe("meanRgba", () => {
   });
 });
 
+describe("release-offscreen auto / self", () => {
+  it("parseReleaseOffscreen", async () => {
+    const { parseReleaseOffscreen } = await import("./types");
+    expect(parseReleaseOffscreen(null)).toBe("auto");
+    expect(parseReleaseOffscreen("auto")).toBe("auto");
+    expect(parseReleaseOffscreen("")).toBe(true);
+    expect(parseReleaseOffscreen("true")).toBe(true);
+    expect(parseReleaseOffscreen("false")).toBe(false);
+  });
+
+  it("shouldReleaseWhenOffscreen", async () => {
+    const { shouldReleaseWhenOffscreen } = await import("./types");
+    expect(shouldReleaseWhenOffscreen("auto", true)).toBe(false);
+    expect(shouldReleaseWhenOffscreen("auto", false)).toBe(true);
+    expect(shouldReleaseWhenOffscreen(true, true)).toBe(true);
+    expect(shouldReleaseWhenOffscreen(false, false)).toBe(false);
+  });
+
+  it("channelsUseSelf détecte self", async () => {
+    const { channelsUseSelf } = await import("./types");
+    expect(
+      channelsUseSelf([
+        [{ kind: "url", url: "/a.png" }, { kind: "none" }, { kind: "none" }, { kind: "none" }],
+      ]),
+    ).toBe(false);
+    expect(
+      channelsUseSelf([
+        [{ kind: "self" }, { kind: "none" }, { kind: "none" }, { kind: "none" }],
+      ]),
+    ).toBe(true);
+  });
+});
+
 describe("SonicShader", () => {
   afterEach(() => {
     document.body.innerHTML = "";
@@ -365,4 +480,156 @@ describe("SonicShader", () => {
       expect(el.shadowRoot?.querySelector("canvas")).toBeTruthy();
     }
   });
+
+  it("changement de canal → rebindChannels, pas rebuild", async () => {
+    const el = TestUtils.bootstrap(
+      `<sonic-shader style="width:32px;height:32px"></sonic-shader>`,
+      true,
+    )[0] as SonicShader;
+    el.image =
+      "void mainImage(out vec4 fragColor, in vec2 fragCoord){ fragColor=vec4(1.0); }";
+    await el.updateComplete;
+
+    const rt = {
+      isLost: false,
+      setPassChannels: vi.fn(),
+      ensureTextures: vi.fn(async () => {}),
+      ensureElementTexture: vi.fn(),
+      resize: vi.fn(),
+      dispose: vi.fn(),
+      setVideosPlaying: vi.fn(),
+    };
+    const internal = el as unknown as {
+      runtime: typeof rt;
+      ready: boolean;
+      rebuild: () => Promise<void>;
+      rebindChannels: () => Promise<void>;
+      drawFrame: (now: number) => void;
+    };
+    internal.runtime = rt;
+    internal.ready = true;
+    vi.spyOn(internal, "drawFrame").mockImplementation(() => {});
+
+    const rebuildSpy = vi.spyOn(internal, "rebuild");
+    const rebindSpy = vi.spyOn(internal, "rebindChannels");
+    rebuildSpy.mockClear();
+    rebindSpy.mockClear();
+    rt.setPassChannels.mockClear();
+
+    el.bufferACh1 = "#autre";
+    await el.updateComplete;
+    await new Promise((r) => setTimeout(r, 0));
+
+    expect(rebuildSpy).not.toHaveBeenCalled();
+    expect(rebindSpy).toHaveBeenCalled();
+    expect(rt.setPassChannels).toHaveBeenCalled();
+  });
+
+  it("release-offscreen=auto : conserve le runtime si self hors écran", async () => {
+    const el = TestUtils.bootstrap(
+      `<sonic-shader release-offscreen="auto" style="width:32px;height:32px"></sonic-shader>`,
+      true,
+    )[0] as SonicShader;
+    await el.updateComplete;
+    expect(el.releaseOffscreen).toBe("auto");
+
+    const dispose = vi.fn();
+    const rt = {
+      isLost: false,
+      dispose,
+      setVideosPlaying: vi.fn(),
+      setPassChannels: vi.fn(),
+      ensureTextures: vi.fn(async () => {}),
+      ensureElementTexture: vi.fn(),
+      resize: vi.fn(),
+    };
+    const internal = el as unknown as {
+      runtime: typeof rt | null;
+      ready: boolean;
+      inView: boolean;
+      syncVisibility: () => void;
+      drawFrame: (now: number) => void;
+    };
+    internal.runtime = rt;
+    internal.ready = true;
+    internal.inView = true;
+    vi.spyOn(internal, "drawFrame").mockImplementation(() => {});
+
+    el.bufferACh0 = "self";
+    await el.updateComplete;
+    await new Promise((r) => setTimeout(r, 0));
+
+    internal.inView = false;
+    internal.syncVisibility();
+    expect(dispose).not.toHaveBeenCalled();
+    expect(internal.runtime).toBe(rt);
+  });
+
+  it("release-offscreen=auto : libère hors écran sans self", async () => {
+    const el = TestUtils.bootstrap(
+      `<sonic-shader release-offscreen="auto" style="width:32px;height:32px"></sonic-shader>`,
+      true,
+    )[0] as SonicShader;
+    await el.updateComplete;
+    const dispose = vi.fn();
+    const rt = {
+      isLost: false,
+      dispose,
+      setVideosPlaying: vi.fn(),
+    };
+    const internal = el as unknown as {
+      runtime: typeof rt | null;
+      ready: boolean;
+      inView: boolean;
+      syncVisibility: () => void;
+      drawFrame: (now: number) => void;
+    };
+    internal.runtime = rt;
+    internal.ready = true;
+    internal.inView = false;
+    vi.spyOn(internal, "drawFrame").mockImplementation(() => {});
+    internal.syncVisibility();
+    expect(dispose).toHaveBeenCalledWith(false);
+    expect(internal.runtime).toBeNull();
+  });
+
+  it("release-offscreen=true : libère même avec self", async () => {
+    const el = TestUtils.bootstrap(
+      `<sonic-shader release-offscreen style="width:32px;height:32px"></sonic-shader>`,
+      true,
+    )[0] as SonicShader;
+    await el.updateComplete;
+    expect(el.releaseOffscreen).toBe(true);
+
+    const dispose = vi.fn();
+    const rt = {
+      isLost: false,
+      dispose,
+      setVideosPlaying: vi.fn(),
+      setPassChannels: vi.fn(),
+      ensureTextures: vi.fn(async () => {}),
+      ensureElementTexture: vi.fn(),
+      resize: vi.fn(),
+    };
+    const internal = el as unknown as {
+      runtime: typeof rt | null;
+      ready: boolean;
+      inView: boolean;
+      syncVisibility: () => void;
+      drawFrame: (now: number) => void;
+    };
+    internal.runtime = rt;
+    internal.ready = true;
+    internal.inView = true;
+    vi.spyOn(internal, "drawFrame").mockImplementation(() => {});
+
+    el.bufferACh0 = "self";
+    await el.updateComplete;
+    await new Promise((r) => setTimeout(r, 0));
+
+    internal.inView = false;
+    internal.syncVisibility();
+    expect(dispose).toHaveBeenCalledWith(false);
+    expect(internal.runtime).toBeNull();
+  });
 });