wgsl-play 0.0.39 → 0.1.0

package/src/Renderer.ts

@@ -1,48 +1,75 @@
-import { requestWeslDevice } from "wesl";
+import { parseSrcModule, requestWeslDevice } from "wesl";
 import {
-  type AutoValues,
   createUniformBuffer,
-  linkAndCreatePipeline,
-  renderFrame,
-  scanUniforms,
+  type ResolveUserTexture,
   type UniformBufferState,
   type WeslOptions,
-  writeUniforms,
 } from "wesl-gpu";
-import type { AnnotatedLayout } from "wesl-reflect";
+import {
+  type AnnotatedLayout,
+  classifyEntryPoints,
+  type DiscoveredResource,
+  type EntryPoint,
+  findAnnotatedResources,
+  type VarReflection,
+} from "wesl-reflect";
+import { buildCompute } from "./ComputeBuild.ts";
+import { buildFragment } from "./FragmentRender.ts";
+import { prepareResources } from "./RenderResources.ts";
+import type { BufferEntry } from "./ResultsPanel.ts";
 
 /** Mutable mouse state, updated by pointer event listeners. */
 export interface MouseState {
   pos: [number, number];
   delta: [number, number];
-  button: number; // 0=none, 1=left, 2=middle, 3=right
+  /** 0=none, 1=left, 2=middle, 3=right */
+  button: number;
+}
+
+export type RendererMode = "fragment" | "compute";
+
+/** Compute-mode runtime state, retained for re-dispatch on slider/refresh. */
+export interface ComputeState {
+  pipelineLayout: GPUPipelineLayout;
+  bindGroup: GPUBindGroup;
+  module: GPUShaderModule;
+  entryPoint: string;
+  /** Storage buffers to read back, keyed by var name. */
+  readBuffers: Map<string, GPUBuffer>;
+  /** Buffer type info, keyed by var name. */
+  reflections: Map<string, VarReflection>;
 }
 
-/** WebGPU state */
+/** WebGPU state retained across frames. */
 export interface RenderState {
   device: GPUDevice;
   canvas: HTMLCanvasElement;
   context: GPUCanvasContext;
   presentationFormat: GPUTextureFormat;
-  bindGroupLayout: GPUBindGroupLayout;
-  pipelineLayout: GPUPipelineLayout;
   uniformState: UniformBufferState;
   bindGroup: GPUBindGroup;
   mouse: MouseState;
   pipeline?: GPURenderPipeline;
   frameCount: number;
+  /** Textures owned by the last successful compile, disposed on next compile. */
+  resourceTextures: GPUTexture[];
+  /** Storage buffers owned by the last successful compile, disposed on next compile. */
+  resourceBuffers: GPUBuffer[];
+  /** Compute-mode runtime info, present iff mode === "compute". */
+  compute?: ComputeState;
 }
 
-/** Animation state */
-export interface PlaybackState {
-  isPlaying: boolean;
-  startTime: number;
-  pausedDuration: number;
-}
-
-/** Options for linking shaders - re-exports wesl-gpu's WeslOptions */
+/** Options for linking shaders (re-exported from wesl-gpu). */
 export type LinkOptions = WeslOptions;
 
+/** Result of a successful build, returned to the WgslPlay element. */
+export interface BuildResult {
+  layout: AnnotatedLayout | null;
+  mode: RendererMode;
+  /** Present iff mode === "compute"; initial readback after dispatch. */
+  computeReadback?: BufferEntry[];
+}
+
 /** Initialize WebGPU for a canvas element. */
 export async function initWebGPU(
   canvas: HTMLCanvasElement,
@@ -58,16 +85,9 @@ export async function initWebGPU(
   const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
   context.configure({ device, format: presentationFormat, alphaMode });
 
-  const bindGroupLayout = device.createBindGroupLayout({
-    entries: [{ binding: 0, visibility: GPUShaderStage.FRAGMENT, buffer: {} }],
-  });
-  const pipelineLayout = device.createPipelineLayout({
-    bindGroupLayouts: [bindGroupLayout],
-  });
-
-  // Initial buffer with default layout (will be recreated per-compile)
   const uniformState = createUniformBuffer(device, null);
-  const bindGroup = createBindGroup(device, bindGroupLayout, uniformState);
+  const layout = uniformOnlyLayout(device);
+  const bindGroup = createUniformBindGroup(device, layout, uniformState);
   const mouse: MouseState = { pos: [0, 0], delta: [0, 0], button: 0 };
 
   return {
@@ -75,135 +95,60 @@ export async function initWebGPU(
     canvas,
     context,
     presentationFormat,
-    bindGroupLayout,
-    pipelineLayout,
     uniformState,
     bindGroup,
     mouse,
     pipeline: undefined,
     frameCount: 0,
+    resourceTextures: [],
+    resourceBuffers: [],
   };
 }
 
-/** Compile WESL fragment shader and create render pipeline.
- *  Recreates the uniform buffer and bind group based on @uniforms metadata. */
+/** Compile a WESL shader and configure pipelines + bindings.
+ *  Auto-detects fragment vs compute mode based on entry-point attributes. */
 export async function createPipeline(
   state: RenderState,
-  fragmentSource: string,
+  shaderSource: string,
+  resolveTexture: ResolveUserTexture,
   options?: LinkOptions,
-): Promise<AnnotatedLayout | null> {
+): Promise<BuildResult> {
   const pkg = options?.packageName ?? "package";
   const root = options?.rootModuleName ?? "main";
-  const scan = scanUniforms(fragmentSource, `${pkg}::${root}`);
-
-  const { device, bindGroupLayout, presentationFormat, pipelineLayout } = state;
-  state.uniformState.buffer.destroy();
-  state.uniformState = createUniformBuffer(device, scan.layout);
-  state.bindGroup = createBindGroup(
-    device,
-    bindGroupLayout,
-    state.uniformState,
-  );
-
-  device.pushErrorScope("validation");
-  let gpuError: unknown;
-  let jsError: unknown;
-  try {
-    state.pipeline = await linkAndCreatePipeline({
-      device,
-      fragmentSource,
-      format: presentationFormat,
-      layout: pipelineLayout,
-      ...options,
-    });
-  } catch (e) {
-    jsError = e;
-  } finally {
-    gpuError = await device.popErrorScope();
-  }
-  if (jsError || gpuError) {
-    state.pipeline = undefined;
-    throw jsError ?? gpuError;
-  }
-
-  return scan.layout;
-}
-
-/** Render a single frame (used when paused). */
-export function renderOnce(state: RenderState, playback: PlaybackState): void {
-  if (!state.pipeline) return;
-  doRender(state, playback);
-}
-
-/** Start the render loop. Returns a stop function. */
-export function startRenderLoop(
-  state: RenderState,
-  playback: PlaybackState,
-): () => void {
-  let animationId: number;
-  let lastTime = 0;
-
-  function render(): void {
-    if (!state.pipeline) {
-      animationId = requestAnimationFrame(render);
-      return;
-    }
+  const ast = parseSrcModule({
+    modulePath: `${pkg}::${root}`,
+    debugFilePath: `./${root}.wesl`,
+    src: shaderSource,
+  });
+  const resources = findAnnotatedResources(ast);
+  const entryPoints = classifyEntryPoints(ast);
+  const mode = detectMode(entryPoints);
+  if (mode === "compute") rejectComputeUnsupported(resources);
+
+  const setup = await prepareResources({
+    state,
+    shaderSource,
+    pkg,
+    root,
+    resources,
+    resolveTexture,
+  });
 
-    const time = calculateTime(playback);
-    const delta_time = time - lastTime;
-    lastTime = time;
-
-    const { mouse, device, canvas, context, bindGroup } = state;
-    const auto: AutoValues = {
-      resolution: [canvas.width, canvas.height],
-      time,
-      delta_time,
-      frame: state.frameCount,
-      mouse_pos: mouse.pos,
-      mouse_delta: mouse.delta,
-      mouse_button: mouse.button,
-    };
-    // Reset per-frame deltas after reading
-    mouse.delta = [0, 0];
-
-    writeUniforms(device, state.uniformState, auto);
-    const targetView = context.getCurrentTexture().createView();
-    renderFrame({ device, pipeline: state.pipeline!, bindGroup, targetView });
-    state.frameCount++;
-    animationId = requestAnimationFrame(render);
+  const branch = { state, resources, shaderSource, options, ...setup };
+  if (mode === "compute") {
+    return buildCompute({ ...branch, ast, entryPoint: entryPoints[0].fnName });
   }
-
-  animationId = requestAnimationFrame(render);
-  return () => cancelAnimationFrame(animationId);
-}
-
-/** Update uniforms and submit one GPU frame (one-shot, e.g. when paused). */
-function doRender(state: RenderState, playback: PlaybackState): void {
-  const time = calculateTime(playback);
-  const { mouse, device, canvas, context, bindGroup } = state;
-  const auto: AutoValues = {
-    resolution: [canvas.width, canvas.height],
-    time,
-    delta_time: 0,
-    frame: state.frameCount,
-    mouse_pos: mouse.pos,
-    mouse_delta: [0, 0],
-    mouse_button: mouse.button,
-  };
-  writeUniforms(device, state.uniformState, auto);
-  const targetView = context.getCurrentTexture().createView();
-  renderFrame({ device, pipeline: state.pipeline!, bindGroup, targetView });
-  state.frameCount++;
+  return buildFragment(branch);
 }
 
-export function calculateTime(playback: PlaybackState): number {
-  const currentTime = playback.isPlaying
-    ? performance.now()
-    : playback.startTime + playback.pausedDuration;
-  return (currentTime - playback.startTime) / 1000;
+function uniformOnlyLayout(device: GPUDevice): GPUBindGroupLayout {
+  const visibility = GPUShaderStage.COMPUTE | GPUShaderStage.FRAGMENT;
+  return device.createBindGroupLayout({
+    entries: [{ binding: 0, visibility, buffer: {} }],
+  });
 }
 
-function createBindGroup(
+function createUniformBindGroup(
   device: GPUDevice,
   layout: GPUBindGroupLayout,
   uniformState: UniformBufferState,
@@ -213,3 +158,32 @@ function createBindGroup(
     entries: [{ binding: 0, resource: { buffer: uniformState.buffer } }],
   });
 }
+
+/** Pick fragment vs compute mode from entry points; throws on mixed/multi-compute. */
+function detectMode(entryPoints: EntryPoint[]): RendererMode {
+  const compute = entryPoints.filter(e => e.stage === "compute");
+  const fragment = entryPoints.filter(e => e.stage === "fragment");
+  if (compute.length > 0 && fragment.length > 0) {
+    throw new Error(
+      "mixed compute and fragment entry points are not supported (use either, not both)",
+    );
+  }
+  if (compute.length > 1) {
+    throw new Error(
+      `compute mode requires exactly one @compute entry point; found ${compute.length}`,
+    );
+  }
+  return compute.length === 1 ? "compute" : "fragment";
+}
+
+/** @sampler/@texture in compute mode are not yet implemented; throw early. */
+function rejectComputeUnsupported(resources: DiscoveredResource[]): void {
+  for (const r of resources) {
+    if (r.kind === "texture" || r.kind === "test_texture") {
+      throw new Error("@texture in compute mode is not yet supported");
+    }
+    if (r.kind === "sampler") {
+      throw new Error("@sampler in compute mode is not yet supported");
+    }
+  }
+}

package/src/ResultsPanel.ts

@@ -0,0 +1,261 @@
+import {
+  type ScalarKind,
+  type TypeShape,
+  TypeShapeError,
+  type VarReflection,
+} from "wesl-reflect";
+
+export interface BufferEntry {
+  reflection: VarReflection;
+  data: ArrayBuffer;
+}
+
+export interface RenderPanelParams {
+  panel: HTMLElement;
+  entries: BufferEntry[];
+}
+
+/** Pre-rendered table data, used by both the DOM renderer and unit tests. */
+export interface TableData {
+  caption: string;
+  headers: string[];
+  rows: string[][];
+  /** Rows beyond `truncationLimit` (only the first `truncationLimit` are in `rows`). */
+  truncated?: { totalRows: number };
+}
+
+interface RowShape {
+  /** Per-row type: array element type, or the var's type when not an array. */
+  row: TypeShape;
+  rowCount: number;
+  stride: number;
+}
+
+const truncationLimit = 256;
+
+/** Render compute-mode @buffer readbacks as one HTML table per buffer. */
+export function renderResultsPanel(p: RenderPanelParams): void {
+  p.panel.replaceChildren(...p.entries.map(renderTable));
+}
+
+/** Build the structured table data for a single @buffer entry. Pure (no DOM). */
+export function tableData(entry: BufferEntry): TableData {
+  const { reflection, data } = entry;
+  const { row, rowCount, stride } = rowShape(reflection, data.byteLength);
+  const visibleRows = Math.min(rowCount, truncationLimit);
+  const view = new DataView(data);
+
+  const caption = `${reflection.varName}: ${shapeLabel(reflection.type)}`;
+  const headers =
+    row.kind === "struct"
+      ? ["", ...row.fields.map(f => f.name)]
+      : ["", "value"];
+
+  const rows = buildRows(view, row, visibleRows, stride);
+  const td: TableData = { caption, headers, rows };
+  if (rowCount > truncationLimit) td.truncated = { totalRows: rowCount };
+  return td;
+}
+
+function renderTable(entry: BufferEntry): HTMLElement {
+  const td = tableData(entry);
+  const section = document.createElement("section");
+  section.className = "result";
+  section.appendChild(makeCaption(td.caption));
+  const table = document.createElement("table");
+  table.appendChild(makeHeader(td.headers));
+  table.appendChild(makeBody(td.rows));
+  if (td.truncated) {
+    table.appendChild(makeShowAllFooter(table, entry, td.truncated.totalRows));
+  }
+  section.appendChild(table);
+  return section;
+}
+
+/** Resolve the per-row shape and stride for tabular display. Runtime-sized
+ *  arrays derive rowCount from the readback's byteLength. Throws
+ *  TypeShapeError if the element type isn't supported as a table cell. */
+function rowShape(reflection: VarReflection, byteLength: number): RowShape {
+  const t = reflection.type;
+  if (t.kind === "array") {
+    assertRenderable(t.elem, reflection.varName);
+    const rowCount =
+      t.length === "runtime" ? Math.floor(byteLength / t.stride) : t.length;
+    return { row: t.elem, rowCount, stride: t.stride };
+  }
+  assertRenderable(t, reflection.varName);
+  return { row: t, rowCount: 1, stride: t.size };
+}
+
+function shapeLabel(t: TypeShape): string {
+  if (t.kind === "array") {
+    const len = t.length === "runtime" ? "" : `, ${t.length}`;
+    return `array<${typeLabel(t.elem)}${len}>`;
+  }
+  return typeLabel(t);
+}
+
+/** Materialize `count` row-cell arrays at successive `stride` offsets. */
+function buildRows(
+  view: DataView,
+  row: TypeShape,
+  count: number,
+  stride: number,
+): string[][] {
+  return Array.from({ length: count }, (_, i) =>
+    rowCells(view, row, i, i * stride),
+  );
+}
+
+function makeCaption(text: string): HTMLElement {
+  const caption = document.createElement("div");
+  caption.className = "result-caption";
+  caption.textContent = text;
+  return caption;
+}
+
+function makeHeader(headers: string[]): HTMLElement {
+  const thead = document.createElement("thead");
+  const tr = document.createElement("tr");
+  for (const h of headers) {
+    const th = document.createElement("th");
+    th.textContent = h;
+    tr.appendChild(th);
+  }
+  thead.appendChild(tr);
+  return thead;
+}
+
+function makeBody(rows: string[][]): HTMLElement {
+  const tbody = document.createElement("tbody");
+  for (const row of rows) {
+    const tr = document.createElement("tr");
+    for (const cell of row) {
+      const td = document.createElement("td");
+      td.textContent = cell;
+      tr.appendChild(td);
+    }
+    tbody.appendChild(tr);
+  }
+  return tbody;
+}
+
+function makeShowAllFooter(
+  table: HTMLTableElement,
+  entry: BufferEntry,
+  totalRows: number,
+): HTMLElement {
+  const tfoot = document.createElement("tfoot");
+  const tr = document.createElement("tr");
+  const td = document.createElement("td");
+  const { row, stride } = rowShape(entry.reflection, entry.data.byteLength);
+  td.colSpan = row.kind === "struct" ? row.fields.length + 1 : 2;
+  const button = document.createElement("button");
+  button.textContent = `Show all ${totalRows} rows`;
+  button.addEventListener("click", () => {
+    const view = new DataView(entry.data);
+    const allRows = buildRows(view, row, totalRows, stride);
+    table.replaceChild(makeBody(allRows), table.tBodies[0]);
+    tfoot.remove();
+  });
+  td.appendChild(
+    document.createTextNode(
+      `Showing first ${truncationLimit} of ${totalRows} rows. `,
+    ),
+  );
+  td.appendChild(button);
+  tr.appendChild(td);
+  tfoot.appendChild(tr);
+  return tfoot;
+}
+
+/** WgslPlay's compute-results table only renders f32/i32/u32 scalars, vectors of those, or structs of those. */
+function assertRenderable(t: TypeShape, varName: string): void {
+  if (t.kind === "scalar") {
+    if (t.type === "f16") throw notRenderable("f16", varName);
+    return;
+  }
+  if (t.kind === "vec") {
+    if (t.component === "f16") throw notRenderable("vec<f16>", varName);
+    return;
+  }
+  if (t.kind === "struct") {
+    for (const f of t.fields) assertRenderable(f.type, varName);
+    return;
+  }
+  if (t.kind === "mat") {
+    throw new TypeShapeError(
+      `matrices are not supported in the compute results table; use vecN<f32> instead`,
+      varName,
+    );
+  }
+  if (t.kind === "atomic") {
+    throw new TypeShapeError(
+      `atomic types are not supported in the compute results table`,
+      varName,
+    );
+  }
+  throw new TypeShapeError(`unsupported element type for table`, varName);
+}
+
+function typeLabel(t: TypeShape): string {
+  if (t.kind === "scalar") return t.type;
+  if (t.kind === "vec") return `vec${t.n}<${t.component}>`;
+  if (t.kind === "mat") return `mat${t.cols}x${t.rows}<${t.component}>`;
+  if (t.kind === "atomic") return `atomic<${t.component}>`;
+  if (t.kind === "struct") return t.name;
+  const len = t.length === "runtime" ? "" : `, ${t.length}`;
+  return `array<${typeLabel(t.elem)}${len}>`;
+}
+
+function rowCells(
+  view: DataView,
+  row: TypeShape,
+  rowIndex: number,
+  baseOffset: number,
+): string[] {
+  if (row.kind === "struct") {
+    return [
+      String(rowIndex),
+      ...row.fields.map(f => formatElem(view, f.type, baseOffset + f.offset)),
+    ];
+  }
+  return [String(rowIndex), formatElem(view, row, baseOffset)];
+}
+
+function notRenderable(typeName: string, varName: string): TypeShapeError {
+  return new TypeShapeError(
+    `${typeName} is not supported in the compute results table`,
+    varName,
+  );
+}
+
+function formatElem(view: DataView, elem: TypeShape, offset: number): string {
+  if (elem.kind === "scalar") return formatScalar(view, elem.type, offset);
+  if (elem.kind === "vec") {
+    const joined = Array.from({ length: elem.n }, (_, i) =>
+      formatScalar(view, elem.component, offset + i * 4),
+    ).join(", ");
+    return `(${joined})`;
+  }
+  return `<${elem.kind}>`;
+}
+
+function formatScalar(
+  view: DataView,
+  type: ScalarKind,
+  offset: number,
+): string {
+  if (type === "f32") return formatF32(view.getFloat32(offset, true));
+  if (type === "i32") return String(view.getInt32(offset, true));
+  if (type === "u32") return String(view.getUint32(offset, true));
+  if (type === "bool")
+    return view.getUint32(offset, true) !== 0 ? "true" : "false";
+  return "<f16>";
+}
+
+function formatF32(v: number): string {
+  if (!Number.isFinite(v)) return String(v);
+  if (Number.isInteger(v)) return v.toFixed(1);
+  return Number.parseFloat(v.toPrecision(4)).toString();
+}

package/src/WgslPlay.css

@@ -14,28 +14,52 @@
 .resize-handle {
   display: none;
   position: absolute;
+  width: 22px;
+  height: 22px;
+  z-index: 2;
+  touch-action: none;
+  opacity: 0;
+  transition: opacity 0.15s;
+}
+
+:host([resizable]) .resize-handle {
+  display: block;
+}
+
+.resize-handle.br {
   bottom: 0;
   right: 0;
-  width: 16px;
-  height: 16px;
   cursor: nwse-resize;
-  z-index: 2;
-  touch-action: none;
+}
+
+.resize-handle.bl {
+  bottom: 0;
+  left: 0;
+  cursor: nesw-resize;
+}
+
+.resize-handle:hover,
+.resize-handle.dragging {
+  opacity: 1;
 }
 
 .resize-handle::before {
   content: "";
   position: absolute;
   bottom: 3px;
-  right: 3px;
   width: 8px;
   height: 8px;
-  border-right: 2px solid var(--controls-bg);
   border-bottom: 2px solid var(--controls-bg);
 }
 
-:host([resizable]:hover) .resize-handle {
-  display: block;
+.resize-handle.br::before {
+  right: 3px;
+  border-right: 2px solid var(--controls-bg);
+}
+
+.resize-handle.bl::before {
+  left: 3px;
+  border-left: 2px solid var(--controls-bg);
 }
 
 :host(.dark) {
@@ -86,6 +110,54 @@ canvas {
   background: var(--controls-hover-bg);
 }
 
+.controls button[hidden] {
+  display: none;
+}
+
+/* Compute-mode results panel */
+.results-panel {
+  font-family: var(--code-font, monospace);
+  font-size: 0.85rem;
+  padding: 8px;
+  box-sizing: border-box;
+  color: var(--results-fg, currentColor);
+  background: var(--results-bg, transparent);
+}
+
+.results-panel[hidden] {
+  display: none;
+}
+
+.results-panel .result {
+  margin-bottom: 24px;
+}
+
+.results-panel .result-caption {
+  font-weight: bold;
+  padding-bottom: 8px;
+}
+
+.results-panel table {
+  border-collapse: collapse;
+}
+
+.results-panel th,
+.results-panel td {
+  padding: 2px 8px;
+  border: 1px solid var(--results-border, rgba(128, 128, 128, 0.3));
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+
+.results-panel tfoot td {
+  text-align: left;
+}
+
+.results-panel tfoot button {
+  margin-left: 6px;
+  cursor: pointer;
+}
+
 /* Settings panel */
 .settings {
   position: absolute;