@woosh/meep-engine 3.28.0 → 3.29.0

package/src/shade/playground/caldera/caldera_format.d.ts

@@ -0,0 +1,151 @@
+/**
+ * The geometry table as column arrays, which is how a page wants it.
+ *
+ * Half a million objects with six fields each is half a million allocations and a slow walk every
+ * time the page asks a question about all of them; six typed arrays over the same bytes are neither.
+ * `bounds` stays interleaved because it is always read as a group.
+ *
+ * @param {ArrayBuffer} bytes the whole of `geometry.table.bin`
+ * @returns {{count: number, pack: Uint32Array, offset: Uint32Array, bytes: Uint32Array,
+ *            triangles: Uint32Array, vertices: Uint32Array, vgeo: Uint32Array,
+ *            flags: Uint32Array, bounds: Float32Array}}
+ */
+export function caldera_read_geometry_table(bytes: ArrayBuffer): {
+    count: number;
+    pack: Uint32Array;
+    offset: Uint32Array;
+    bytes: Uint32Array;
+    triangles: Uint32Array;
+    vertices: Uint32Array;
+    vgeo: Uint32Array;
+    flags: Uint32Array;
+    bounds: Float32Array;
+};
+/**
+ * One district's placements: a geometry id and a 4x4 matrix each, as two typed arrays over the
+ * file's own bytes.
+ *
+ * The arrays are **views**, not copies — a district of 363,145 placements is 23 MiB of matrices and
+ * there is no reason for it to exist twice. That does mean the caller must keep the buffer alive,
+ * which it does by holding these.
+ *
+ * @param {ArrayBuffer} file
+ * @returns {{count: number, geometry: Uint32Array, matrices: Float32Array}}
+ */
+export function caldera_read_placements(file: ArrayBuffer): {
+    count: number;
+    geometry: Uint32Array;
+    matrices: Float32Array;
+};
+/**
+ * The pack byte ranges that cover a set of geometries, coalesced.
+ *
+ * A district wants tens of thousands of blobs and a request per blob is tens of thousands of round
+ * trips. The blobs are laid down in geometry-id order, so a district's own geometry is very nearly
+ * contiguous — the runs below are what turns that layout into a handful of reads. `slack` is what
+ * buys the rest: joining two runs across a small hole fetches bytes nobody asked for, and a few
+ * kilobytes of those is cheaper than another round trip.
+ *
+ * Ids repeated in the input are taken once. A caller that has already deduplicated loses nothing by
+ * it, and a caller that has not would otherwise get a geometry deserialized twice out of the same
+ * bytes.
+ *
+ * @param {number[]|Uint32Array|Iterable<number>} ids the geometries wanted, in any order
+ * @param {{pack: Uint32Array, offset: Uint32Array, bytes: Uint32Array}} table
+ * @param {number} [slack] how large a gap may be bridged rather than split, in bytes
+ * @param {number} [max_bytes] how large one range may grow — see {@link CALDERA_MAX_RANGE_BYTES}
+ * @returns {{pack: number, start: number, end: number, ids: number[]}[]} ranges, `end` exclusive
+ */
+export function caldera_coalesce_ranges(ids: number[] | Uint32Array | Iterable<number>, table: {
+    pack: Uint32Array;
+    offset: Uint32Array;
+    bytes: Uint32Array;
+}, slack?: number, max_bytes?: number): {
+    pack: number;
+    start: number;
+    end: number;
+    ids: number[];
+}[];
+/**
+ * The converted-Caldera set's two binary tables, defined once for the tool that writes them and the
+ * page that reads them.
+ *
+ * A converted scene is three kinds of thing: **packs** holding serialized `MeshletGeometry` blobs,
+ * a **geometry table** saying where in them each geometry is, and a **placement file** per district
+ * saying which geometry stands where. Only the first is an engine format already
+ * ({@link MeshletGeometrySerializationAdapter}); the other two are this module, and they are tables
+ * rather than JSON because there are half a million rows of one and nearly four million of the
+ * other — `caldera.meep.json` stays a page of text a person can read, and the numbers live here.
+ *
+ * Both are fixed-stride, so a reader seeks rather than parses, and both are little-endian, which
+ * every platform meep runs on is.
+ *
+ * @author Alex Goldring
+ * @copyright Company Named Limited (c) 2026
+ */
+/**
+ * The 16 bytes every placement file opens with, so a truncated or unrelated file is caught at the
+ * first read rather than as an implausible placement count.
+ *
+ * @type {string}
+ */
+export const CALDERA_PLACEMENT_MAGIC: string;
+/**
+ * One row of `geometry.table.bin`: where a geometry's blob is, how big the geometry is, and whether
+ * a `.vgeo` of it was built as well.
+ *
+ * The bounds are here rather than only inside the blob because a page decides *whether to fetch* a
+ * geometry from them — a district's extent, and which of its placements are worth opening first, are
+ * questions about bounds that must be answerable before any pack has been read.
+ */
+export const CALDERA_TABLE_ROW: Readonly<{
+    SIZE: 56;
+    PACK: 0;
+    OFFSET: 4;
+    BYTES: 8;
+    TRIANGLES: 12;
+    VERTICES: 16;
+    VGEO: 20;
+    BOUNDS: 24;
+    FLAGS: 48;
+    /** What {@link CALDERA_TABLE_ROW.VGEO} holds when no `.vgeo` was built for this geometry. */
+    NO_VGEO: 4294967295;
+    /**
+     * This geometry was baked into a merged asset and has no blob of its own.
+     *
+     * Its row survives so that every id after it keeps the meaning the extractor gave it — the ids
+     * are positional and renumbering them would invalidate every placement file — and `bytes` is
+     * zero, so a reader that only checks that already skips it. The flag is what distinguishes
+     * "folded into the terrain" from "the builder refused this one", which are the same zero.
+     */
+    FLAG_MERGED: 1;
+    /**
+     * @param {Uint8Array|Buffer} table
+     * @param {number} id
+     * @param {{pack: number, offset: number, bytes: number, triangles: number, vertices: number,
+     *          vgeo: number, bounds: ArrayLike<number>, flags?: number}} row
+     */
+    write(table: Uint8Array | Buffer, id: number, row: {
+        pack: number;
+        offset: number;
+        bytes: number;
+        triangles: number;
+        vertices: number;
+        vgeo: number;
+        bounds: ArrayLike<number>;
+        flags?: number;
+    }): void;
+}>;
+/**
+ * How large a coalesced range is allowed to grow, in bytes.
+ *
+ * A range is fetched into one `ArrayBuffer`, so this is a memory bound rather than a network one: a
+ * district of a hundred thousand contiguous geometries would otherwise coalesce into a single
+ * multi-gigabyte read, and the page would die allocating it rather than anywhere interesting. At
+ * 64 MiB a district is a few dozen requests instead of one, which costs nothing against the round
+ * trips it already saved, and the reader holds at most one of them per concurrent fetch.
+ *
+ * @type {number}
+ */
+export const CALDERA_MAX_RANGE_BYTES: number;
+//# sourceMappingURL=caldera_format.d.ts.map

package/src/shade/playground/caldera/caldera_format.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"caldera_format.d.ts","sourceRoot":"","sources":["../../../../../src/shade/playground/caldera/caldera_format.js"],"names":[],"mappings":"AAsFA;;;;;;;;;;;GAWG;AACH,mDALW,WAAW,GACT;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,WAAW,CAAC;IAAC,MAAM,EAAE,WAAW,CAAC;IAAC,KAAK,EAAE,WAAW,CAAC;IACvF,SAAsB,EAAE,WAAW,CAAC;IAAC,QAAQ,EAAE,WAAW,CAAC;IAAC,IAAI,EAAE,WAAW,CAAC;IAC9E,KAAkB,EAAE,WAAW,CAAC;IAAC,MAAM,EAAE,YAAY,CAAA;CAAC,CAiCtD;AAGD;;;;;;;;;;GAUG;AACH,8CAHW,WAAW,GACT;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,WAAW,CAAC;IAAC,QAAQ,EAAE,YAAY,CAAA;CAAC,CA2B1E;AAiBD;;;;;;;;;;;;;;;;;;GAkBG;AACH,6CANW,MAAM,EAAE,GAAC,WAAW,GAAC,SAAS,MAAM,CAAC,SACrC;IAAC,IAAI,EAAE,WAAW,CAAC;IAAC,MAAM,EAAE,WAAW,CAAC;IAAC,KAAK,EAAE,WAAW,CAAA;CAAC,UAC5D,MAAM,cACN,MAAM,GACJ;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,EAAE,CAAA;CAAC,EAAE,CAsCvE;AAhPD;;;;;;;;;;;;;;;;GAgBG;AAEH;;;;;GAKG;AACH,sCAFU,MAAM,CAE6C;AAE7D;;;;;;;GAOG;AACH;;;;;;;;;;IAYI,6FAA6F;;IAG7F;;;;;;;OAOG;;IAGH;;;;;OAKG;iBAJQ,UAAU,SAAO,MACjB,MAAM,OACN;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAC;QAC5F,IAAe,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,UAAU,MAAM,CAAC,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAC;GAoBrE;AAwFH;;;;;;;;;;GAUG;AACH,sCAFU,MAAM,CAEwC"}

package/src/shade/playground/caldera/caldera_format.js

@@ -0,0 +1,241 @@
+/**
+ * The converted-Caldera set's two binary tables, defined once for the tool that writes them and the
+ * page that reads them.
+ *
+ * A converted scene is three kinds of thing: **packs** holding serialized `MeshletGeometry` blobs,
+ * a **geometry table** saying where in them each geometry is, and a **placement file** per district
+ * saying which geometry stands where. Only the first is an engine format already
+ * ({@link MeshletGeometrySerializationAdapter}); the other two are this module, and they are tables
+ * rather than JSON because there are half a million rows of one and nearly four million of the
+ * other — `caldera.meep.json` stays a page of text a person can read, and the numbers live here.
+ *
+ * Both are fixed-stride, so a reader seeks rather than parses, and both are little-endian, which
+ * every platform meep runs on is.
+ *
+ * @author Alex Goldring
+ * @copyright Company Named Limited (c) 2026
+ */
+
+/**
+ * The 16 bytes every placement file opens with, so a truncated or unrelated file is caught at the
+ * first read rather than as an implausible placement count.
+ *
+ * @type {string}
+ */
+export const CALDERA_PLACEMENT_MAGIC = "CALDERA-RAW-1\0\0\0";
+
+/**
+ * One row of `geometry.table.bin`: where a geometry's blob is, how big the geometry is, and whether
+ * a `.vgeo` of it was built as well.
+ *
+ * The bounds are here rather than only inside the blob because a page decides *whether to fetch* a
+ * geometry from them — a district's extent, and which of its placements are worth opening first, are
+ * questions about bounds that must be answerable before any pack has been read.
+ */
+export const CALDERA_TABLE_ROW = Object.freeze({
+    SIZE: 56,
+
+    PACK: 0,
+    OFFSET: 4,
+    BYTES: 8,
+    TRIANGLES: 12,
+    VERTICES: 16,
+    VGEO: 20,
+    BOUNDS: 24,
+    FLAGS: 48,
+
+    /** What {@link CALDERA_TABLE_ROW.VGEO} holds when no `.vgeo` was built for this geometry. */
+    NO_VGEO: 0xffffffff,
+
+    /**
+     * This geometry was baked into a merged asset and has no blob of its own.
+     *
+     * Its row survives so that every id after it keeps the meaning the extractor gave it — the ids
+     * are positional and renumbering them would invalidate every placement file — and `bytes` is
+     * zero, so a reader that only checks that already skips it. The flag is what distinguishes
+     * "folded into the terrain" from "the builder refused this one", which are the same zero.
+     */
+    FLAG_MERGED: 1,
+
+    /**
+     * @param {Uint8Array|Buffer} table
+     * @param {number} id
+     * @param {{pack: number, offset: number, bytes: number, triangles: number, vertices: number,
+     *          vgeo: number, bounds: ArrayLike<number>, flags?: number}} row
+     */
+    write(table, id, row) {
+        const base = id * CALDERA_TABLE_ROW.SIZE;
+
+        const view = new DataView(table.buffer, table.byteOffset + base, CALDERA_TABLE_ROW.SIZE);
+
+        view.setUint32(CALDERA_TABLE_ROW.PACK, row.pack, true);
+        view.setUint32(CALDERA_TABLE_ROW.OFFSET, row.offset, true);
+        view.setUint32(CALDERA_TABLE_ROW.BYTES, row.bytes, true);
+        view.setUint32(CALDERA_TABLE_ROW.TRIANGLES, row.triangles, true);
+        view.setUint32(CALDERA_TABLE_ROW.VERTICES, row.vertices, true);
+        view.setUint32(CALDERA_TABLE_ROW.VGEO, row.vgeo, true);
+
+        for (let i = 0; i < 6; i++) {
+            view.setFloat32(CALDERA_TABLE_ROW.BOUNDS + i * 4, row.bounds[i], true);
+        }
+
+        view.setUint32(CALDERA_TABLE_ROW.FLAGS, row.flags ?? 0, true);
+    },
+});
+
+
+/**
+ * The geometry table as column arrays, which is how a page wants it.
+ *
+ * Half a million objects with six fields each is half a million allocations and a slow walk every
+ * time the page asks a question about all of them; six typed arrays over the same bytes are neither.
+ * `bounds` stays interleaved because it is always read as a group.
+ *
+ * @param {ArrayBuffer} bytes the whole of `geometry.table.bin`
+ * @returns {{count: number, pack: Uint32Array, offset: Uint32Array, bytes: Uint32Array,
+ *            triangles: Uint32Array, vertices: Uint32Array, vgeo: Uint32Array,
+ *            flags: Uint32Array, bounds: Float32Array}}
+ */
+export function caldera_read_geometry_table(bytes) {
+    const count = Math.floor(bytes.byteLength / CALDERA_TABLE_ROW.SIZE);
+
+    const view = new DataView(bytes);
+
+    const pack = new Uint32Array(count);
+    const offset = new Uint32Array(count);
+    const size = new Uint32Array(count);
+    const triangles = new Uint32Array(count);
+    const vertices = new Uint32Array(count);
+    const vgeo = new Uint32Array(count);
+    const flags = new Uint32Array(count);
+    const bounds = new Float32Array(count * 6);
+
+    for (let id = 0; id < count; id++) {
+        const base = id * CALDERA_TABLE_ROW.SIZE;
+
+        pack[id] = view.getUint32(base + CALDERA_TABLE_ROW.PACK, true);
+        offset[id] = view.getUint32(base + CALDERA_TABLE_ROW.OFFSET, true);
+        size[id] = view.getUint32(base + CALDERA_TABLE_ROW.BYTES, true);
+        triangles[id] = view.getUint32(base + CALDERA_TABLE_ROW.TRIANGLES, true);
+        vertices[id] = view.getUint32(base + CALDERA_TABLE_ROW.VERTICES, true);
+        vgeo[id] = view.getUint32(base + CALDERA_TABLE_ROW.VGEO, true);
+        flags[id] = view.getUint32(base + CALDERA_TABLE_ROW.FLAGS, true);
+
+        for (let i = 0; i < 6; i++) {
+            bounds[id * 6 + i] = view.getFloat32(base + CALDERA_TABLE_ROW.BOUNDS + i * 4, true);
+        }
+    }
+
+    return { count, pack, offset, bytes: size, triangles, vertices, vgeo, flags, bounds };
+}
+
+
+/**
+ * One district's placements: a geometry id and a 4x4 matrix each, as two typed arrays over the
+ * file's own bytes.
+ *
+ * The arrays are **views**, not copies — a district of 363,145 placements is 23 MiB of matrices and
+ * there is no reason for it to exist twice. That does mean the caller must keep the buffer alive,
+ * which it does by holding these.
+ *
+ * @param {ArrayBuffer} file
+ * @returns {{count: number, geometry: Uint32Array, matrices: Float32Array}}
+ */
+export function caldera_read_placements(file) {
+    const header = new Uint8Array(file, 0, CALDERA_PLACEMENT_MAGIC.length);
+
+    for (let i = 0; i < CALDERA_PLACEMENT_MAGIC.length; i++) {
+        if (header[i] !== CALDERA_PLACEMENT_MAGIC.charCodeAt(i)) {
+            throw new Error('not a caldera placement file — the magic does not match');
+        }
+    }
+
+    const count = new DataView(file).getUint32(CALDERA_PLACEMENT_MAGIC.length, true);
+
+    const ids_at = CALDERA_PLACEMENT_MAGIC.length + 8;
+    const matrices_at = ids_at + count * 4;
+
+    if (matrices_at + count * 64 > file.byteLength) {
+        throw new Error(
+            `placement file names ${count} placements but holds ${file.byteLength} bytes`
+        );
+    }
+
+    return {
+        count,
+        geometry: new Uint32Array(file, ids_at, count),
+        matrices: new Float32Array(file, matrices_at, count * 16),
+    };
+}
+
+
+/**
+ * How large a coalesced range is allowed to grow, in bytes.
+ *
+ * A range is fetched into one `ArrayBuffer`, so this is a memory bound rather than a network one: a
+ * district of a hundred thousand contiguous geometries would otherwise coalesce into a single
+ * multi-gigabyte read, and the page would die allocating it rather than anywhere interesting. At
+ * 64 MiB a district is a few dozen requests instead of one, which costs nothing against the round
+ * trips it already saved, and the reader holds at most one of them per concurrent fetch.
+ *
+ * @type {number}
+ */
+export const CALDERA_MAX_RANGE_BYTES = 64 * 1024 * 1024;
+
+
+/**
+ * The pack byte ranges that cover a set of geometries, coalesced.
+ *
+ * A district wants tens of thousands of blobs and a request per blob is tens of thousands of round
+ * trips. The blobs are laid down in geometry-id order, so a district's own geometry is very nearly
+ * contiguous — the runs below are what turns that layout into a handful of reads. `slack` is what
+ * buys the rest: joining two runs across a small hole fetches bytes nobody asked for, and a few
+ * kilobytes of those is cheaper than another round trip.
+ *
+ * Ids repeated in the input are taken once. A caller that has already deduplicated loses nothing by
+ * it, and a caller that has not would otherwise get a geometry deserialized twice out of the same
+ * bytes.
+ *
+ * @param {number[]|Uint32Array|Iterable<number>} ids the geometries wanted, in any order
+ * @param {{pack: Uint32Array, offset: Uint32Array, bytes: Uint32Array}} table
+ * @param {number} [slack] how large a gap may be bridged rather than split, in bytes
+ * @param {number} [max_bytes] how large one range may grow — see {@link CALDERA_MAX_RANGE_BYTES}
+ * @returns {{pack: number, start: number, end: number, ids: number[]}[]} ranges, `end` exclusive
+ */
+export function caldera_coalesce_ranges(
+    ids, table, slack = 64 * 1024, max_bytes = CALDERA_MAX_RANGE_BYTES
+) {
+    const wanted = Array.from(new Set(ids)).filter(id => table.bytes[id] > 0);
+
+    wanted.sort((a, b) => (
+        table.pack[a] - table.pack[b] || table.offset[a] - table.offset[b]
+    ));
+
+    const ranges = [];
+
+    let current = null;
+
+    for (const id of wanted) {
+        const pack = table.pack[id];
+        const start = table.offset[id];
+        const end = start + table.bytes[id];
+
+        const joins = current !== null
+            && current.pack === pack
+            && start - current.end <= slack
+            && Math.max(current.end, end) - current.start <= max_bytes;
+
+        if (joins) {
+            current.end = Math.max(current.end, end);
+            current.ids.push(id);
+
+            continue;
+        }
+
+        current = { pack, start, end, ids: [id] };
+
+        ranges.push(current);
+    }
+
+    return ranges;
+}

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

@@ -0,0 +1,126 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>meep — Caldera</title>
+
+    <link rel="icon" href="data:,">
+
+    <style>
+        :root { color-scheme: dark; }
+
+        html, body { height: 100%; margin: 0; overflow: hidden; background: #06090d; }
+
+        /* Placed, not sized — `Renderer` writes an inline `style.width`/`style.height` every time
+           it configures the context, and an inline style beats a rule in here. `main.js` measures
+           the document for the same reason. */
+        #view { position: absolute; top: 0; left: 0; display: block; }
+
+        #panel {
+            position: absolute; top: 0; right: 0; width: 350px; max-height: 100vh; overflow-y: auto;
+            z-index: 10; padding: 12px 14px; box-sizing: border-box;
+            font: 12px/1.45 ui-monospace, "Cascadia Mono", Consolas, monospace;
+            color: #dfe6ee; background: rgba(10, 14, 20, 0.9);
+            border-left: 1px solid #2b3947;
+        }
+
+        #panel h1 { margin: 0 0 8px; font-size: 13px; letter-spacing: 0.06em; color: #ffc46b; }
+
+        #panel h2 {
+            margin: 14px 0 6px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
+            color: #6b7c8d; border-bottom: 1px solid #24313d; padding-bottom: 3px;
+        }
+
+        #panel .row { display: flex; justify-content: space-between; gap: 8px; }
+
+        #panel .row span:last-child {
+            color: #f2f6fa; text-align: right;
+            min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+        }
+
+        #panel .row span:first-child { flex: none; }
+        #panel .muted { color: #6b7c8d; }
+        #panel .bad { color: #ff8a7a; }
+        #panel .good { color: #8fe388; }
+        #panel .warn { color: #ffc46b; }
+        #panel input[type=range] { width: 100%; }
+        #panel label { display: block; margin: 6px 0 2px; }
+
+        #status { white-space: pre-wrap; overflow-wrap: anywhere; }
+        #status.error { color: #ff8a7a; }
+
+        /* A converted map arrives district by district and the picture fills in as it does, so a
+           bar is the honest shape for it: the page is worth looking at long before it is finished. */
+        #progress {
+            margin: 8px 0 2px; height: 4px; background: #1b2530; border-radius: 2px;
+            overflow: hidden;
+        }
+
+        #progress > div { height: 100%; width: 0; background: #ffc46b; transition: width 0.2s; }
+
+        #districts {
+            max-height: 190px; overflow-y: auto; margin-top: 4px;
+            border: 1px solid #24313d; border-radius: 2px; padding: 4px 6px;
+        }
+
+        #districts .row span:first-child { overflow: hidden; text-overflow: ellipsis; }
+        #districts .row.pending span:last-child { color: #6b7c8d; }
+        #districts .row.loading span:last-child { color: #ffc46b; }
+        #districts .row.done span:last-child { color: #8fe388; }
+
+        #hint {
+            position: absolute; left: 12px; bottom: 10px; z-index: 10;
+            font: 11px/1.5 ui-monospace, Consolas, monospace; color: #62727f;
+            background: rgba(10, 14, 20, 0.6); padding: 5px 9px; border-radius: 3px;
+        }
+    </style>
+</head>
+<body tabindex="0">
+
+<canvas id="view"></canvas>
+
+<div id="hint">drag to orbit &middot; wheel to dolly &middot; P profiles a frame</div>
+
+<div id="panel">
+    <h1>CALDERA</h1>
+
+    <div id="status">starting…</div>
+    <div id="progress"><div></div></div>
+
+    <h2>scene</h2>
+    <div class="row"><span>districts</span><span id="s-districts">—</span></div>
+    <div class="row"><span>placements</span><span id="s-placements">—</span></div>
+    <div class="row"><span>geometries</span><span id="s-geometries">—</span></div>
+    <div class="row"><span>source triangles</span><span id="s-source">—</span></div>
+    <div class="row"><span>instanced triangles</span><span id="s-instanced">—</span></div>
+    <div class="row"><span>fetched</span><span id="s-fetched">—</span></div>
+    <div class="row"><span>open</span><span id="s-open">—</span></div>
+
+    <h2>frame</h2>
+    <div class="row"><span>frame</span><span id="f-frame">—</span></div>
+    <div class="row"><span>cpu</span><span id="f-cpu">—</span></div>
+    <div class="row"><span>resolution</span><span id="f-resolution">—</span></div>
+    <div class="row"><span>mesh collection</span><span id="f-meshes">—</span></div>
+    <div class="row"><span>meshlet collection</span><span id="f-meshlets">—</span></div>
+    <div class="row"><span>dropped (vg only)</span><span id="f-dropped">—</span></div>
+
+    <h2>virtual geometry</h2>
+    <div class="row"><span>containers</span><span id="v-containers">—</span></div>
+    <div class="row"><span>instances</span><span id="v-instances">—</span></div>
+    <div class="row"><span>clusters drawn</span><span id="v-drawn">—</span></div>
+    <div class="row"><span>pages resident</span><span id="v-pages">—</span></div>
+    <div class="row"><span>refused / clamped</span><span id="v-refused">—</span></div>
+
+    <label for="tau">error threshold <span id="tau-value" class="muted">1.00</span> px</label>
+    <input id="tau" type="range" min="0.25" max="16" step="0.25" value="1">
+
+    <h2>districts</h2>
+    <div id="districts"></div>
+
+    <div id="profile-status" class="muted" style="margin-top: 10px"></div>
+</div>
+
+<script type="module" src="./main.js"></script>
+
+</body>
+</html>

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

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