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

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>
     `;