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

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

@@ -1,83 +0,0 @@
-# Visual stack
-
-Examples of chaining opt-in addons (HF, shader, WebGPU, 3D). Outside the main “functional” flow.
-
-## HF depth → parallax
-
-Photo → `sonic-hugging-face-infer` (depth) → `sonic-shader` (parallax) → extract → `sonic-jsonata` (stats / thresholds).
-
-### Golden rule
-
-| Path | Role |
-|------|------|
-| **Hot** (textures / uniforms) | Direct DP: photo + depth → `fx` → shader (`param0` via form) |
-| **Cold** (aggregates) | `sonic-jsonata` **after** extract — counts, averages, suggested thresholds |
-
-Do not pipe texture channels through jsonata on every frame / slider: that forces rebuilds. JSONata is for **scalar derivatives**, not the media bus.
-
-### Pipeline
-
-```text
-photo (sample)
-    → sonic-hugging-face-infer depth (trigger=demand)
-    → set fx { bufferACh0, imageCh1, param0 }   ← direct wiring
-    → sonic-shader parallax + extract
-    → sonic-jsonata → { count, avgScore, strong, suggestedThreshold }
-```
-
-### Demo
-
-<docs-lit-demo for="docs-visual-stack-demo"></docs-lit-demo>
-
-## 3D → shader live (GPU bridge)
-
-`sonic-3d` and `sonic-shader` keep separate WebGL contexts. For realtime post, point a channel at the 3D host with `#id` — the shader copies the canvas each frame (`texImage2D`), no JPEG.
-
-```html
-<sonic-3d id="plateau" play auto-rotate …></sonic-3d>
-<sonic-shader channel0="#plateau" image="…" play></sonic-shader>
-```
-
-Also accepted: `<img>`, `<video>`, `<canvas>`, or another Concorde host that implements `SonicFrameSource` (`getFrameCanvas` + `frameSeq`). DP form: `{ element: "#plateau" }` or `{ element: el }`.
-
-`frame-out` (JPEG ObjectURL) remains for export / HF / freeze — not for live post.
-
-<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, `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>
-
-## Components
-
-| Step | Doc |
-|------|-----|
-| Depth | [Hugging Face infer](#core/components/functional/infer/hugging-face/hugging-face-infer.md/hugging-face-infer) |
-| FX + extract | [Shader](#core/components/functional/shader/shader.md/shader) |
-| 3D viewer | [3D](#core/components/functional/3d/3d.md/3d) |
-| Compute / mosaic | [WebGPU](#core/components/functional/webgpu/webgpu.md/webgpu) |
-| Stats / thresholds | [Jsonata](#core/components/functional/jsonata/jsonata.md/jsonata) |
-
-## Media contract
-
-`SonicMediaRef` / `SonicFrameSource` / `toMediaUrl` / `cloneMediaRef` — `@supersoniks/concorde/core/utils/mediaRef`.

package/src/docs/example/docs-3d-demos.ts

@@ -1,8 +0,0 @@
-/** Barrel des démos docs `sonic-3d`. */
-import "./docs-3d-orbit";
-import "./docs-3d-out";
-import "./docs-3d-form";
-
-export { Docs3dOrbitDemo } from "./docs-3d-orbit";
-export { Docs3dOutDemo } from "./docs-3d-out";
-export { Docs3dFormDemo } from "./docs-3d-form";

package/src/docs/example/docs-3d-form.ts

@@ -1,95 +0,0 @@
-import { html, LitElement } from "lit";
-import { customElement } from "lit/decorators.js";
-import { tailwind } from "../tailwind";
-import { DataProviderKey } from "@supersoniks/concorde/dataProviderKey";
-import { set } from "@supersoniks/concorde/utils";
-import "../../core/components/functional/3d/3d";
-import "../../core/components/ui/form/input/input";
-import "../../core/components/ui/form/checkbox/checkbox";
-import { DEMO_3D_STYLES, HELMET_GLB } from "./docs-3d-shared";
-
-/** Entrées form uniquement. */
-const formKey = new DataProviderKey<{
-  exposure: number;
-  fov: number;
-  minDistance: number;
-  maxDistance: number;
-  autoRotate: string | boolean | null;
-}>("docs3dForm");
-
-/**
- * Auto-bind form → viewer (exposure / fov / autoRotate).
- */
-@customElement("docs-3d-form-demo")
-export class Docs3dFormDemo extends LitElement {
-  static styles = [tailwind, DEMO_3D_STYLES];
-
-  connectedCallback(): void {
-    super.connectedCallback();
-    set(formKey, {
-      exposure: 1,
-      fov: 45,
-      minDistance: 1,
-      maxDistance: 8,
-      autoRotate: "true",
-    });
-  }
-
-  render() {
-    return html`
-      <div class="flex flex-col gap-3" formDataProvider=${formKey.path}>
-        <div class="grid grid-cols-2 gap-3 sm:grid-cols-3 max-w-2xl">
-          <sonic-input
-            name="exposure"
-            type="number"
-            label="Exposure"
-            step="0.1"
-          ></sonic-input>
-          <sonic-input
-            name="fov"
-            type="number"
-            label="FOV"
-            step="1"
-          ></sonic-input>
-          <sonic-input
-            name="minDistance"
-            type="number"
-            label="Min distance"
-            step="0.1"
-          ></sonic-input>
-          <sonic-input
-            name="maxDistance"
-            type="number"
-            label="Max distance"
-            step="0.5"
-          ></sonic-input>
-          <div class="flex items-end pb-2">
-            <sonic-checkbox
-              name="autoRotate"
-              unique
-              checked
-              value="true"
-              label="Auto-rotate"
-            ></sonic-checkbox>
-          </div>
-        </div>
-
-        <sonic-3d
-          src=${HELMET_GLB}
-          camera="orbit"
-          pick
-          play
-          dataProvider=${formKey.path}
-          out-data-provider="docs3dFormOut"
-          aspect-ratio="16/10"
-        ></sonic-3d>
-
-        <p class="text-sm text-neutral-500">
-          Form → viewer : <code>exposure</code>, <code>fov</code>,
-          <code>minDistance</code>, <code>maxDistance</code>,
-          <code>autoRotate</code>. Zoom molette borné par min/max.
-        </p>
-      </div>
-    `;
-  }
-}

package/src/docs/example/docs-3d-orbit.ts

@@ -1,44 +0,0 @@
-import { html, LitElement } from "lit";
-import { customElement, state } from "lit/decorators.js";
-import { tailwind } from "../tailwind";
-import "../../core/components/functional/3d/3d";
-import { DEMO_3D_STYLES, HELMET_GLB } from "./docs-3d-shared";
-
-@customElement("docs-3d-orbit-demo")
-export class Docs3dOrbitDemo extends LitElement {
-  static styles = [tailwind, DEMO_3D_STYLES];
-
-  @state() private hit = "";
-
-  private onPick = (e: Event) => {
-    const detail = (e as CustomEvent<{ objectId: string }>).detail;
-    this.hit = detail?.objectId ?? "";
-  };
-
-  render() {
-    return html`
-      <div class="flex flex-col gap-2">
-        <sonic-3d
-          src=${HELMET_GLB}
-          camera="orbit"
-          auto-rotate
-          pick
-          play
-          min-distance="1"
-          max-distance="10"
-          min-polar="10"
-          max-polar="170"
-          aspect-ratio="16/10"
-          @pick=${this.onPick}
-        ></sonic-3d>
-        <p class="text-sm text-neutral-500">
-          DamagedHelmet (CDN) — glisser = orbiter · molette = zoom · clic droit =
-          pan · survol = highlight · double-clic = recentrer
-          ${this.hit
-            ? html` · pick: <code>${this.hit}</code>`
-            : null}
-        </p>
-      </div>
-    `;
-  }
-}

package/src/docs/example/docs-3d-out.ts

@@ -1,56 +0,0 @@
-import { html, LitElement } from "lit";
-import { customElement } from "lit/decorators.js";
-import { tailwind } from "../tailwind";
-import { DataProviderKey } from "@supersoniks/concorde/dataProviderKey";
-import "../../core/components/functional/3d/3d";
-import "../../core/components/functional/value/value";
-import { DEMO_3D_STYLES, HELMET_GLB } from "./docs-3d-shared";
-
-/** Sorties télémétrie (séparé du form). */
-const outKey = new DataProviderKey("docs3dOut");
-
-@customElement("docs-3d-out-demo")
-export class Docs3dOutDemo extends LitElement {
-  static styles = [tailwind, DEMO_3D_STYLES];
-
-  render() {
-    return html`
-      <div class="flex flex-col gap-2">
-        <sonic-3d
-          src=${HELMET_GLB}
-          camera="orbit"
-          auto-rotate
-          play
-          pick
-          out-data-provider=${outKey.path}
-          aspect-ratio="16/10"
-        ></sonic-3d>
-        <div class="flex flex-wrap gap-4 text-sm tabular-nums text-neutral-600">
-          <span>
-            ready:
-            <sonic-value dataProvider=${outKey.path} key="ready"></sonic-value>
-          </span>
-          <span>
-            distance:
-            <sonic-value
-              dataProvider=${outKey.path}
-              key="distance"
-            ></sonic-value>
-          </span>
-          <span>
-            yaw:
-            <sonic-value dataProvider=${outKey.path} key="yaw"></sonic-value>
-          </span>
-          <span>
-            frame:
-            <sonic-value dataProvider=${outKey.path} key="frame"></sonic-value>
-          </span>
-        </div>
-        <p class="text-sm text-neutral-500">
-          Sorties → <code>out-data-provider</code> via
-          <code>sonic-value key="…"</code> (pas <code>name</code>).
-        </p>
-      </div>
-    `;
-  }
-}

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

@@ -1,68 +0,0 @@
-/**
- * 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-shader-live-demo.ts

@@ -1,98 +0,0 @@
-/**
- * Démo pont live : sonic-3d → sonic-shader via channel0="#plateau"
- * (copie canvas chaque frame, sans JPEG frame-out).
- */
-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/shader/shader";
-import { DEMO_3D_STYLES, HELMET_GLB } from "./docs-3d-shared";
-
-/** Aberration chromatique + bords neon — bien visible vs le 3d brut. */
-const LIVE_POST = `
-void mainImage(out vec4 fragColor, in vec2 fragCoord) {
-  vec2 uv = fragCoord / iResolution.xy;
-  vec2 c = uv - 0.5;
-  float aber = 0.004 + clamp(uParam0, 0.0, 1.0) * 0.028;
-  aber *= 1.0 + 0.35 * sin(iTime * 2.2);
-
-  float r = texture(iChannel0, uv + c * aber).r;
-  float g = texture(iChannel0, uv).g;
-  float b = texture(iChannel0, uv - c * aber).b;
-  vec3 col = vec3(r, g, b);
-
-  // Contours sobel légers (luma)
-  vec2 px = 1.0 / max(iResolution.xy, vec2(1.0));
-  float tl = dot(texture(iChannel0, uv + px * vec2(-1.0,  1.0)).rgb, vec3(0.299, 0.587, 0.114));
-  float tr = dot(texture(iChannel0, uv + px * vec2( 1.0,  1.0)).rgb, vec3(0.299, 0.587, 0.114));
-  float bl = dot(texture(iChannel0, uv + px * vec2(-1.0, -1.0)).rgb, vec3(0.299, 0.587, 0.114));
-  float br = dot(texture(iChannel0, uv + px * vec2( 1.0, -1.0)).rgb, vec3(0.299, 0.587, 0.114));
-  float edge = length(vec2(tr + br - tl - bl, tl + tr - bl - br));
-  col += vec3(0.15, 0.85, 1.0) * smoothstep(0.08, 0.45, edge);
-
-  // Scanlines + vignette
-  col *= 0.88 + 0.12 * sin(uv.y * iResolution.y * 1.2);
-  float vig = smoothstep(1.15, 0.35, length(c));
-  col *= vig;
-
-  fragColor = vec4(col, 1.0);
-}
-`;
-
-@customElement("docs-3d-shader-live-demo")
-export class Docs3dShaderLiveDemo 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-shader {
-        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"
-            src=${HELMET_GLB}
-            camera="orbit"
-            auto-rotate
-            play
-            min-distance="1"
-            max-distance="10"
-            aspect-ratio="16/10"
-          ></sonic-3d>
-          <sonic-shader
-            play
-            channel0="#plateau"
-            image=${LIVE_POST}
-            param0="0.7"
-            aspect-ratio="16/10"
-          ></sonic-shader>
-        </div>
-        <p class="text-sm text-neutral-500">
-          Live bridge: <code>channel0="#plateau"</code> (no JPEG). Left = raw
-          <code>sonic-3d</code>, right = chromatic aberration + neon edges +
-          scanlines. Slider-ready via <code>param0</code> (aberration strength).
-        </p>
-      </div>
-    `;
-  }
-}

package/src/docs/example/docs-3d-shared.ts

@@ -1,15 +0,0 @@
-import { css } from "lit";
-
-/**
- * DamagedHelmet — Khronos Sample Assets (CC BY 4.0 / CC BY-NC original).
- * Servi via jsDelivr (CDN).
- */
-export const HELMET_GLB =
-  "https://cdn.jsdelivr.net/gh/KhronosGroup/glTF-Sample-Assets@main/Models/DamagedHelmet/glTF-Binary/DamagedHelmet.glb";
-
-export const DEMO_3D_STYLES = css`
-  sonic-3d {
-    border-radius: 0.5rem;
-    --sonic-3d-ar: 16 / 10;
-  }
-`;

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

@@ -1,83 +0,0 @@
-/**
- * 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>
-    `;
-  }
-}