@woosh/meep-engine 3.64.1 → 3.67.0

package/src/engine/physics/fluid/obstacle/chunk_fluid_obstacle_record.js

@@ -1,5 +1,6 @@
 import { chunk_quat_rotate_v3 } from "../../../../shade/renderer/shader/chunk/geometry/quaternion/chunk_v3_apply_quat.js";
 import { chunk_rigid_velocity_at_point } from "../../../../shade/renderer/shader/chunk/physics/kinematics/chunk_rigid_velocity_at_point.js";
+import { chunk_shape_record_line_span } from "../../../../shade/renderer/shader/chunk/sdf/chunk_shape_record_line_span.js";
 import { chunk_shape_record_signed_distance } from "../../../../shade/renderer/shader/chunk/sdf/chunk_shape_record_signed_distance.js";
 import { CodeChunk } from "../../../../shade/renderer/shader/compiler/CodeChunk.js";
 import { FLUID_OBSTACLE_RECORD_STRUCT } from "./FLUID_OBSTACLE_RECORD_STRUCT.js";
@@ -10,7 +11,11 @@ import { FLUID_OBSTACLE_RECORD_STRUCT } from "./FLUID_OBSTACLE_RECORD_STRUCT.js"
  * - `fluid_obstacle_record_signed_distance(record, global, x) -> f32`: signed distance to its
  *   surface, negative inside; the point is solid when it is at most `record.inflation`;
  * - `fluid_obstacle_record_wall_velocity(record, global, x) -> vec3<f32>`: the wall's velocity there,
- *   `rigid_velocity_at_point(v, ω, t, x)` with `t` the node's translation.
+ *   `rigid_velocity_at_point(v, ω, t, x)` with `t` the node's translation;
+ * - `fluid_obstacle_record_line_span(record, global, origin, direction) -> vec2<f32>`: the part of the
+ *   world line `origin + t · direction` (`direction` unit) inside its surface, as the `t` it enters at
+ *   and the `t` it leaves at, the first greater than the second for a line that misses
+ *   (`shape_record_line_span`). The inflation is not part of it.
  *
  * The node poses the record rigidly: its translation, and its matrix's rotation with each column
  * normalised, scale ignored, as the physics narrowphase and the CPU fluid pose a collider; then the
@@ -47,6 +52,26 @@ fn fluid_obstacle_record_signed_distance(
     return shape_record_signed_distance(record.shape_kind, record.shape_parameters, local);
 }
 
+fn fluid_obstacle_record_line_span(
+    record: ${FLUID_OBSTACLE_RECORD_STRUCT.wgsl_ref}, global: mat4x4<f32>, origin: vec3<f32>, direction: vec3<f32>
+) -> vec2<f32> {
+    // the node's rotation: its columns normalised, so its scale is ignored
+    let r0 = global[0].xyz * (1.0 / length(global[0].xyz));
+    let r1 = global[1].xyz * (1.0 / length(global[1].xyz));
+    let r2 = global[2].xyz * (1.0 / length(global[2].xyz));
+
+    let offset = origin - global[3].xyz;
+
+    // the record's own pose within the collider, inverted
+    let q = record.pose_rotation;
+    let inverse = vec4<f32>(-q.xyz, q.w);
+
+    let local_origin = quat_rotate_v3(inverse, vec3<f32>(dot(r0, offset), dot(r1, offset), dot(r2, offset)) - record.pose_translation);
+    let local_direction = quat_rotate_v3(inverse, vec3<f32>(dot(r0, direction), dot(r1, direction), dot(r2, direction)));
+
+    return shape_record_line_span(record.shape_kind, record.shape_parameters, local_origin, local_direction);
+}
+
 fn fluid_obstacle_record_wall_velocity(
     record: ${FLUID_OBSTACLE_RECORD_STRUCT.wgsl_ref}, global: mat4x4<f32>, x: vec3<f32>
 ) -> vec3<f32> {
@@ -57,5 +82,6 @@ fn fluid_obstacle_record_wall_velocity(
         chunk_quat_rotate_v3,
         chunk_rigid_velocity_at_point,
         chunk_shape_record_signed_distance,
+        chunk_shape_record_line_span,
     ]
 );

package/src/format/lut/cube/CubeLut.d.ts

@@ -0,0 +1,38 @@
+/**
+ * A 3D lookup table as a `.cube` file holds it — what {@link cube_read } returns and {@link cube_write } takes.
+ *
+ * Entry `r + g·size + b·size²` holds the output for the input at lattice point (r, g, b): the input whose channel c
+ * is `domain_min[c] + (domain_max[c] - domain_min[c]) · i / (size - 1)` for that channel's index i. Red runs
+ * fastest, then green, then blue, as the format lays the entries out.
+ *
+ * The format carries numbers only. What the input and output mean — their primaries, transfer curves and units — is
+ * a contract between the writer and the reader, stated outside the table; a `.cube` file conventionally says it in
+ * its comments.
+ */
+type CubeLut = {
+    /**
+     * the `TITLE`, `""` when the file has none
+     */
+    title: string;
+    /**
+     * the comment lines in file order, each without its `#` and the space after it
+     */
+    comments: string[];
+    /**
+     * entries along each edge, at least 2
+     */
+    size: number;
+    /**
+     * the input at lattice index 0, per channel
+     */
+    domain_min: number[];
+    /**
+     * the input at lattice index `size - 1`, per channel
+     */
+    domain_max: number[];
+    /**
+     * `size³` RGB triples
+     */
+    data: Float32Array;
+};
+//# sourceMappingURL=CubeLut.d.ts.map

package/src/format/lut/cube/CubeLut.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CubeLut.d.ts","sourceRoot":"","sources":["../../../../../src/format/lut/cube/CubeLut.js"],"names":[],"mappings":";;;;;;;;;;;;;;;WAYc,MAAM;;;;cACN,MAAM,EAAE;;;;UACR,MAAM;;;;gBACN,MAAM,EAAE;;;;gBACR,MAAM,EAAE;;;;UACR,YAAY"}

package/src/format/lut/cube/CubeLut.js

@@ -0,0 +1,23 @@
+/**
+ * A 3D lookup table as a `.cube` file holds it — what {@link cube_read} returns and {@link cube_write} takes.
+ *
+ * Entry `r + g·size + b·size²` holds the output for the input at lattice point (r, g, b): the input whose channel c
+ * is `domain_min[c] + (domain_max[c] - domain_min[c]) · i / (size - 1)` for that channel's index i. Red runs
+ * fastest, then green, then blue, as the format lays the entries out.
+ *
+ * The format carries numbers only. What the input and output mean — their primaries, transfer curves and units — is
+ * a contract between the writer and the reader, stated outside the table; a `.cube` file conventionally says it in
+ * its comments.
+ *
+ * @typedef {object} CubeLut
+ * @property {string} title the `TITLE`, `""` when the file has none
+ * @property {string[]} comments the comment lines in file order, each without its `#` and the space after it
+ * @property {number} size entries along each edge, at least 2
+ * @property {number[]} domain_min the input at lattice index 0, per channel
+ * @property {number[]} domain_max the input at lattice index `size - 1`, per channel
+ * @property {Float32Array} data `size³` RGB triples
+ *
+ * @see Adobe Systems, "Cube LUT Specification", version 1.0, 2013
+ * @author Alex Goldring
+ * @copyright Company Named Limited (c) 2026
+ */

package/src/format/lut/cube/cube_read.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Read a 3D LUT in the `.cube` format.
+ *
+ * **What it reads**: `TITLE`, `LUT_3D_SIZE`, `DOMAIN_MIN`, `DOMAIN_MAX` and comment lines, in any order ahead of the
+ * table, then the table: one entry per line, three decimal numbers apart by spaces or tabs, red fastest. Blank lines
+ * are skipped anywhere and comments are kept wherever they are. `DOMAIN_MIN` and `DOMAIN_MAX` default to 0 and 1,
+ * as the format defines.
+ *
+ * **What it refuses**, by name: a 1D LUT (`LUT_1D_SIZE`), any other keyword, a keyword after the table has begun, a
+ * size under 2, a table with more or fewer than `size³` entries, an entry that is not three decimal numbers, and a
+ * domain whose minimum is not under its maximum in every channel. A size is checked against what the text could hold
+ * before anything is allocated for the table, so a file cannot claim more entries than its own length allows.
+ *
+ * @param {string} text the whole file
+ * @returns {CubeLut}
+ * @throws {Error} naming the line and what is wrong with it
+ *
+ * @see cube_write
+ * @author Alex Goldring
+ * @copyright Company Named Limited (c) 2026
+ */
+export function cube_read(text: string): CubeLut;
+//# sourceMappingURL=cube_read.d.ts.map

package/src/format/lut/cube/cube_read.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cube_read.d.ts","sourceRoot":"","sources":["../../../../../src/format/lut/cube/cube_read.js"],"names":[],"mappings":"AAqCA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,gCARW,MAAM,GACJ,OAAO,CAmJnB"}

package/src/format/lut/cube/cube_read.js

@@ -0,0 +1,199 @@
+/**
+ * A decimal number as a `.cube` file writes one: optional sign, digits with an optional point, optional exponent.
+ * Narrower than `Number()`, which also takes hexadecimal, `Infinity` and the empty string.
+ * @type {RegExp}
+ */
+const DECIMAL = /^[+-]?(\d+\.?\d*|\.\d+)([eE][+-]?\d+)?$/;
+
+/**
+ * @param {string} token
+ * @param {number} line_number
+ * @returns {number}
+ */
+function parse_number(token, line_number) {
+    if (!DECIMAL.test(token)) {
+        throw new Error(`CUBE: line ${line_number}: '${token}' is not a number`);
+    }
+
+    return Number(token);
+}
+
+/**
+ * @param {string[]} tokens the keyword and its three values
+ * @param {number} line_number
+ * @returns {number[]}
+ */
+function parse_triple(tokens, line_number) {
+    if (tokens.length !== 4) {
+        throw new Error(`CUBE: line ${line_number}: ${tokens[0]} takes three numbers, found ${tokens.length - 1}`);
+    }
+
+    return [
+        parse_number(tokens[1], line_number),
+        parse_number(tokens[2], line_number),
+        parse_number(tokens[3], line_number),
+    ];
+}
+
+/**
+ * Read a 3D LUT in the `.cube` format.
+ *
+ * **What it reads**: `TITLE`, `LUT_3D_SIZE`, `DOMAIN_MIN`, `DOMAIN_MAX` and comment lines, in any order ahead of the
+ * table, then the table: one entry per line, three decimal numbers apart by spaces or tabs, red fastest. Blank lines
+ * are skipped anywhere and comments are kept wherever they are. `DOMAIN_MIN` and `DOMAIN_MAX` default to 0 and 1,
+ * as the format defines.
+ *
+ * **What it refuses**, by name: a 1D LUT (`LUT_1D_SIZE`), any other keyword, a keyword after the table has begun, a
+ * size under 2, a table with more or fewer than `size³` entries, an entry that is not three decimal numbers, and a
+ * domain whose minimum is not under its maximum in every channel. A size is checked against what the text could hold
+ * before anything is allocated for the table, so a file cannot claim more entries than its own length allows.
+ *
+ * @param {string} text the whole file
+ * @returns {CubeLut}
+ * @throws {Error} naming the line and what is wrong with it
+ *
+ * @see cube_write
+ * @author Alex Goldring
+ * @copyright Company Named Limited (c) 2026
+ */
+export function cube_read(text) {
+    const lines = text.split(/\r\n|\n|\r/);
+    const line_count = lines.length;
+
+    let title = "";
+    const comments = [];
+    let size = 0;
+    const domain_min = [0, 0, 0];
+    const domain_max = [1, 1, 1];
+
+    /**
+     * @type {Float32Array|null}
+     */
+    let data = null;
+    let entries = 0;
+    let entry_count = 0;
+
+    for (let i = 0; i < line_count; i++) {
+        const line_number = i + 1;
+        const line = lines[i].trim();
+
+        if (line.length === 0) {
+            continue;
+        }
+
+        if (line.charCodeAt(0) === 35 /* # */) {
+            // the text after `# ` as it stands, trailing spaces and all
+            comments.push(lines[i].trimStart().substring(1).replace(/^ /, ""));
+            continue;
+        }
+
+        const tokens = line.split(/[ \t]+/);
+        const head = tokens[0];
+
+        if (/^[A-Za-z_]/.test(head)) {
+            if (entries > 0) {
+                throw new Error(`CUBE: line ${line_number}: keyword ${head} after the table has begun`);
+            }
+
+            switch (head) {
+                case "TITLE": {
+                    const match = /^TITLE[ \t]+"([^"]*)"$/.exec(line);
+
+                    if (match === null) {
+                        throw new Error(`CUBE: line ${line_number}: TITLE takes one quoted string`);
+                    }
+
+                    title = match[1];
+                    break;
+                }
+
+                case "LUT_3D_SIZE": {
+                    if (tokens.length !== 2 || !/^\d+$/.test(tokens[1])) {
+                        throw new Error(`CUBE: line ${line_number}: LUT_3D_SIZE takes one whole number`);
+                    }
+
+                    size = Number(tokens[1]);
+
+                    if (size < 2) {
+                        throw new Error(`CUBE: line ${line_number}: LUT_3D_SIZE is ${size}, under the format's 2`);
+                    }
+
+                    break;
+                }
+
+                case "DOMAIN_MIN": {
+                    const values = parse_triple(tokens, line_number);
+                    domain_min[0] = values[0];
+                    domain_min[1] = values[1];
+                    domain_min[2] = values[2];
+                    break;
+                }
+
+                case "DOMAIN_MAX": {
+                    const values = parse_triple(tokens, line_number);
+                    domain_max[0] = values[0];
+                    domain_max[1] = values[1];
+                    domain_max[2] = values[2];
+                    break;
+                }
+
+                case "LUT_1D_SIZE":
+                    throw new Error(`CUBE: line ${line_number}: a 1D LUT, where a 3D LUT was expected`);
+
+                default:
+                    throw new Error(`CUBE: line ${line_number}: unsupported keyword ${head}`);
+            }
+
+            continue;
+        }
+
+        // the table
+        if (data === null) {
+            if (size === 0) {
+                throw new Error(`CUBE: line ${line_number}: table entry before LUT_3D_SIZE`);
+            }
+
+            entry_count = size * size * size;
+
+            // every entry is at least three one-digit numbers and two separators, five characters, and each but the
+            // last ends its line
+            if (entry_count * 6 - 1 > text.length) {
+                throw new Error(`CUBE: LUT_3D_SIZE ${size} needs ${entry_count} entries, more than a file of ${text.length} characters can hold`);
+            }
+
+            data = new Float32Array(entry_count * 3);
+        }
+
+        if (tokens.length !== 3) {
+            throw new Error(`CUBE: line ${line_number}: an entry is three numbers, found ${tokens.length}`);
+        }
+
+        if (entries >= entry_count) {
+            throw new Error(`CUBE: line ${line_number}: more than the ${entry_count} entries of LUT_3D_SIZE ${size}`);
+        }
+
+        const at = entries * 3;
+
+        data[at] = parse_number(tokens[0], line_number);
+        data[at + 1] = parse_number(tokens[1], line_number);
+        data[at + 2] = parse_number(tokens[2], line_number);
+
+        entries++;
+    }
+
+    if (size === 0) {
+        throw new Error("CUBE: no LUT_3D_SIZE");
+    }
+
+    if (entries !== size * size * size) {
+        throw new Error(`CUBE: ${entries} entries, where LUT_3D_SIZE ${size} needs ${size * size * size}`);
+    }
+
+    for (let c = 0; c < 3; c++) {
+        if (!(domain_min[c] < domain_max[c])) {
+            throw new Error(`CUBE: the domain of channel ${c} runs from ${domain_min[c]} to ${domain_max[c]}`);
+        }
+    }
+
+    return { title, comments, size, domain_min, domain_max, data };
+}

package/src/format/lut/cube/cube_write.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Write a 3D LUT in the `.cube` format: the comments, `TITLE` where there is one, `LUT_3D_SIZE`, `DOMAIN_MIN`,
+ * `DOMAIN_MAX`, then one entry per line, red fastest. Each number is the shortest decimal that reads back as the same
+ * 32-bit float, so {@link cube_read} returns exactly the values written.
+ *
+ * @param {CubeLut} lut
+ * @returns {string} the file, lines ending in `\n`
+ * @throws {Error} where a value is not finite, or the title or a comment cannot be written on one line
+ *
+ * @see cube_read
+ * @author Alex Goldring
+ * @copyright Company Named Limited (c) 2026
+ */
+export function cube_write({ title, comments, size, domain_min, domain_max, data }: CubeLut): string;
+//# sourceMappingURL=cube_write.d.ts.map

package/src/format/lut/cube/cube_write.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cube_write.d.ts","sourceRoot":"","sources":["../../../../../src/format/lut/cube/cube_write.js"],"names":[],"mappings":"AA6BA;;;;;;;;;;;;GAYG;AACH,oFARW,OAAO,GACL,MAAM,CAsDlB"}

package/src/format/lut/cube/cube_write.js

@@ -0,0 +1,90 @@
+import { assert } from "../../../core/assert.js";
+
+/**
+ * The shortest decimal that reads back as the same 32-bit float.
+ *
+ * @param {number} value a float32 value, finite
+ * @returns {string}
+ */
+function format_f32(value) {
+    for (let precision = 1; precision < 9; precision++) {
+        const text = value.toPrecision(precision);
+
+        if (Math.fround(Number(text)) === value) {
+            return text;
+        }
+    }
+
+    // nine significant digits always identify a float32
+    return value.toPrecision(9);
+}
+
+/**
+ * @param {number[]} triple
+ * @returns {string}
+ */
+function format_triple(triple) {
+    return `${format_f32(Math.fround(triple[0]))} ${format_f32(Math.fround(triple[1]))} ${format_f32(Math.fround(triple[2]))}`;
+}
+
+/**
+ * Write a 3D LUT in the `.cube` format: the comments, `TITLE` where there is one, `LUT_3D_SIZE`, `DOMAIN_MIN`,
+ * `DOMAIN_MAX`, then one entry per line, red fastest. Each number is the shortest decimal that reads back as the same
+ * 32-bit float, so {@link cube_read} returns exactly the values written.
+ *
+ * @param {CubeLut} lut
+ * @returns {string} the file, lines ending in `\n`
+ * @throws {Error} where a value is not finite, or the title or a comment cannot be written on one line
+ *
+ * @see cube_read
+ * @author Alex Goldring
+ * @copyright Company Named Limited (c) 2026
+ */
+export function cube_write({ title, comments, size, domain_min, domain_max, data }) {
+    assert.isString(title, 'title');
+    assert.isArray(comments, 'comments');
+    assert.isNonNegativeInteger(size, 'size');
+    assert.greaterThanOrEqual(size, 2, 'size');
+    assert.isInstanceOf(data, Float32Array, 'data', 'Float32Array');
+    assert.equal(data.length, size * size * size * 3, 'data.length !== size³ × 3');
+
+    if (/["\r\n]/.test(title)) {
+        throw new Error(`CUBE: a title cannot hold a quote or a line break, '${title}'`);
+    }
+
+    const lines = [];
+
+    for (const comment of comments) {
+        assert.isString(comment, 'comment');
+
+        if (/[\r\n]/.test(comment)) {
+            throw new Error(`CUBE: a comment cannot hold a line break, '${comment}'`);
+        }
+
+        lines.push(`# ${comment}`);
+    }
+
+    if (title.length > 0) {
+        lines.push(`TITLE "${title}"`);
+    }
+
+    lines.push(`LUT_3D_SIZE ${size}`);
+    lines.push(`DOMAIN_MIN ${format_triple(domain_min)}`);
+    lines.push(`DOMAIN_MAX ${format_triple(domain_max)}`);
+
+    const value_count = data.length;
+
+    for (let i = 0; i < value_count; i++) {
+        if (!Number.isFinite(data[i])) {
+            throw new Error(`CUBE: entry ${Math.floor(i / 3)} holds ${data[i]}, which the format cannot write`);
+        }
+    }
+
+    for (let i = 0; i < value_count; i += 3) {
+        lines.push(`${format_f32(data[i])} ${format_f32(data[i + 1])} ${format_f32(data[i + 2])}`);
+    }
+
+    lines.push("");
+
+    return lines.join("\n");
+}

package/src/shade/device/shader/ShaderModuleCompiler.d.ts

@@ -8,6 +8,8 @@ export class ShaderModuleCompiler {
      */
     constructor(device: GPUDevice);
     /**
+     * The module for `descriptor`. Equal descriptors are handed the same module for as long as
+     * something holds it; once nothing does, a later call may compile it again and hand out a new one.
      *
      * @param {ShaderModuleDescriptor} descriptor
      * @returns {GPUShaderModule}

package/src/shade/device/shader/ShaderModuleCompiler.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ShaderModuleCompiler.d.ts","sourceRoot":"","sources":["../../../../../src/shade/device/shader/ShaderModuleCompiler.js"],"names":[],"mappings":"AAGA;;GAEG;AAEH;IAaI;;;OAGG;IACH,+BAEC;IAwCD;;;;OAIG;IACH,mBAHW,sBAAsB,mBAOhC;;CAEJ;qCAzEY,OAAO,qDAAqD,EAAE,sBAAsB"}
+{"version":3,"file":"ShaderModuleCompiler.d.ts","sourceRoot":"","sources":["../../../../../src/shade/device/shader/ShaderModuleCompiler.js"],"names":[],"mappings":"AAGA;;GAEG;AAEH;IAmBI;;;OAGG;IACH,+BAEC;IAwCD;;;;;;OAMG;IACH,mBAHW,sBAAsB,mBAsBhC;;CAEJ;qCAhGY,OAAO,qDAAqD,EAAE,sBAAsB"}

package/src/shade/device/shader/ShaderModuleCompiler.js

@@ -13,8 +13,14 @@ export class ShaderModuleCompiler {
     #device
 
     /**
+     * Held weakly. A pipeline keeps the module it was built from alive in the GPU process without our
+     * help, while the browser charges every `GPUShaderModule` object the page still references to the
+     * JS heap's accounting as external memory, and the garbage a collection is allowed to gather grows
+     * with that. So a module is kept only for as long as something holds it: one nobody holds goes at
+     * the next major collection, and a later request compiles it again from the descriptor, which this
+     * map does keep.
      *
-     * @type {HashMap<ShaderModuleDescriptor, GPUShaderModule>}
+     * @type {HashMap<ShaderModuleDescriptor, WeakRef<GPUShaderModule>>}
      */
     #cache = new HashMap();
 
@@ -65,14 +71,31 @@ export class ShaderModuleCompiler {
     }
 
     /**
+     * The module for `descriptor`. Equal descriptors are handed the same module for as long as
+     * something holds it; once nothing does, a later call may compile it again and hand out a new one.
      *
      * @param {ShaderModuleDescriptor} descriptor
      * @returns {GPUShaderModule}
      */
     obtain(descriptor) {
+        const cache = this.#cache;
 
-        return this.#cache.getOrCompute(descriptor, this.#compile, this);
+        const held = cache.get(descriptor);
 
+        if (held !== undefined) {
+            const live = held.deref();
+
+            if (live !== undefined) {
+                return live;
+            }
+        }
+
+        const module = this.#compile(descriptor);
+
+        // an equal descriptor that is already a key keeps its entry, and the dead reference is replaced
+        cache.set(descriptor, new WeakRef(module));
+
+        return module;
     }
 
 }

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

@@ -0,0 +1,75 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Grass surfaces</title>
+    <style>
+        :root {
+            color-scheme: dark;
+        }
+
+        html, body {
+            margin: 0;
+            height: 100%;
+            overflow: hidden;
+            background: #101215;
+            color: #e3e5e8;
+            font: 13px/1.4 'Segoe UI', system-ui, sans-serif;
+        }
+
+        #viewport {
+            position: absolute;
+            inset: 0;
+        }
+
+        #legend {
+            position: absolute;
+            left: 12px;
+            top: 12px;
+            padding: 10px 12px;
+            background: rgba(14, 15, 20, 0.78);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            border-radius: 4px;
+            max-width: 360px;
+        }
+
+        #legend h1 {
+            font-size: 14px;
+            margin: 0 0 6px;
+        }
+
+        #legend p {
+            margin: 4px 0;
+            color: #a8adb5;
+        }
+
+        #status {
+            font-variant-numeric: tabular-nums;
+            color: #e3e5e8;
+            white-space: pre;
+        }
+
+        #message {
+            position: absolute;
+            inset: 0;
+            display: none;
+            place-items: center;
+            white-space: pre-wrap;
+            padding: 24px;
+        }
+    </style>
+</head>
+<body tabindex="0">
+<div id="viewport"></div>
+<div id="legend">
+    <h1>Grass surfaces</h1>
+    <p>A field of two sheets, a boulder sunk into one and a hill over a cave on the other, sampled as one
+        surface; and a platform of two sheets and a crate that moves as another.</p>
+    <p>A grey slab hangs over the field and is no member of it.</p>
+    <p id="status"></p>
+</div>
+<div id="message"></div>
+<script type="module" src="./main.js"></script>
+</body>
+</html>

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

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

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

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