1b726349ab
- GPU in the browser: each frame worker opens its own WebGPU device (Gpu::request_deferred) and renders the GPU compositor and GPU effects with deferred readbacks (effectcraft-gpu deferred): readbacks keyed by content start with map_async and miss, the pass returns placeholders, the layer cache's gate drops inserts, and FrameServer::resume renders again once the device delivered. Backend Auto times whole frames per comp in the workers. Frames with effects go to GPU workers instead of the page. CPU fallback without WebGPU in workers (?nogpuworkers). - Fix: a WGSL constant (3.40282347e38) that Chrome rejects invalidated every GPU kernel in Chrome (the page's compositor too); a test checks every float literal fits f32. - Disk cache in the Origin Private File System: workers write sealed frame entries with sync access handles (temp file + move), the page keeps the DiskIndex (LRU under the settings' limit, at most half the quota) and reads hits instead of rendering; survives reloads; blue cache bar. - Storage manager: Settings ▸ Disk ▸ Browser Storage (usage/quota, persistent storage, Clear buttons, automation ids) and storage.info / storage.persist / storage.clear (StorageHost). - Docs: web.md (GPU workers, deferred passes, disk cache, storage manager, threading design: one engine instance per worker), architecture, preferences, parity (WEB-1), roadmap. - Tests: deferred passes vs CPU on a real device, placeholder gating, frame server passes and Auto, GPU worker routing + disk cache across a reload, storage commands and widgets, store usage by kind; smoke test: GPU effect frames in workers with pixel parity, disk hits after a reload, storage manager. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
94 lines
4.3 KiB
HTML
94 lines
4.3 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="color-scheme" content="dark">
|
|
<meta name="theme-color" content="#1b1c1f">
|
|
<meta name="description" content="EffectCraft: motion graphics and visual effects in the browser">
|
|
<title>EffectCraft</title>
|
|
<link rel="icon" href="favicon.svg" type="image/svg+xml">
|
|
<link rel="manifest" href="manifest.webmanifest">
|
|
<link rel="apple-touch-icon" href="icon-256.png">
|
|
<style>
|
|
html, body { margin: 0; height: 100%; overflow: hidden; background: #1b1c1f; }
|
|
canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; }
|
|
#loading {
|
|
position: absolute; inset: 0; display: flex; flex-direction: column; gap: 14px;
|
|
align-items: center; justify-content: center; color: #c9c9cc;
|
|
font: 14px/1.4 system-ui, sans-serif; pointer-events: none;
|
|
}
|
|
#loading img { width: 56px; height: 56px; }
|
|
#loading .err { color: #ff8a7a; white-space: pre-wrap; max-width: 70ch; pointer-events: auto; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<canvas id="effectcraft_canvas"></canvas>
|
|
<div id="loading"><img src="favicon.svg" alt=""><div id="status">Loading EffectCraft…</div></div>
|
|
<script type="module">
|
|
import init, * as ec from "./effectcraft_web.js";
|
|
const t0 = performance.now();
|
|
window.effectcraftLoad = {};
|
|
// The agent / test API: the desktop control channel as promises (docs/web.md).
|
|
window.effectcraft = {
|
|
request: (method, params) => ec.request(method, params ?? {}),
|
|
execute: (command, params) => ec.request("engine.execute", { command, params: params ?? {} }),
|
|
commands: () => ec.request("engine.commands", {}),
|
|
inspect: () => ec.request("ui.inspect", {}),
|
|
screenshot: (params) => ec.request("ui.screenshot", params ?? {}),
|
|
renderFrame: (params) => ec.request("render.frame", { base64: true, ...(params ?? {}) }),
|
|
files: () => ec.files(),
|
|
readFile: (path) => ec.readFile(path),
|
|
addFile: async (fileOrUrl, name) => {
|
|
let bytes;
|
|
if (typeof fileOrUrl === "string") {
|
|
bytes = new Uint8Array(await (await fetch(fileOrUrl)).arrayBuffer());
|
|
name = name ?? fileOrUrl.split("/").pop();
|
|
} else {
|
|
bytes = new Uint8Array(await fileOrUrl.arrayBuffer());
|
|
name = name ?? fileOrUrl.name;
|
|
}
|
|
return ec.addFile(name, bytes);
|
|
},
|
|
info: () => ({
|
|
...ec.info(),
|
|
crossOriginIsolated: self.crossOriginIsolated,
|
|
webgpu: !!navigator.gpu,
|
|
serviceWorker: !!(navigator.serviceWorker && navigator.serviceWorker.controller),
|
|
load: window.effectcraftLoad,
|
|
}),
|
|
// Browser storage (OPFS / IndexedDB): save without downloading, list, remove, wait for writes.
|
|
saveToBrowser: (path) => ec.saveToBrowser(path ?? undefined),
|
|
listStored: () => ec.listStored(),
|
|
removeStored: (path) => ec.removeStored(path),
|
|
flush: () => ec.flush(),
|
|
// A frame rendered in a frame worker (its GPU by default) vs the page's CPU: {maxDiff, meanDiff, over4, …}.
|
|
workerFrameCheck: (params) => ec.workerFrameCheck(params ?? {}).then(JSON.parse),
|
|
};
|
|
// Offline start and install (PWA): the service worker caches the app's files.
|
|
if ("serviceWorker" in navigator && !new URLSearchParams(location.search).has("nosw")) {
|
|
navigator.serviceWorker.register("sw.js").catch((e) => console.warn("service worker:", e));
|
|
}
|
|
try {
|
|
// Compile once: the page and its render workers instantiate the same module.
|
|
const wasmUrl = new URL("effectcraft_web_bg.wasm", location.href);
|
|
let module;
|
|
try {
|
|
module = await WebAssembly.compileStreaming(fetch(wasmUrl));
|
|
} catch {
|
|
module = await WebAssembly.compile(await (await fetch(wasmUrl)).arrayBuffer());
|
|
}
|
|
window.effectcraftModule = module;
|
|
await init({ module_or_path: module });
|
|
window.effectcraftLoad.wasmMs = performance.now() - t0;
|
|
await ec.start("effectcraft_canvas");
|
|
window.effectcraftLoad.readyMs = performance.now() - t0;
|
|
} catch (e) {
|
|
const s = document.getElementById("status");
|
|
if (s) { s.className = "err"; s.textContent = "EffectCraft failed to start:\n" + (e && e.stack || e); }
|
|
window.effectcraftLoad.error = String(e);
|
|
throw e;
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|