@woosh/meep-engine 3.14.2 → 3.14.4

package/src/shade/playground/basis_textures/make_basis_gltf.mjs

@@ -0,0 +1,197 @@
+/**
+ * Re-encode a glTF's textures to KTX2/Basis and rewrite it to use `KHR_texture_basisu`.
+ *
+ * **A dev tool, not engine code.** §8 puts the offline encoder out of scope deliberately — first-
+ * party content is compressed by a tool, and this is that tool at its smallest: enough to turn a
+ * model the repository already has into the thing the transcoder exists to read, so the playground
+ * beside it has something to load.
+ *
+ * It shells out to `basisu`, which is not a dependency of anything here. Install it with
+ * `npm i --no-save basis_universal` in this directory, or put the binary on `PATH`.
+ *
+ * Usage:
+ *
+ *     node make_basis_gltf.mjs <input.gltf> <output-directory> [--uastc|--etc1s|--mixed]
+ *
+ * `--mixed` is the default and the interesting one: **UASTC for normal maps and ETC1S for
+ * everything else**, which is what a real pipeline does. ETC1S puts a block's four colours on a line
+ * through the grey axis, which is a fair model of a photograph and a poor one of a direction, so a
+ * normal map encoded that way bands visibly. The playground's whole point is that the loader then
+ * picks BC5 for those and BC7 for the rest, from the material slot alone.
+ *
+ * @author Alex Goldring
+ * @copyright Company Named Limited (c) 2026
+ */
+
+import { execFileSync } from "node:child_process";
+import fs from "node:fs";
+import path from "node:path";
+
+const [input, output_directory, mode = "--mixed"] = process.argv.slice(2);
+
+if (input === undefined || output_directory === undefined) {
+    console.error("usage: node make_basis_gltf.mjs <input.gltf> <output-directory> [--mixed|--uastc|--etc1s]");
+    process.exit(2);
+}
+
+/**
+ * Where `basisu` is, preferring a locally installed copy over one on `PATH`.
+ *
+ * @returns {string[]} the command and its leading arguments
+ */
+function basisu_command() {
+    const local = path.resolve(
+        path.dirname(new URL(import.meta.url).pathname.replace(/^\/([A-Za-z]:)/, "$1")),
+        "node_modules", "basis_universal", "bin",
+        process.platform === "win32" ? "basisu.exe" : "basisu"
+    );
+
+    return fs.existsSync(local) ? [local] : ["basisu"];
+}
+
+const BASISU = basisu_command();
+
+const source_directory = path.dirname(input);
+
+const gltf = JSON.parse(fs.readFileSync(input, "utf8"));
+
+fs.mkdirSync(output_directory, { recursive: true });
+
+/**
+ * Which material slot each texture fills, so a normal map can be encoded differently.
+ *
+ * The same question `gltf_image_roles` asks of the loaded document, asked here of the file — the
+ * encoder needs it for a different reason (which *encoding* to use) than the loader does (which
+ * *format* to transcode into), and neither can answer the other's.
+ *
+ * @returns {Map<number, string>} image index to slot name
+ */
+function image_slots() {
+    const slots = new Map();
+
+    /**
+     * @param {object|undefined} reference
+     * @param {string} slot
+     */
+    function claim(reference, slot) {
+        if (reference === undefined) {
+            return;
+        }
+
+        const texture = gltf.textures[reference.index];
+
+        if (texture?.source !== undefined) {
+            slots.set(texture.source, slot);
+        }
+    }
+
+    for (const material of gltf.materials ?? []) {
+        claim(material.normalTexture, "normal");
+        claim(material.occlusionTexture, "orm");
+        claim(material.emissiveTexture, "emissive");
+
+        const pbr = material.pbrMetallicRoughness;
+
+        if (pbr !== undefined) {
+            claim(pbr.baseColorTexture, "albedo");
+            claim(pbr.metallicRoughnessTexture, "orm");
+        }
+    }
+
+    return slots;
+}
+
+const slots = image_slots();
+
+let encoded = 0;
+let source_bytes = 0;
+let basis_bytes = 0;
+
+for (let index = 0; index < gltf.images.length; index++) {
+    const image = gltf.images[index];
+
+    if (image.uri === undefined) {
+        throw new Error(`images[${index}] has no uri; only file-backed images are handled`);
+    }
+
+    const source = path.join(source_directory, decodeURIComponent(image.uri));
+
+    const name = `${path.basename(image.uri, path.extname(image.uri))}.ktx2`;
+
+    const destination = path.join(output_directory, name);
+
+    const slot = slots.get(index);
+
+    /*
+     A normal map takes UASTC where the mode allows it; everything else takes ETC1S, which is a
+     quarter the size and what colour is normally shipped as. `-linear` for anything that is not a
+     colour: an ORM map's channels are quantities and its mip chain must not be filtered in sRGB.
+    */
+    const uastc = mode === "--uastc" || (mode === "--mixed" && slot === "normal");
+
+    const linear = slot === "normal" || slot === "orm";
+
+    /*
+     No `-y_flip`. glTF puts UV (0,0) at the top-left of the image, and a KTX2 with no
+     `KTXorientation` key — which is what `basisu` writes either way — means exactly that, so
+     `KHR_texture_basisu` requires the payload to be stored top-down. `-y_flip` bakes a vertical
+     mirror into the pixels and records nothing about it, which no reader can detect or undo.
+
+     It was here, and every texture in the converted model was upside down (§9.13). `-y_flip` is for
+     the OpenGL convention, where UV (0,0) is bottom-left; glTF is not that.
+    */
+    const args = [
+        "-ktx2", "-mipmap",
+        ...(uastc ? ["-uastc", "-uastc_level", "2"] : ["-q", "192"]),
+        ...(linear ? ["-linear"] : []),
+        "-file", source,
+        "-output_file", destination,
+    ];
+
+    execFileSync(BASISU[0], [...BASISU.slice(1), ...args], { stdio: "pipe" });
+
+    source_bytes += fs.statSync(source).size;
+    basis_bytes += fs.statSync(destination).size;
+
+    image.uri = name;
+    image.mimeType = "image/ktx2";
+
+    encoded++;
+
+    if (encoded % 10 === 0) {
+        console.log(`  ${encoded}/${gltf.images.length}`);
+    }
+}
+
+/*
+ Every texture now reaches its image through the extension rather than through `source`. `source` is
+ left in place and pointing at the same image, which is what a real exporter does when it has no
+ fallback to offer — the extension is not listed as required, so a reader that does not know it
+ still finds *an* image, and one that does prefers the KTX2.
+*/
+for (const texture of gltf.textures) {
+    texture.extensions = { ...texture.extensions, KHR_texture_basisu: { source: texture.source } };
+}
+
+gltf.extensionsUsed = [...new Set([...(gltf.extensionsUsed ?? []), "KHR_texture_basisu"])];
+
+// the buffers are unchanged, so they are referenced where they already are rather than copied
+for (const buffer of gltf.buffers ?? []) {
+    if (buffer.uri !== undefined && !/^data:/.test(buffer.uri)) {
+        fs.copyFileSync(
+            path.join(source_directory, decodeURIComponent(buffer.uri)),
+            path.join(output_directory, path.basename(buffer.uri))
+        );
+
+        buffer.uri = path.basename(buffer.uri);
+    }
+}
+
+const out = path.join(output_directory, path.basename(input));
+
+fs.writeFileSync(out, JSON.stringify(gltf));
+
+const mib = bytes => `${(bytes / 1048576).toFixed(1)} MiB`;
+
+console.log(`${encoded} images: ${mib(source_bytes)} source -> ${mib(basis_bytes)} basis`);
+console.log(`wrote ${out}`);

package/src/shade/playground/basis_textures/texture_inventory.d.ts

@@ -0,0 +1,28 @@
+/**
+ * What textures a loaded scene has, what formats they are in, and which slots they came from.
+ *
+ * **Counted over distinct images, not over slots.** Sponza's materials name sixty-nine images
+ * between them and share most of them, so counting once per slot reports a number several times too
+ * large. Deduplicating is what makes "how many textures does this scene have" the same question
+ * {@link TextureManager} answers, so the two can be put in one table.
+ *
+ * **No bytes here.** `TextureManager.gpu_memory_usage` is the measurement this page exists to take,
+ * and a second byte count derived from the texel data would be a prediction of it — one that would
+ * silently disagree the moment a mip chain is generated on the device rather than shipped. This says
+ * *what* is resident; the manager says what it costs.
+ *
+ * @param {Node3D[]} roots
+ * @returns {{count: number, formats: Map<string, {count: number, slots: Set<string>}>, textures: ShadeTexture[]}}
+ *
+ * @author Alex Goldring
+ * @copyright Company Named Limited (c) 2026
+ */
+export function texture_inventory(roots: Node3D[]): {
+    count: number;
+    formats: Map<string, {
+        count: number;
+        slots: Set<string>;
+    }>;
+    textures: ShadeTexture[];
+};
+//# sourceMappingURL=texture_inventory.d.ts.map

package/src/shade/playground/basis_textures/texture_inventory.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"texture_inventory.d.ts","sourceRoot":"","sources":["../../../../../src/shade/playground/basis_textures/texture_inventory.js"],"names":[],"mappings":"AAmBA;;;;;;;;;;;;;;;;;;GAkBG;AACH,yCANW,QAAQ;WACE,MAAM;aAAW,IAAI,MAAM,EAAE;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,IAAI,MAAM,CAAC,CAAA;KAAC,CAAC;cAAY,cAAc;EAgE/G"}

package/src/shade/playground/basis_textures/texture_inventory.js

@@ -0,0 +1,98 @@
+import { texture_format_from_shade_image } from "../../renderer/texture/format/texture_format_from_shade_image.js";
+
+/**
+ * The material slots a texture can arrive in, and the role each stands for.
+ *
+ * Named here rather than derived because the point of the breakdown is to show that the *role*
+ * decided the format — a normal map reaching `bc5-rg-unorm` and nothing else doing so is the whole
+ * claim, and it only reads as evidence if the two columns are put side by side.
+ *
+ * @readonly
+ * @type {[string, string][]}
+ */
+const SLOTS = [
+    ["texture_albedo", "albedo"],
+    ["texture_normal", "normal"],
+    ["texture_orm", "orm"],
+    ["texture_emissive", "emissive"],
+];
+
+/**
+ * What textures a loaded scene has, what formats they are in, and which slots they came from.
+ *
+ * **Counted over distinct images, not over slots.** Sponza's materials name sixty-nine images
+ * between them and share most of them, so counting once per slot reports a number several times too
+ * large. Deduplicating is what makes "how many textures does this scene have" the same question
+ * {@link TextureManager} answers, so the two can be put in one table.
+ *
+ * **No bytes here.** `TextureManager.gpu_memory_usage` is the measurement this page exists to take,
+ * and a second byte count derived from the texel data would be a prediction of it — one that would
+ * silently disagree the moment a mip chain is generated on the device rather than shipped. This says
+ * *what* is resident; the manager says what it costs.
+ *
+ * @param {Node3D[]} roots
+ * @returns {{count: number, formats: Map<string, {count: number, slots: Set<string>}>, textures: ShadeTexture[]}}
+ *
+ * @author Alex Goldring
+ * @copyright Company Named Limited (c) 2026
+ */
+export function texture_inventory(roots) {
+    const formats = new Map();
+
+    const images = new Set();
+    const textures = new Set();
+
+    for (const root of roots) {
+        root.traverse(node => {
+            const material = node.material;
+
+            if (material === undefined || material === null) {
+                return;
+            }
+
+            for (const [slot, role] of SLOTS) {
+                const texture = material[slot];
+
+                if (texture === undefined || texture === null) {
+                    continue;
+                }
+
+                /*
+                 Two textures can share an image and differ in sampler, so the upload set is keyed on
+                 the texture and the format breakdown on the image. Keying both the same way would
+                 either miss an upload or count a picture twice.
+                */
+                textures.add(texture);
+
+                const image = texture.image;
+
+                if (image === undefined || image === null || images.has(image)) {
+                    continue;
+                }
+
+                images.add(image);
+
+                /*
+                 The format the *texture* will be created in, not the one its payload is stored as.
+
+                 They differ in exactly the place that matters: `bc7-rgba-unorm` and
+                 `bc7-rgba-unorm-srgb` are the same bytes, so a payload can only ever name the
+                 former, while whether sampling decodes sRGB is decided here from the image's
+                 `color_space`. Reporting the payload's name hid an albedo map on a linear format
+                 behind a column that looked right — read the descriptor's answer instead, which is
+                 also what puts the two paths' albedo rows side by side.
+                */
+                const format = texture_format_from_shade_image(image);
+
+                const entry = formats.get(format) ?? { count: 0, slots: new Set() };
+
+                entry.count++;
+                entry.slots.add(role);
+
+                formats.set(format, entry);
+            }
+        });
+    }
+
+    return { count: images.size, formats, textures: [...textures] };
+}

package/src/shade/playground/image_decode_bench/README.md

@@ -0,0 +1,42 @@
+# Image decode bench
+
+Measures the trade `ImageRGBADataLoader`'s codec chain would make by decoding JPEG in the image worker
+instead of leaving it to the browser. Run under the dev server (`npm run dev`) at
+`src/shade/playground/image_decode_bench/index.html`; it fetches three Sponza textures from
+`test_assets/` and reports medians of five runs per path after a warm-up.
+
+## Result, 2026-09-02
+
+Embedded Chromium (Claude Code's browser pane), Windows 11, this workstation. Medians.
+
+| texture | size | native wall | native main | js-main wall | js-worker wall | js-worker main |
+|---|---|---|---|---|---|---|
+| 8747919177698443163.jpg | 1024×1024, 852 KB | 10.6 ms | 1.4 ms | 172.6 ms | 177.7 ms | 0.1 ms |
+| 6047387724914829168.jpg | 1024×1024, 506 KB | 8.8 ms | 1.7 ms | 151.4 ms | 155.2 ms | 0.1 ms |
+| 2051777328469649772.jpg | 1024×1024, 202 KB | 6.0 ms | 1.5 ms | 129.9 ms | 128.5 ms | 0.0 ms |
+
+*native*: the browser's decoder through `createImageBitmap`, then the canvas read-back
+`NativeImageDecoder` pays on the main thread. *js-main*: `format/image/jpeg` on the main thread.
+*js-worker*: the same decoder in a module worker, bytes transferred both ways; *main* is posting and
+receiving.
+
+## Decision
+
+**JPEG stays with the browser's decoder. The worker does not learn it.**
+
+The in-tree decoder is fifteen to twenty times slower than the platform's, and moving it to a worker
+does not change that — it changes who waits. What the worker buys is about 1.5 ms of main-thread time
+per megapixel texture (the read-back), and what it costs is about 150 ms of latency per texture that
+every load would pay. For a loading screen that is the wrong trade outright; for streaming during play
+a 1.5 ms read-back is under a frame's budget and a 150 ms decode is not something to hide, it is
+something to avoid.
+
+`ThreadedImageDecoder` therefore keeps sniffing PNG only, and says so with these numbers. Where there
+is no browser decoder — node, a worker without `Image` — `JpegCodec` answers, on the thread it is
+called from, which is the only thread there is. If the in-tree decoder ever gets within about 2× of the
+platform's, this page is the thing to re-run, and the change is one sniff in `ThreadedImageDecoder`
+and one arm in `ImageDecoderWorker`.
+
+The `Image.decode()` form `NativeImageDecoder` uses never resolves on a blob URL in the embedded
+browser this was measured in; the page uses `createImageBitmap`, which is the same decoder. The
+read-back is what differs between the two loaders and it is measured either way.

package/src/shade/playground/image_decode_bench/decode_worker.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=decode_worker.d.ts.map

package/src/shade/playground/image_decode_bench/decode_worker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"decode_worker.d.ts","sourceRoot":"","sources":["../../../../../src/shade/playground/image_decode_bench/decode_worker.js"],"names":[],"mappings":""}

package/src/shade/playground/image_decode_bench/decode_worker.js

@@ -0,0 +1,19 @@
+import { jpeg_decode } from "../../../format/image/jpeg/jpeg_decode.js";
+
+/**
+ * The in-tree JPEG decoder, one image per message. What `ImageDecoderWorker` would do for a JPEG,
+ * without the `WorkerBuilder` plumbing and the rollup bundle between: a module worker importing the
+ * decoder directly, so the number is the decoder's and not the bundle's.
+ */
+self.onmessage = (event) => {
+    const { id, buffer } = event.data;
+
+    const started = performance.now();
+    const image = jpeg_decode(buffer);
+    const decode_ms = performance.now() - started;
+
+    self.postMessage(
+        { id, decode_ms, width: image.width, height: image.height, data: image.data.buffer },
+        [image.data.buffer]
+    );
+};

package/src/shade/playground/image_decode_bench/index.html

@@ -0,0 +1,34 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>meep — image decode bench</title>
+    <style>
+        :root { color-scheme: dark; }
+        html, body { margin: 0; background: #0d0f12; color: #d6dae0; font: 13px/1.5 ui-monospace, Consolas, monospace; }
+        main { padding: 16px 20px; max-width: 1100px; }
+        h1 { font-size: 15px; margin: 0 0 4px; }
+        p { color: #8b939f; margin: 0 0 12px; max-width: 80ch; }
+        table { border-collapse: collapse; margin-top: 12px; }
+        td, th { padding: 3px 12px 3px 0; text-align: right; white-space: nowrap; }
+        th { color: #8b939f; font-weight: normal; border-bottom: 1px solid #2b3038; }
+        td:first-child, th:first-child { text-align: left; }
+        #status { color: #e5b54a; }
+    </style>
+</head>
+<body>
+<main>
+    <h1>JPEG decode: the browser's decoder against the in-tree one, on and off the main thread</h1>
+    <p>
+        Each row is one Sponza texture, decoded several times per path after one warm-up. <b>wall</b> is
+        what a caller waits for; <b>main</b> is how long the main thread was busy doing it. The native
+        path is what <code>NativeImageDecoder</code> does — <code>new Image()</code>, <code>decode()</code>,
+        a canvas read-back — so its <b>main</b> is the read-back. The worker path is the in-tree decoder in a
+        module worker, so its <b>main</b> is posting and receiving.
+    </p>
+    <div id="status">loading…</div>
+    <table id="results"></table>
+</main>
+<script type="module" src="./main.js"></script>
+</body>
+</html>

package/src/shade/playground/image_decode_bench/main.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=main.d.ts.map

package/src/shade/playground/image_decode_bench/main.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../../../../../src/shade/playground/image_decode_bench/main.js"],"names":[],"mappings":""}

package/src/shade/playground/image_decode_bench/main.js

@@ -0,0 +1,211 @@
+import { jpeg_decode } from "../../../format/image/jpeg/jpeg_decode.js";
+
+/**
+ * Measures the trade `ImageRGBADataLoader`'s codec chain makes for a JPEG.
+ *
+ * Three ways to turn the same bytes into samples:
+ *
+ * 1. **native** — the browser's decoder, as `NativeImageDecoder` uses it: decode, draw to a canvas,
+ *    `getImageData`. The browser decodes on its own thread; the read-back is main-thread work.
+ * 2. **js-main** — the in-tree decoder on the main thread. Never the plan; it is the floor the worker
+ *    number is measured against.
+ * 3. **js-worker** — the in-tree decoder in a module worker, bytes transferred both ways. This is what
+ *    `ImageDecoderWorker` would do if `ThreadedImageDecoder` claimed JPEGs.
+ *
+ * Two numbers per path, because they answer different questions: **wall** is the latency a load
+ * waits for, **main** is the main thread's share of it — the part that stalls a frame. A worker path
+ * that loses on wall and wins on main is a trade, not a result, and which way it goes is what decides
+ * the chain's default order.
+ *
+ * Runs under the dev server (`npm run dev`), which serves `test_assets/`. Results land in the table
+ * and in `window.__bench_results` for a script to read.
+ */
+
+const TEXTURES = [
+    "test_assets/Sponza/glTF/8747919177698443163.jpg",
+    "test_assets/Sponza/glTF/6047387724914829168.jpg",
+    "test_assets/Sponza/glTF/2051777328469649772.jpg",
+];
+
+const RUNS = 5;
+
+const status = document.getElementById("status");
+const table = document.getElementById("results");
+
+/**
+ * @param {number[]} values
+ * @returns {number} the median, which a single GC pause cannot move
+ */
+function median(values) {
+    const sorted = [...values].sort((a, b) => a - b);
+    return sorted[sorted.length >> 1];
+}
+
+/**
+ * @param {ArrayBuffer} bytes
+ * @returns {Promise<{wall: number, main: number, width: number, height: number}>}
+ */
+async function native(bytes) {
+    const started = performance.now();
+
+    /*
+     `createImageBitmap` rather than `new Image()` + `decode()`: the same browser decoder behind both,
+     and the former is what `ImageBitmapAssetLoader` uses. `Image.decode()` on a blob URL never
+     resolves in the embedded browser this page is measured in, which is a fact about that browser and
+     not about the decoder — the read-back below is the part `NativeImageDecoder` pays on the main
+     thread either way.
+    */
+    const image = await createImageBitmap(new Blob([bytes], { type: "image/jpeg" }));
+
+    const main_started = performance.now();
+    const canvas = document.createElement("canvas");
+    canvas.width = image.width;
+    canvas.height = image.height;
+    const context = canvas.getContext("2d", { willReadFrequently: true });
+    context.drawImage(image, 0, 0);
+    const pixels = context.getImageData(0, 0, image.width, image.height);
+    const main = performance.now() - main_started;
+
+    image.close();
+
+    return { wall: performance.now() - started, main, width: pixels.width, height: pixels.height };
+}
+
+/**
+ * @param {ArrayBuffer} bytes
+ * @returns {Promise<{wall: number, main: number, width: number, height: number}>}
+ */
+async function js_main(bytes) {
+    const started = performance.now();
+    const image = jpeg_decode(bytes.slice(0));
+    const wall = performance.now() - started;
+
+    return { wall, main: wall, width: image.width, height: image.height };
+}
+
+const worker = new Worker(new URL("./decode_worker.js", import.meta.url), { type: "module" });
+let next_id = 0;
+
+/**
+ * @param {ArrayBuffer} bytes
+ * @returns {Promise<{wall: number, main: number, width: number, height: number, decode: number}>}
+ */
+function js_worker(bytes) {
+    return new Promise((resolve) => {
+        const id = next_id++;
+        const started = performance.now();
+
+        // the copy stands in for what a real caller would transfer rather than keep
+        const copy = bytes.slice(0);
+
+        const on_message = (event) => {
+            if (event.data.id !== id) {
+                return;
+            }
+
+            worker.removeEventListener("message", on_message);
+
+            const receive_started = performance.now();
+            // what the loader does with the answer: wrap the transferred buffer
+            const samples = new Uint8Array(event.data.data);
+            const main_receive = performance.now() - receive_started;
+
+            resolve({
+                wall: performance.now() - started,
+                main: main_post + main_receive,
+                decode: event.data.decode_ms,
+                width: event.data.width,
+                height: event.data.height,
+                samples: samples.length
+            });
+        };
+
+        worker.addEventListener("message", on_message);
+
+        const post_started = performance.now();
+        worker.postMessage({ id, buffer: copy }, [copy]);
+        const main_post = performance.now() - post_started;
+    });
+}
+
+const PATHS = { native, "js-main": js_main, "js-worker": js_worker };
+
+/**
+ * @param {string} path
+ * @param {ArrayBuffer} bytes
+ * @returns {Promise<Object<string, {wall: number, main: number, decode?: number}>>}
+ */
+async function measure(path, bytes) {
+    const result = {};
+
+    for (const [name, run] of Object.entries(PATHS)) {
+        await run(bytes); // warm-up: JIT, decoder tables, the worker's module graph
+
+        const walls = [];
+        const mains = [];
+        const decodes = [];
+
+        for (let i = 0; i < RUNS; i++) {
+            const r = await run(bytes);
+            walls.push(r.wall);
+            mains.push(r.main);
+            if (r.decode !== undefined) decodes.push(r.decode);
+        }
+
+        result[name] = {
+            wall: median(walls),
+            main: median(mains),
+            decode: decodes.length ? median(decodes) : undefined
+        };
+    }
+
+    return result;
+}
+
+function render(rows) {
+    const header = `<tr><th>texture</th><th>size</th><th>native wall</th><th>native main</th>`
+        + `<th>js-main wall</th><th>js-worker wall</th><th>js-worker main</th><th>worker decode</th></tr>`;
+
+    const body = rows.map(row => {
+        const r = row.results;
+        const ms = v => v === undefined ? "—" : `${v.toFixed(1)} ms`;
+        return `<tr><td>${row.name}</td><td>${row.width}×${row.height}, ${(row.bytes / 1024).toFixed(0)} KB</td>`
+            + `<td>${ms(r.native.wall)}</td><td>${ms(r.native.main)}</td>`
+            + `<td>${ms(r["js-main"].wall)}</td>`
+            + `<td>${ms(r["js-worker"].wall)}</td><td>${ms(r["js-worker"].main)}</td><td>${ms(r["js-worker"].decode)}</td></tr>`;
+    }).join("");
+
+    table.innerHTML = header + body;
+}
+
+async function main() {
+    const rows = [];
+
+    for (const path of TEXTURES) {
+        status.textContent = `measuring ${path}…`;
+
+        const response = await fetch(`/${path}`);
+        const bytes = await response.arrayBuffer();
+        const probe = jpeg_decode(bytes.slice(0));
+
+        const results = await measure(path, bytes);
+
+        rows.push({
+            name: path.split("/").pop(),
+            bytes: bytes.byteLength,
+            width: probe.width,
+            height: probe.height,
+            results
+        });
+
+        render(rows);
+    }
+
+    window.__bench_results = rows;
+    status.textContent = `done — ${RUNS} runs per path, medians`;
+}
+
+main().catch(e => {
+    status.textContent = `failed: ${e.message}`;
+    throw e;
+});