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

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

@@ -2,7 +2,10 @@ import { describe, expect, it, vi, beforeEach } from "vitest";
 import {
   attachMediaUrls,
   cloneMediaRef,
+  isFrameSource,
   isMediaBlobObject,
+  mediaElementKey,
+  registerLiveElement,
   revokeMediaUrls,
   toMediaUrl,
 } from "./mediaRef";
@@ -15,6 +18,39 @@ describe("toMediaUrl", () => {
     expect(toMediaUrl(null)).toBeNull();
     expect(toMediaUrl({ blob: new Blob() })).toBeNull();
   });
+
+  it("ignore element (pas d’URL)", () => {
+    expect(toMediaUrl({ element: "#plateau" })).toBeNull();
+  });
+});
+
+describe("isFrameSource / mediaElementKey", () => {
+  it("détecte SonicFrameSource", () => {
+    expect(
+      isFrameSource({
+        getFrameCanvas: () => null,
+        frameSeq: 0,
+      }),
+    ).toBe(true);
+    expect(isFrameSource({})).toBe(false);
+    expect(isFrameSource(null)).toBe(false);
+  });
+
+  it("normalise element string / Element avec id", () => {
+    expect(mediaElementKey("#plateau")).toBe("#plateau");
+    expect(mediaElementKey("plateau")).toBe("#plateau");
+    expect(mediaElementKey("")).toBeNull();
+    const el = document.createElement("div");
+    el.id = "scene";
+    expect(mediaElementKey(el)).toBe("#scene");
+  });
+
+  it("enregistre un Element sans id", () => {
+    const el = document.createElement("div");
+    const key = registerLiveElement(el);
+    expect(key.startsWith("#__sonic_frame_")).toBe(true);
+    expect(mediaElementKey(el)).toBe(key);
+  });
 });
 
 describe("attachMediaUrls / revokeMediaUrls", () => {

package/src/core/utils/mediaRef.ts

@@ -4,6 +4,7 @@
  * - `url` : http(s) | blob: | data: (préféré pour les canaux shader)
  * - `blob` : binaire (HF, upload) — le producteur publie aussi `url` quand possible
  * - `blobUrl` : alias historique (extract shader)
+ * - `element` : sélecteur `#id` ou Element (pont live → canaux shader, ignoré par toMediaUrl)
  */
 
 export type SonicMediaRef = {
@@ -13,8 +14,70 @@ export type SonicMediaRef = {
   width?: number;
   height?: number;
   mime?: string;
+  /** Sélecteur `#id` ou référence Element (upload live, pas d’URL). */
+  element?: string | Element;
 };
 
+/**
+ * Contrat minimal pour qu’un composant Concorde alimente un canal shader
+ * sans JPEG / blob (`channel0="#plateau"` ou `{ element }`).
+ */
+export type SonicFrameSource = {
+  /** Canvas lisible (preserveDrawingBuffer ou 2D). `null` tant que pas prêt. */
+  getFrameCanvas(): HTMLCanvasElement | null;
+  /** Incrémenté après chaque rendu effectif. */
+  readonly frameSeq: number;
+};
+
+export function isFrameSource(el: unknown): el is SonicFrameSource {
+  if (!el || typeof el !== "object") return false;
+  const o = el as SonicFrameSource;
+  return (
+    typeof o.getFrameCanvas === "function" && typeof o.frameSeq === "number"
+  );
+}
+
+/** Clés synthétiques pour Elements DP sans `id` (`#__sonic_frame_N`). */
+const LIVE_PREFIX = "#__sonic_frame_";
+let liveSeq = 0;
+const liveByKey = new Map<string, Element>();
+const keyByLive = new WeakMap<Element, string>();
+
+/** Enregistre un Element sans id → clé `#__sonic_frame_N` (réutilisée). */
+export function registerLiveElement(el: Element): string {
+  const existing = keyByLive.get(el);
+  if (existing) return existing;
+  const key = `${LIVE_PREFIX}${++liveSeq}`;
+  liveByKey.set(key, el);
+  keyByLive.set(el, key);
+  return key;
+}
+
+export function lookupLiveElement(key: string): Element | null {
+  if (!key.startsWith(LIVE_PREFIX)) return null;
+  const el = liveByKey.get(key) ?? null;
+  if (el && !el.isConnected) {
+    liveByKey.delete(key);
+    return null;
+  }
+  return el;
+}
+
+/** Normalise `element` DP → clé canal (`#id` ou live). */
+export function mediaElementKey(value: unknown): string | null {
+  if (value == null) return null;
+  if (typeof value === "string") {
+    const s = value.trim();
+    if (!s) return null;
+    return s.startsWith("#") ? s : `#${s}`;
+  }
+  if (typeof Element !== "undefined" && value instanceof Element) {
+    if (value.id) return `#${value.id}`;
+    return registerLiveElement(value);
+  }
+  return null;
+}
+
 /** Objet image sérialisé (sortie HF / extract) : Blob + dimensions. */
 export function isMediaBlobObject(
   value: unknown,

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

@@ -1,6 +1,6 @@
 # Visual stack
 
-Examples of chaining opt-in addons (HF, shader, WebGPU). Outside the main “functional” flow.
+Examples of chaining opt-in addons (HF, shader, WebGPU, 3D). Outside the main “functional” flow.
 
 ## HF depth → parallax
 
@@ -29,6 +29,21 @@ photo (sample)
 
 <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>
+
 ## Harris → patches → WebGPU
 
 `sonic-shader` detects corners (Harris) and extracts patches → `channel0…3` on `sonic-webgpu` (`kernel="image"`): GPU mosaic.
@@ -41,9 +56,10 @@ photo (sample)
 |------|-----|
 | 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` / `toMediaUrl` / `cloneMediaRef` — `@supersoniks/concorde/core/utils/mediaRef`.
+`SonicMediaRef` / `SonicFrameSource` / `toMediaUrl` / `cloneMediaRef` — `@supersoniks/concorde/core/utils/mediaRef`.

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

@@ -215,6 +215,14 @@ export const DOCS_LIT_DEMO_REGISTRY: Record<string, DocsLitDemoConfig> = {
       },
     ],
   },
+  "docs-3d-shader-live-demo": {
+    sources: [
+      {
+        path: "src/docs/example/docs-3d-shader-live-demo.ts",
+        label: "3D → shader live",
+      },
+    ],
+  },
   "docs-webgpu-demo": {
     sources: [
       {
@@ -492,6 +500,12 @@ export const DOCS_DEMO_SOURCE_REGISTRY: Record<string, DocsSource[]> = {
   "docs-visual-stack-demo": [
     { path: "src/docs/example/docs-visual-stack-demo.ts", label: "visual stack" },
   ],
+  "docs-3d-shader-live-demo": [
+    {
+      path: "src/docs/example/docs-3d-shader-live-demo.ts",
+      label: "3d → shader live",
+    },
+  ],
   "docs-webgpu-demo": [
     { path: "src/docs/example/docs-webgpu-demo.ts", label: "webgpu demo" },
   ],

package/src/docs/docs.ts

@@ -21,6 +21,7 @@ import "./example/docs-hugging-face-demos";
 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-harris-webgpu-demo";
 import "./example/docs-router-demos";
 import "./example/docs-submit-demos";

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

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