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

package/src/core/components/functional/3d/playback.ts

@@ -8,10 +8,21 @@ export type PlaybackHost = {
   playOnHover: boolean;
   hovering: boolean;
   autoRotate: boolean;
+  playOffscreen: boolean;
+  /** Nombre de consommateurs live (`registerFrameConsumer`). */
+  frameConsumerCount: number;
   raf: number;
   drawFrame: (now: number) => void;
 };
 
+/** Hors écran : jouer si `play-offscreen` ou au moins un consommateur live. */
+export function wantsOffscreenPlay(host: {
+  playOffscreen: boolean;
+  frameConsumerCount: number;
+}): boolean {
+  return !!host.playOffscreen || host.frameConsumerCount > 0;
+}
+
 function prefersReducedMotion(): boolean {
   return (
     typeof matchMedia === "function" &&
@@ -22,7 +33,7 @@ function prefersReducedMotion(): boolean {
 function shouldAnimate(host: PlaybackHost): boolean {
   if (!host.play) return false;
   if (!host.ready) return false;
-  if (!host.inView) return false;
+  if (!host.inView && !wantsOffscreenPlay(host)) return false;
   if (!host.runtime) return false;
   if (prefersReducedMotion()) return false;
   if (host.playOnHover) return host.hovering;
@@ -64,6 +75,7 @@ function syncPlayback(host: PlaybackHost, loop: () => void) {
 export const playback = {
   prefersReducedMotion,
   shouldAnimate,
+  wantsOffscreenPlay,
   syncAutoRotate,
   syncPlayback,
   stopLoop,

package/src/core/components/functional/3d/post-bind.ts

@@ -0,0 +1,262 @@
+/**
+ * Construit la config PostFx depuis les props Lit / form DP.
+ */
+import { lookupLiveElement } from "@supersoniks/concorde/core/utils/mediaRef";
+import {
+  clampPostScale,
+  parsePostChannelSource,
+  type PostChannels,
+  type PostPassId,
+  type PostSources,
+} from "./post-channels";
+import type { PostFxConfig } from "./post-fx";
+import type { SceneRuntime } from "./runtime";
+
+export type PostBindHost = {
+  postImage: string;
+  postBufferA: string;
+  postBufferB: string;
+  postBufferC: string;
+  postBufferD: string;
+  postCommon: string;
+  postImageCh0: string;
+  postImageCh1: string;
+  postImageCh2: string;
+  postImageCh3: string;
+  postBufferACh0: string;
+  postBufferACh1: string;
+  postBufferACh2: string;
+  postBufferACh3: string;
+  postBufferBCh0: string;
+  postBufferBCh1: string;
+  postBufferBCh2: string;
+  postBufferBCh3: string;
+  postBufferCCh0: string;
+  postBufferCCh1: string;
+  postBufferCCh2: string;
+  postBufferCCh3: string;
+  postBufferDCh0: string;
+  postBufferDCh1: string;
+  postBufferDCh2: string;
+  postBufferDCh3: string;
+  postScale: number;
+  param0: number;
+  param1: number;
+  param2: number;
+  param3: number;
+  runtime: SceneRuntime | null;
+  errorMessage: string;
+  getRootNode: () => Node;
+  dispatchEvent: (event: Event) => boolean;
+};
+
+const POST_PROP_KEYS = [
+  "postImage",
+  "postBufferA",
+  "postBufferB",
+  "postBufferC",
+  "postBufferD",
+  "postCommon",
+  "postImageCh0",
+  "postImageCh1",
+  "postImageCh2",
+  "postImageCh3",
+  "postBufferACh0",
+  "postBufferACh1",
+  "postBufferACh2",
+  "postBufferACh3",
+  "postBufferBCh0",
+  "postBufferBCh1",
+  "postBufferBCh2",
+  "postBufferBCh3",
+  "postBufferCCh0",
+  "postBufferCCh1",
+  "postBufferCCh2",
+  "postBufferCCh3",
+  "postBufferDCh0",
+  "postBufferDCh1",
+  "postBufferDCh2",
+  "postBufferDCh3",
+  "postScale",
+] as const;
+
+function buildChannels(host: PostBindHost, pass: PostPassId): PostChannels {
+  const fallbacks = ["", "", "", ""];
+  // image defaults ch0=scene via parse empty+slot0
+  let overrides: string[] = ["", "", "", ""];
+  if (pass === "image") {
+    overrides = [
+      host.postImageCh0,
+      host.postImageCh1,
+      host.postImageCh2,
+      host.postImageCh3,
+    ];
+  } else if (pass === "bufferA") {
+    overrides = [
+      host.postBufferACh0,
+      host.postBufferACh1,
+      host.postBufferACh2,
+      host.postBufferACh3,
+    ];
+  } else if (pass === "bufferB") {
+    overrides = [
+      host.postBufferBCh0,
+      host.postBufferBCh1,
+      host.postBufferBCh2,
+      host.postBufferBCh3,
+    ];
+  } else if (pass === "bufferC") {
+    overrides = [
+      host.postBufferCCh0,
+      host.postBufferCCh1,
+      host.postBufferCCh2,
+      host.postBufferCCh3,
+    ];
+  } else {
+    overrides = [
+      host.postBufferDCh0,
+      host.postBufferDCh1,
+      host.postBufferDCh2,
+      host.postBufferDCh3,
+    ];
+  }
+  return [0, 1, 2, 3].map((i) =>
+    parsePostChannelSource(
+      overrides[i],
+      fallbacks[i],
+      i as 0 | 1 | 2 | 3,
+    ),
+  ) as PostChannels;
+}
+
+function buildConfig(host: PostBindHost): PostFxConfig | null {
+  if (!host.postImage.trim()) return null;
+  const sources: PostSources = {
+    common: host.postCommon,
+    image: host.postImage,
+    bufferA: host.postBufferA,
+    bufferB: host.postBufferB,
+    bufferC: host.postBufferC,
+    bufferD: host.postBufferD,
+  };
+  const channels = new Map<PostPassId, PostChannels>();
+  for (const pass of [
+    "bufferA",
+    "bufferB",
+    "bufferC",
+    "bufferD",
+    "image",
+  ] as PostPassId[]) {
+    channels.set(pass, buildChannels(host, pass));
+  }
+  return {
+    sources,
+    channels,
+    scale: clampPostScale(host.postScale),
+  };
+}
+
+function lookupElement(host: PostBindHost, 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 = host.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;
+}
+
+function applyConfig(host: PostBindHost) {
+  if (!host.runtime) return;
+  host.runtime.setPostElementResolver((key) => lookupElement(host, key));
+  try {
+    host.runtime.setPostConfig(buildConfig(host));
+    if (host.errorMessage.startsWith("Post FX")) host.errorMessage = "";
+  } catch (err) {
+    const message = err instanceof Error ? err.message : String(err);
+    host.errorMessage = `Post FX: ${message}`;
+    const pass =
+      err && typeof err === "object" && "pass" in err
+        ? String((err as { pass: string }).pass)
+        : "image";
+    const infoLog =
+      err && typeof err === "object" && "infoLog" in err
+        ? String((err as { infoLog: string }).infoLog)
+        : "";
+    host.dispatchEvent(
+      new CustomEvent("error", {
+        detail: { message, pass, infoLog },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+    try {
+      host.runtime.setPostConfig(null);
+    } catch {
+      /* ignore */
+    }
+  }
+}
+
+function syncFrame(
+  host: PostBindHost,
+  time: number,
+  timeDelta: number,
+  frame: number,
+  mouse: [number, number, number, number] = [0, 0, 0, 0],
+) {
+  host.runtime?.setPostFrame({
+    time,
+    timeDelta,
+    frame,
+    mouse,
+    params: [host.param0, host.param1, host.param2, host.param3],
+  });
+}
+
+function propsChanged(
+  changed: Map<string | number | symbol, unknown>,
+): boolean {
+  return POST_PROP_KEYS.some((k) => changed.has(k));
+}
+
+/** Applique param0…3 + post* depuis un DP form. */
+function applyFormPost(host: PostBindHost, data: Record<string, unknown>) {
+  let touched = false;
+  for (const k of ["param0", "param1", "param2", "param3"] as const) {
+    if (k in data && typeof data[k] === "number") {
+      host[k] = data[k] as number;
+      touched = true;
+    } else if (k in data && typeof data[k] === "string") {
+      const n = Number(data[k]);
+      if (Number.isFinite(n)) {
+        host[k] = n;
+        touched = true;
+      }
+    }
+  }
+  for (const k of POST_PROP_KEYS) {
+    if (!(k in data)) continue;
+    const v = data[k];
+    if (k === "postScale" && (typeof v === "number" || typeof v === "string")) {
+      host.postScale = clampPostScale(Number(v));
+      touched = true;
+    } else if (typeof v === "string") {
+      (host as unknown as Record<string, string>)[k] = v;
+      touched = true;
+    }
+  }
+  if (touched) applyConfig(host);
+}
+
+export const postBind = {
+  applyConfig,
+  syncFrame,
+  propsChanged,
+  applyFormPost,
+  POST_PROP_KEYS,
+} as const;

package/src/core/components/functional/3d/post-channels.spec.ts

@@ -0,0 +1,36 @@
+import { describe, expect, it } from "vitest";
+import {
+  clampPostScale,
+  parsePostChannelSource,
+} from "./post-channels";
+
+describe("parsePostChannelSource", () => {
+  it("défaut ch0 = scene", () => {
+    expect(parsePostChannelSource("", "", 0)).toEqual({ kind: "scene" });
+    expect(parsePostChannelSource("", "", 1)).toEqual({ kind: "none" });
+  });
+
+  it("depth / buffers / url / #id", () => {
+    expect(parsePostChannelSource("depth", "", 0)).toEqual({ kind: "depth" });
+    expect(parsePostChannelSource("buffer-a", "", 0)).toEqual({
+      kind: "buffer",
+      buffer: "bufferA",
+    });
+    expect(parsePostChannelSource("/tex.png", "", 0)).toEqual({
+      kind: "url",
+      url: "/tex.png",
+    });
+    expect(parsePostChannelSource("#ref", "", 0)).toEqual({
+      kind: "element",
+      key: "#ref",
+    });
+  });
+});
+
+describe("clampPostScale", () => {
+  it("borne 0.25–1", () => {
+    expect(clampPostScale(2)).toBe(1);
+    expect(clampPostScale(0.1)).toBe(0.25);
+    expect(clampPostScale(0.5)).toBe(0.5);
+  });
+});

package/src/core/components/functional/3d/post-channels.ts

@@ -0,0 +1,69 @@
+/**
+ * Routage des canaux post-* (sonic-3d) : scene | depth | buffers | url | #id.
+ */
+
+export type PostPassId =
+  | "image"
+  | "bufferA"
+  | "bufferB"
+  | "bufferC"
+  | "bufferD";
+
+export type PostChannelSource =
+  | { kind: "scene" }
+  | { kind: "depth" }
+  | { kind: "buffer"; buffer: Exclude<PostPassId, "image"> }
+  | { kind: "self" }
+  | { kind: "none" }
+  | { kind: "url"; url: string }
+  | { kind: "element"; key: string };
+
+export type PostChannels = [
+  PostChannelSource,
+  PostChannelSource,
+  PostChannelSource,
+  PostChannelSource,
+];
+
+export type PostSources = {
+  common: string;
+  image: string;
+  bufferA: string;
+  bufferB: string;
+  bufferC: string;
+  bufferD: string;
+};
+
+/** Parse un slot canal post (défaut `scene` pour ch0 si vide). */
+export function parsePostChannelSource(
+  value: string | undefined | null,
+  fallback: string,
+  slot: 0 | 1 | 2 | 3,
+): PostChannelSource {
+  const v = (value ?? "").trim() || (fallback ?? "").trim();
+  if (!v) return slot === 0 ? { kind: "scene" } : { kind: "none" };
+  if (v.startsWith("#")) return { kind: "element", key: v };
+  const lower = v.toLowerCase();
+  if (lower === "scene") return { kind: "scene" };
+  if (lower === "depth") return { kind: "depth" };
+  if (lower === "self") return { kind: "self" };
+  if (lower === "none" || lower === "null") return { kind: "none" };
+  if (lower === "buffer-a" || lower === "buffera" || lower === "a") {
+    return { kind: "buffer", buffer: "bufferA" };
+  }
+  if (lower === "buffer-b" || lower === "bufferb" || lower === "b") {
+    return { kind: "buffer", buffer: "bufferB" };
+  }
+  if (lower === "buffer-c" || lower === "bufferc" || lower === "c") {
+    return { kind: "buffer", buffer: "bufferC" };
+  }
+  if (lower === "buffer-d" || lower === "bufferd" || lower === "d") {
+    return { kind: "buffer", buffer: "bufferD" };
+  }
+  return { kind: "url", url: v };
+}
+
+export function clampPostScale(v: number): number {
+  if (!Number.isFinite(v)) return 1;
+  return Math.min(1, Math.max(0.25, v));
+}