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

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

@@ -5,11 +5,64 @@ 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"> }
   | { kind: "self" }
-  | { kind: "none" };
+  | { kind: "none" }
+  /** Élément page (`#id`) — upload live via `updateElementTextures`. */
+  | { kind: "element"; key: string; el?: Element | null };
 
 export type PassChannels = [
   ChannelSource,
@@ -159,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. */
@@ -272,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. */
@@ -293,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 = {},
@@ -306,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++) {
@@ -325,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);
@@ -401,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;
@@ -410,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;
@@ -421,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,
@@ -434,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,

package/src/core/components/functional/webgpu/gl-fallback.ts

@@ -45,6 +45,7 @@ export class WebGl2FallbackRuntime {
   private lastTime = 0;
   private disposed = false;
   private channelQueue: Promise<void> = Promise.resolve();
+  private elementResolver: ((key: string) => Element | null) | null = null;
 
   private constructor(canvas: HTMLCanvasElement, toy: ShaderToyRuntime) {
     this.canvas = canvas;
@@ -57,6 +58,11 @@ export class WebGl2FallbackRuntime {
     return new WebGl2FallbackRuntime(canvas, toy);
   }
 
+  setElementResolver(fn: ((key: string) => Element | null) | null) {
+    this.elementResolver = fn;
+    this.toy.setElementResolver(fn);
+  }
+
   /** WGSL ignoré — effet GLSL fixe (canaux / params OK). */
   async setShader(_userBody: string): Promise<void> {
     this.assertAlive();
@@ -77,6 +83,10 @@ export class WebGl2FallbackRuntime {
     this.assertAlive();
     const trimmed = url.trim();
     if (this.channelUrls[index] === trimmed) {
+      if (trimmed.startsWith("#")) {
+        this.toy.ensureElementTexture(trimmed);
+        return;
+      }
       // Même URL : s’assurer que la texture est bien chargée
       if (trimmed && !this.toy.getTextureSize(trimmed)) {
         await this.toy.ensureTextures([trimmed]);
@@ -85,8 +95,7 @@ export class WebGl2FallbackRuntime {
     }
     this.channelUrls[index] = trimmed;
     this.applySources();
-    const urls = this.channelUrls.filter(Boolean);
-    if (urls.length) await this.toy.ensureTextures(urls);
+    await this.ensureChannelAssets();
   }
 
   /** Applique les 4 canaux d’un coup (préféré au boot). */
@@ -100,8 +109,7 @@ export class WebGl2FallbackRuntime {
         urls[3].trim(),
       ];
       this.applySources();
-      const list = this.channelUrls.filter(Boolean);
-      if (list.length) await this.toy.ensureTextures(list);
+      await this.ensureChannelAssets();
     });
     return this.channelQueue;
   }
@@ -115,9 +123,17 @@ export class WebGl2FallbackRuntime {
     this.toy.resize(width, height);
   }
 
+  updateLiveChannels(resolveEl: (key: string) => Element | null) {
+    this.assertAlive();
+    this.toy.updateElementTextures(resolveEl);
+  }
+
   draw(state: WebGpuFrameState) {
     this.assertAlive();
     if (this.toy.isLost) return;
+    if (this.elementResolver) {
+      this.toy.updateElementTextures(this.elementResolver);
+    }
     const timeDelta =
       this.lastTime > 0 ? Math.max(0, state.time - this.lastTime) : 0;
     this.lastTime = state.time;
@@ -137,6 +153,14 @@ export class WebGl2FallbackRuntime {
     this.toy.dispose(loseContext);
   }
 
+  private async ensureChannelAssets() {
+    const urls = this.channelUrls.filter((u) => u && !u.startsWith("#"));
+    if (urls.length) await this.toy.ensureTextures(urls);
+    for (const key of this.channelUrls) {
+      if (key.startsWith("#")) this.toy.ensureElementTexture(key);
+    }
+  }
+
   private applySources() {
     const channels = new Map([
       [

package/src/core/components/functional/webgpu/gpu-runtime.ts

@@ -1,11 +1,53 @@
 /// <reference types="@webgpu/types" />
 
+import {
+  isFrameSource,
+  type SonicFrameSource,
+} from "@supersoniks/concorde/core/utils/mediaRef";
+import { shouldUploadElementFrame } from "../shader/gl-runtime";
 import { WebGpuCompileError } from "./types";
 import { buildWgslSource } from "./wgsl-prelude";
 
 const UNIFORM_BYTES = 64; // resolution+time+frame+mouse+params + pad
 const CHANNEL_COUNT = 4;
 
+/** `true` si la texture existante peut être réécrite (même taille). */
+export function channelTextureNeedsRecreate(
+  current: { width: number; height: number } | null | undefined,
+  nextW: number,
+  nextH: number,
+): boolean {
+  if (!current) return true;
+  return current.width !== nextW || current.height !== nextH;
+}
+
+function externalSourceSize(
+  src: TexImageSource,
+): { width: number; height: number } {
+  if (
+    typeof HTMLVideoElement !== "undefined" &&
+    src instanceof HTMLVideoElement
+  ) {
+    return { width: src.videoWidth || 1, height: src.videoHeight || 1 };
+  }
+  if (
+    typeof HTMLImageElement !== "undefined" &&
+    src instanceof HTMLImageElement
+  ) {
+    return {
+      width: src.naturalWidth || src.width || 1,
+      height: src.naturalHeight || src.height || 1,
+    };
+  }
+  if ("width" in src && "height" in src) {
+    return {
+      width: Math.max(1, Number(src.width) || 1),
+      height: Math.max(1, Number(src.height) || 1),
+    };
+  }
+  return { width: 1, height: 1 };
+}
+
 /** Adapter WebGPU : high-performance → low-power → défaut. */
 export async function requestBestAdapter(
   gpu: GPU = navigator.gpu!,
@@ -77,6 +119,13 @@ export class WebGpuRuntime {
     null,
   ];
   private channelUrls: [string, string, string, string] = ["", "", "", ""];
+  private channelLastSeq = [0, 0, 0, 0];
+  private channelLastSrc: (string | undefined)[] = [
+    undefined,
+    undefined,
+    undefined,
+    undefined,
+  ];
   private placeholder: GPUTexture | null = null;
   private placeholderView: GPUTextureView | null = null;
   private bindGroup: GPUBindGroup | null = null;
@@ -185,10 +234,16 @@ export class WebGpuRuntime {
   async setChannel(index: 0 | 1 | 2 | 3, url: string): Promise<void> {
     this.assertAlive();
     const trimmed = url.trim();
+    if (trimmed.startsWith("#")) {
+      this.bindElementChannel(index, trimmed);
+      return;
+    }
     if (this.channelUrls[index] === trimmed && this.channelTextures[index]) {
       return;
     }
     this.channelUrls[index] = trimmed;
+    this.channelLastSeq[index] = 0;
+    this.channelLastSrc[index] = undefined;
     const token = ++this.channelLoadTokens[index];
     if (!trimmed) {
       this.destroyChannel(index);
@@ -197,24 +252,35 @@ export class WebGpuRuntime {
     }
     const img = await loadImage(trimmed);
     if (token !== this.channelLoadTokens[index] || this.disposed) return;
-    const texture = this.device.createTexture({
-      size: [img.width, img.height],
-      format: "rgba8unorm",
-      usage:
-        GPUTextureUsage.TEXTURE_BINDING |
-        GPUTextureUsage.COPY_DST |
-        GPUTextureUsage.RENDER_ATTACHMENT,
-    });
-    this.device.queue.copyExternalImageToTexture(
-      { source: img },
-      { texture },
-      [img.width, img.height],
-    );
-    this.destroyChannel(index);
-    this.channelTextures[index] = texture;
-    this.channelViews[index] = texture.createView();
-    this.channelSizes[index] = { width: img.width, height: img.height };
-    this.bindGroup = null;
+    this.uploadExternal(index, img, /* flipY */ false);
+  }
+
+  /**
+   * Upload live des canaux `#id` / FrameSource / video / canvas.
+   * Recrée la texture seulement si la taille change (pas de createTexture chaque frame).
+   */
+  updateLiveChannels(resolveEl: (key: string) => Element | null) {
+    this.assertAlive();
+    for (let i = 0; i < CHANNEL_COUNT; i++) {
+      const key = this.channelUrls[i];
+      if (!key.startsWith("#")) continue;
+      const el = resolveEl(key);
+      const decision = shouldUploadElementFrame(
+        el,
+        this.channelLastSeq[i],
+        this.channelLastSrc[i],
+      );
+      if (!decision.upload || !decision.texSource) continue;
+      this.uploadExternal(i, decision.texSource, /* flipY */ true);
+      if (isFrameSource(el)) {
+        this.channelLastSeq[i] = (el as SonicFrameSource).frameSeq;
+      } else {
+        this.channelLastSeq[i] = (this.channelLastSeq[i] || 0) + 1;
+      }
+      if (decision.nextSrc !== undefined) {
+        this.channelLastSrc[i] = decision.nextSrc;
+      }
+    }
   }
 
   getTextureSize(url: string): { width: number; height: number } | null {
@@ -311,6 +377,76 @@ export class WebGpuRuntime {
     }
   }
 
+  private bindElementChannel(index: 0 | 1 | 2 | 3, key: string) {
+    if (this.channelUrls[index] === key && this.channelTextures[index]) {
+      return;
+    }
+    this.channelUrls[index] = key;
+    this.channelLastSeq[index] = 0;
+    this.channelLastSrc[index] = undefined;
+    this.channelLoadTokens[index]++;
+    if (!this.channelTextures[index]) {
+      const texture = this.device.createTexture({
+        size: [1, 1],
+        format: "rgba8unorm",
+        usage:
+          GPUTextureUsage.TEXTURE_BINDING |
+          GPUTextureUsage.COPY_DST |
+          GPUTextureUsage.RENDER_ATTACHMENT,
+      });
+      this.device.queue.writeTexture(
+        { texture },
+        new Uint8Array([0, 0, 0, 255]),
+        { bytesPerRow: 4 },
+        [1, 1],
+      );
+      this.channelTextures[index] = texture;
+      this.channelViews[index] = texture.createView();
+      this.channelSizes[index] = { width: 1, height: 1 };
+      this.bindGroup = null;
+    }
+  }
+
+  private uploadExternal(
+    index: number,
+    source: TexImageSource,
+    flipY: boolean,
+  ) {
+    const { width, height } = externalSourceSize(source);
+    const w = Math.max(1, width);
+    const h = Math.max(1, height);
+    const existing = this.channelTextures[index];
+    if (
+      existing &&
+      !channelTextureNeedsRecreate(this.channelSizes[index], w, h)
+    ) {
+      this.device.queue.copyExternalImageToTexture(
+        { source, flipY },
+        { texture: existing },
+        [w, h],
+      );
+      return;
+    }
+    const texture = this.device.createTexture({
+      size: [w, h],
+      format: "rgba8unorm",
+      usage:
+        GPUTextureUsage.TEXTURE_BINDING |
+        GPUTextureUsage.COPY_DST |
+        GPUTextureUsage.RENDER_ATTACHMENT,
+    });
+    this.device.queue.copyExternalImageToTexture(
+      { source, flipY },
+      { texture },
+      [w, h],
+    );
+    this.destroyChannel(index);
+    this.channelTextures[index] = texture;
+    this.channelViews[index] = texture.createView();
+    this.channelSizes[index] = { width: w, height: h };
+    this.bindGroup = null;
+  }
+
   private writeUniforms(state: WebGpuFrameState) {
     const data = new ArrayBuffer(UNIFORM_BYTES);
     const f32 = new Float32Array(data);

package/src/core/components/functional/webgpu/helpers.ts

@@ -1,4 +1,4 @@
-import { toMediaUrl } from "@supersoniks/concorde/core/utils/mediaRef";
+import { toMediaUrl, mediaElementKey } from "@supersoniks/concorde/core/utils/mediaRef";
 
 export const LOG_PREFIX = "[sonic-webgpu]";
 
@@ -37,11 +37,17 @@ export function toNum(v: unknown, fallback: number): number {
   return fallback;
 }
 
+/** string (url / #id) | MediaRef → url | { element }. */
 export 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 "";
 }

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

@@ -41,11 +41,22 @@ Simulation: `param0` = speed, `param1` = mouse attraction. WebGPU compute when a
 | `active-backend` | reflect |
 | `param0`…`param3` | floats (particles: speed / attraction) |
 | `targetX` / `targetY` | attractor 0–1 (DP, top-left origin) |
-| `channel0`…`channel3` | textures (image kernel) |
+| `channel0`…`channel3` | textures (image kernel) : URL, `#id` live (`SonicFrameSource`), ou MediaRef `{ element }` |
 | `dataProvider` | params / channels / `targetX`·`Y` |
 | `frame-out` | `frameUrl` + `snapshot` |
 | `play` / `mouse` | loop / pointer |
 
+## Live bridge (`#id`)
+
+Comme `sonic-shader` : `channel0="#plateau"` copie le canvas source chaque `frameSeq` (`copyExternalImageToTexture`). La texture GPU est **réutilisée** tant que la taille ne change pas (pas de `createTexture` / rebuild bind group chaque frame).
+
+```html
+<sonic-3d id="plateau" play …></sonic-3d>
+<sonic-webgpu channel0="#plateau" kernel="image" play shader="…"></sonic-webgpu>
+```
+
+Demo: [Visual stack — 3D → WebGPU live](#docs/_misc/visual-stack.md/visual-stack).
+
 ## Markup particles
 
 <sonic-code language="html">
@@ -61,7 +72,7 @@ Simulation: `param0` = speed, `param1` = mouse attraction. WebGPU compute when a
 
 ## Chaining
 
-Same MediaRef / DP bridge as the rest of the stack. No live texture bus with `sonic-shader` (separate contexts).
+Same MediaRef / DP bridge as the rest of the stack. Live textures entre composants : pont `#id` / `{ element }` (copie canvas), pas de contexte WebGPU partagé avec `sonic-shader`.
 
 ## CDN
 

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

@@ -1,6 +1,8 @@
 import { expect, describe, it, vi, beforeAll } from "vitest";
 import TestUtils from "@supersoniks/concorde/test-utils/TestUtils";
 import { buildWgslSource, DEFAULT_MAIN_IMAGE } from "./wgsl-prelude";
+import { channelTextureNeedsRecreate } from "./gpu-runtime";
+import { channelFormValue } from "./helpers";
 import "./webgpu";
 import { SonicWebGpu } from "./webgpu";
 
@@ -28,6 +30,30 @@ describe("buildWgslSource", () => {
   });
 });
 
+describe("channelTextureNeedsRecreate", () => {
+  it("recrée si absent ou taille différente", () => {
+    expect(channelTextureNeedsRecreate(null, 64, 64)).toBe(true);
+    expect(channelTextureNeedsRecreate({ width: 32, height: 64 }, 64, 64)).toBe(
+      true,
+    );
+    expect(channelTextureNeedsRecreate({ width: 64, height: 64 }, 64, 64)).toBe(
+      false,
+    );
+  });
+});
+
+describe("channelFormValue", () => {
+  it("accepte url / #id / { element }", () => {
+    expect(channelFormValue("https://x/a.png")).toBe("https://x/a.png");
+    expect(channelFormValue("#plateau")).toBe("#plateau");
+    expect(channelFormValue({ element: "#plateau" })).toBe("#plateau");
+    expect(channelFormValue({ element: "scene" })).toBe("#scene");
+    expect(channelFormValue({ url: "https://x/a.png" })).toBe(
+      "https://x/a.png",
+    );
+  });
+});
+
 describe("sonic-webgpu", () => {
   beforeAll(() => {
     if (typeof globalThis.ResizeObserver === "undefined") {
@@ -67,6 +93,7 @@ describe("sonic-webgpu", () => {
       param1: 0.22,
       channel0: { url: "https://example.test/a.png" },
       channel1: "https://example.test/b.png",
+      channel2: { element: "#plateau" },
     });
     const el = TestUtils.bootstrap(
       `<sonic-webgpu dataProvider="${id}"></sonic-webgpu>`,
@@ -78,6 +105,7 @@ describe("sonic-webgpu", () => {
     expect(el.param1).toBe(0.22);
     expect(el.channel0).toBe("https://example.test/a.png");
     expect(el.channel1).toBe("https://example.test/b.png");
+    expect(el.channel2).toBe("#plateau");
 
     pub.param0.set(0.99);
     await new Promise((r) => setTimeout(r, 0));
@@ -138,4 +166,13 @@ describe("sonic-webgpu", () => {
     expect(parseBackendPrefer("webgl2")).toBe("webgl2");
     expect(parseBackendPrefer("nope")).toBe("auto");
   });
+
+  it("expose getFrameCanvas + frameSeq (SonicFrameSource)", () => {
+    const el = TestUtils.bootstrap(
+      `<sonic-webgpu></sonic-webgpu>`,
+      true,
+    )[0] as SonicWebGpu;
+    expect(typeof el.getFrameCanvas).toBe("function");
+    expect(typeof el.frameSeq).toBe("number");
+  });
 });