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

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

@@ -3,6 +3,10 @@
 import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { PublisherManager } from "@supersoniks/concorde/utils";
+import {
+  lookupLiveElement,
+  FrameConsumerRegistry,
+} from "@supersoniks/concorde/core/utils/mediaRef";
 import { Canvas2dFallbackRuntime } from "./canvas2d-fallback";
 import { formBind } from "./form-bind";
 import { WebGl2FallbackRuntime } from "./gl-fallback";
@@ -150,6 +154,7 @@ export class SonicWebGpu extends LitElement {
   private resizeObserver: ResizeObserver | null = null;
   private intersectionObserver: IntersectionObserver | null = null;
   private rebuildToken = 0;
+  private frameConsumers = new FrameConsumerRegistry();
   ready = false;
   /** Évite deux boots concurrents (IO + rAF) qui disposent le fallback. */
   private boot: Promise<void> | null = null;
@@ -204,6 +209,7 @@ export class SonicWebGpu extends LitElement {
     this.removeEventListener("pointerenter", this.onPointerEnter);
     this.unbindFormProvider();
     this.revokeFrameUrl();
+    this.frameConsumers.clear();
     this.frameOutSeq++;
     this.frameOutBusy = false;
     this.resizeObserver?.disconnect();
@@ -404,6 +410,10 @@ export class SonicWebGpu extends LitElement {
       }
 
       this.runtime = runtime;
+      const maybeGl2 = this.runtime as unknown as {
+        setElementResolver?: (fn: (key: string) => Element | null) => void;
+      };
+      maybeGl2.setElementResolver?.((key) => this.lookupElement(key));
       const backend = runtime.backend as SonicWebGpuBackend;
       this.activeBackend = backend;
       let notice = "";
@@ -475,6 +485,21 @@ export class SonicWebGpu extends LitElement {
     return canvas;
   }
 
+  /** 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 releaseRuntime() {
     this.stopLoop();
     this.ready = false;
@@ -486,6 +511,14 @@ export class SonicWebGpu extends LitElement {
     this.canvasEl = null;
   }
 
+  /** Enregistre les producteurs live pour play-offscreen auto. */
+  private syncFrameConsumers() {
+    const keys = [this.channel0, this.channel1, this.channel2, this.channel3];
+    this.frameConsumers.sync(
+      keys.filter((k) => k.startsWith("#")).map((k) => this.lookupElement(k)),
+    );
+  }
+
   private async rebuild() {
     if (!this.runtime) return;
     const token = ++this.rebuildToken;
@@ -509,6 +542,7 @@ export class SonicWebGpu extends LitElement {
         ]);
       }
       if (token !== this.rebuildToken) return;
+      this.syncFrameConsumers();
       this.errorMessage = "";
       this.ready = true;
       this.syncSize();
@@ -589,6 +623,9 @@ export class SonicWebGpu extends LitElement {
             if (!this.startTime) this.startTime = now;
             const time = (now - this.startTime) / 1000;
             this.applyRemoteMouse();
+            if (this.runtime instanceof WebGpuRuntime) {
+              this.runtime.updateLiveChannels((key) => this.lookupElement(key));
+            }
             this.runtime.draw({
               width: w,
               height: h,
@@ -662,7 +699,8 @@ export type {
 } from "./types";
 export { parseBackendPrefer, parseKernel, WebGpuCompileError } from "./types";
 export { buildWgslSource, DEFAULT_MAIN_IMAGE } from "./wgsl-prelude";
-export { WebGpuRuntime } from "./gpu-runtime";
+export { WebGpuRuntime, channelTextureNeedsRecreate } from "./gpu-runtime";
 export { WebGl2FallbackRuntime } from "./gl-fallback";
 export { Canvas2dFallbackRuntime } from "./canvas2d-fallback";
 export { ParticlesRuntime } from "./particles-runtime";
+export { channelFormValue } from "./helpers";

package/src/core/utils/mediaRef.spec.ts

@@ -36,6 +36,31 @@ describe("isFrameSource / mediaElementKey", () => {
     expect(isFrameSource(null)).toBe(false);
   });
 
+  it("FrameConsumerRegistry register / unregister", async () => {
+    const { FrameConsumerRegistry, isFrameConsumerHost } = await import(
+      "./mediaRef"
+    );
+    const tokens: object[] = [];
+    const host = {
+      registerFrameConsumer(t: object = {}) {
+        tokens.push(t);
+      },
+      unregisterFrameConsumer(t: object = {}) {
+        const i = tokens.indexOf(t);
+        if (i >= 0) tokens.splice(i, 1);
+      },
+      getFrameCanvas: () => null,
+      frameSeq: 0,
+    };
+    expect(isFrameConsumerHost(host)).toBe(true);
+    const reg = new FrameConsumerRegistry();
+    // FrameConsumerRegistry expects Element — cast for unit test
+    reg.sync([host as unknown as Element]);
+    expect(tokens.length).toBe(1);
+    reg.clear();
+    expect(tokens.length).toBe(0);
+  });
+
   it("normalise element string / Element avec id", () => {
     expect(mediaElementKey("#plateau")).toBe("#plateau");
     expect(mediaElementKey("plateau")).toBe("#plateau");

package/src/core/utils/mediaRef.ts

@@ -29,6 +29,15 @@ export type SonicFrameSource = {
   readonly frameSeq: number;
 };
 
+/**
+ * Producteur de frames live qui peut rester actif hors viewport
+ * tant qu’un consommateur est enregistré (`sonic-3d` Lot 9).
+ */
+export type SonicFrameConsumerHost = {
+  registerFrameConsumer(token?: object): void;
+  unregisterFrameConsumer(token?: object): void;
+};
+
 export function isFrameSource(el: unknown): el is SonicFrameSource {
   if (!el || typeof el !== "object") return false;
   const o = el as SonicFrameSource;
@@ -37,6 +46,42 @@ export function isFrameSource(el: unknown): el is SonicFrameSource {
   );
 }
 
+export function isFrameConsumerHost(el: unknown): el is SonicFrameConsumerHost {
+  if (!el || typeof el !== "object") return false;
+  const o = el as SonicFrameConsumerHost;
+  return (
+    typeof o.registerFrameConsumer === "function" &&
+    typeof o.unregisterFrameConsumer === "function"
+  );
+}
+
+/** Suit les `#id` résolus → register/unregister auprès du producteur. */
+export class FrameConsumerRegistry {
+  private tokens = new Map<Element, object>();
+
+  sync(elements: Iterable<Element | null | undefined>) {
+    const next = new Set<Element>();
+    for (const el of elements) {
+      if (el && isFrameConsumerHost(el)) next.add(el);
+    }
+    for (const [el, token] of [...this.tokens]) {
+      if (next.has(el)) continue;
+      if (isFrameConsumerHost(el)) el.unregisterFrameConsumer(token);
+      this.tokens.delete(el);
+    }
+    for (const el of next) {
+      if (this.tokens.has(el)) continue;
+      const token = {};
+      (el as unknown as SonicFrameConsumerHost).registerFrameConsumer(token);
+      this.tokens.set(el, token);
+    }
+  }
+
+  clear() {
+    this.sync([]);
+  }
+}
+
 /** Clés synthétiques pour Elements DP sans `id` (`#__sonic_frame_N`). */
 const LIVE_PREFIX = "#__sonic_frame_";
 let liveSeq = 0;

package/src/docs/_misc/visual-stack.md

@@ -44,9 +44,27 @@ Also accepted: `<img>`, `<video>`, `<canvas>`, or another Concorde host that imp
 
 <docs-lit-demo for="docs-3d-shader-live-demo"></docs-lit-demo>
 
+## 3D → WebGPU live
+
+Same `#id` bridge as the shader: `sonic-webgpu channel0="#plateau-gpu"` copies the 3D canvas each `frameSeq` via `copyExternalImageToTexture` (persistent texture — no recreate when size is stable).
+
+<docs-lit-demo for="docs-3d-webgpu-live-demo"></docs-lit-demo>
+
+## Post FX + depth (in sonic-3d)
+
+Scene → offscreen color + depth → GLSL passes (`post-*`) in the same WebGL context. Use `post-image-ch1="depth"` for edge / DoF-style effects without a second component.
+
+<docs-lit-demo for="docs-3d-post-depth-demo"></docs-lit-demo>
+
 ## Harris → patches → WebGPU
 
-`sonic-shader` detects corners (Harris) and extracts patches → `channel0…3` on `sonic-webgpu` (`kernel="image"`): GPU mosaic.
+`sonic-shader` detects corners (Harris, `buffer-format="rgba16f"` + NMS 5×5 / shape filter) and extracts patches → `channel0…3` on `sonic-webgpu` (`kernel="image"`): GPU mosaic.
+
+Use `buffer-format="rgba16f"` so signed `IxIy` / non-clamped `Ix²` survive the buffer (RGBA8 zeros negatives and saturates). See [Shader — buffer precision](#core/components/functional/shader/shader.md/shader).
+
+Channel rebinds and `release-offscreen="auto"` (keep FBO state when a pass uses `self`) : [Shader — état et visibilité](#core/components/functional/shader/shader.md/shader).
+
+`sonic-3d` live sources keep playing off-screen when a `#id` consumer is registered (or `play-offscreen`) — see [3D — bridging](#core/components/functional/3d/3d.md/3d).
 
 <docs-lit-demo for="docs-harris-webgpu-demo"></docs-lit-demo>
 

package/src/docs/components/docs-demo-sources.ts

@@ -223,6 +223,22 @@ export const DOCS_LIT_DEMO_REGISTRY: Record<string, DocsLitDemoConfig> = {
       },
     ],
   },
+  "docs-3d-webgpu-live-demo": {
+    sources: [
+      {
+        path: "src/docs/example/docs-3d-webgpu-live-demo.ts",
+        label: "3D → webgpu live",
+      },
+    ],
+  },
+  "docs-3d-post-depth-demo": {
+    sources: [
+      {
+        path: "src/docs/example/docs-3d-post-depth-demo.ts",
+        label: "3D post depth edges",
+      },
+    ],
+  },
   "docs-webgpu-demo": {
     sources: [
       {
@@ -506,6 +522,18 @@ export const DOCS_DEMO_SOURCE_REGISTRY: Record<string, DocsSource[]> = {
       label: "3d → shader live",
     },
   ],
+  "docs-3d-webgpu-live-demo": [
+    {
+      path: "src/docs/example/docs-3d-webgpu-live-demo.ts",
+      label: "3d → webgpu live",
+    },
+  ],
+  "docs-3d-post-depth-demo": [
+    {
+      path: "src/docs/example/docs-3d-post-depth-demo.ts",
+      label: "3d post depth",
+    },
+  ],
   "docs-webgpu-demo": [
     { path: "src/docs/example/docs-webgpu-demo.ts", label: "webgpu demo" },
   ],

package/src/docs/docs.ts

@@ -22,6 +22,8 @@ import "./example/docs-shader-demos";
 import "./example/docs-webgpu-demo";
 import "./example/docs-visual-stack-demo";
 import "./example/docs-3d-shader-live-demo";
+import "./example/docs-3d-webgpu-live-demo";
+import "./example/docs-3d-post-depth-demo";
 import "./example/docs-harris-webgpu-demo";
 import "./example/docs-router-demos";
 import "./example/docs-submit-demos";

package/src/docs/example/docs-3d-post-depth-demo.ts

@@ -0,0 +1,68 @@
+/**
+ * Démo Lot 2 : post FX dans sonic-3d avec canal depth (contours).
+ */
+import { css, html, LitElement } from "lit";
+import { customElement } from "lit/decorators.js";
+import { tailwind } from "../tailwind";
+import "../../core/components/functional/3d/3d";
+import { DEMO_3D_STYLES, HELMET_GLB } from "./docs-3d-shared";
+
+const DEPTH_EDGE = `
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 uv = fragCoord / iResolution.xy;
+  vec2 px = 1.0 / max(iResolution.xy, vec2(1.0));
+  vec3 col = texture(iChannel0, uv).rgb;
+
+  float dC = texture(iChannel1, uv).r;
+  float dL = texture(iChannel1, uv - px * vec2(1.0, 0.0)).r;
+  float dR = texture(iChannel1, uv + px * vec2(1.0, 0.0)).r;
+  float dU = texture(iChannel1, uv + px * vec2(0.0, 1.0)).r;
+  float dD = texture(iChannel1, uv - px * vec2(0.0, 1.0)).r;
+  float edge = length(vec2(dR - dL, dU - dD));
+  edge = smoothstep(0.002 + uParam0 * 0.02, 0.02 + uParam0 * 0.05, edge);
+
+  vec3 ink = vec3(0.05, 0.95, 1.0);
+  col = mix(col, ink, edge * 0.85);
+  col *= 0.92 + 0.08 * sin(iTime * 1.5);
+  fragColor = vec4(col, 1.0);
+}
+`;
+
+@customElement("docs-3d-post-depth-demo")
+export class Docs3dPostDepthDemo extends LitElement {
+  static styles = [
+    tailwind,
+    DEMO_3D_STYLES,
+    css`
+      sonic-3d {
+        width: 100%;
+      }
+    `,
+  ];
+
+  render() {
+    return html`
+      <div class="flex flex-col gap-2">
+        <sonic-3d
+          src=${HELMET_GLB}
+          camera="orbit"
+          auto-rotate
+          play
+          pick
+          min-distance="1"
+          max-distance="10"
+          aspect-ratio="16/10"
+          post-image=${DEPTH_EDGE}
+          post-image-ch0="scene"
+          post-image-ch1="depth"
+          param0="0.55"
+        ></sonic-3d>
+        <p class="text-sm text-neutral-500">
+          Post FX interne (<code>post-image</code>) : couleur
+          <code>scene</code> + discontinuités sur <code>depth</code> — pas de
+          copie vers un second composant.
+        </p>
+      </div>
+    `;
+  }
+}

package/src/docs/example/docs-3d-webgpu-live-demo.ts

@@ -0,0 +1,83 @@
+/**
+ * Démo pont live : sonic-3d → sonic-webgpu via channel0="#plateau-gpu"
+ * (copyExternalImageToTexture chaque frameSeq, texture réutilisée).
+ */
+import { css, html, LitElement } from "lit";
+import { customElement } from "lit/decorators.js";
+import { tailwind } from "../tailwind";
+import "../../core/components/functional/3d/3d";
+import "../../core/components/functional/webgpu/webgpu";
+import { DEMO_3D_STYLES, HELMET_GLB } from "./docs-3d-shared";
+
+/** Tint + vignette — prouve le sampling live du canvas 3D. */
+const LIVE_WGSL = `
+fn mainImage(uv: vec2f, fragCoord: vec2f) -> vec4f {
+  _ = fragCoord;
+  let c = iChannel0(uv).rgb;
+  let mid = uv - vec2f(0.5);
+  let vig = smoothstep(1.1, 0.35, length(mid));
+  let pulse = 0.92 + 0.08 * sin(u.time * 2.0);
+  let tint = vec3f(0.15, 0.85, 1.0);
+  let edge = length(c - iChannel0(uv + mid * 0.012).rgb);
+  var col = mix(c, c * tint * 1.15, clamp(edge * 4.0, 0.0, 0.55));
+  col *= vig * pulse;
+  return vec4f(col, 1.0);
+}
+`;
+
+@customElement("docs-3d-webgpu-live-demo")
+export class Docs3dWebgpuLiveDemo extends LitElement {
+  static styles = [
+    tailwind,
+    DEMO_3D_STYLES,
+    css`
+      .grid {
+        display: grid;
+        gap: 0.75rem;
+        grid-template-columns: 1fr;
+      }
+      @media (min-width: 720px) {
+        .grid {
+          grid-template-columns: 1fr 1fr;
+        }
+      }
+      sonic-3d,
+      sonic-webgpu {
+        width: 100%;
+        border-radius: 0.5rem;
+        overflow: hidden;
+      }
+    `,
+  ];
+
+  render() {
+    return html`
+      <div class="flex flex-col gap-2">
+        <div class="grid">
+          <sonic-3d
+            id="plateau-gpu"
+            src=${HELMET_GLB}
+            camera="orbit"
+            auto-rotate
+            play
+            min-distance="1"
+            max-distance="10"
+            aspect-ratio="16/10"
+          ></sonic-3d>
+          <sonic-webgpu
+            play
+            kernel="image"
+            channel0="#plateau-gpu"
+            .shader=${LIVE_WGSL}
+            aspect-ratio="16/10"
+          ></sonic-webgpu>
+        </div>
+        <p class="text-sm text-neutral-500">
+          Live bridge: <code>channel0="#plateau-gpu"</code> →
+          <code>copyExternalImageToTexture</code> (texture persistante, pas de
+          JPEG). Gauche = <code>sonic-3d</code>, droite = tint / edge WebGPU.
+        </p>
+      </div>
+    `;
+  }
+}

package/src/docs/example/docs-harris-webgpu-demo.ts

@@ -17,6 +17,7 @@ const sample = (file: string) =>
   new URL(`/docs/shader-samples/${file}`, location.origin).href;
 
 const HARRIS_BUFFER_A = `
+// Tenseur structure (Ix², Iy², IxIy) — nécessite buffer-format=rgba16f (IxIy signé).
 void mainImage(out vec4 fragColor, in vec2 fragCoord) {
   vec2 uv = fragCoord / iResolution.xy;
   vec2 px = 1.0 / iResolution.xy;
@@ -30,11 +31,12 @@ void mainImage(out vec4 fragColor, in vec2 fragCoord) {
   float br = dot(texture(iChannel0, uv + px * vec2( 1.0, -1.0)).rgb, vec3(0.299, 0.587, 0.114));
   float Ix = (tr + 2.0 * r + br) - (tl + 2.0 * l + bl);
   float Iy = (tl + 2.0 * t + tr) - (bl + 2.0 * b + br);
-  fragColor = vec4(Ix * Ix, Iy * Iy, Ix * Iy, 1.0) * 4.0;
+  fragColor = vec4(Ix * Ix, Iy * Iy, Ix * Iy, 1.0);
 }
 `;
 
 const HARRIS_BUFFER_B = `
+// Lissage gaussien 5×5 du tenseur (σ ≈ 1.26).
 void mainImage(out vec4 fragColor, in vec2 fragCoord) {
   vec2 uv = fragCoord / iResolution.xy;
   vec2 px = 1.0 / iResolution.xy;
@@ -51,58 +53,50 @@ void mainImage(out vec4 fragColor, in vec2 fragCoord) {
 }
 `;
 
-const HARRIS_IMAGE = `
-float harrisR(vec2 uv) {
+const HARRIS_EXTRACT_MASK = `
+// Réponse Harris + filtre de forme + max local STRICT 5×5 (départage par position).
+float harrisAt(vec2 uv) {
   vec3 t = texture(iChannel0, uv).rgb;
   float k = max(uParam1, 0.001);
   float det = t.x * t.y - t.z * t.z;
   float trace = t.x + t.y;
-  return det - k * trace * trace;
+  float R = det - k * trace * trace;
+  // Forme ≈ 4 det / trace² ∈ [0,1] : ~1 coin isotropique, ~0 bord.
+  float shape = (trace > 1e-5) ? clamp(4.0 * det / (trace * trace), 0.0, 1.0) : 0.0;
+  if (R < max(uParam0, 1e-6) || shape < 0.45) return 0.0;
+  return R;
 }
 void mainImage(out vec4 fragColor, in vec2 fragCoord) {
   vec2 uv = fragCoord / iResolution.xy;
   vec2 px = 1.0 / iResolution.xy;
-  vec3 video = texture(iChannel1, uv).rgb;
-  float R = harrisR(uv);
-  float thr = max(uParam0, 0.0001);
-  float overlay = clamp(uParam2, 0.0, 1.0);
-  float Rmax = R;
-  for (int j = -1; j <= 1; j++) {
-    for (int i = -1; i <= 1; i++) {
-      Rmax = max(Rmax, harrisR(uv + px * vec2(float(i), float(j))));
+  float R = harrisAt(uv);
+  float thr = max(uParam0, 1e-6);
+  float isMax = step(thr, R);
+  for (int j = -2; j <= 2; j++) {
+    for (int i = -2; i <= 2; i++) {
+      if (i == 0 && j == 0) continue;
+      float n = harrisAt(uv + px * vec2(float(i), float(j)));
+      bool before = j < 0 || (j == 0 && i < 0);
+      if (n > R || (before && abs(n - R) < 1e-8)) isMax = 0.0;
     }
   }
-  float isCorner = step(thr, R) * step(Rmax - 1e-6, R);
-  float heat = smoothstep(thr, thr * 3.0, max(R, 0.0));
-  vec3 col = mix(video, video * vec3(1.15, 0.35, 1.05) + vec3(0.35, 0.05, 0.4) * heat, heat * overlay);
-  col = mix(col, vec3(0.15, 1.0, 0.45), isCorner * overlay);
-  fragColor = vec4(col, 1.0);
+  float Rp = max(R, 0.0);
+  float score = isMax * (Rp / (Rp + thr * 4.0));
+  fragColor = vec4(vec3(score), 1.0);
 }
 `;
 
-const HARRIS_EXTRACT_MASK = `
-float harrisR(vec2 uv) {
-  vec3 t = texture(iChannel0, uv).rgb;
-  float k = max(uParam1, 0.001);
-  float det = t.x * t.y - t.z * t.z;
-  float trace = t.x + t.y;
-  return det - k * trace * trace;
-}
+const HARRIS_IMAGE = `
 void mainImage(out vec4 fragColor, in vec2 fragCoord) {
   vec2 uv = fragCoord / iResolution.xy;
-  vec2 px = 1.0 / iResolution.xy;
-  float R = harrisR(uv);
-  float thr = max(uParam0, 0.0001);
-  float Rmax = R;
-  for (int j = -1; j <= 1; j++) {
-    for (int i = -1; i <= 1; i++) {
-      Rmax = max(Rmax, harrisR(uv + px * vec2(float(i), float(j))));
-    }
-  }
-  float isCorner = step(thr, R) * step(Rmax - 1e-6, R);
-  float Rp = max(R, 0.0);
-  float score = isCorner * (Rp / (Rp + thr * 3.0));
-  fragColor = vec4(vec3(score), 1.0);
+  vec3 video = texture(iChannel1, uv).rgb;
+  float score = texture(iChannel0, uv).r;
+  float overlay = clamp(uParam2, 0.0, 1.0);
+  float heat = smoothstep(0.05, 0.55, score);
+  vec3 col = mix(video, video * vec3(1.12, 0.4, 1.05) + vec3(0.28, 0.04, 0.35) * heat, heat * overlay * 0.55);
+  // Points isolés (pas de traînées de bords).
+  col = mix(col, vec3(0.12, 1.0, 0.42), step(0.08, score) * overlay);
+  fragColor = vec4(col, 1.0);
 }
 `;
 
@@ -285,9 +279,9 @@ export class DocsHarrisWebgpuDemo extends LitElement {
     if (this.active) return;
     this.active = true;
     set(shaderKey, {
-      param0: 0.08,
-      param1: 0.1,
-      param2: 0.85,
+      param0: 0.015,
+      param1: 0.05,
+      param2: 0.9,
       extractCount: 0,
       extractSeq: 0,
       extracts: [],
@@ -299,7 +293,7 @@ export class DocsHarrisWebgpuDemo extends LitElement {
         .map((it) => it.blobUrl || it.url)
         .filter((u): u is string => typeof u === "string" && u.length > 0)
         .slice(0, 4);
-      this.patches = items.slice(0, 4);
+      this.patches = items.slice(0, 8);
       set(gpuKey, {
         param0: 0.55,
         param1: Math.max(1, urls.length),
@@ -331,7 +325,7 @@ export class DocsHarrisWebgpuDemo extends LitElement {
       .map((it) => it.blobUrl || it.url)
       .filter((u): u is string => typeof u === "string" && u.length > 0)
       .slice(0, 4);
-    this.patches = items.slice(0, 4);
+    this.patches = items.slice(0, 8);
     set(gpuKey, {
       param0: 0.55,
       param1: Math.max(1, urls.length),
@@ -355,8 +349,8 @@ export class DocsHarrisWebgpuDemo extends LitElement {
             <span class="text-neutral-400">(mosaïque)</span>
           </div>
           <p class="m-0 text-sm text-neutral-600">
-            Vidéo → coins Harris → crops → collage GPU (channels + diff entre
-            patches). Une seule démo, deux bandes empilées.
+            Vidéo → Harris (<code>rgba16f</code>, NMS 5×5 + filtre forme) →
+            crops → collage GPU. Coins isolés, pas de traînées sur les bords.
           </p>
           <sonic-button type="primary" size="sm" @click=${this.start}
             >Try</sonic-button
@@ -388,8 +382,8 @@ export class DocsHarrisWebgpuDemo extends LitElement {
               type="range"
               name="param0"
               min="0.002"
-              max="0.08"
-              step="0.002"
+              max="0.06"
+              step="0.001"
               class="flex-1"
             ></sonic-input>
           </div>
@@ -399,7 +393,7 @@ export class DocsHarrisWebgpuDemo extends LitElement {
               type="range"
               name="param1"
               min="0.02"
-              max="0.1"
+              max="0.12"
               step="0.005"
               class="flex-1"
             ></sonic-input>
@@ -409,19 +403,21 @@ export class DocsHarrisWebgpuDemo extends LitElement {
         <div class="stack">
           <div class="label-bar">
             <span
-              ><code>sonic-shader</code> Harris + extract-bitmaps</span
+              ><code>sonic-shader</code> Harris
+              <code>rgba16f</code> + extract</span
             >
-            <span class="text-neutral-400">coins → peaks</span>
+            <span class="text-neutral-400">coins isolés → peaks</span>
           </div>
           <sonic-shader
             play
+            buffer-format="rgba16f"
             .mouse=${false}
             extract
             extract-bitmaps
             extract-mask="buffer-c"
             extract-source="image"
-            extract-threshold="0.12"
-            extract-max="4"
+            extract-threshold="0.08"
+            extract-max="8"
             extract-patch="56"
             extract-interval="400"
             extract-data-provider=${shaderKey.path}
@@ -430,7 +426,7 @@ export class DocsHarrisWebgpuDemo extends LitElement {
             buffer-a-ch0=${video}
             buffer-b-ch0="buffer-a"
             buffer-c-ch0="buffer-b"
-            image-ch0="buffer-b"
+            image-ch0="buffer-c"
             image-ch1=${video}
             .bufferA=${HARRIS_BUFFER_A}
             .bufferB=${HARRIS_BUFFER_B}
@@ -473,8 +469,10 @@ export class DocsHarrisWebgpuDemo extends LitElement {
         </div>
 
         <p class="m-0 text-xs text-neutral-500">
-          Extract → DP → <code>channel0…3</code>. Le WGSL compare chaque case à
-          son voisin (diff RGB) pour un effet correspondence léger.
+          <code>buffer-format="rgba16f"</code> conserve
+          <code>IxIy</code> signé ; NMS 5×5 + forme
+          <code>4·det/trace²</code> → points isolés. Extract → DP →
+          <code>channel0…3</code>.
         </p>
       </div>
     `;