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

package/src/core/components/functional/webgpu/out-frame.ts

@@ -0,0 +1,137 @@
+import { revokeMediaUrls } from "@supersoniks/concorde/core/utils/mediaRef";
+import { formBind, type FormBindHost } from "./form-bind";
+import {
+  FRAME_OUT_KEYS,
+  OUT_META_KEYS,
+  OUT_PARAM_KEYS,
+} from "./helpers";
+import type { SonicWebGpuOutput } from "./types";
+
+type OutPublisherLike = {
+  _proxies_?: Map<string, { hasListener?: () => boolean }>;
+  get?: () => Record<string, unknown>;
+  set?: (v: Record<string, unknown>) => void;
+};
+
+/** Host out/frame — étend FormBindHost pour `resolveFormProviderId`. */
+export type OutFrameHost = FormBindHost & {
+  outEventListeners: number;
+  frameOut: boolean;
+  lastOutAt: number;
+  outInterval: number;
+  runtime: {
+    canvas: HTMLCanvasElement;
+    backend?: string;
+  } | null;
+  frame: number;
+  frameOutBusy: boolean;
+  frameOutSeq: number;
+  lastFrameUrl: string;
+  dispatchEvent: (event: Event) => boolean;
+};
+
+function hasOutConsumer(host: OutFrameHost): boolean {
+  if (host.outEventListeners > 0) return true;
+  // Même contrat que sonic-3d : frame-out force la pub même sans listener proxy.
+  if (host.frameOut && host.outPublisher) return true;
+  const pub = host.outPublisher as OutPublisherLike | null;
+  if (!pub?._proxies_) return false;
+  for (const key of [...OUT_META_KEYS, ...FRAME_OUT_KEYS]) {
+    const p = pub._proxies_.get(key);
+    if (p?.hasListener?.()) return true;
+  }
+  return false;
+}
+
+function maybePublishOut(host: OutFrameHost & HTMLElement, now: number, time: number) {
+  if (!hasOutConsumer(host)) return;
+  if (now - host.lastOutAt < host.outInterval) return;
+  host.lastOutAt = now;
+  const payload: SonicWebGpuOutput = {
+    time,
+    frame: host.frame,
+    mouseX: host.mouseVec[0],
+    mouseY: host.mouseVec[1],
+    hovering: host.hovering,
+    param0: host.param0,
+    param1: host.param1,
+    param2: host.param2,
+    param3: host.param3,
+    backend: host.runtime?.backend as SonicWebGpuOutput["backend"],
+  };
+  host.dispatchEvent(
+    new CustomEvent("out", {
+      detail: payload,
+      bubbles: true,
+      composed: true,
+    }),
+  );
+  const pub = host.outPublisher;
+  if (pub) {
+    const sharedForm =
+      formBind.resolveFormProviderId(host) ===
+      (host.outDataProvider?.trim() || formBind.resolveFormProviderId(host));
+    const patch: Record<string, unknown> = {
+      time: payload.time,
+      frame: payload.frame,
+      mouseX: payload.mouseX,
+      mouseY: payload.mouseY,
+      hovering: payload.hovering,
+    };
+    if (!sharedForm) {
+      for (const k of OUT_PARAM_KEYS) patch[k] = payload[k];
+    }
+    pub.set(patch);
+  }
+  if (host.frameOut) void publishFrameSnapshot(host);
+}
+
+async function publishFrameSnapshot(host: OutFrameHost) {
+  if (host.frameOutBusy || !host.runtime) return;
+  const canvas = host.runtime.canvas;
+  if (canvas.width < 1 || canvas.height < 1) return;
+  host.frameOutBusy = true;
+  const seq = ++host.frameOutSeq;
+  const width = canvas.width;
+  const height = canvas.height;
+  try {
+    const blob = await new Promise<Blob | null>((resolve) => {
+      try {
+        canvas.toBlob((b) => resolve(b), "image/png");
+      } catch {
+        resolve(null);
+      }
+    });
+    if (seq !== host.frameOutSeq) {
+      return;
+    }
+    if (!blob || !host.outPublisher) return;
+    const url = URL.createObjectURL(blob);
+    revokeFrameUrl(host);
+    host.lastFrameUrl = url;
+    host.outPublisher.set({
+      frameUrl: url,
+      snapshot: {
+        url,
+        width,
+        height,
+        mime: "image/png",
+      },
+    });
+  } finally {
+    if (seq === host.frameOutSeq) host.frameOutBusy = false;
+  }
+}
+
+function revokeFrameUrl(host: OutFrameHost) {
+  if (!host.lastFrameUrl) return;
+  revokeMediaUrls([host.lastFrameUrl]);
+  host.lastFrameUrl = "";
+}
+
+export const outFrame = {
+  hasOutConsumer,
+  maybePublishOut,
+  publishFrameSnapshot,
+  revokeFrameUrl,
+} as const;

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

@@ -0,0 +1,426 @@
+/// <reference types="@webgpu/types" />
+
+import { requestBestAdapter, type WebGpuFrameState } from "./gpu-runtime";
+
+const PARTICLE_COUNT = 1200;
+const FLOATS_PER_PARTICLE = 4; // x, y, vx, vy
+const BYTES_PER_FLOAT = 4;
+const WORKGROUP_SIZE = 64;
+const VERTICES_PER_PARTICLE = 6;
+/** Layout WGSL uniform (align vec4) : 16 × f32 = 64 bytes */
+const UNIFORM_FLOATS = 16;
+
+const UNIFORMS_STRUCT = `
+struct Uniforms {
+  resolution: vec2f,
+  time: f32,
+  dt: f32,
+  mouse: vec2f,
+  _pad: vec2f,
+  params: vec4f,
+}
+`;
+
+const COMPUTE_WGSL = `
+${UNIFORMS_STRUCT}
+struct Particle {
+  pos: vec2f,
+  vel: vec2f,
+}
+const COUNT: u32 = ${PARTICLE_COUNT}u;
+@group(0) @binding(0) var<uniform> u: Uniforms;
+@group(0) @binding(1) var<storage, read_write> particles: array<Particle, COUNT>;
+
+@compute @workgroup_size(${WORKGROUP_SIZE})
+fn cs_main(@builtin(global_invocation_id) id: vec3u) {
+  let i = id.x;
+  if (i >= COUNT) { return; }
+  var p = particles[i];
+  let speed = 0.35 + u.params.x * 2.2;
+  let attract = u.params.y;
+  let damp = 0.98;
+  var force = vec2f(0.0);
+  if (attract > 0.001 && length(u.mouse) > 0.5) {
+    let toM = u.mouse - p.pos;
+    let d = max(length(toM), 12.0);
+    force += normalize(toM) * (attract * 6000.0 / (d * d));
+  }
+  let c = u.resolution * 0.5;
+  let toC = p.pos - c;
+  force += vec2f(-toC.y, toC.x) * 0.0025 * speed;
+  let stepDt = max(u.dt, 0.008);
+  p.vel = (p.vel + force * stepDt) * damp;
+  p.pos += p.vel * stepDt * 60.0 * speed;
+  if (p.pos.x < 0.0) { p.pos.x += u.resolution.x; }
+  if (p.pos.x > u.resolution.x) { p.pos.x -= u.resolution.x; }
+  if (p.pos.y < 0.0) { p.pos.y += u.resolution.y; }
+  if (p.pos.y > u.resolution.y) { p.pos.y -= u.resolution.y; }
+  particles[i] = p;
+}
+`;
+
+const RENDER_WGSL = `
+${UNIFORMS_STRUCT}
+struct Particle {
+  pos: vec2f,
+  vel: vec2f,
+}
+const COUNT: u32 = ${PARTICLE_COUNT}u;
+struct VsOut {
+  @builtin(position) position: vec4f,
+  @location(0) speed: f32,
+  @location(1) local: vec2f,
+}
+@group(0) @binding(0) var<uniform> u: Uniforms;
+@group(0) @binding(1) var<storage, read> particles: array<Particle, COUNT>;
+
+@vertex
+fn vs_main(@builtin(vertex_index) vi: u32) -> VsOut {
+  let i = vi / 6u;
+  let c = vi % 6u;
+  var local = vec2f(0.0);
+  if (c == 0u) { local = vec2f(-1.0, -1.0); }
+  else if (c == 1u) { local = vec2f(1.0, -1.0); }
+  else if (c == 2u) { local = vec2f(-1.0, 1.0); }
+  else if (c == 3u) { local = vec2f(-1.0, 1.0); }
+  else if (c == 4u) { local = vec2f(1.0, -1.0); }
+  else { local = vec2f(1.0, 1.0); }
+
+  let p = particles[i];
+  let radius = 2.8;
+  let pos = p.pos + local * radius;
+  let ndc = (pos / max(u.resolution, vec2f(1.0))) * 2.0 - vec2f(1.0);
+  var out: VsOut;
+  out.position = vec4f(ndc.x, -ndc.y, 0.0, 1.0);
+  out.speed = length(p.vel);
+  out.local = local;
+  return out;
+}
+
+@fragment
+fn fs_main(in: VsOut) -> @location(0) vec4f {
+  let d = length(in.local);
+  if (d > 1.0) { discard; }
+  let soft = 1.0 - smoothstep(0.55, 1.0, d);
+  let t = clamp(in.speed * 0.08, 0.0, 1.0);
+  let col = mix(vec3f(0.25, 0.65, 1.0), vec3f(1.0, 0.5, 0.2), t);
+  return vec4f(col * soft, soft);
+}
+`;
+
+/**
+ * Noyau compute particules — ce qui démarque WebGPU de sonic-shader.
+ * Fallback CPU + Canvas2D si pas d’adapter (même rendu utile en démo).
+ */
+export class ParticlesRuntime {
+  readonly backend: "webgpu" | "canvas2d";
+  readonly canvas: HTMLCanvasElement;
+  private device: GPUDevice | null = null;
+  private context: GPUCanvasContext | null = null;
+  private format: GPUTextureFormat = "bgra8unorm";
+  private uniformBuffer: GPUBuffer | null = null;
+  private particleBuffer: GPUBuffer | null = null;
+  private computePipeline: GPUComputePipeline | null = null;
+  private renderPipeline: GPURenderPipeline | null = null;
+  private bindGroup: GPUBindGroup | null = null;
+  private cpu: Float32Array;
+  private ctx2d: CanvasRenderingContext2D | null = null;
+  private lastTime = 0;
+  private disposed = false;
+  private seeded = false;
+
+  private constructor(
+    canvas: HTMLCanvasElement,
+    backend: "webgpu" | "canvas2d",
+  ) {
+    this.canvas = canvas;
+    this.backend = backend;
+    this.cpu = new Float32Array(PARTICLE_COUNT * FLOATS_PER_PARTICLE);
+  }
+
+  static async create(canvas: HTMLCanvasElement): Promise<ParticlesRuntime> {
+    const gpu = navigator.gpu;
+    if (gpu) {
+      try {
+        const adapter = await requestBestAdapter(gpu);
+        if (adapter) {
+          const device = await adapter.requestDevice();
+          const context = canvas.getContext("webgpu");
+          if (context) {
+            const format = gpu.getPreferredCanvasFormat();
+            context.configure({
+              device,
+              format,
+              alphaMode: "premultiplied",
+            });
+            const rt = new ParticlesRuntime(canvas, "webgpu");
+            rt.device = device;
+            rt.context = context;
+            rt.format = format;
+            rt.initGpu();
+            return rt;
+          }
+          device.destroy();
+        }
+      } catch {
+        /* fall through Canvas2D */
+      }
+    }
+    const ctx = canvas.getContext("2d", { alpha: true });
+    if (!ctx) throw new Error("Particles: ni WebGPU ni Canvas2D");
+    const rt = new ParticlesRuntime(canvas, "canvas2d");
+    rt.ctx2d = ctx;
+    return rt;
+  }
+
+  async setShader(_s: string): Promise<void> {}
+  async setChannel(_i: 0 | 1 | 2 | 3, _url: string): Promise<void> {}
+  getTextureSize(_url: string) {
+    return null;
+  }
+
+  resize(width: number, height: number) {
+    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;
+    if (this.context && this.device) {
+      this.context.configure({
+        device: this.device,
+        format: this.format,
+        alphaMode: "premultiplied",
+      });
+    }
+    this.seed(w, h);
+  }
+
+  draw(state: WebGpuFrameState) {
+    if (this.disposed) return;
+    if (state.width < 2 || state.height < 2) return;
+    if (!this.seeded) this.seed(state.width, state.height);
+    const dt =
+      this.lastTime > 0
+        ? Math.min(0.05, Math.max(0.001, state.time - this.lastTime))
+        : 0.016;
+    this.lastTime = state.time;
+    if (this.backend === "webgpu") this.drawGpu(state, dt);
+    else this.drawCpu(state, dt);
+  }
+
+  dispose(_lose = true) {
+    if (this.disposed) return;
+    this.disposed = true;
+    this.uniformBuffer?.destroy();
+    this.particleBuffer?.destroy();
+    try {
+      this.context?.unconfigure();
+    } catch {
+      /* ignore */
+    }
+    this.device?.destroy();
+    this.device = null;
+  }
+
+  private initGpu() {
+    const device = this.device!;
+    this.uniformBuffer = device.createBuffer({
+      size: UNIFORM_FLOATS * BYTES_PER_FLOAT,
+      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+    });
+    this.particleBuffer = device.createBuffer({
+      size: PARTICLE_COUNT * FLOATS_PER_PARTICLE * BYTES_PER_FLOAT,
+      usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,
+    });
+    const computeModule = device.createShaderModule({ code: COMPUTE_WGSL });
+    const renderModule = device.createShaderModule({ code: RENDER_WGSL });
+    this.computePipeline = device.createComputePipeline({
+      layout: "auto",
+      compute: { module: computeModule, entryPoint: "cs_main" },
+    });
+    this.renderPipeline = device.createRenderPipeline({
+      layout: "auto",
+      vertex: { module: renderModule, entryPoint: "vs_main" },
+      fragment: {
+        module: renderModule,
+        entryPoint: "fs_main",
+        targets: [
+          {
+            format: this.format,
+            blend: {
+              color: {
+                srcFactor: "src-alpha",
+                dstFactor: "one-minus-src-alpha",
+                operation: "add",
+              },
+              alpha: {
+                srcFactor: "one",
+                dstFactor: "one-minus-src-alpha",
+                operation: "add",
+              },
+            },
+          },
+        ],
+      },
+      primitive: { topology: "triangle-list" },
+    });
+  }
+
+  private ensureBindGroups() {
+    const device = this.device!;
+    if (!this.computePipeline || !this.renderPipeline) return;
+    if (this.bindGroup) return;
+    this.bindGroup = device.createBindGroup({
+      layout: this.computePipeline.getBindGroupLayout(0),
+      entries: [
+        { binding: 0, resource: { buffer: this.uniformBuffer! } },
+        { binding: 1, resource: { buffer: this.particleBuffer! } },
+      ],
+    });
+  }
+
+  private drawGpu(state: WebGpuFrameState, dt: number) {
+    const device = this.device!;
+    const context = this.context!;
+    if (!this.computePipeline || !this.renderPipeline) return;
+    // Souris host = origine bas (ShaderToy) ; buffer particules = origine haut
+    const fixed: WebGpuFrameState = {
+      ...state,
+      mouse: [
+        state.mouse[0],
+        state.height - state.mouse[1],
+        state.mouse[2],
+        state.height - state.mouse[3],
+      ],
+    };
+    this.writeUniforms(fixed, dt);
+    this.ensureBindGroups();
+    const renderBg = device.createBindGroup({
+      layout: this.renderPipeline.getBindGroupLayout(0),
+      entries: [
+        { binding: 0, resource: { buffer: this.uniformBuffer! } },
+        { binding: 1, resource: { buffer: this.particleBuffer! } },
+      ],
+    });
+    const encoder = device.createCommandEncoder();
+    const passC = encoder.beginComputePass();
+    passC.setPipeline(this.computePipeline);
+    passC.setBindGroup(0, this.bindGroup!);
+    passC.dispatchWorkgroups(Math.ceil(PARTICLE_COUNT / WORKGROUP_SIZE));
+    passC.end();
+    const passR = encoder.beginRenderPass({
+      colorAttachments: [
+        {
+          view: context.getCurrentTexture().createView(),
+          clearValue: { r: 0.04, g: 0.05, b: 0.08, a: 1 },
+          loadOp: "clear",
+          storeOp: "store",
+        },
+      ],
+    });
+    passR.setPipeline(this.renderPipeline);
+    passR.setBindGroup(0, renderBg);
+    passR.draw(PARTICLE_COUNT * VERTICES_PER_PARTICLE);
+    passR.end();
+    device.queue.submit([encoder.finish()]);
+  }
+
+  private drawCpu(state: WebGpuFrameState, dt: number) {
+    const ctx = this.ctx2d!;
+    const w = state.width;
+    const h = state.height;
+    const speed = 0.35 + state.params[0] * 2.2;
+    const attract = state.params[1];
+    const mx = state.mouse[0];
+    const my = h - state.mouse[1];
+    for (let i = 0; i < PARTICLE_COUNT; i++) {
+      const o = i * FLOATS_PER_PARTICLE;
+      let x = this.cpu[o];
+      let y = this.cpu[o + 1];
+      let vx = this.cpu[o + 2];
+      let vy = this.cpu[o + 3];
+      let fx = 0;
+      let fy = 0;
+      if (attract > 0.001 && (mx > 0.5 || my > 0.5)) {
+        const dx = mx - x;
+        const dy = my - y;
+        const d = Math.max(Math.hypot(dx, dy), 8);
+        const f = (attract * 4000) / (d * d);
+        fx += (dx / d) * f;
+        fy += (dy / d) * f;
+      }
+      const cx = w * 0.5;
+      const cy = h * 0.5;
+      fx += -(y - cy) * 0.0008 * speed;
+      fy += (x - cx) * 0.0008 * speed;
+      vx = (vx + fx * dt) * 0.985;
+      vy = (vy + fy * dt) * 0.985;
+      x += vx * dt * 60 * speed;
+      y += vy * dt * 60 * speed;
+      if (x < 0) x += w;
+      if (x > w) x -= w;
+      if (y < 0) y += h;
+      if (y > h) y -= h;
+      this.cpu[o] = x;
+      this.cpu[o + 1] = y;
+      this.cpu[o + 2] = vx;
+      this.cpu[o + 3] = vy;
+    }
+    ctx.fillStyle = "rgb(10, 12, 20)";
+    ctx.fillRect(0, 0, w, h);
+    for (let i = 0; i < PARTICLE_COUNT; i++) {
+      const o = i * FLOATS_PER_PARTICLE;
+      const sp = Math.hypot(this.cpu[o + 2], this.cpu[o + 3]);
+      const t = Math.min(1, sp * 0.08);
+      const r = Math.round(51 + t * 204);
+      const g = Math.round(140 - t * 25);
+      const b = Math.round(255 - t * 204);
+      ctx.fillStyle = `rgba(${r},${g},${b},0.85)`;
+      ctx.fillRect(this.cpu[o], this.cpu[o + 1], 2, 2);
+    }
+  }
+
+  private writeUniforms(state: WebGpuFrameState, dt: number) {
+    // Doit matcher le struct WGSL (padding avant params @ 32 bytes)
+    const data = new Float32Array(UNIFORM_FLOATS);
+    data[0] = state.width;
+    data[1] = state.height;
+    data[2] = state.time;
+    data[3] = dt;
+    data[4] = state.mouse[0];
+    data[5] = state.mouse[1];
+    data[6] = 0;
+    data[7] = 0;
+    data[8] = state.params[0];
+    data[9] = state.params[1];
+    data[10] = state.params[2];
+    data[11] = state.params[3];
+    this.device!.queue.writeBuffer(
+      this.uniformBuffer!,
+      0,
+      data.buffer,
+      data.byteOffset,
+      data.byteLength,
+    );
+  }
+
+  private seed(w: number, h: number) {
+    for (let i = 0; i < PARTICLE_COUNT; i++) {
+      const o = i * FLOATS_PER_PARTICLE;
+      this.cpu[o] = Math.random() * w;
+      this.cpu[o + 1] = Math.random() * h;
+      this.cpu[o + 2] = (Math.random() - 0.5) * 2;
+      this.cpu[o + 3] = (Math.random() - 0.5) * 2;
+    }
+    if (this.device && this.particleBuffer) {
+      this.device.queue.writeBuffer(
+        this.particleBuffer,
+        0,
+        this.cpu.buffer,
+        this.cpu.byteOffset,
+        this.cpu.byteLength,
+      );
+    }
+    this.seeded = true;
+  }
+}

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

@@ -0,0 +1,85 @@
+export type PointerHost = {
+  mouse: boolean;
+  hovering: boolean;
+  mouseVec: [number, number, number, number];
+  runtime: {
+    canvas: HTMLCanvasElement;
+    draw: (opts: {
+      width: number;
+      height: number;
+      time: number;
+      frame: number;
+      mouse: [number, number, number, number];
+      params: [number, number, number, number];
+    }) => void;
+  } | null;
+  raf: number;
+  ready: boolean;
+  startTime: number;
+  frame: number;
+  param0: number;
+  param1: number;
+  param2: number;
+  param3: number;
+  getBoundingClientRect: () => DOMRect;
+};
+
+function pointerToMouse(host: PointerHost, e: PointerEvent) {
+  if (!host.mouse || !host.runtime) return;
+  const rect = host.getBoundingClientRect();
+  if (rect.width < 1 || rect.height < 1) return;
+  // Même convention que sonic-shader (px drawing buffer, origine bas-gauche)
+  const dpr = host.runtime.canvas.width / Math.max(rect.width, 1);
+  const x = (e.clientX - rect.left) * dpr;
+  const y = (rect.height - (e.clientY - rect.top)) * dpr;
+  host.mouseVec[0] = x;
+  host.mouseVec[1] = y;
+  // Redessine même si la boucle est en pause
+  if (!host.raf && host.ready && host.runtime) {
+    const time = host.startTime
+      ? (performance.now() - host.startTime) / 1000
+      : 0;
+    host.runtime.draw({
+      width: host.runtime.canvas.width,
+      height: host.runtime.canvas.height,
+      time,
+      frame: host.frame,
+      mouse: host.mouseVec,
+      params: [host.param0, host.param1, host.param2, host.param3],
+    });
+  }
+}
+
+function onMove(host: PointerHost, e: PointerEvent) {
+  pointerToMouse(host, e);
+}
+
+function onDown(host: PointerHost, e: PointerEvent) {
+  pointerToMouse(host, e);
+  host.mouseVec[2] = host.mouseVec[0];
+  host.mouseVec[3] = host.mouseVec[1];
+}
+
+function onUp(host: PointerHost) {
+  host.mouseVec[2] = 0;
+  host.mouseVec[3] = 0;
+}
+
+function onEnter(host: PointerHost) {
+  host.hovering = true;
+}
+
+function onLeave(host: PointerHost) {
+  host.hovering = false;
+  host.mouseVec[2] = 0;
+  host.mouseVec[3] = 0;
+}
+
+export const pointer = {
+  pointerToMouse,
+  onMove,
+  onDown,
+  onUp,
+  onEnter,
+  onLeave,
+} as const;