@supersoniks/concorde 4.9.97-visual-stack.0 → 4.9.98-visual-stack.1

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

@@ -1,7 +1,7 @@
 import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import HTML from "@supersoniks/concorde/core/utils/HTML";
-import { revokeMediaUrls, toMediaUrl } from "@supersoniks/concorde/core/utils/mediaRef";
+import { revokeMediaUrls, toMediaUrl, mediaElementKey, lookupLiveElement, FrameConsumerRegistry } from "@supersoniks/concorde/core/utils/mediaRef";
 import { PublisherManager } from "@supersoniks/concorde/utils";
 import {
   parseChannelSource,
@@ -9,6 +9,8 @@ import {
 } from "./gl-runtime";
 import {
   PassChannels,
+  ReleaseOffscreen,
+  ShaderBufferFormat,
   ShaderCompileError,
   ShaderExtractItem,
   ShaderExtractOutput,
@@ -18,17 +20,61 @@ import {
   ShaderRoi,
   ShaderSources,
   SonicShaderOutput,
+  channelsUseSelf,
   findPeaks,
   meanRgba,
+  parseBufferFormat,
   parseExtractPass,
   parseHoverParam,
+  parseReleaseOffscreen,
   roiToPixels,
+  rgbaToUint8,
+  shouldReleaseWhenOffscreen,
 } from "./types";
 
 const tagName = "sonic-shader";
 
 const MAX_PATCH_PX = 128;
 
+/** Clés qui forcent une recompilation / recreate FBO. */
+const PROGRAM_KEYS = [
+  "image",
+  "bufferA",
+  "bufferB",
+  "bufferC",
+  "bufferD",
+  "common",
+  "bufferFormat",
+] as const;
+
+/** Clés qui ne font que re-lier les textures (pas de rebuild). */
+const CHANNEL_KEYS = [
+  "channel0",
+  "channel1",
+  "channel2",
+  "channel3",
+  "imageCh0",
+  "imageCh1",
+  "imageCh2",
+  "imageCh3",
+  "bufferACh0",
+  "bufferACh1",
+  "bufferACh2",
+  "bufferACh3",
+  "bufferBCh0",
+  "bufferBCh1",
+  "bufferBCh2",
+  "bufferBCh3",
+  "bufferCCh0",
+  "bufferCCh1",
+  "bufferCCh2",
+  "bufferCCh3",
+  "bufferDCh0",
+  "bufferDCh1",
+  "bufferDCh2",
+  "bufferDCh3",
+] as const;
+
 /**
  * Champs méta publiés vers le out-dataProvider.
  * `param0…3` sont exclus du gate « consommateur » : un `sonic-input name="param0"`
@@ -104,16 +150,24 @@ function toNum(v: unknown, fallback: number): number {
   return fallback;
 }
 
-/** Valeur canal depuis DP : string (url ou buffer-a) | MediaRef → url. */
+/** Valeur canal depuis DP : string (url, buffer-a, #id) | MediaRef → url | { element }. */
 function channelFormValue(value: unknown): string | undefined {
   if (value === null || value === "") return "";
   if (typeof value === "string") return value.trim();
   const url = toMediaUrl(value);
   if (url) return url;
-  if (value && typeof value === "object") return undefined;
+  if (value && typeof value === "object") {
+    const el = (value as { element?: unknown }).element;
+    const key = mediaElementKey(el);
+    if (key) return key;
+    return undefined;
+  }
   return "";
 }
 
+/** Exposé pour tests. */
+export { channelFormValue };
+
 function parseRois(value: unknown): ShaderRoi[] {
   if (!Array.isArray(value)) return [];
   const out: ShaderRoi[] = [];
@@ -286,12 +340,32 @@ export class SonicShader extends LitElement {
   /** Vitesse d’easing hover on/off (1/s, défaut 10). */
   @property({ type: Number, attribute: "hover-speed" }) hoverSpeed = 10;
   /**
-   * Libère le contexte WebGL hors viewport (défaut true).
-   * Les navigateurs limitent ~8–16 contextes.
+   * Hors viewport : libère textures/FBO (garde le contexte).
+   * `auto` (défaut) : ne libère pas si une passe lit `self`.
+   * `true` / `false` forcent le comportement.
    */
-  @property({ type: Boolean, attribute: "release-offscreen" })
-  releaseOffscreen = true;
+  @property({
+    attribute: "release-offscreen",
+    converter: {
+      fromAttribute: (value: string | null) => parseReleaseOffscreen(value),
+      toAttribute: (value: ReleaseOffscreen) => {
+        if (value === "auto") return "auto";
+        if (value === false) return "false";
+        return "";
+      },
+    },
+  })
+  releaseOffscreen: ReleaseOffscreen = "auto";
   @property({ type: Number, attribute: "dpr-max" }) dprMax = 2;
+  /**
+   * Format des buffers A–D : `rgba8` (défaut) | `rgba16f` | `rgba32f`.
+   * Attribut reflété `active-buffer-format` = format réellement utilisé.
+   */
+  @property({ attribute: "buffer-format" })
+  bufferFormat: ShaderBufferFormat | string = "rgba8";
+  /** Format actif après repli éventuel (lecture seule, reflect). */
+  @property({ attribute: "active-buffer-format", reflect: true })
+  activeBufferFormat: ShaderBufferFormat = "rgba8";
 
   /** Generic float uniforms `uParam0`…`uParam3` (no shader rebuild). */
   @property({ type: Number, attribute: "param0" }) param0 = 0;
@@ -364,6 +438,8 @@ export class SonicShader extends LitElement {
   private startTime = 0;
   private lastTime = 0;
   private frame = 0;
+  /** Incrémenté après chaque render (contrat SonicFrameSource). */
+  frameSeq = 0;
   private mouseVec: [number, number, number, number] = [0, 0, 0, 0];
   /** Cible pointeur (px drawing buffer, origine bas-gauche). */
   private mouseTarget: [number, number] = [0, 0];
@@ -389,6 +465,9 @@ export class SonicShader extends LitElement {
   private resizeObserver: ResizeObserver | null = null;
   private intersectionObserver: IntersectionObserver | null = null;
   private rebuildToken = 0;
+  /** Annule un `rebindChannels` en vol si rebuild / release intervient. */
+  private rebindToken = 0;
+  private frameConsumers = new FrameConsumerRegistry();
   private ready = false;
   private formPublisher: ReturnType<typeof PublisherManager.get> | null = null;
   private outPublisher: ReturnType<typeof PublisherManager.get> | null = null;
@@ -469,9 +548,11 @@ export class SonicShader extends LitElement {
     }
     this.pendingRevokeUrls = [];
     this.stopLoop();
+    this.frameConsumers.clear();
     this.resizeObserver?.disconnect();
     this.intersectionObserver?.disconnect();
     this.rebuildToken++;
+    this.rebindToken++;
     this.ready = false;
     this.releasing = true;
     this.runtime?.dispose(true); // libère le slot navigateur
@@ -495,7 +576,7 @@ export class SonicShader extends LitElement {
     this.bindOutPublisher();
     this.bindExtractPublisher();
     requestAnimationFrame(() => {
-      if (this.inView || !this.releaseOffscreen) {
+      if (this.inView || !this.wantsReleaseOffscreen()) {
         void this.ensureRuntime();
       }
     });
@@ -503,44 +584,19 @@ export class SonicShader extends LitElement {
 
   protected updated(changed: Map<string, unknown>) {
     if (!this.runtime) return;
-    const shaderKeys = [
-      "image",
-      "bufferA",
-      "bufferB",
-      "bufferC",
-      "bufferD",
-      "common",
-      "channel0",
-      "channel1",
-      "channel2",
-      "channel3",
-      "imageCh0",
-      "imageCh1",
-      "imageCh2",
-      "imageCh3",
-      "bufferACh0",
-      "bufferACh1",
-      "bufferACh2",
-      "bufferACh3",
-      "bufferBCh0",
-      "bufferBCh1",
-      "bufferBCh2",
-      "bufferBCh3",
-      "bufferCCh0",
-      "bufferCCh1",
-      "bufferCCh2",
-      "bufferCCh3",
-      "bufferDCh0",
-      "bufferDCh1",
-      "bufferDCh2",
-      "bufferDCh3",
-    ];
-    if (shaderKeys.some((k) => changed.has(k))) {
+    const programChanged = PROGRAM_KEYS.some((k) => changed.has(k));
+    const channelChanged = CHANNEL_KEYS.some((k) => changed.has(k));
+    if (programChanged) {
       void this.rebuild();
+    } else if (channelChanged) {
+      void this.rebindChannels();
     }
     if (changed.has("play")) {
       this.syncPlayback();
     }
+    if (changed.has("releaseOffscreen") || channelChanged) {
+      this.syncVisibility();
+    }
     if (
       changed.has("dataProvider") ||
       changed.has("outDataProvider") ||
@@ -686,6 +742,7 @@ export class SonicShader extends LitElement {
    */
   private releaseRuntime() {
     this.rebuildToken++;
+    this.rebindToken++;
     this.stopLoop();
     this.ready = false;
     this.releasing = true;
@@ -702,6 +759,27 @@ export class SonicShader extends LitElement {
     );
   }
 
+  /** Contrat SonicFrameSource — canvas lisible pour un autre sonic-shader. */
+  getFrameCanvas(): HTMLCanvasElement | null {
+    if (!this.ready || !this.runtime || this.runtime.isLost) return null;
+    return this.getCanvas();
+  }
+
+  /** Résout `#id` dans getRootNode() puis document ; clés live `__sonic_frame_`. */
+  private lookupElement(key: string): Element | null {
+    if (!key.startsWith("#")) return null;
+    const live = lookupLiveElement(key);
+    if (live) return live;
+    const id = key.slice(1);
+    if (!id || id.startsWith("__sonic_frame_")) return null;
+    const root = this.getRootNode();
+    if (root instanceof Document || root instanceof ShadowRoot) {
+      const el = root.getElementById(id);
+      if (el) return el;
+    }
+    return typeof document !== "undefined" ? document.getElementById(id) : null;
+  }
+
   private bindContextEvents() {
     const canvas = this.getCanvas();
     canvas?.addEventListener("webglcontextlost", this.onContextLost);
@@ -721,6 +799,7 @@ export class SonicShader extends LitElement {
     e.preventDefault();
     if (this.releasing) return;
     this.rebuildToken++;
+    this.rebindToken++;
     this.stopLoop();
     this.ready = false;
     this.runtime = null;
@@ -735,7 +814,8 @@ export class SonicShader extends LitElement {
     if (this.runtime && !this.runtime.isLost) return;
     this.runtime = null;
     await this.updateComplete;
-    if (!this.isConnected || (!this.inView && this.releaseOffscreen)) return;
+    if (!this.isConnected || (!this.inView && this.wantsReleaseOffscreen()))
+      return;
 
     const canvas = this.getCanvas();
     if (!canvas) return;
@@ -743,6 +823,10 @@ export class SonicShader extends LitElement {
     try {
       this.errorMessage = "";
       this.runtime = new ShaderToyRuntime(canvas);
+      this.runtime.setElementResolver((key) => this.lookupElement(key));
+      this.activeBufferFormat = this.runtime.setBufferFormat(
+        parseBufferFormat(this.bufferFormat),
+      );
       this.bindContextEvents();
       this.syncSize();
       await this.rebuild();
@@ -752,7 +836,7 @@ export class SonicShader extends LitElement {
   }
 
   private syncVisibility() {
-    if (!this.inView && this.releaseOffscreen) {
+    if (!this.inView && this.wantsReleaseOffscreen()) {
       this.releaseRuntime();
       return;
     }
@@ -827,8 +911,84 @@ export class SonicShader extends LitElement {
     return urls;
   }
 
+  private collectElementKeys(
+    channels: Map<ShaderPassId, PassChannels>,
+  ): string[] {
+    const keys: string[] = [];
+    for (const chs of channels.values()) {
+      for (const c of chs) {
+        if (c.kind === "element") keys.push(c.key);
+      }
+    }
+    return [...new Set(keys)];
+  }
+
+  /** Enregistre les producteurs live (`sonic-3d`…) pour play-offscreen auto. */
+  private syncFrameConsumers(channels: Map<ShaderPassId, PassChannels>) {
+    const els = this.collectElementKeys(channels).map((k) =>
+      this.lookupElement(k),
+    );
+    this.frameConsumers.sync(els);
+  }
+
+  /** Map canaux courante (tous les passes). */
+  private collectPassChannels(): Map<ShaderPassId, PassChannels> {
+    const channels = new Map<ShaderPassId, PassChannels>();
+    for (const pass of [
+      "bufferA",
+      "bufferB",
+      "bufferC",
+      "bufferD",
+      "image",
+    ] as ShaderPassId[]) {
+      channels.set(pass, this.buildChannels(pass));
+    }
+    return channels;
+  }
+
+  /** `true` si hors viewport on doit libérer textures/FBO. */
+  private wantsReleaseOffscreen(): boolean {
+    return shouldReleaseWhenOffscreen(
+      this.releaseOffscreen,
+      channelsUseSelf(this.collectPassChannels().values()),
+    );
+  }
+
+  /**
+   * Re-lie les canaux sans recompiler ni vider les FBO (Vague A Lot 2).
+   */
+  private async rebindChannels() {
+    if (!this.runtime || this.runtime.isLost || !this.image.trim()) return;
+    if (!this.ready) {
+      void this.rebuild();
+      return;
+    }
+    const token = ++this.rebindToken;
+    const channels = this.collectPassChannels();
+    try {
+      const urls = this.collectUrls(channels);
+      await this.runtime.ensureTextures(urls);
+      for (const key of this.collectElementKeys(channels)) {
+        this.runtime.ensureElementTexture(key);
+      }
+      if (token !== this.rebindToken || !this.runtime || this.runtime.isLost) {
+        return;
+      }
+      this.syncFrameConsumers(channels);
+      const aspectHint =
+        this.channel0.startsWith("#") ? "" : this.channel0 || urls[0];
+      this.applyAspectRatio(aspectHint);
+      this.runtime.setPassChannels(channels);
+      this.syncSize();
+    } catch (err) {
+      if (token !== this.rebindToken) return;
+      this.emitError(err);
+    }
+  }
+
   private async rebuild() {
     if (!this.runtime || this.runtime.isLost || !this.image.trim()) return;
+    this.rebindToken++;
     const token = ++this.rebuildToken;
     this.errorMessage = "";
     const sources: ShaderSources = {
@@ -839,24 +999,24 @@ export class SonicShader extends LitElement {
       bufferC: this.bufferC,
       bufferD: this.bufferD,
     };
-    const channels = new Map<ShaderPassId, PassChannels>();
-    for (const pass of [
-      "bufferA",
-      "bufferB",
-      "bufferC",
-      "bufferD",
-      "image",
-    ] as ShaderPassId[]) {
-      channels.set(pass, this.buildChannels(pass));
-    }
+    const channels = this.collectPassChannels();
     try {
       this.syncSize();
+      this.activeBufferFormat = this.runtime.setBufferFormat(
+        parseBufferFormat(this.bufferFormat),
+      );
       const urls = this.collectUrls(channels);
       await this.runtime.ensureTextures(urls);
+      for (const key of this.collectElementKeys(channels)) {
+        this.runtime.ensureElementTexture(key);
+      }
       if (token !== this.rebuildToken || !this.runtime || this.runtime.isLost) {
         return;
       }
-      this.applyAspectRatio(this.channel0 || urls[0]);
+      this.syncFrameConsumers(channels);
+      const aspectHint =
+        this.channel0.startsWith("#") ? "" : this.channel0 || urls[0];
+      this.applyAspectRatio(aspectHint);
       this.syncSize();
       this.runtime.setSources(sources, channels);
       if (token !== this.rebuildToken || !this.runtime || this.runtime.isLost) {
@@ -964,6 +1124,7 @@ export class SonicShader extends LitElement {
       mouse: this.mouseVec,
       params,
     });
+    this.frameSeq++;
     this.maybePublishOut(now, time, params);
     void this.maybeExtract(now, time);
   }
@@ -1262,8 +1423,8 @@ export class SonicShader extends LitElement {
             : this.runtime.readBufferRect(pass, px.x, px.y, px.w, px.h);
         if (!rect) continue;
         // Copie : le buffer WebGL peut être réutilisé / invalidé ensuite
-        const rgba = new Uint8Array(rect.data);
-        const mean = meanRgba(rgba);
+        const rgba = rgbaToUint8(rect.data);
+        const mean = meanRgba(rect.data);
         const item: ShaderExtractItem = {
           id: roi.id || `${source}-${px.x}-${px.y}`,
           x: this.round3(rect.x / bufW),
@@ -1360,7 +1521,11 @@ export class SonicShader extends LitElement {
     if (typeof score === "number") item.score = this.round3(score);
     if (this.extractBitmaps) {
       const token = this.rebuildToken;
-      const url = await rgbaToBlobUrl(rect.data, rect.width, rect.height);
+      const url = await rgbaToBlobUrl(
+        rgbaToUint8(rect.data),
+        rect.width,
+        rect.height,
+      );
       if (token !== this.rebuildToken || !this.isConnected) {
         if (url) revokeMediaUrls([url]);
         return null;
@@ -1531,10 +1696,12 @@ export class SonicShader extends LitElement {
   }
 }
 
-export { parseChannelSource, ShaderToyRuntime } from "./gl-runtime";
+export { parseChannelSource, ShaderToyRuntime, shouldUploadElementFrame, resolveBufferGlFormat, resetBufferFormatWarnFlag } from "./gl-runtime";
 export { buildFragmentSource } from "./shadertoy-prelude";
 export type {
   ChannelSource,
+  ReleaseOffscreen,
+  ShaderBufferFormat,
   ShaderExtractItem,
   ShaderExtractOutput,
   ShaderExtractPass,
@@ -1548,17 +1715,27 @@ export type {
   SonicShaderConfig,
   SonicShaderOutput,
 } from "./types";
-export type { SonicMediaRef } from "@supersoniks/concorde/core/utils/mediaRef";
+export type {
+  SonicMediaRef,
+  SonicFrameSource,
+} from "@supersoniks/concorde/core/utils/mediaRef";
 export {
   toMediaUrl,
   cloneMediaRef,
+  isFrameSource,
+  mediaElementKey,
 } from "@supersoniks/concorde/core/utils/mediaRef";
 export {
+  channelsUseSelf,
   findPeaks,
   meanRgba,
+  parseBufferFormat,
   parseExtractPass,
   parseHoverParam,
+  parseReleaseOffscreen,
   roiToPixels,
+  rgbaToUint8,
+  shouldReleaseWhenOffscreen,
   ShaderCompileError,
 } from "./types";
 

package/src/core/components/functional/shader/shadertoy-prelude.ts

@@ -1,6 +1,14 @@
-/** ShaderToy-compatible GLSL ES 3.0 prelude (fragment). User code is inserted before main(). */
-export const SHADERTOY_FRAGMENT_PRELUDE = `#version 300 es
-precision highp float;
+/**
+ * ShaderToy-compatible GLSL ES 3.0 prelude (fragment body, sans `#version`).
+ * - `sonic-shader` préfixe `#version 300 es` via `buildFragmentSource`.
+ * - `sonic-3d` post passe le corps à Three `RawShaderMaterial` (GLSL3).
+ */
+
+export const GLSL_VERSION_300 = `#version 300 es
+`;
+
+/** Corps des uniforms / out (sans version). */
+export const SHADERTOY_FRAGMENT_BODY = `precision highp float;
 precision highp int;
 precision mediump sampler2D;
 
@@ -22,11 +30,26 @@ uniform float     uParam0;
 uniform float     uParam1;
 uniform float     uParam2;
 uniform float     uParam3;
+/** Near / far caméra (0 dans sonic-shader standalone). */
+uniform float     uNear;
+uniform float     uFar;
 
 out vec4 sonicFragColor;
 
+/** Profondeur linéaire monde depuis une DepthTexture (0–1). */
+float sonicLinearDepth(float d) {
+  float z = d * 2.0 - 1.0;
+  float n = max(uNear, 1e-4);
+  float f = max(uFar, n + 1e-4);
+  return (2.0 * n * f) / (f + n - z * (f - n));
+}
+
 `;
 
+/** @deprecated Préférer SHADERTOY_FRAGMENT_BODY + buildFragmentSource. */
+export const SHADERTOY_FRAGMENT_PRELUDE =
+  GLSL_VERSION_300 + SHADERTOY_FRAGMENT_BODY;
+
 export const SHADERTOY_FRAGMENT_EPILOGUE = `
 void main() {
   mainImage(sonicFragColor, gl_FragCoord.xy);
@@ -41,12 +64,33 @@ void main() {
 }
 `;
 
-export function buildFragmentSource(common: string, userCode: string): string {
+/** Vertex Three RawShaderMaterial GLSL3 (fullscreen triangle via PlaneGeometry 2×2). */
+export const THREE_FULLSCREEN_VERTEX = `precision highp float;
+in vec3 position;
+void main() {
+  gl_Position = vec4(position.xy, 0.0, 1.0);
+}
+`;
+
+export function buildFragmentBody(common: string, userCode: string): string {
   return (
-    SHADERTOY_FRAGMENT_PRELUDE +
+    SHADERTOY_FRAGMENT_BODY +
     (common ? common + "\n" : "") +
     userCode +
     "\n" +
     SHADERTOY_FRAGMENT_EPILOGUE
   );
 }
+
+/** Source fragment WebGL2 native (`sonic-shader`). */
+export function buildFragmentSource(common: string, userCode: string): string {
+  return GLSL_VERSION_300 + buildFragmentBody(common, userCode);
+}
+
+/** Source fragment pour Three RawShaderMaterial (GLSL3, sans #version). */
+export function buildThreeFragmentSource(
+  common: string,
+  userCode: string,
+): string {
+  return buildFragmentBody(common, userCode);
+}