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

package/src/core/components/functional/webgpu/form-bind.ts

@@ -0,0 +1,116 @@
+import HTML from "@supersoniks/concorde/core/utils/HTML";
+import { PublisherManager } from "@supersoniks/concorde/utils";
+import {
+  CHANNEL_FORM_KEYS,
+  OUT_PARAM_KEYS,
+  channelFormValue,
+  toNum,
+} from "./helpers";
+
+export type FormBindHost = {
+  dataProvider: string;
+  outDataProvider: string;
+  formPublisher: ReturnType<typeof PublisherManager.get> | null;
+  outPublisher: ReturnType<typeof PublisherManager.get> | null;
+  channel0: string;
+  channel1: string;
+  channel2: string;
+  channel3: string;
+  param0: number;
+  param1: number;
+  param2: number;
+  param3: number;
+  remoteTarget: { x: number; y: number } | null;
+  mouseVec: [number, number, number, number];
+  mouse: boolean;
+  hovering: boolean;
+  runtime: { canvas: HTMLCanvasElement } | null;
+  onFormMutation: () => void;
+};
+
+function resolveFormProviderId(host: FormBindHost & HTMLElement): string {
+  const own = host.dataProvider?.trim();
+  if (own) return own;
+  return (
+    HTML.getAncestorAttributeValue(host, "dataProvider") ||
+    HTML.getAncestorAttributeValue(host, "formDataProvider") ||
+    ""
+  );
+}
+
+function unbindFormProvider(host: FormBindHost) {
+  if (host.formPublisher) {
+    host.formPublisher.offInternalMutation(host.onFormMutation);
+    host.formPublisher = null;
+  }
+}
+
+function bindFormProvider(host: FormBindHost & HTMLElement) {
+  unbindFormProvider(host);
+  const id = resolveFormProviderId(host);
+  if (!id) return;
+  host.formPublisher = PublisherManager.get(id);
+  host.formPublisher.onInternalMutation(host.onFormMutation);
+  host.onFormMutation();
+}
+
+function bindOutPublisher(host: FormBindHost & HTMLElement) {
+  const id = host.outDataProvider?.trim() || resolveFormProviderId(host) || "";
+  host.outPublisher = id ? PublisherManager.get(id) : null;
+}
+
+function applyFormParams(host: FormBindHost, data: Record<string, unknown>) {
+  for (const key of CHANNEL_FORM_KEYS) {
+    if (!(key in data)) continue;
+    const next = channelFormValue(data[key]);
+    if (next === undefined) continue;
+    if (host[key] !== next) host[key] = next;
+  }
+  for (const key of OUT_PARAM_KEYS) {
+    if (!(key in data)) continue;
+    const n = toNum(data[key], NaN);
+    if (!Number.isFinite(n)) continue;
+    if (host[key] !== n) host[key] = n;
+  }
+  // targetX/Y (0–1, CSS top-left) → attracteur GPU ; hors plage = off
+  if ("targetX" in data || "targetY" in data) {
+    const tx = toNum(data.targetX, NaN);
+    const ty = toNum(data.targetY, NaN);
+    if (
+      Number.isFinite(tx) &&
+      Number.isFinite(ty) &&
+      tx >= 0 &&
+      tx <= 1 &&
+      ty >= 0 &&
+      ty <= 1
+    ) {
+      host.remoteTarget = { x: tx, y: ty };
+      applyRemoteMouse(host);
+    } else {
+      host.remoteTarget = null;
+      host.mouseVec[0] = 0;
+      host.mouseVec[1] = 0;
+    }
+  }
+}
+
+/** Convertit target normalisé → coords buffer (origine bas-gauche, comme le pointeur). */
+function applyRemoteMouse(host: FormBindHost) {
+  if (!host.remoteTarget || !host.runtime) return;
+  // Pendant un hover pointeur, le doigt / souris gagne
+  if (host.mouse && host.hovering) return;
+  const w = host.runtime.canvas.width;
+  const h = host.runtime.canvas.height;
+  if (w < 2 || h < 2) return;
+  host.mouseVec[0] = host.remoteTarget.x * w;
+  host.mouseVec[1] = (1 - host.remoteTarget.y) * h;
+}
+
+export const formBind = {
+  resolveFormProviderId,
+  unbindFormProvider,
+  bindFormProvider,
+  bindOutPublisher,
+  applyFormParams,
+  applyRemoteMouse,
+} as const;

package/src/core/components/functional/webgpu/gl-fallback.ts

@@ -0,0 +1,158 @@
+import {
+  parseChannelSource,
+  ShaderToyRuntime,
+  type FrameUniforms,
+} from "../shader/gl-runtime";
+import type { PassChannels, ShaderSources } from "../shader/types";
+import type { WebGpuFrameState } from "./gpu-runtime";
+
+/** GLSL image pass — même dialecte ShaderToy que sonic-shader. */
+const FALLBACK_IMAGE = `
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 uv = fragCoord / iResolution.xy;
+  vec4 c = texture(iChannel0, uv);
+  float has = step(0.001, c.a + c.r + c.g + c.b);
+  // Souris en UV (origine bas-gauche, comme fragCoord)
+  vec2 muv = iMouse.xy / max(iResolution.xy, vec2(1.0));
+  float m = length(uv - muv);
+  // Halo souris toujours visible + mix global via uParam0
+  float glow = exp(-m * 8.0) * (0.35 + 0.65 * uParam0);
+  vec4 tint = vec4(0.15, 0.45, 0.95, 1.0);
+  vec4 mixed = mix(c, tint, clamp(uParam0 * 0.35 + glow, 0.0, 1.0));
+  float g = 0.15 + 0.25 * uv.y;
+  vec4 grad = vec4(g, g * 0.85 + 0.08 * uParam0, 0.35 + 0.4 * uv.x, 1.0);
+  fragColor = mix(grad, mixed, has);
+}
+`;
+
+const EMPTY_SOURCES: ShaderSources = {
+  common: "",
+  image: FALLBACK_IMAGE,
+  bufferA: "",
+  bufferB: "",
+  bufferC: "",
+  bufferD: "",
+};
+
+/**
+ * Fallback WebGL2 = wrapper de `ShaderToyRuntime` (même stack que sonic-shader).
+ */
+export class WebGl2FallbackRuntime {
+  readonly backend = "webgl2" as const;
+  readonly canvas: HTMLCanvasElement;
+  private toy: ShaderToyRuntime;
+  private channelUrls: [string, string, string, string] = ["", "", "", ""];
+  private lastTime = 0;
+  private disposed = false;
+  private channelQueue: Promise<void> = Promise.resolve();
+
+  private constructor(canvas: HTMLCanvasElement, toy: ShaderToyRuntime) {
+    this.canvas = canvas;
+    this.toy = toy;
+    this.applySources();
+  }
+
+  static create(canvas: HTMLCanvasElement): WebGl2FallbackRuntime {
+    const toy = new ShaderToyRuntime(canvas);
+    return new WebGl2FallbackRuntime(canvas, toy);
+  }
+
+  /** WGSL ignoré — effet GLSL fixe (canaux / params OK). */
+  async setShader(_userBody: string): Promise<void> {
+    this.assertAlive();
+  }
+
+  async setChannel(index: 0 | 1 | 2 | 3, url: string): Promise<void> {
+    // sérialisé : évite applySources / ensureTextures en parallèle (rebuild Promise.all)
+    this.channelQueue = this.channelQueue.then(() =>
+      this.setChannelNow(index, url),
+    );
+    return this.channelQueue;
+  }
+
+  private async setChannelNow(
+    index: 0 | 1 | 2 | 3,
+    url: string,
+  ): Promise<void> {
+    this.assertAlive();
+    const trimmed = url.trim();
+    if (this.channelUrls[index] === trimmed) {
+      // Même URL : s’assurer que la texture est bien chargée
+      if (trimmed && !this.toy.getTextureSize(trimmed)) {
+        await this.toy.ensureTextures([trimmed]);
+      }
+      return;
+    }
+    this.channelUrls[index] = trimmed;
+    this.applySources();
+    const urls = this.channelUrls.filter(Boolean);
+    if (urls.length) await this.toy.ensureTextures(urls);
+  }
+
+  /** Applique les 4 canaux d’un coup (préféré au boot). */
+  async setChannels(urls: [string, string, string, string]): Promise<void> {
+    this.channelQueue = this.channelQueue.then(async () => {
+      this.assertAlive();
+      this.channelUrls = [
+        urls[0].trim(),
+        urls[1].trim(),
+        urls[2].trim(),
+        urls[3].trim(),
+      ];
+      this.applySources();
+      const list = this.channelUrls.filter(Boolean);
+      if (list.length) await this.toy.ensureTextures(list);
+    });
+    return this.channelQueue;
+  }
+
+  getTextureSize(url: string): { width: number; height: number } | null {
+    return this.toy.getTextureSize(url.trim());
+  }
+
+  resize(width: number, height: number) {
+    this.assertAlive();
+    this.toy.resize(width, height);
+  }
+
+  draw(state: WebGpuFrameState) {
+    this.assertAlive();
+    if (this.toy.isLost) return;
+    const timeDelta =
+      this.lastTime > 0 ? Math.max(0, state.time - this.lastTime) : 0;
+    this.lastTime = state.time;
+    const frame: FrameUniforms = {
+      time: state.time,
+      timeDelta,
+      frame: Math.floor(state.frame),
+      mouse: state.mouse,
+      params: state.params,
+    };
+    this.toy.render(frame);
+  }
+
+  dispose(loseContext = true) {
+    if (this.disposed) return;
+    this.disposed = true;
+    this.toy.dispose(loseContext);
+  }
+
+  private applySources() {
+    const channels = new Map([
+      [
+        "image" as const,
+        [
+          parseChannelSource(this.channelUrls[0], ""),
+          parseChannelSource(this.channelUrls[1], ""),
+          parseChannelSource(this.channelUrls[2], ""),
+          parseChannelSource(this.channelUrls[3], ""),
+        ] as PassChannels,
+      ],
+    ]);
+    this.toy.setSources(EMPTY_SOURCES, channels);
+  }
+
+  private assertAlive() {
+    if (this.disposed) throw new Error("WebGL2 fallback disposed");
+  }
+}

package/src/core/components/functional/webgpu/gpu-runtime.ts

@@ -0,0 +1,349 @@
+/// <reference types="@webgpu/types" />
+
+import { WebGpuCompileError } from "./types";
+import { buildWgslSource } from "./wgsl-prelude";
+
+const UNIFORM_BYTES = 64; // resolution+time+frame+mouse+params + pad
+const CHANNEL_COUNT = 4;
+
+/** Adapter WebGPU : high-performance → low-power → défaut. */
+export async function requestBestAdapter(
+  gpu: GPU = navigator.gpu!,
+): Promise<GPUAdapter | null> {
+  return (
+    (await gpu.requestAdapter({ powerPreference: "high-performance" })) ??
+    (await gpu.requestAdapter({ powerPreference: "low-power" })) ??
+    (await gpu.requestAdapter())
+  );
+}
+
+export type WebGpuFrameState = {
+  width: number;
+  height: number;
+  time: number;
+  frame: number;
+  mouse: [number, number, number, number];
+  params: [number, number, number, number];
+};
+
+async function createPlaceholderTexture(
+  device: GPUDevice,
+): Promise<GPUTexture> {
+  const texture = device.createTexture({
+    size: [1, 1],
+    format: "rgba8unorm",
+    usage:
+      GPUTextureUsage.TEXTURE_BINDING |
+      GPUTextureUsage.COPY_DST |
+      GPUTextureUsage.RENDER_ATTACHMENT,
+  });
+  device.queue.writeTexture(
+    { texture },
+    new Uint8Array([0, 0, 0, 0]),
+    { bytesPerRow: 4 },
+    [1, 1],
+  );
+  return texture;
+}
+
+/**
+ * Runtime WebGPU minimal : 1 passe fullscreen + 4 textures + uniforms.
+ */
+export class WebGpuRuntime {
+  readonly backend = "webgpu" as const;
+  readonly canvas: HTMLCanvasElement;
+  private device: GPUDevice;
+  private context: GPUCanvasContext;
+  private format: GPUTextureFormat;
+  private pipeline: GPURenderPipeline | null = null;
+  private uniformBuffer: GPUBuffer;
+  private sampler: GPUSampler;
+  private channelTextures: (GPUTexture | null)[] = [
+    null,
+    null,
+    null,
+    null,
+  ];
+  private channelViews: (GPUTextureView | null)[] = [
+    null,
+    null,
+    null,
+    null,
+  ];
+  private channelSizes: ({ width: number; height: number } | null)[] = [
+    null,
+    null,
+    null,
+    null,
+  ];
+  private channelUrls: [string, string, string, string] = ["", "", "", ""];
+  private placeholder: GPUTexture | null = null;
+  private placeholderView: GPUTextureView | null = null;
+  private bindGroup: GPUBindGroup | null = null;
+  private disposed = false;
+  /** Un token par canal — un token global annulait Promise.all(setChannel×4). */
+  private channelLoadTokens = [0, 0, 0, 0];
+
+  private constructor(
+    canvas: HTMLCanvasElement,
+    device: GPUDevice,
+    context: GPUCanvasContext,
+    format: GPUTextureFormat,
+  ) {
+    this.canvas = canvas;
+    this.device = device;
+    this.context = context;
+    this.format = format;
+    this.uniformBuffer = device.createBuffer({
+      size: UNIFORM_BYTES,
+      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+    });
+    this.sampler = device.createSampler({
+      magFilter: "linear",
+      minFilter: "linear",
+      addressModeU: "clamp-to-edge",
+      addressModeV: "clamp-to-edge",
+    });
+  }
+
+  /**
+   * Teste WebGPU sans toucher au canvas (évite de le verrouiller si échec).
+   * @returns `null` si OK, sinon raison courte.
+   */
+  static async probe(): Promise<string | null> {
+    const gpu = navigator.gpu;
+    if (!gpu) return "WebGPU indisponible (pas de navigator.gpu)";
+    try {
+      const adapter = await requestBestAdapter(gpu);
+      if (!adapter) return "WebGPU adapter indisponible";
+      const device = await adapter.requestDevice();
+      device.destroy();
+      return null;
+    } catch (e) {
+      return e instanceof Error ? e.message : String(e);
+    }
+  }
+
+  static async create(canvas: HTMLCanvasElement): Promise<WebGpuRuntime> {
+    const gpu = navigator.gpu;
+    if (!gpu) {
+      throw new Error("WebGPU indisponible (pas de navigator.gpu)");
+    }
+    const adapter = await requestBestAdapter(gpu);
+    if (!adapter) {
+      throw new Error("WebGPU adapter indisponible");
+    }
+    const device = await adapter.requestDevice();
+    const context = canvas.getContext("webgpu");
+    if (!context) {
+      device.destroy();
+      throw new Error("WebGPU canvas context indisponible");
+    }
+    const format = navigator.gpu.getPreferredCanvasFormat();
+    context.configure({
+      device,
+      format,
+      alphaMode: "premultiplied",
+    });
+    const runtime = new WebGpuRuntime(canvas, device, context, format);
+    runtime.placeholder = await createPlaceholderTexture(device);
+    runtime.placeholderView = runtime.placeholder.createView();
+    return runtime;
+  }
+
+  async setShader(userBody: string): Promise<void> {
+    this.assertAlive();
+    let source: string;
+    try {
+      source = buildWgslSource(userBody);
+    } catch (e) {
+      const message = e instanceof Error ? e.message : String(e);
+      throw new WebGpuCompileError(message);
+    }
+    const module = this.device.createShaderModule({ code: source });
+    const info = await module.getCompilationInfo();
+    const errors = info.messages.filter((m) => m.type === "error");
+    if (errors.length) {
+      throw new WebGpuCompileError(
+        "WGSL compile error",
+        errors.map((m) => m.message).join("\n"),
+      );
+    }
+    this.pipeline = this.device.createRenderPipeline({
+      layout: "auto",
+      vertex: { module, entryPoint: "vs_main" },
+      fragment: {
+        module,
+        entryPoint: "fs_main",
+        targets: [{ format: this.format }],
+      },
+      primitive: { topology: "triangle-list" },
+    });
+    this.bindGroup = null;
+  }
+
+  async setChannel(index: 0 | 1 | 2 | 3, url: string): Promise<void> {
+    this.assertAlive();
+    const trimmed = url.trim();
+    if (this.channelUrls[index] === trimmed && this.channelTextures[index]) {
+      return;
+    }
+    this.channelUrls[index] = trimmed;
+    const token = ++this.channelLoadTokens[index];
+    if (!trimmed) {
+      this.destroyChannel(index);
+      this.bindGroup = null;
+      return;
+    }
+    const img = await loadImage(trimmed);
+    if (token !== this.channelLoadTokens[index] || this.disposed) return;
+    const texture = this.device.createTexture({
+      size: [img.width, img.height],
+      format: "rgba8unorm",
+      usage:
+        GPUTextureUsage.TEXTURE_BINDING |
+        GPUTextureUsage.COPY_DST |
+        GPUTextureUsage.RENDER_ATTACHMENT,
+    });
+    this.device.queue.copyExternalImageToTexture(
+      { source: img },
+      { texture },
+      [img.width, img.height],
+    );
+    this.destroyChannel(index);
+    this.channelTextures[index] = texture;
+    this.channelViews[index] = texture.createView();
+    this.channelSizes[index] = { width: img.width, height: img.height };
+    this.bindGroup = null;
+  }
+
+  getTextureSize(url: string): { width: number; height: number } | null {
+    const i = this.channelUrls.indexOf(url.trim());
+    if (i < 0) return null;
+    return this.channelSizes[i];
+  }
+
+  resize(width: number, height: number) {
+    this.assertAlive();
+    const w = Math.max(1, Math.floor(width));
+    const h = Math.max(1, Math.floor(height));
+    if (this.canvas.width === w && this.canvas.height === h) return;
+    this.canvas.width = w;
+    this.canvas.height = h;
+    this.context.configure({
+      device: this.device,
+      format: this.format,
+      alphaMode: "premultiplied",
+    });
+  }
+
+  draw(state: WebGpuFrameState) {
+    this.assertAlive();
+    if (!this.pipeline || !this.placeholderView) return;
+    this.writeUniforms(state);
+    if (!this.bindGroup) {
+      this.bindGroup = this.device.createBindGroup({
+        layout: this.pipeline.getBindGroupLayout(0),
+        entries: [
+          { binding: 0, resource: { buffer: this.uniformBuffer } },
+          {
+            binding: 1,
+            resource: this.channelViews[0] ?? this.placeholderView,
+          },
+          {
+            binding: 2,
+            resource: this.channelViews[1] ?? this.placeholderView,
+          },
+          {
+            binding: 3,
+            resource: this.channelViews[2] ?? this.placeholderView,
+          },
+          {
+            binding: 4,
+            resource: this.channelViews[3] ?? this.placeholderView,
+          },
+          { binding: 5, resource: this.sampler },
+        ],
+      });
+    }
+    const encoder = this.device.createCommandEncoder();
+    const pass = encoder.beginRenderPass({
+      colorAttachments: [
+        {
+          view: this.context.getCurrentTexture().createView(),
+          clearValue: { r: 0, g: 0, b: 0, a: 1 },
+          loadOp: "clear",
+          storeOp: "store",
+        },
+      ],
+    });
+    pass.setPipeline(this.pipeline);
+    pass.setBindGroup(0, this.bindGroup);
+    pass.draw(3);
+    pass.end();
+    this.device.queue.submit([encoder.finish()]);
+  }
+
+  dispose(destroyDevice = false) {
+    if (this.disposed) return;
+    this.disposed = true;
+    for (let i = 0; i < CHANNEL_COUNT; i++) {
+      this.channelLoadTokens[i]++;
+      this.destroyChannel(i);
+    }
+    this.placeholder?.destroy();
+    this.placeholder = null;
+    this.placeholderView = null;
+    this.uniformBuffer.destroy();
+    this.pipeline = null;
+    this.bindGroup = null;
+    try {
+      this.context.unconfigure();
+    } catch {
+      /* ignore */
+    }
+    if (destroyDevice) {
+      try {
+        this.device.destroy();
+      } catch {
+        /* ignore */
+      }
+    }
+  }
+
+  private writeUniforms(state: WebGpuFrameState) {
+    const data = new ArrayBuffer(UNIFORM_BYTES);
+    const f32 = new Float32Array(data);
+    f32[0] = state.width;
+    f32[1] = state.height;
+    f32[2] = state.time;
+    f32[3] = state.frame;
+    f32[4] = state.mouse[0];
+    f32[5] = state.mouse[1];
+    f32[6] = state.mouse[2];
+    f32[7] = state.mouse[3];
+    f32[8] = state.params[0];
+    f32[9] = state.params[1];
+    f32[10] = state.params[2];
+    f32[11] = state.params[3];
+    this.device.queue.writeBuffer(this.uniformBuffer, 0, data);
+  }
+
+  private destroyChannel(index: number) {
+    this.channelTextures[index]?.destroy();
+    this.channelTextures[index] = null;
+    this.channelViews[index] = null;
+    this.channelSizes[index] = null;
+  }
+
+  private assertAlive() {
+    if (this.disposed) throw new Error("WebGPU runtime disposed");
+  }
+}
+
+async function loadImage(url: string): Promise<ImageBitmap> {
+  const res = await fetch(url);
+  if (!res.ok) throw new Error(`Failed to load texture: ${url}`);
+  const blob = await res.blob();
+  return createImageBitmap(blob);
+}

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

@@ -0,0 +1,47 @@
+import { toMediaUrl } from "@supersoniks/concorde/core/utils/mediaRef";
+
+export const LOG_PREFIX = "[sonic-webgpu]";
+
+export const OUT_META_KEYS = [
+  "time",
+  "frame",
+  "mouseX",
+  "mouseY",
+  "hovering",
+] as const;
+
+export const OUT_PARAM_KEYS = ["param0", "param1", "param2", "param3"] as const;
+
+export const CHANNEL_FORM_KEYS = [
+  "channel0",
+  "channel1",
+  "channel2",
+  "channel3",
+] as const;
+
+export const FRAME_OUT_KEYS = ["frameUrl", "snapshot"] as const;
+
+export function prefersReducedMotion(): boolean {
+  return (
+    typeof matchMedia === "function" &&
+    matchMedia("(prefers-reduced-motion: reduce)").matches
+  );
+}
+
+export function toNum(v: unknown, fallback: number): number {
+  if (typeof v === "number" && Number.isFinite(v)) return v;
+  if (typeof v === "string" && v.trim() !== "") {
+    const n = Number(v);
+    if (Number.isFinite(n)) return n;
+  }
+  return fallback;
+}
+
+export function channelFormValue(value: unknown): string | undefined {
+  if (value === null || value === "") return "";
+  if (typeof value === "string") return value.trim();
+  const url = toMediaUrl(value);
+  if (url) return url;
+  if (value && typeof value === "object") return undefined;
+  return "";
+}