Rewrite core around shared rows and render graphs

Co-authored-by: Heaust Azure <heaust.azure@gmail.com> Amp-Thread-ID: https://ampcode.com/threads/T-01a01380-b478-77d0-84a0-102880a5c5ae
2026-08-19 15:30:32 +00:00
parent d34722d66d
commit f12c7c9603
118 changed files with 687 additions and 34500 deletions
@@ -0,0 +1,62 @@
+<script setup>
+import { onMounted, onUnmounted, ref } from "vue";
+import { YawnCore } from "@yawn/core";
+import { loadGraph } from "@yawn/render-graph-js";
+import { triangleGraph } from "@yawn/default-pipelines";
+
+const canvas = ref();
+const status = ref("Starting…");
+const failed = ref(false);
+let core;
+let color;
+
+function move(event) {
+  if (!color) return;
+  const bounds = canvas.value.getBoundingClientRect();
+  const row = color.row(0);
+  row[0] = (event.clientX - bounds.left) / bounds.width;
+  row[1] = 1 - (event.clientY - bounds.top) / bounds.height;
+}
+
+onMounted(async () => {
+  try {
+    if (!crossOriginIsolated) throw new Error("Cross-origin isolation is disabled");
+    canvas.value.width = 960;
+    canvas.value.height = 540;
+    core = new YawnCore(canvas.value);
+    await core.ready;
+    color = await core.allocateRows({
+      name: "triangle.color",
+      rows: 1,
+      stride: 16,
+      format: "f32",
+    });
+    color.write(0, [0.2, 0.65, 1, 1]);
+    await loadGraph(core, triangleGraph());
+    window.__yawnPlayground = { core, color };
+    status.value = "Running · move the pointer to write the shared color row";
+  } catch (error) {
+    failed.value = true;
+    status.value = error.message;
+  }
+});
+
+onUnmounted(() => {
+  delete window.__yawnPlayground;
+  core?.dispose();
+});
+</script>
+
+<template>
+  <div class="playground">
+    <canvas ref="canvas" aria-label="Yawn WebGPU output" @pointermove="move" />
+    <p :class="{ failed }" data-playground-status>{{ status }}</p>
+  </div>
+</template>
+
+<style scoped>
+.playground { margin: 24px 0; }
+canvas { width: 100%; aspect-ratio: 16 / 9; display: block; background: #111827; border-radius: 12px; }
+p { color: var(--vp-c-text-2); }
+.failed { color: var(--vp-c-danger-1); }
+</style>