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

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, mediaElementKey, lookupLiveElement } 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"`
@@ -294,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;
@@ -399,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;
@@ -479,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
@@ -505,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();
       }
     });
@@ -513,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") ||
@@ -696,6 +742,7 @@ export class SonicShader extends LitElement {
    */
   private releaseRuntime() {
     this.rebuildToken++;
+    this.rebindToken++;
     this.stopLoop();
     this.ready = false;
     this.releasing = true;
@@ -752,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;
@@ -766,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;
@@ -775,6 +824,9 @@ export class SonicShader extends LitElement {
       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();
@@ -784,7 +836,7 @@ export class SonicShader extends LitElement {
   }
 
   private syncVisibility() {
-    if (!this.inView && this.releaseOffscreen) {
+    if (!this.inView && this.wantsReleaseOffscreen()) {
       this.releaseRuntime();
       return;
     }
@@ -871,8 +923,72 @@ export class SonicShader extends LitElement {
     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 = {
@@ -883,18 +999,12 @@ 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)) {
@@ -903,6 +1013,7 @@ export class SonicShader extends LitElement {
       if (token !== this.rebuildToken || !this.runtime || this.runtime.isLost) {
         return;
       }
+      this.syncFrameConsumers(channels);
       const aspectHint =
         this.channel0.startsWith("#") ? "" : this.channel0 || urls[0];
       this.applyAspectRatio(aspectHint);
@@ -1312,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),
@@ -1410,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;
@@ -1581,10 +1696,12 @@ export class SonicShader extends LitElement {
   }
 }
 
-export { parseChannelSource, ShaderToyRuntime, shouldUploadElementFrame } 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,
@@ -1609,11 +1726,16 @@ export {
   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);
+}

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

@@ -5,6 +5,57 @@ export type ShaderPassId =
   | "bufferC"
   | "bufferD";
 
+/** Format interne des buffers A–D (Image = toujours le canvas RGBA8). */
+export type ShaderBufferFormat = "rgba8" | "rgba16f" | "rgba32f";
+
+export function parseBufferFormat(
+  value: string | null | undefined,
+): ShaderBufferFormat {
+  const s = (value ?? "").trim().toLowerCase();
+  if (s === "rgba16f" || s === "rgba16" || s === "half") return "rgba16f";
+  if (s === "rgba32f" || s === "rgba32" || s === "float") return "rgba32f";
+  return "rgba8";
+}
+
+/**
+ * Hors viewport : libérer textures/FBO ?
+ * - `true` / `false` — forcé
+ * - `auto` (défaut) — libère sauf si une passe lit `self` (état conservé)
+ */
+export type ReleaseOffscreen = boolean | "auto";
+
+export function parseReleaseOffscreen(
+  value: string | null | undefined,
+): ReleaseOffscreen {
+  if (value == null) return "auto";
+  const s = value.trim().toLowerCase();
+  if (s === "auto") return "auto";
+  if (s === "false" || s === "0") return false;
+  // attribut booléen présent (`""`) ou `"true"`
+  return true;
+}
+
+/** Au moins un canal `self` (feedback frame précédente). */
+export function channelsUseSelf(
+  channels: Iterable<readonly ChannelSource[]>,
+): boolean {
+  for (const chs of channels) {
+    for (const c of chs) {
+      if (c.kind === "self") return true;
+    }
+  }
+  return false;
+}
+
+export function shouldReleaseWhenOffscreen(
+  mode: ReleaseOffscreen,
+  usesSelf: boolean,
+): boolean {
+  if (mode === false) return false;
+  if (mode === true) return true;
+  return !usesSelf;
+}
+
 export type ChannelSource =
   | { kind: "url"; url: string }
   | { kind: "buffer"; buffer: Exclude<ShaderPassId, "image"> }
@@ -161,10 +212,18 @@ export type SonicShaderConfig = {
   dprMax?: number;
 
   /**
-   * Hors viewport : libère textures/FBO (défaut `true`), sans loseContext.
+   * Format des buffers A–D : `rgba8` (défaut) \| `rgba16f` \| `rgba32f`.
+   * Requis pour des valeurs signées / hors [0,1] (ex. tenseur Harris).
+   * Repli auto en `rgba8` si `EXT_color_buffer_float` manque.
+   */
+  bufferFormat?: ShaderBufferFormat;
+
+  /**
+   * Hors viewport : libère textures/FBO, sans loseContext.
+   * `auto` (défaut) : ne libère pas si une passe lit `self`.
    * Le slot navigateur est libéré au disconnect.
    */
-  releaseOffscreen?: boolean;
+  releaseOffscreen?: ReleaseOffscreen;
 };
 
 /** Parse `hover-param` → slot ou `null` si désactivé / invalide. */
@@ -274,7 +333,8 @@ export type ReadRectResult = {
   y: number;
   width: number;
   height: number;
-  data: Uint8Array;
+  /** `Uint8Array` (RGBA8) ou `Float32Array` (buffers flottants). */
+  data: Uint8Array | Float32Array;
 };
 
 /** Parse `extract-source` / `extract-mask` → pass id ou null. */
@@ -295,9 +355,10 @@ export function parseExtractPass(
 /**
  * NMS simple sur canal R (RGBA row-major, origine bas-gauche comme WebGL).
  * Retourne peaks triés par score décroissant.
+ * Accepte Uint8 (0–255) ou Float32 (scores déjà dans ~[0,1]).
  */
 export function findPeaks(
-  data: Uint8Array,
+  data: Uint8Array | Float32Array,
   width: number,
   height: number,
   options: FindPeaksOptions = {},
@@ -308,13 +369,15 @@ export function findPeaks(
   if (maxCount === 0 || width < 1 || height < 1 || data.length < width * height * 4) {
     return [];
   }
-  const thr8 = threshold * 255;
+  const isFloat = data instanceof Float32Array;
+  const thr = isFloat ? threshold : threshold * 255;
+  const toScore = (v: number) => (isFloat ? v : v / 255);
   const candidates: ShaderPeak[] = [];
   for (let y = 1; y < height - 1; y++) {
     for (let x = 1; x < width - 1; x++) {
       const i = (y * width + x) * 4;
       const v = data[i];
-      if (v < thr8) continue;
+      if (v < thr) continue;
       // Local max 3×3
       let isMax = true;
       for (let dy = -1; dy <= 1 && isMax; dy++) {
@@ -327,7 +390,7 @@ export function findPeaks(
           }
         }
       }
-      if (isMax) candidates.push({ x, y, score: v / 255 });
+      if (isMax) candidates.push({ x, y, score: toScore(v) });
     }
   }
   candidates.sort((a, b) => b.score - a.score);
@@ -403,7 +466,7 @@ export function roiToPixels(
   return { x: px, y: py, w: pw, h: ph };
 }
 
-export function meanRgba(data: Uint8Array): {
+export function meanRgba(data: Uint8Array | Float32Array): {
   r: number;
   g: number;
   b: number;
@@ -412,6 +475,7 @@ export function meanRgba(data: Uint8Array): {
 } {
   const n = Math.floor(data.length / 4);
   if (n < 1) return { r: 0, g: 0, b: 0, a: 0, luma: 0 };
+  const isFloat = data instanceof Float32Array;
   let r = 0;
   let g = 0;
   let b = 0;
@@ -423,10 +487,11 @@ export function meanRgba(data: Uint8Array): {
     b += data[o + 2];
     a += data[o + 3];
   }
-  r /= n * 255;
-  g /= n * 255;
-  b /= n * 255;
-  a /= n * 255;
+  const scale = isFloat ? n : n * 255;
+  r /= scale;
+  g /= scale;
+  b /= scale;
+  a /= scale;
   return {
     r,
     g,
@@ -436,6 +501,18 @@ export function meanRgba(data: Uint8Array): {
   };
 }
 
+/** Convertit un buffer RGBA (byte ou float 0–1) en Uint8 pour canvas / blob. */
+export function rgbaToUint8(
+  data: Uint8Array | Float32Array,
+): Uint8Array {
+  if (data instanceof Uint8Array) return data;
+  const out = new Uint8Array(data.length);
+  for (let i = 0; i < data.length; i++) {
+    out[i] = Math.max(0, Math.min(255, Math.round(data[i] * 255)));
+  }
+  return out;
+}
+
 export class ShaderCompileError extends Error {
   constructor(
     message: string,