2c0eaf2 | plum | pyrossh

git clone https://git.pyrossh.dev/plum

A statically typed, imperative programming language inspired by rust, python

2c0eaf2 — Peter John 2026-11-02T16:17:17+05:30

Add the gpu web renderer: own WebGPU batcher with a command-buffer decoder

Files changed (10) hide show

plum-cli/src/game.rs +16 -0
plum-cli/src/main.rs +1 -1
plum-cli/tests/game_web_test.rs +20 -0
plum-game/web-test/README.md +1 -1
plum-game/web-test/src/lib.rs +37 -2
plum-game/web-test/src/main.rs +4 -2
plum-game/web-test/tests/web_check.rs +17 -0
plum-game/web/gpu_cmd_check.mjs +93 -0
plum-game/web/index_gpu.html +17 -0
plum-game/web/plum_bridge_gpu.js +904 -0

plum-cli/src/game.rs CHANGED Viewed

@@ -35,6 +35,8 @@ pub enum Renderer {
     Macroquad,
     /// PixiJS, driven straight from the Plum module (experimental)
     Pixi,
+    /// our own batching renderer, WebGPU with a WebGL2 fallback, no library (experimental)
+    Gpu,
 }
 pub fn cmdGame(
@@ -58,6 +60,7 @@ pub fn cmdGame(
         return match renderer {
             Renderer::Macroquad => writeWeb(&wasm, &dist, &assets),
             Renderer::Pixi => writeWebPixi(&wasm, &dist, &assets),
+            Renderer::Gpu => writeWebGpu(&wasm, &dist, &assets),
         };
     }
     runNative(&wasm, &assets)
@@ -236,3 +239,16 @@ fn writeWebPixi(wasm: &[u8], dist: &Path, assets: &Path) -> Result<()> {
     eprintln!("wrote web build (pixi) to {}", dist.display());
     Ok(())
 }
+/// The own-batcher build needs no host wasm and no library: the page, the bridge and the Plum module.
+fn writeWebGpu(wasm: &[u8], dist: &Path, assets: &Path) -> Result<()> {
+    fs::create_dir_all(dist)?;
+    let web = repoRoot().join("plum-game/web");
+    fs::copy(web.join("index_gpu.html"), dist.join("index.html"))
+        .context("failed to copy index_gpu.html")?;
+    fs::copy(web.join("plum_bridge_gpu.js"), dist.join("plum_bridge_gpu.js"))
+        .context("failed to copy plum_bridge_gpu.js")?;
+    writeWebAssets(wasm, dist, assets)?;
+    eprintln!("wrote web build (gpu) to {}", dist.display());
+    Ok(())
+}

plum-cli/src/main.rs CHANGED Viewed

@@ -83,7 +83,7 @@ enum Command {
         /// Write a static web build instead of opening a window
         #[arg(long)]
         web: bool,
-        /// Browser renderer for --web: macroquad (default) or pixi (experimental)
+        /// Browser renderer for --web: macroquad (default), pixi or gpu (both experimental)
         #[arg(long, value_enum, default_value = "macroquad")]
         renderer: game::Renderer,
         /// Output directory for --web (default: `dist` beside the source file)

plum-cli/tests/game_web_test.rs CHANGED Viewed

@@ -102,3 +102,23 @@ fn pixiWebBuildNeedsNoHostWasm() {
     checkAssets(&dist);
     let _ = std::fs::remove_dir_all(&scratch);
 }
+#[test]
+fn gpuWebBuildNeedsNoHostWasmOrLibrary() {
+    let (dist, scratch) = exportFixture(Some("gpu"));
+    for f in ["index.html", "plum_bridge_gpu.js", "plum.wasm", "preload.txt"] {
+        assert!(dist.join(f).is_file(), "missing {f}");
+    }
+    for f in [
+        "mq_js_bundle.js",
+        "plum-game.wasm",
+        "plum_bridge.js",
+        "pixi.min.js",
+    ] {
+        assert!(!dist.join(f).exists(), "unexpected {f}");
+    }
+    let html = std::fs::read_to_string(dist.join("index.html")).unwrap();
+    assert!(html.contains("plum_bridge_gpu.js") && !html.contains("pixi"));
+    checkAssets(&dist);
+    let _ = std::fs::remove_dir_all(&scratch);
+}

plum-game/web-test/README.md CHANGED Viewed

@@ -21,7 +21,7 @@ Downloads the Chromium build matching the bundled Playwright driver (about 100 M
     cargo run --manifest-path plum-game/web-test/Cargo.toml -- plum-examples/game.plum --screenshot /tmp/orb-run.png
-Options: `--frames-wait SECS` (default 8), `--screenshot OUT.png`, `--require-audio`, `--renderer pixi|macroquad` (default macroquad), `--headed` (a real GPU window instead of headless software GL), `--measure SECS` (records requestAnimationFrame intervals in the page and prints avg / p50 / p95 / p99 ms, fps and the renderer Pixi chose from `plumRenderer`) and `--uncapped` (lifts vsync so the frame time is the work per frame). `fixtures/stress.plum` is the scene behind [BENCHMARK.md](BENCHMARK.md).
+Options: `--frames-wait SECS` (default 8), `--screenshot OUT.png`, `--require-audio`, `--renderer pixi|macroquad|gpu` (default macroquad), `--json` (adds a one-line JSON object with the renderer, backend and frame stats), `--headed` (a real GPU window instead of headless software GL), `--measure SECS` (records requestAnimationFrame intervals in the page and prints avg / p50 / p95 / p99 ms, fps and the renderer Pixi chose from `plumRenderer`) and `--uncapped` (lifts vsync so the frame time is the work per frame). `fixtures/stress.plum` is the scene behind [BENCHMARK.md](BENCHMARK.md).
 Exit code is non-zero with a message on failure.
 `cargo test --manifest-path plum-game/web-test/Cargo.toml` runs the same check on

plum-game/web-test/src/lib.rs CHANGED Viewed

@@ -13,6 +13,7 @@ use std::time::Duration;
 pub enum Renderer {
     Macroquad,
     Pixi,
+    Gpu,
 }
 impl Renderer {
@@ -20,6 +21,7 @@ impl Renderer {
         match self {
             Renderer::Macroquad => "macroquad",
             Renderer::Pixi => "pixi",
+            Renderer::Gpu => "gpu",
         }
     }
 }
@@ -33,6 +35,8 @@ pub struct Options {
     pub headed: bool,
     /// Record requestAnimationFrame intervals for this many seconds and report them.
     pub measure: Option<f64>,
+    /// Append a one-line JSON object with the renderer and frame statistics to the report.
+    pub json: bool,
     /// Lift Chromium's vsync / frame-rate cap so frame times show the work per frame.
     pub uncapped: bool,
 }
@@ -46,6 +50,7 @@ impl Default for Options {
             renderer: Renderer::Macroquad,
             headed: false,
             measure: None,
+            json: false,
             uncapped: false,
         }
     }
@@ -78,6 +83,29 @@ pub fn frame_stats(stamps: &[f64]) -> Option<FrameStats> {
     Some(FrameStats { frames: d.len(), avg: d.iter().sum::<f64>() / d.len() as f64, p50: pct(0.50), p95: pct(0.95), p99: pct(0.99) })
 }
+fn json_str(s: &str) -> String {
+    format!("\"{}\"", s.replace('\\', "\\\\").replace('"', "\\\""))
+}
+/// One JSON object: renderer, backend (`plumRenderer`), headed, uncapped and the frame statistics.
+pub fn stats_json(opts: &Options, backend: Option<&str>, st: Option<&FrameStats>) -> String {
+    let mut s = format!(
+        "{{\"renderer\":{},\"backend\":{},\"headed\":{},\"uncapped\":{}",
+        json_str(opts.renderer.name()),
+        backend.map(json_str).unwrap_or_else(|| "null".into()),
+        opts.headed,
+        opts.uncapped
+    );
+    match st {
+        Some(st) => s.push_str(&format!(
+            ",\"frames\":{},\"avg_ms\":{:.3},\"p50_ms\":{:.3},\"p95_ms\":{:.3},\"p99_ms\":{:.3},\"fps\":{:.2}}}",
+            st.frames, st.avg, st.p50, st.p95, st.p99, st.fps()
+        )),
+        None => s.push('}'),
+    }
+    s
+}
 /// Whether `playwright install chromium` has been run (browser cache dir exists).
 pub fn chromium_installed() -> bool {
     let dir = if let Ok(p) = std::env::var("PLAYWRIGHT_BROWSERS_PATH") {
@@ -269,6 +297,10 @@ async fn check(port: u16, opts: &Options) -> Result<String, String> {
     let mut args: Vec<String> = ["--ignore-gpu-blocklist", "--autoplay-policy=no-user-gesture-required"].map(String::from).to_vec();
     if !opts.headed {
         args.extend(["--use-angle=swiftshader", "--enable-unsafe-swiftshader"].map(String::from));
+        if opts.renderer == Renderer::Gpu {
+            // The gpu renderer is WebGPU only: give headless Chromium a software adapter.
+            args.extend(["--enable-unsafe-webgpu", "--enable-features=Vulkan", "--use-webgpu-adapter=swiftshader"].map(String::from));
+        }
     }
     if opts.uncapped {
         args.extend(["--disable-gpu-vsync", "--disable-frame-rate-limit"].map(String::from));
@@ -383,9 +415,12 @@ async fn check_page(browser: &playwright_rs::protocol::Browser, port: u16, opts:
     } else if opts.measure.is_some() {
         report.push_str("\nframes: none recorded");
     }
+    if opts.json {
+        report.push_str(&format!("\n{}", stats_json(opts, renderer.as_deref(), measured.as_ref())));
+    }
     let mut failures = vec![];
-    if opts.renderer == Renderer::Pixi && renderer.is_none() {
+    if matches!(opts.renderer, Renderer::Pixi | Renderer::Gpu) && renderer.is_none() {
-        failures.push("pixi build did not set globalThis.plumRenderer".to_string());
+        failures.push(format!("{} build did not set globalThis.plumRenderer", opts.renderer.name()));
     }
     if colours <= 1 {
         failures.push("canvas is blank (uniformly one colour)".to_string());

plum-game/web-test/src/main.rs CHANGED Viewed

@@ -1,7 +1,7 @@
 use plum_web_test::{chromium_installed, run, Options, Renderer};
 use std::path::PathBuf;
-const USAGE: &str = "usage: plum-web-test <file.plum> [--frames-wait SECS] [--screenshot OUT.png] [--require-audio]\n  [--renderer pixi|macroquad] [--headed] [--measure SECS] [--uncapped]";
+const USAGE: &str = "usage: plum-web-test <file.plum> [--frames-wait SECS] [--screenshot OUT.png] [--require-audio]\n  [--renderer pixi|macroquad|gpu] [--headed] [--measure SECS] [--uncapped] [--json]";
 #[tokio::main]
 async fn main() {
@@ -17,12 +17,14 @@ async fn main() {
             "--require-audio" => opts.require_audio = true,
             "--headed" => opts.headed = true,
             "--uncapped" => opts.uncapped = true,
+            "--json" => opts.json = true,
             "--measure" => opts.measure = Some(args.next().and_then(|v| v.parse().ok()).unwrap_or_else(|| fail("--measure needs a number of seconds"))),
             "--renderer" => {
                 opts.renderer = match args.next().as_deref() {
                     Some("pixi") => Renderer::Pixi,
+                    Some("gpu") => Renderer::Gpu,
                     Some("macroquad") => Renderer::Macroquad,
-                    _ => fail("--renderer needs pixi or macroquad"),
+                    _ => fail("--renderer needs pixi, macroquad or gpu"),
                 }
             }
             "-h" | "--help" => {

plum-game/web-test/tests/web_check.rs CHANGED Viewed

@@ -10,6 +10,23 @@ fn orb_run_renders_and_animates_on_pixi() {
     orb_run(Renderer::Pixi);
 }
+#[test]
+fn orb_run_renders_and_animates_on_gpu() {
+    orb_run(Renderer::Gpu);
+}
+#[test]
+fn stats_json_is_one_object() {
+    use plum_web_test::{stats_json, FrameStats, Options};
+    let st = FrameStats { frames: 3, avg: 2.0, p50: 2.0, p95: 3.0, p99: 3.0 };
+    let o = Options { renderer: Renderer::Gpu, headed: true, ..Options::default() };
+    assert_eq!(
+        stats_json(&o, Some("gpu-webgpu"), Some(&st)),
+        r#"{"renderer":"gpu","backend":"gpu-webgpu","headed":true,"uncapped":false,"frames":3,"avg_ms":2.000,"p50_ms":2.000,"p95_ms":3.000,"p99_ms":3.000,"fps":500.00}"#
+    );
+    assert_eq!(stats_json(&o, None, None), r#"{"renderer":"gpu","backend":null,"headed":true,"uncapped":false}"#);
+}
 fn orb_run(renderer: Renderer) {
     if !chromium_installed() {
         eprintln!("SKIP: Playwright Chromium not installed (see plum-game/web-test/README.md)");

plum-game/web/gpu_cmd_check.mjs ADDED Viewed

@@ -0,0 +1,93 @@
+// Usage: node gpu_cmd_check.mjs
+//
+// Hand-encodes one command of each opcode into an ArrayBuffer, decodes it with
+// plum_bridge_gpu.js's decoder and checks the batcher's vertex/index/batch counts.
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+import vm from "node:vm";
+import assert from "node:assert/strict";
+const here = dirname(fileURLToPath(import.meta.url));
+vm.runInThisContext(readFileSync(join(here, "plum_bridge_gpu.js"), "utf8"));
+const { makeBatcher, decodeCommands } = globalThis.PlumGpu;
+// --- encoder ---------------------------------------------------------------------
+const buf = new ArrayBuffer(4096);
+const dv = new DataView(buf);
+let p = 0;
+const u = (v) => { dv.setUint32(p, v, true); p += 4; };
+const i = (v) => { dv.setInt32(p, v, true); p += 4; };
+const f = (...vs) => { for (const v of vs) { dv.setFloat32(p, v, true); p += 4; } };
+const text = (s) => {
+  const bytes = new TextEncoder().encode(s);
+  i(bytes.length);
+  new Uint8Array(buf, p, bytes.length).set(bytes);
+  p += (bytes.length + 3) & ~3;
+};
+u(1); f(0.1, 0.2, 0.3, 1);                                // clear
+u(2); f(10, 20, 30, 40, 1, 0, 0, 1);                      // rect            : white batch
+u(3); f(0, 0, 100, 0, 4, 0, 1, 0, 1);                     // line            : white batch
+u(4); f(50, 50, 10, 0, 0, 1, 1);                          // circle (24 segs): white batch
+u(5); f(5, 6, 16, 1, 1, 1, 1); text("héllo");             // text            : text batch
+u(6); i(0); f(1, 2, 1, 1, 1, 1);                          // texture         : tex 0 batch
+u(7); i(0); f(0, 0, 8, 8, 10, 10, 16, 16, 0.5); i(1); f(1, 1, 1, 1); // textureEx: same batch, rotated, flipped
+u(8); f(100, 50, 2);                                      // setCamera
+u(2); f(0, 0, 1, 1, 1, 1, 1, 1);                          // rect after camera: white batch again
+u(9);                                                     // resetCamera
+const len = p;
+const texts = [];
+const b = makeBatcher({
+  textTexture: (s, px) => {
+    const t = { w: s.length * px, h: px + 2, pad: 1 };
+    texts.push([s, px]);
+    return t;
+  },
+});
+b.textures.push({ w: 16, h: 16 });
+b.beginFrame(800, 600);
+const n = decodeCommands(new DataView(buf, 0, len), b);
+assert.equal(n, 10, "command count");
+assert.deepEqual(Array.from(b.clearColor).map((v) => Math.round(v * 10)), [1, 2, 3, 10]);
+assert.deepEqual(texts, [["héllo", 16]], "text decoded as UTF-8 at size 16");
+// rect 4v/6i, line 4/6, circle 25/72, text 4/6, texture 4/6, textureEx 4/6, rect 4/6
+assert.equal(b.vertexCount, 4 + 4 + 25 + 4 + 4 + 4 + 4);
+assert.equal(b.indexCount, 6 + 6 + 72 + 6 + 6 + 6 + 6);
+// batches: white(rect,line,circle) | text | tex0(texture,textureEx) | white(rect)
+assert.equal(b.batchCount, 4);
+assert.deepEqual(Array.from({ length: 4 }, (_, k) => b.batches[k].count), [84, 6, 12, 6]);
+assert.equal(b.batches[0].tex, b.white);
+assert.equal(b.batches[2].tex, b.textures[0]);
+assert.equal(b.batches[3].tex, b.white);
+// every index points at an existing vertex
+for (let k = 0; k < b.indexCount; k++) assert.ok(b.idx[k] < b.vertexCount);
+// the first rect (10,20)-(40,60) in an 800x600 identity camera -> clip coordinates
+assert.ok(Math.abs(b.f32[0] - (10 * 2 / 800 - 1)) < 1e-6);
+assert.ok(Math.abs(b.f32[1] - (1 - 20 * 2 / 600)) < 1e-6);
+// a clear mid-frame discards earlier geometry
+const b2 = makeBatcher({ textTexture: () => null });
+b2.beginFrame(100, 100);
+b2.drawRect(0, 0, 1, 1, 1, 1, 1, 1);
+b2.clear(0, 0, 0, 1);
+assert.equal(b2.vertexCount, 0);
+assert.equal(b2.batchCount, 0);
+// growth past the initial capacity keeps earlier vertices
+const b3 = makeBatcher({ textTexture: () => null });
+b3.beginFrame(100, 100);
+for (let k = 0; k < 10000; k++) b3.drawRect(k, 0, 1, 1, 1, 1, 1, 1);
+assert.equal(b3.vertexCount, 40000);
+assert.equal(b3.batchCount, 1);
+assert.equal(b3.batches[0].count, 60000);
+assert.ok(Math.abs(b3.f32[0] - (-1)) < 1e-6);
+// truncated / unknown input is rejected
+const bad = new DataView(new ArrayBuffer(4));
+bad.setUint32(0, 99, true);
+assert.throws(() => decodeCommands(bad, b2), /unknown opcode 99/);
+console.log("gpu_cmd_check: ok");

plum-game/web/index_gpu.html ADDED Viewed

@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Plum Game</title>
+  <link rel="icon" href="data:,">
+  <style>
+    html, body, canvas { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: #000; }
+    canvas:focus { outline: none; }
+  </style>
+</head>
+<body>
+  <canvas id="glcanvas" tabindex="1"></canvas>
+  <script src="plum_bridge_gpu.js"></script>
+</body>
+</html>

plum-game/web/plum_bridge_gpu.js ADDED Viewed

@@ -0,0 +1,904 @@
+// Own batching renderer for a Plum game: plum.wasm calls this file directly (no
+// second wasm module, no library). Every draw becomes quads or triangle fans
+// written into one CPU vertex/index array (camera applied on the CPU), flushed
+// with one buffer upload per frame and one draw call per run of the same texture.
+// Untextured shapes sample a 1x1 white texture. The backend is WebGPU where the
+// browser has it; there is no fallback (a page without navigator.gpu says so).
+//
+// Two input modes share the batcher: per-call (each Game.plum draw extern appends
+// vertices) and, when the module exports `cmdPtr`, `cmdLen`, `cmdReset` and
+// `memory`, a command buffer decoded once per frame (see decodeCommands).
+// Plum's `Str` is a GC struct JS can't read: it is read through the module's
+// `strLen`/`strByte` exports and built with `strNew`/`strSetByte`.
+(function () {
+  "use strict";
+  const IMAGE_EXT = /\.(png|jpe?g|gif|webp|bmp)$/i;
+  const SOUND_EXT = /\.(wav|ogg)$/i;
+  // --- paths --------------------------------------------------------------------
+  // The asset-root-relative form of `p`, or null if it is empty, absolute or escapes the root.
+  function normPath(p) {
+    if (!p || p.includes("\\") || p.startsWith("/")) return null;
+    const parts = [];
+    for (const c of p.split("/")) {
+      if (c === "" || c === ".") continue;
+      if (c === "..") return null;
+      parts.push(c);
+    }
+    return parts.length ? parts.join("/") : null;
+  }
+  // --- Plum Str -------------------------------------------------------------------
+  function strToJs(plum, s) {
+    const n = plum.strLen(s);
+    const bytes = new Uint8Array(n);
+    for (let i = 0; i < n; i++) bytes[i] = plum.strByte(s, i);
+    return new TextDecoder().decode(bytes);
+  }
+  function bytesToStr(plum, bytes) {
+    const out = plum.strNew(bytes.length);
+    for (let i = 0; i < bytes.length; i++) plum.strSetByte(out, i, bytes[i]);
+    return out;
+  }
+  // --- input ----------------------------------------------------------------------
+  // KeyboardEvent.code -> GLFW key number (the numbering of `Key` in Game.plum).
+  function glfwKey(code) {
+    if (code.length === 4 && code.startsWith("Key")) return code.charCodeAt(3);
+    if (code.length === 6 && code.startsWith("Digit")) return code.charCodeAt(5);
+    switch (code) {
+      case "Space": return 32;
+      case "Escape": return 256;
+      case "Enter": case "NumpadEnter": return 257;
+      case "Tab": return 258;
+      case "Backspace": return 259;
+      case "ArrowRight": return 262;
+      case "ArrowLeft": return 263;
+      case "ArrowDown": return 264;
+      case "ArrowUp": return 265;
+      case "ShiftLeft": return 340;
+      case "ControlLeft": return 341;
+      default: return -1;
+    }
+  }
+  const MOUSE_BUTTONS = [0, 2, 1]; // DOM 0/1/2 = left/middle/right -> Mouse.Left/Middle/Right numbers 0/2/1
+  function makeInput(canvas) {
+    const keysDown = new Set();
+    let keysPressed = new Set();
+    let keysPending = new Set();
+    const mouseDown = new Set();
+    let mousePressed = new Set();
+    let mousePending = new Set();
+    let wheelPending = 0;
+    let wheel = 0;
+    const mouse = { x: 0, y: 0 };
+    window.addEventListener("keydown", (e) => {
+      const k = glfwKey(e.code);
+      if (k < 0) return;
+      if (k === 32 || k === 258 || k === 259 || (k >= 262 && k <= 265)) e.preventDefault();
+      if (!e.repeat) keysPending.add(k);
+      keysDown.add(k);
+    });
+    window.addEventListener("keyup", (e) => {
+      const k = glfwKey(e.code);
+      if (k >= 0) keysDown.delete(k);
+    });
+    window.addEventListener("blur", () => {
+      keysDown.clear();
+      mouseDown.clear();
+    });
+    const track = (e) => {
+      const r = canvas.getBoundingClientRect();
+      mouse.x = e.clientX - r.left;
+      mouse.y = e.clientY - r.top;
+    };
+    window.addEventListener("pointermove", track);
+    canvas.addEventListener("pointerdown", (e) => {
+      track(e);
+      const b = MOUSE_BUTTONS[e.button];
+      if (b === undefined) return;
+      mousePending.add(b);
+      mouseDown.add(b);
+    });
+    window.addEventListener("pointerup", (e) => {
+      const b = MOUSE_BUTTONS[e.button];
+      if (b !== undefined) mouseDown.delete(b);
+    });
+    canvas.addEventListener(
+      "wheel",
+      (e) => {
+        e.preventDefault();
+        wheelPending += Math.sign(-e.deltaY);
+      },
+      { passive: false }
+    );
+    document.addEventListener("contextmenu", (e) => e.preventDefault());
+    return {
+      mouse,
+      // Fixes what isKeyPressed / isMousePressed / mouseWheel report for the frame about to run.
+      beginFrame() {
+        [keysPressed, keysPending] = [keysPending, keysPressed];
+        keysPending.clear();
+        [mousePressed, mousePending] = [mousePending, mousePressed];
+        mousePending.clear();
+        wheel = Math.sign(wheelPending);
+        wheelPending = 0;
+      },
+      isKeyDown: (k) => (keysDown.has(k) ? 1 : 0),
+      isKeyPressed: (k) => (keysPressed.has(k) ? 1 : 0),
+      isMouseDown: (b) => (mouseDown.has(b) ? 1 : 0),
+      isMousePressed: (b) => (mousePressed.has(b) ? 1 : 0),
+      mouseWheel: () => wheel,
+    };
+  }
+  // --- sound ----------------------------------------------------------------------
+  function makeAudio() {
+    const AC = globalThis.AudioContext || globalThis.webkitAudioContext;
+    const ctx = AC ? new AC() : null;
+    const decoded = new Map(); // path -> AudioBuffer
+    const handles = []; // handle -> { path, plays: Set<{ src, gain }> }
+    if (ctx) {
+      const resume = () => {
+        if (ctx.state !== "running") ctx.resume();
+      };
+      for (const ev of ["pointerdown", "keydown", "touchstart"]) window.addEventListener(ev, resume);
+    }
+    const sound = (h) => (h >= 0 && h < handles.length ? handles[h] : null);
+    const clampVolume = (v) => (v > 0 ? Math.min(v, 1) : 0);
+    function start(h, volume, loop) {
+      const s = sound(h);
+      if (!s || !ctx) return;
+      // A one-shot before the first user gesture is dropped, not queued.
+      if (!loop && ctx.state !== "running") return;
+      const src = ctx.createBufferSource();
+      src.buffer = decoded.get(s.path);
+      src.loop = loop;
+      const gain = ctx.createGain();
+      gain.gain.value = clampVolume(volume);
+      src.connect(gain).connect(ctx.destination);
+      const play = { src, gain };
+      s.plays.add(play);
+      src.onended = () => s.plays.delete(play);
+      src.start();
+    }
+    return {
+      ctx,
+      // Decodes `bytes` for later soundLoad(path); false if undecodable.
+      async decode(path, bytes) {
+        if (!ctx) return false;
+        try {
+          decoded.set(path, await ctx.decodeAudioData(bytes.slice().buffer));
+          return true;
+        } catch (e) {
+          console.warn(path + ": could not decode sound", e);
+          return false;
+        }
+      },
+      load(path) {
+        if (!decoded.has(path)) return -1;
+        let h = handles.findIndex((s) => s.path === path);
+        if (h < 0) h = handles.push({ path, plays: new Set() }) - 1;
+        return h;
+      },
+      play: (h, v) => start(h, v, false),
+      loop: (h, v) => start(h, v, true),
+      stop(h) {
+        const s = sound(h);
+        if (!s) return;
+        for (const p of s.plays) {
+          p.src.onended = null;
+          try { p.src.stop(); } catch (e) { /* already stopped */ }
+        }
+        s.plays.clear();
+      },
+      setVolume(h, v) {
+        const s = sound(h);
+        if (s) for (const p of s.plays) p.gain.gain.value = clampVolume(v);
+      },
+    };
+  }
+  // --- files ----------------------------------------------------------------------
+  // Fetches every file listed in preload.txt. Returns path -> Uint8Array.
+  async function preload() {
+    const list = await (await fetch("preload.txt")).text();
+    const files = new Map();
+    await Promise.all(
+      list.split("\n").map((l) => l.trim()).filter(Boolean).map(async (path) => {
+        const r = await fetch("assets/" + path);
+        if (!r.ok) throw new Error(path + ": HTTP " + r.status);
+        files.set(path, new Uint8Array(await r.arrayBuffer()));
+      })
+    );
+    return files;
+  }
+  // --- batcher ----------------------------------------------------------------------
+  // One vertex is 20 bytes: x, y (clip space), u, v (f32) and rgba (u8x4).
+  const VERT_WORDS = 5;
+  const VERT_BYTES = 20;
+  const MAX_SEGMENTS = 96;
+  function clamp01(v) {
+    return v > 0 ? (v < 1 ? v : 1) : 0;
+  }
+  function packColor(r, g, b, a) {
+    return (
+      ((clamp01(r) * 255 + 0.5) | 0) |
+      (((clamp01(g) * 255 + 0.5) | 0) << 8) |
+      (((clamp01(b) * 255 + 0.5) | 0) << 16) |
+      (((clamp01(a) * 255 + 0.5) | 0) << 24)
+    ) >>> 0;
+  }
+  const circleTables = new Map(); // segments -> Float32Array [cos0, sin0, cos1, sin1, ...]
+  function circleTable(n) {
+    let t = circleTables.get(n);
+    if (!t) {
+      t = new Float32Array(n * 2);
+      for (let i = 0; i < n; i++) {
+        t[2 * i] = Math.cos((i / n) * 2 * Math.PI);
+        t[2 * i + 1] = Math.sin((i / n) * 2 * Math.PI);
+      }
+      circleTables.set(n, t);
+    }
+    return t;
+  }
+  // env.textTexture(str, px) -> { w, h, pad } texture object for a text run
+  // (white glyphs on transparent, `pad` px of margin on every side), or null.
+  function makeBatcher(env) {
+    let vcap = 1 << 14;
+    let icap = 1 << 15;
+    let buf = new ArrayBuffer(vcap * VERT_BYTES);
+    let f32 = new Float32Array(buf);
+    let u32 = new Uint32Array(buf);
+    let idx = new Uint32Array(icap);
+    let vn = 0; // vertices used
+    let inn = 0; // indices used
+    const batches = []; // pooled { tex, start, count }
+    let nb = 0;
+    let cur = null;
+    const white = { w: 1, h: 1, white: true };
+    const textures = []; // handle -> texture object { w, h, ... }
+    let sw = 1;
+    let sh = 1;
+    const cam = { x: 0, y: 0, s: 1 };
+    // world -> clip: X = x * mx + bx, Y = y * my + by
+    let mx = 2;
+    let bx = -1;
+    let my = -2;
+    let by = 1;
+    const clearColor = [0, 0, 0, 1];
+    function reserve(nv, ni) {
+      if (vn + nv > vcap) {
+        while (vn + nv > vcap) vcap *= 2;
+        const nbuf = new ArrayBuffer(vcap * VERT_BYTES);
+        new Uint8Array(nbuf).set(new Uint8Array(buf, 0, vn * VERT_BYTES));
+        buf = nbuf;
+        f32 = new Float32Array(buf);
+        u32 = new Uint32Array(buf);
+      }
+      if (inn + ni > icap) {
+        while (inn + ni > icap) icap *= 2;
+        const nidx = new Uint32Array(icap);
+        nidx.set(idx.subarray(0, inn));
+        idx = nidx;
+      }
+    }
+    // Starts a new batch only when the texture changes.
+    function useTex(t) {
+      if (cur && cur.tex === t) return;
+      cur = batches[nb];
+      if (!cur) batches.push((cur = { tex: t, start: 0, count: 0 }));
+      nb++;
+      cur.tex = t;
+      cur.start = inn;
+      cur.count = 0;
+    }
+    function vert(x, y, u, v, c) {
+      const o = vn * VERT_WORDS;
+      f32[o] = x * mx + bx;
+      f32[o + 1] = y * my + by;
+      f32[o + 2] = u;
+      f32[o + 3] = v;
+      u32[o + 4] = c;
+      vn++;
+    }
+    // Corners in order: top-left, top-right, bottom-right, bottom-left.
+    function quad(t, ax, ay, bx_, by_, cx, cy, dx, dy, u0, v0, u1, v1, c) {
+      reserve(4, 6);
+      useTex(t);
+      const base = vn;
+      vert(ax, ay, u0, v0, c);
+      vert(bx_, by_, u1, v0, c);
+      vert(cx, cy, u1, v1, c);
+      vert(dx, dy, u0, v1, c);
+      idx[inn] = base;
+      idx[inn + 1] = base + 1;
+      idx[inn + 2] = base + 2;
+      idx[inn + 3] = base;
+      idx[inn + 4] = base + 2;
+      idx[inn + 5] = base + 3;
+      inn += 6;
+      cur.count += 6;
+    }
+    function setCamera(x, y, s) {
+      cam.x = x;
+      cam.y = y;
+      cam.s = s;
+      mx = (2 * s) / sw;
+      bx = -x * mx - 1;
+      my = (-2 * s) / sh;
+      by = 1 - y * my;
+    }
+    const self = {
+      textures,
+      white,
+      cam,
+      clearColor,
+      // Per-frame state; (w, h) is the screen size in pixels.
+      beginFrame(w, h) {
+        sw = w;
+        sh = h;
+        vn = 0;
+        inn = 0;
+        nb = 0;
+        cur = null;
+        clearColor[0] = clearColor[1] = clearColor[2] = 0;
+        clearColor[3] = 1;
+        setCamera(0, 0, 1);
+      },
+      get f32() { return f32; },
+      get idx() { return idx; },
+      get vertexCount() { return vn; },
+      get indexCount() { return inn; },
+      get batchCount() { return nb; },
+      batches,
+      // Everything drawn so far this frame is discarded, as clearing the screen does.
+      clear(r, g, b, a) {
+        vn = 0;
+        inn = 0;
+        nb = 0;
+        cur = null;
+        clearColor[0] = clamp01(r);
+        clearColor[1] = clamp01(g);
+        clearColor[2] = clamp01(b);
+        clearColor[3] = clamp01(a);
+      },
+      drawRect(x, y, w, h, r, g, b, a) {
+        quad(white, x, y, x + w, y, x + w, y + h, x, y + h, 0, 0, 1, 1, packColor(r, g, b, a));
+      },
+      drawLine(x1, y1, x2, y2, th, r, g, b, a) {
+        const dx = x2 - x1;
+        const dy = y2 - y1;
+        const len = Math.sqrt(dx * dx + dy * dy);
+        if (!(len > 0)) return;
+        const nx = (-dy / len) * (th / 2);
+        const ny = (dx / len) * (th / 2);
+        quad(white, x1 + nx, y1 + ny, x2 + nx, y2 + ny, x2 - nx, y2 - ny, x1 - nx, y1 - ny, 0, 0, 1, 1, packColor(r, g, b, a));
+      },
+      drawCircle(x, y, rad, r, g, b, a) {
+        if (!(rad > 0)) return;
+        const n = Math.min(MAX_SEGMENTS, Math.max(24, Math.ceil(rad * cam.s * 0.6)));
+        reserve(n + 1, n * 3);
+        useTex(white);
+        const c = packColor(r, g, b, a);
+        const base = vn;
+        vert(x, y, 0.5, 0.5, c);
+        const t = circleTable(n);
+        for (let i = 0; i < n; i++) vert(x + rad * t[2 * i], y + rad * t[2 * i + 1], 0.5, 0.5, c);
+        for (let i = 0; i < n; i++) {
+          idx[inn] = base;
+          idx[inn + 1] = base + 1 + i;
+          idx[inn + 2] = base + 1 + ((i + 1) % n);
+          inn += 3;
+        }
+        cur.count += n * 3;
+      },
+      // `x, y` is the text's top-left. The run is rasterised at its on-screen
+      // size (size * camera scale), so it is drawn 1:1 in screen pixels.
+      drawText(str, x, y, size, r, g, b, a) {
+        if (!str) return;
+        const px = Math.max(1, Math.round(size * cam.s));
+        const t = env.textTexture(str, px);
+        if (!t) return;
+        const s = cam.s;
+        const x0 = x - t.pad / s;
+        const y0 = y - t.pad / s;
+        const x1 = x0 + t.w / s;
+        const y1 = y0 + t.h / s;
+        quad(t, x0, y0, x1, y0, x1, y1, x0, y1, 0, 0, 1, 1, packColor(r, g, b, a));
+      },
+      setCamera,
+      resetCamera() {
+        setCamera(0, 0, 1);
+      },
+      textureWidth: (h) => (textures[h] ? textures[h].w : 0),
+      textureHeight: (h) => (textures[h] ? textures[h].h : 0),
+      drawTexture(h, x, y, r, g, b, a) {
+        const t = textures[h];
+        if (!t) return;
+        quad(t, x, y, x + t.w, y, x + t.w, y + t.h, x, y + t.h, 0, 0, 1, 1, packColor(r, g, b, a));
+      },
+      drawTextureEx(h, sx, sy, sw_, sh_, x, y, w, ht, rotation, flip, r, g, b, a) {
+        const t = textures[h];
+        if (!t || sw_ === 0 || sh_ === 0) return;
+        let u0 = sx / t.w;
+        let u1 = (sx + sw_) / t.w;
+        const v0 = sy / t.h;
+        const v1 = (sy + sh_) / t.h;
+        if (flip) {
+          const tmp = u0;
+          u0 = u1;
+          u1 = tmp;
+        }
+        const c = packColor(r, g, b, a);
+        if (rotation === 0) {
+          quad(t, x, y, x + w, y, x + w, y + ht, x, y + ht, u0, v0, u1, v1, c);
+          return;
+        }
+        // Rotated clockwise (y points down) about the dest centre.
+        const cx = x + w / 2;
+        const cy = y + ht / 2;
+        const hw = w / 2;
+        const hh = ht / 2;
+        const co = Math.cos(rotation);
+        const si = Math.sin(rotation);
+        quad(
+          t,
+          cx - hw * co + hh * si, cy - hw * si - hh * co,
+          cx + hw * co + hh * si, cy + hw * si - hh * co,
+          cx + hw * co - hh * si, cy + hw * si + hh * co,
+          cx - hw * co - hh * si, cy - hw * si + hh * co,
+          u0, v0, u1, v1, c
+        );
+      },
+    };
+    return self;
+  }
+  // --- command buffer ---------------------------------------------------------------
+  // Decodes one frame of commands (little-endian, 4-byte fields; see
+  // docs/plans/2026-11-02-render-experiments.md) from `view` and feeds `r`,
+  // which has the batcher's draw methods. Returns the number of commands.
+  function decodeCommands(view, r) {
+    const end = view.byteLength;
+    const dec = new TextDecoder();
+    let p = 0;
+    let n = 0;
+    const f = () => {
+      const v = view.getFloat32(p, true);
+      p += 4;
+      return v;
+    };
+    const i = () => {
+      const v = view.getInt32(p, true);
+      p += 4;
+      return v;
+    };
+    while (p < end) {
+      const op = view.getUint32(p, true);
+      p += 4;
+      n++;
+      switch (op) {
+        case 1: r.clear(f(), f(), f(), f()); break;
+        case 2: r.drawRect(f(), f(), f(), f(), f(), f(), f(), f()); break;
+        case 3: r.drawLine(f(), f(), f(), f(), f(), f(), f(), f(), f()); break;
+        case 4: r.drawCircle(f(), f(), f(), f(), f(), f(), f()); break;
+        case 5: {
+          const x = f(), y = f(), size = f(), cr = f(), cg = f(), cb = f(), ca = f();
+          const len = i();
+          const str = dec.decode(new Uint8Array(view.buffer, view.byteOffset + p, len));
+          p += (len + 3) & ~3;
+          r.drawText(str, x, y, size, cr, cg, cb, ca);
+          break;
+        }
+        case 6: {
+          const h = i();
+          r.drawTexture(h, f(), f(), f(), f(), f(), f());
+          break;
+        }
+        case 7: {
+          const h = i();
+          const sx = f(), sy = f(), sw = f(), sh = f(), x = f(), y = f(), w = f(), ht = f(), rot = f();
+          const flip = i();
+          r.drawTextureEx(h, sx, sy, sw, sh, x, y, w, ht, rot, flip, f(), f(), f(), f());
+          break;
+        }
+        case 8: r.setCamera(f(), f(), f()); break;
+        case 9: r.resetCamera(); break;
+        default:
+          throw new Error("command buffer: unknown opcode " + op + " at byte " + (p - 4));
+      }
+    }
+    return n;
+  }
+  // --- backends -----------------------------------------------------------------------
+  // A backend: { name, createTexture(source, w, h, smooth) -> { w, h, ...gpu fields },
+  // setSmooth(tex, smooth), destroyTexture(tex), submit(batcher, w, h) }.
+  const WGSL = `
+struct VOut {
+  @builtin(position) p: vec4f,
+  @location(0) uv: vec2f,
+  @location(1) c: vec4f,
+};
+@vertex fn vs(@location(0) p: vec2f, @location(1) uv: vec2f, @location(2) c: vec4f) -> VOut {
+  var o: VOut;
+  o.p = vec4f(p, 0.0, 1.0);
+  o.uv = uv;
+  o.c = c;
+  return o;
+}
+@group(0) @binding(0) var tex: texture_2d<f32>;
+@group(0) @binding(1) var smp: sampler;
+@fragment fn fs(i: VOut) -> @location(0) vec4f {
+  return textureSample(tex, smp, i.uv) * i.c;
+}`;
+  async function makeWebGPU(canvas, white) {
+    if (!navigator.gpu) return null;
+    const adapter = await navigator.gpu.requestAdapter();
+    if (!adapter) return null;
+    const device = await adapter.requestDevice();
+    const ctx = canvas.getContext("webgpu");
+    if (!ctx) return null;
+    const format = navigator.gpu.getPreferredCanvasFormat();
+    ctx.configure({ device, format, alphaMode: "opaque" });
+    const module = device.createShaderModule({ code: WGSL });
+    const pipeline = device.createRenderPipeline({
+      layout: "auto",
+      vertex: {
+        module,
+        entryPoint: "vs",
+        buffers: [{
+          arrayStride: VERT_BYTES,
+          attributes: [
+            { shaderLocation: 0, format: "float32x2", offset: 0 },
+            { shaderLocation: 1, format: "float32x2", offset: 8 },
+            { shaderLocation: 2, format: "unorm8x4", offset: 16 },
+          ],
+        }],
+      },
+      fragment: {
+        module,
+        entryPoint: "fs",
+        targets: [{
+          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" },
+    });
+    const layout = pipeline.getBindGroupLayout(0);
+    const nearest = device.createSampler({ magFilter: "nearest", minFilter: "nearest" });
+    const linear = device.createSampler({ magFilter: "linear", minFilter: "linear" });
+    let vbuf = null;
+    let vsize = 0;
+    let ibuf = null;
+    let isize = 0;
+    function bind(t) {
+      t.bg = device.createBindGroup({
+        layout,
+        entries: [
+          { binding: 0, resource: t.view },
+          { binding: 1, resource: t.smooth ? linear : nearest },
+        ],
+      });
+    }
+    function createTexture(source, w, h, smooth) {
+      const gpu = device.createTexture({
+        size: [w, h],
+        format: "rgba8unorm",
+        usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT,
+      });
+      if (source && source.data) device.queue.writeTexture({ texture: gpu }, source.data, { bytesPerRow: w * 4 }, [w, h]);
+      else if (source) device.queue.copyExternalImageToTexture({ source }, { texture: gpu }, [w, h]);
+      else device.queue.writeTexture({ texture: gpu }, new Uint8Array([255, 255, 255, 255]), { bytesPerRow: 4 }, [1, 1]);
+      const t = { w, h, gpu, view: gpu.createView(), smooth: !!smooth, bg: null };
+      bind(t);
+      return t;
+    }
+    Object.assign(white, createTexture(null, 1, 1, false));
+    return {
+      name: "gpu-webgpu",
+      createTexture,
+      setSmooth(t, smooth) {
+        if (t.smooth === !!smooth) return;
+        t.smooth = !!smooth;
+        bind(t);
+      },
+      destroyTexture(t) {
+        t.gpu.destroy();
+      },
+      submit(b) {
+        const vbytes = b.vertexCount * VERT_BYTES;
+        const ibytes = b.indexCount * 4;
+        if (vbytes > vsize) {
+          if (vbuf) vbuf.destroy();
+          vsize = Math.max(vbytes, vsize * 2, 1 << 16);
+          vbuf = device.createBuffer({ size: vsize, usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST });
+        }
+        if (ibytes > isize) {
+          if (ibuf) ibuf.destroy();
+          isize = Math.max(ibytes, isize * 2, 1 << 16);
+          ibuf = device.createBuffer({ size: isize, usage: GPUBufferUsage.INDEX | GPUBufferUsage.COPY_DST });
+        }
+        if (vbytes) {
+          device.queue.writeBuffer(vbuf, 0, b.f32.buffer, 0, vbytes);
+          device.queue.writeBuffer(ibuf, 0, b.idx.buffer, 0, ibytes);
+        }
+        const [cr, cg, cb] = b.clearColor;
+        const enc = device.createCommandEncoder();
+        const pass = enc.beginRenderPass({
+          colorAttachments: [{
+            view: ctx.getCurrentTexture().createView(),
+            clearValue: { r: cr, g: cg, b: cb, a: 1 },
+            loadOp: "clear",
+            storeOp: "store",
+          }],
+        });
+        if (vbytes) {
+          pass.setPipeline(pipeline);
+          pass.setVertexBuffer(0, vbuf);
+          pass.setIndexBuffer(ibuf, "uint32");
+          for (let i = 0; i < b.batchCount; i++) {
+            const bt = b.batches[i];
+            pass.setBindGroup(0, bt.tex.bg);
+            pass.drawIndexed(bt.count, 1, bt.start);
+          }
+        }
+        pass.end();
+        device.queue.submit([enc.finish()]);
+      },
+    };
+  }
+  // --- text -------------------------------------------------------------------------
+  const TEXT_PAD = 1;
+  const TEXT_CACHE_MAX = 512;
+  // Rasterises (string, px) runs once into backend textures, LRU-evicted.
+  function makeTextCache(getBackend) {
+    const cache = new Map(); // "px|str" -> { tex, frame }; Map order = LRU order
+    let frameNo = 0;
+    let scratch = null;
+    let ctx2d = null;
+    return {
+      textTexture(str, px) {
+        const key = px + "|" + str;
+        let e = cache.get(key);
+        if (e) {
+          cache.delete(key);
+          cache.set(key, e);
+          e.frame = frameNo;
+          return e.tex;
+        }
+        if (!scratch) {
+          scratch = typeof OffscreenCanvas !== "undefined" ? new OffscreenCanvas(8, 8) : document.createElement("canvas");
+          ctx2d = scratch.getContext("2d", { willReadFrequently: false });
+        }
+        ctx2d.font = px + "px sans-serif";
+        const w = Math.min(4096, Math.ceil(ctx2d.measureText(str).width) + 2 * TEXT_PAD);
+        const h = Math.min(4096, Math.ceil(px * 1.4) + 2 * TEXT_PAD);
+        scratch.width = w;
+        scratch.height = h;
+        ctx2d.font = px + "px sans-serif";
+        ctx2d.textBaseline = "top";
+        ctx2d.fillStyle = "#fff";
+        ctx2d.fillText(str, TEXT_PAD, TEXT_PAD);
+        const tex = getBackend().createTexture(ctx2d.getImageData(0, 0, w, h), w, h, true);
+        tex.pad = TEXT_PAD;
+        cache.set(key, (e = { tex, frame: frameNo }));
+        return tex;
+      },
+      // Evicts least-recently-used runs not used this frame (their textures may be queued).
+      endFrame() {
+        frameNo++;
+        if (cache.size <= TEXT_CACHE_MAX) return;
+        for (const [k, e] of cache) {
+          if (cache.size <= TEXT_CACHE_MAX || e.frame >= frameNo - 1) break;
+          getBackend().destroyTexture(e.tex);
+          cache.delete(k);
+        }
+      },
+    };
+  }
+  // --- start-up --------------------------------------------------------------------
+  async function main() {
+    const canvas = document.getElementById("glcanvas");
+    const size = () => {
+      const w = Math.max(1, window.innerWidth | 0);
+      const h = Math.max(1, window.innerHeight | 0);
+      if (canvas.width !== w) canvas.width = w;
+      if (canvas.height !== h) canvas.height = h;
+    };
+    size();
+    let backend = null;
+    const text = makeTextCache(() => backend);
+    const b = makeBatcher({ textTexture: text.textTexture });
+    try {
+      backend = await makeWebGPU(canvas, b.white);
+    } catch (e) {
+      console.error("WebGPU failed to start:", e);
+    }
+    if (!backend) {
+      const msg = "WebGPU is not supported in this browser";
+      console.error(msg);
+      document.body.append(Object.assign(document.createElement("pre"), { textContent: msg, style: "position:fixed;top:0;left:0;color:#f55;margin:8px;font-size:18px" }));
+      return;
+    }
+    globalThis.plumRenderer = backend.name;
+    console.log("plumRenderer: " + backend.name);
+    const files = await preload();
+    const images = new Map();
+    const audio = makeAudio();
+    await Promise.all(
+      [...files].map(async ([path, bytes]) => {
+        if (IMAGE_EXT.test(path)) {
+          try {
+            const bitmap = await createImageBitmap(new Blob([bytes]));
+            images.set(path, { bitmap, w: bitmap.width, h: bitmap.height });
+          } catch (e) {
+            console.warn(path + ": could not decode image", e);
+          }
+        } else if (SOUND_EXT.test(path)) {
+          await audio.decode(path, bytes);
+        }
+      })
+    );
+    const input = makeInput(canvas);
+    const ctx = { plum: null };
+    const fileStrs = new Map(); // path -> Plum Str, built once per path
+    let dt = 1 / 60;
+    const host = {
+      screenWidth: () => canvas.width,
+      screenHeight: () => canvas.height,
+      frameTime: () => dt,
+      clear: b.clear,
+      drawRect: b.drawRect,
+      drawCircle: b.drawCircle,
+      drawLine: b.drawLine,
+      drawText: (s, ...rest) => b.drawText(strToJs(ctx.plum, s), ...rest),
+      setCamera: b.setCamera,
+      resetCamera: b.resetCamera,
+      textureLoad: (s) => {
+        const p = normPath(strToJs(ctx.plum, s));
+        const img = p && images.get(p);
+        if (!img) return -1;
+        return b.textures.push(backend.createTexture(img.bitmap, img.w, img.h, false)) - 1;
+      },
+      textureWidth: b.textureWidth,
+      textureHeight: b.textureHeight,
+      textureSetSmooth: (h, smooth) => {
+        if (b.textures[h]) backend.setSmooth(b.textures[h], smooth !== 0);
+      },
+      drawTexture: b.drawTexture,
+      drawTextureEx: b.drawTextureEx,
+      fileExists: (s) => {
+        const p = normPath(strToJs(ctx.plum, s));
+        return p && files.has(p) ? 1 : 0;
+      },
+      fileLoad: (s) => {
+        const p = normPath(strToJs(ctx.plum, s));
+        const key = p && files.has(p) ? p : "";
+        let str = fileStrs.get(key);
+        if (str === undefined) {
+          str = bytesToStr(ctx.plum, key ? files.get(key) : new Uint8Array(0));
+          fileStrs.set(key, str);
+        }
+        return str;
+      },
+      soundLoad: (s) => {
+        const p = normPath(strToJs(ctx.plum, s));
+        return p ? audio.load(p) : -1;
+      },
+      soundPlay: audio.play,
+      soundLoop: audio.loop,
+      soundStop: audio.stop,
+      soundSetVolume: audio.setVolume,
+      isKeyDown: input.isKeyDown,
+      isKeyPressed: input.isKeyPressed,
+      mousePos: () => [input.mouse.x, input.mouse.y],
+      isMouseDown: input.isMouseDown,
+      isMousePressed: input.isMousePressed,
+      mouseWheel: input.mouseWheel,
+      printLn: (s) => console.log(strToJs(ctx.plum, s)),
+      crash: (s) => {
+        throw new Error("crash: " + strToJs(ctx.plum, s));
+      },
+    };
+    const module = await WebAssembly.compileStreaming(fetch("plum.wasm"));
+    const plumImports = {};
+    for (const imp of WebAssembly.Module.imports(module)) {
+      if (imp.module !== "plum" || imp.kind !== "function") continue;
+      plumImports[imp.name] =
+        host[imp.name] ||
+        (() => {
+          throw new Error("host function '" + imp.name + "' is not available here");
+        });
+    }
+    const instance = await WebAssembly.instantiate(module, { plum: plumImports });
+    ctx.plum = instance.exports;
+    const ex = ctx.plum;
+    const cmdMode = !!(ex.cmdPtr && ex.cmdLen && ex.cmdReset && ex.memory);
+    globalThis.plumCommandBuffer = cmdMode;
+    console.log("plumCommandBuffer: " + cmdMode);
+    const state = ex.init();
+    let last = performance.now();
+    function frame(now) {
+      try {
+        dt = Math.max((now - last) / 1000, 0);
+        last = now;
+        size();
+        input.beginFrame();
+        b.beginFrame(canvas.width, canvas.height);
+        ex.update(state, dt);
+        if (cmdMode) {
+          ex.cmdReset();
+          ex.draw(state);
+          // memory may have grown since last frame: take a fresh view
+          decodeCommands(new DataView(ex.memory.buffer, ex.cmdPtr(), ex.cmdLen()), b);
+        } else {
+          ex.draw(state);
+        }
+        backend.submit(b, canvas.width, canvas.height);
+        text.endFrame();
+      } catch (e) {
+        console.error("frame failed:", e);
+        return;
+      }
+      requestAnimationFrame(frame);
+    }
+    requestAnimationFrame((now) => {
+      last = now - 1000 / 60;
+      frame(now);
+    });
+  }
+  globalThis.PlumGpu = { makeBatcher, decodeCommands, packColor, VERT_BYTES };
+  if (typeof document !== "undefined") {
+    main().catch((e) => {
+      console.error("plum game failed to start:", e);
+      document.body.append(Object.assign(document.createElement("pre"), { textContent: String(e), style: "position:fixed;top:0;left:0;color:#f55;margin:8px" }));
+    });
+  }
+})();