heaust/yawn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Optimize render graph and add GPU profiling

Browse Source 
Amp-Thread-ID: https://ampcode.com/threads/T-01a01380-b478-77d0-84a0-102880a5c5ae
Co-authored-by: Heaust Azure <heaust.azure@gmail.com>
This commit is contained in:
Amp
2026-08-20 11:48:06 +00:00
co-authored by heaust
parent ded70a3cb4
commit 000bfd63bf
22 changed files with 1622 additions and 203 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/.vitepress/Playground.vue
+317 -45
View File
@@ -1,36 +1,117 @@
<script setup>
import { nextTick, onMounted, onUnmounted, ref } from "vue";
import { basicSetup } from "codemirror";
import { javascript } from "@codemirror/lang-javascript";
import { oneDark } from "@codemirror/theme-one-dark";
import { EditorView } from "@codemirror/view";
import { computed, nextTick, onMounted, onUnmounted, ref } from "vue";
import * as Handles from "@yawn/handles";
import { YawnCore } from "@yawn/core";
import { playgrounds } from "./playgrounds";
const props = defineProps({ example: { type: String, default: "triangle" } });
const preset = playgrounds[props.example] ?? playgrounds.triangle;
const props = defineProps({
example: { type: String, default: "triangle" },
fullscreen: { type: Boolean, default: false },
});
const examples = Object.entries(playgrounds);
const selected = ref(playgrounds[props.example] ? props.example : "triangle");
const preset = computed(() => playgrounds[selected.value]);
const canvas = ref();
const source = ref(preset.code);
const editor = ref();
const preview = ref();
const source = ref(preset.value.code);
const status = ref("Starting…");
const output = ref([]);
const failed = ref(false);
const running = ref(false);
const canvasKey = ref(0);
const fps = ref(0);
const profilerOpen = ref(false);
const profilerSupported = ref(null);
const profile = ref(null);
let generation = 0;
let current;
let stopProfile;
let fpsFrame = 0;
let sampledFrame = 0;
let sampledAt = 0;
let editorView;
const AsyncFunction = Object.getPrototypeOf(async function () {}).constructor;
const api = { ...Handles, YawnCore };
function updateSource(value) {
source.value = value;
if (editorView && editorView.state.doc.toString() !== value) {
editorView.dispatch({
changes: { from: 0, to: editorView.state.doc.length, insert: value },
});
}
}
function requestedSave() {
if (!props.fullscreen) return selected.value;
const save = new URL(location.href).searchParams.get("save");
return save && playgrounds[save] ? save : "triangle";
}
function openSave(event, save, push = true) {
event?.preventDefault();
selected.value = playgrounds[save] ? save : "triangle";
updateSource(preset.value.code);
if (props.fullscreen && push) {
const url = new URL(location.href);
url.searchParams.set("save", selected.value);
history.pushState(null, "", url);
}
run();
}
function restoreSave() {
openSave(undefined, requestedSave(), false);
}
async function dispose(value = current) {
if (!value) return;
current = undefined;
delete window.__yawnPlayground;
if (value === current) {
stopProfile?.();
stopProfile = undefined;
current = undefined;
delete window.__yawnPlayground;
}
if (typeof value === "function") await value();
else if (typeof value.dispose === "function") await value.dispose();
}
async function attachProfiler(runId = generation) {
stopProfile?.();
stopProfile = undefined;
profile.value = null;
profilerSupported.value = null;
if (!profilerOpen.value) return;
const core = current?.scene?.core ?? current?.core;
if (!core?.onProfile || !core?.setProfiler) {
profilerSupported.value = false;
return;
}
stopProfile = core.onProfile((stats) => {
if (runId === generation) profile.value = stats;
});
profilerSupported.value = await core.setProfiler(true);
}
async function toggleProfiler() {
profilerOpen.value = !profilerOpen.value;
if (profilerOpen.value) {
await attachProfiler();
} else {
stopProfile?.();
stopProfile = undefined;
profile.value = null;
const core = current?.scene?.core ?? current?.core;
await core?.setProfiler?.(false);
}
}
async function run() {
const runId = ++generation;
running.value = true;
@@ -43,8 +124,12 @@ async function run() {
throw new Error("Cross-origin isolation is disabled");
canvasKey.value++;
await nextTick();
canvas.value.width = 960;
canvas.value.height = 540;
canvas.value.width = props.fullscreen
? Math.max(1, preview.value.clientWidth)
: 960;
canvas.value.height = props.fullscreen
? Math.max(1, preview.value.clientHeight)
: 540;
const executable = source.value.replace(/^\s*import\s+[^;]+;\s*$/gm, "");
const names = Object.keys(api);
const started = performance.now();
@@ -54,7 +139,7 @@ async function run() {
"log",
executable,
)(...names.map((name) => api[name]), canvas.value, (message) =>
output.value.push(String(message)),
runId === generation && output.value.push(String(message)),
);
if (runId !== generation) {
await dispose(result);
@@ -62,29 +147,23 @@ async function run() {
}
current = result;
window.__yawnPlayground = result;
await attachProfiler(runId);
status.value = `Running · ${Math.round(performance.now() - started)} ms`;
} catch (error) {
failed.value = true;
status.value = error instanceof Error ? error.message : String(error);
if (runId === generation) {
failed.value = true;
status.value = error instanceof Error ? error.message : String(error);
}
} finally {
if (runId === generation) running.value = false;
}
}
function reset() {
source.value = preset.code;
updateSource(preset.value.code);
run();
}
function tab(event) {
if (event.key !== "Tab") return;
event.preventDefault();
const editor = event.currentTarget;
const start = editor.selectionStart;
source.value = `${source.value.slice(0, start)} ${source.value.slice(editor.selectionEnd)}`;
requestAnimationFrame(() => editor.setSelectionRange(start + 2, start + 2));
}
function sampleFps(time = performance.now()) {
try {
const core = current?.scene?.core ?? current?.core;
@@ -95,9 +174,8 @@ function sampleFps(time = performance.now()) {
sampledFrame = frame;
sampledAt = time;
} else if (time - sampledAt >= 500) {
fps.value = Math.round(
((frame - sampledFrame) * 1000) / (time - sampledAt),
);
const measured = ((frame - sampledFrame) * 1000) / (time - sampledAt);
fps.value = measured < 10 ? measured.toFixed(1) : Math.round(measured);
sampledFrame = frame;
sampledAt = time;
}
@@ -110,19 +188,46 @@ function sampleFps(time = performance.now()) {
}
onMounted(() => {
selected.value = requestedSave();
source.value = preset.value.code;
editorView = new EditorView({
doc: source.value,
parent: editor.value,
extensions: [
basicSetup,
javascript(),
oneDark,
EditorView.lineWrapping,
EditorView.contentAttributes.of({
"aria-label": "Editable playground code",
spellcheck: "false",
}),
EditorView.updateListener.of((update) => {
if (update.docChanged) source.value = update.state.doc.toString();
}),
],
});
if (props.fullscreen) addEventListener("popstate", restoreSave);
sampleFps();
run();
});
onUnmounted(() => {
generation++;
removeEventListener("popstate", restoreSave);
editorView?.destroy();
cancelAnimationFrame(fpsFrame);
dispose();
});
</script>
<template>
<section class="playground" :aria-label="`${preset.title} playground`">
<section
class="playground"
:class="{ fullscreen }"
:aria-label="`${preset.title} playground`"
>
<header>
<a v-if="fullscreen" class="brand" href="/">Yawn</a>
<strong>{{ preset.title }}</strong>
<span :class="{ failed }" data-playground-status>{{ status }}</span>
<button
@@ -133,21 +238,54 @@ onUnmounted(() => {
>
Reset
</button>
<button
v-if="fullscreen"
type="button"
class="secondary"
:aria-pressed="profilerOpen"
data-profiler-toggle
@click="toggleProfiler"
>
Profile
</button>
<button type="button" :disabled="running" @click="run">
{{ running ? "Running…" : "Run" }}
</button>
</header>
<nav v-if="fullscreen" class="saves" aria-label="Saved playgrounds">
<span>Saved</span>
<a
v-for="([save, item]) in examples"
:key="save"
:href="`/playground?save=${save}`"
:aria-current="save === selected ? 'page' : undefined"
@click="openSave($event, save)"
>
{{ item.title }}
</a>
</nav>
<div class="workspace">
<textarea
v-model="source"
aria-label="Editable playground code"
autocomplete="off"
autocapitalize="off"
spellcheck="false"
@keydown="tab"
/>
<div class="preview">
<div ref="editor" class="editor" />
<div ref="preview" class="preview">
<canvas :key="canvasKey" ref="canvas" aria-label="Yawn WebGPU output" />
<aside v-if="profilerOpen" class="profiler" data-playground-profiler>
<div class="profiler-title">
<strong>GPU passes</strong>
<span v-if="profile">{{ profile.milliseconds.toFixed(2) }} ms</span>
</div>
<p v-if="profilerSupported === false">
Timestamp queries are unavailable on this GPU.
</p>
<p v-else-if="!profile">Waiting for a completed frame…</p>
<table v-else>
<tbody>
<tr v-for="(pass, index) in profile.passes" :key="`${index}-${pass.name}`">
<th>{{ pass.name }}</th>
<td>{{ pass.milliseconds.toFixed(2) }} ms</td>
</tr>
</tbody>
</table>
</aside>
<div v-if="output.length" class="output" data-playground-log>
<div v-for="(line, index) in output" :key="index">{{ line }}</div>
</div>
@@ -170,6 +308,22 @@ onUnmounted(() => {
background: #0b1020;
box-shadow: var(--vp-shadow-3);
}
.playground.fullscreen {
position: fixed;
z-index: 100;
inset: 0;
left: 0;
display: flex;
flex-direction: column;
width: 100vw;
height: 100vh;
height: 100dvh;
margin: 0;
transform: none;
border: 0;
border-radius: 0;
box-shadow: none;
}
:global(.VPContent.has-sidebar .playground) {
left: calc(50% + var(--vp-sidebar-width) / 2);
width: min(1120px, calc(100vw - var(--vp-sidebar-width) - 64px));
@@ -193,6 +347,14 @@ header {
header strong {
white-space: nowrap;
}
.brand {
padding-right: 12px;
color: #60a5fa;
border-right: 1px solid #334155;
font-weight: 800;
letter-spacing: -0.02em;
text-decoration: none;
}
header span {
min-width: 0;
flex: 1;
@@ -223,24 +385,64 @@ button:disabled {
cursor: wait;
opacity: 0.55;
}
.saves {
display: flex;
min-height: 34px;
align-items: center;
gap: 5px;
overflow-x: auto;
padding: 4px 10px;
color: #64748b;
border-bottom: 1px solid #263249;
background: #0d1424;
font:
11px/1 ui-monospace,
SFMono-Regular,
Menlo,
monospace;
white-space: nowrap;
}
.saves span {
margin-right: 3px;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.saves a {
padding: 5px 7px;
color: #94a3b8;
border-radius: 5px;
text-decoration: none;
}
.saves a:hover {
color: #e2e8f0;
background: #1e293b;
}
.saves a[aria-current="page"] {
color: #bfdbfe;
background: #1d4ed8;
}
.workspace {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 510px;
}
textarea {
box-sizing: border-box;
width: 100%;
.fullscreen .workspace {
min-height: 0;
flex: 1;
}
.editor {
min-width: 0;
height: 510px;
resize: none;
padding: 18px;
color: #dbeafe;
border: 0;
border-right: 1px solid #263249;
outline: none;
background: #0b1020;
tab-size: 2;
}
.fullscreen .editor {
height: auto;
min-height: 0;
}
.editor :deep(.cm-editor) {
height: 100%;
background: #0b1020;
font:
13px/1.55 ui-monospace,
SFMono-Regular,
@@ -248,7 +450,17 @@ textarea {
Consolas,
monospace;
}
textarea:focus {
.editor :deep(.cm-scroller) {
overflow: auto;
font-family: inherit;
}
.editor :deep(.cm-gutters) {
color: #526079;
border-right-color: #263249;
background: #0d1424;
}
.editor :deep(.cm-focused) {
outline: none;
box-shadow: inset 0 0 0 2px #2563eb;
}
.preview {
@@ -281,6 +493,59 @@ canvas {
Menlo,
monospace;
}
.profiler {
position: absolute;
z-index: 2;
top: 0;
right: 0;
bottom: 0;
width: min(320px, 72%);
overflow: auto;
padding: 16px;
color: #cbd5e1;
border-left: 1px solid #334155;
background: rgb(2 6 23 / 94%);
font:
12px/1.45 ui-monospace,
SFMono-Regular,
Menlo,
monospace;
}
.profiler-title {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
color: #e2e8f0;
}
.profiler-title span {
color: #60a5fa;
font-weight: 700;
}
.profiler p {
color: #94a3b8;
}
.profiler table {
width: 100%;
border-collapse: collapse;
}
.profiler th,
.profiler td {
padding: 7px 0;
border-bottom: 1px solid #1e293b;
}
.profiler th {
overflow: hidden;
max-width: 190px;
text-align: left;
text-overflow: ellipsis;
white-space: nowrap;
}
.profiler td {
color: #93c5fd;
text-align: right;
white-space: nowrap;
}
.fps {
position: absolute;
right: 12px;
@@ -309,14 +574,21 @@ canvas {
.workspace {
grid-template-columns: 1fr;
}
textarea {
.editor {
height: 360px;
border-right: 0;
border-bottom: 1px solid #263249;
}
.fullscreen .editor {
height: 45vh;
min-height: 240px;
}
.preview {
min-height: 360px;
}
.fullscreen .preview {
min-height: 0;
}
header strong {
display: none;
}
docs/.vitepress/playgrounds.js
+25 -6
View File
@@ -137,12 +137,25 @@ log(\`Two mesh handles share geometry #\${source.geometryId}.\`);
return { scene, source, instance, dispose: () => scene.dispose() };`;
const materials = `import { Mesh, PBRMaterial, Scene } from "@yawn/handles";
const materials = `import { Mesh, PBRMaterial, Scene, Texture } from "@yawn/handles";
const scene = new Scene(canvas, { hdr: true });
await scene.ready;
const pixels = new OffscreenCanvas(64, 64);
const context = pixels.getContext("2d");
context.fillStyle = "#ff3018";
context.fillRect(0, 0, 64, 64);
context.fillStyle = "#ffd166";
context.fillRect(0, 0, 32, 32);
context.fillRect(32, 32, 32, 32);
const albedo = new Texture(scene, {
source: pixels.transferToImageBitmap(),
format: "rgba8unorm-srgb",
});
await albedo.ready;
const paint = new PBRMaterial(scene, {
baseColor: [0.85, 0.08, 0.18, 1],
baseColor: [1, 1, 1, 1],
baseColorTexture: albedo,
metallic: 0.75,
roughness: 0.18,
});
@@ -151,6 +164,8 @@ const mesh = new Mesh(scene, {
material: paint,
vertexData: {
positions: [-0.7, -0.6, 0, 0.7, -0.6, 0, 0, 0.72, 0],
normals: [0, 0, 1, 0, 0, 1, 0, 0, 1],
uvs: [0, 0, 2, 0, 1, 2],
indices: [0, 1, 2],
},
});
@@ -167,6 +182,7 @@ return {
scene,
mesh,
paint,
albedo,
dispose() {
canvas.removeEventListener("pointermove", move);
scene.dispose();
@@ -256,7 +272,7 @@ return { scene, mesh, exposure, grade, fxaa, dispose: () => scene.dispose() };`;
const importing = `import { AmbientLight, ArcRotateCamera, Picking, Scene, importGltf } from "@yawn/handles";
const scene = new Scene(canvas, { hdr: true, fps: 1, arenaBytes: 384 * 1024 * 1024 });
const scene = new Scene(canvas, { hdr: true, arenaBytes: 384 * 1024 * 1024 });
await scene.ready;
await scene.core.pause();
log("Importing /models/sponza.glb in the importer worker…");
@@ -307,9 +323,12 @@ for (const mesh of meshes) {
}
const camera = new ArcRotateCamera(scene, {
alpha: 0.7,
beta: 1.1,
radius: 2.7,
targetPosition: [-0.3, 0, 0],
alpha: Math.PI / 2,
beta: Math.PI / 2,
radius: 0.3,
near: 0.01,
far: 10,
aspect: canvas.width / canvas.height,
controls: { element: canvas, pointer: true },
});