rpg-engine 0.0.0-stage → 0.1.1

package/dist/dashboard/dice/roller.js

@@ -0,0 +1,101 @@
+// The dice thrown on the page (D-278): the models loaded once, the stage, and each throw: all the dice together, then again those rerolled or exploded, past
+// those that lie still; each shown turned by one of its symmetries so that it lands on its value, with its knocks. The tray loads it, with three.js and
+// Rapier, at its first throw.
+import { readChoice } from "../prefs.js";
+import { loadDice } from "./load.js";
+import { combine, landingTurn, symmetries } from "./models.js";
+import { diceEdgesPref } from "./sets.js";
+import { knock } from "./sounds.js";
+import { makeStage } from "./stage.js";
+import { loadPhysics, throwDice } from "./throw.js";
+// How long the face before a reroll stays in sight, in milliseconds.
+const beforeReroll = 300;
+// How many frames late a knock may still sound.
+const lateKnock = 4;
+/** Loads the dice and their physics and makes the stage on the canvas; throws when the browser has no WebGL, or cannot run the physics' WebAssembly. */
+export async function makeRoller(canvas) {
+    const [loaded] = await Promise.all([loadDice(readChoice(diceEdgesPref)), loadPhysics()]);
+    const stage = makeStage(canvas);
+    const turns = new Map([...loaded.models].map(([kind, model]) => [kind, symmetries(model.shape)]));
+    const model = (die) => loaded.models.get(die.kind);
+    return {
+        kinds: new Set(loaded.models.keys()),
+        async roll(dice, showing) {
+            // The edges chosen in Settings, rounded or sharp (D-354).
+            stage.place(dice.map((die) => die.kind), await loaded.looks(readChoice(diceEdgesPref)));
+            const poses = dice.map(() => undefined);
+            const lying = dice.map(() => undefined);
+            const throws = Math.max(0, ...dice.map((die) => die.values.length));
+            for (let round = 0; round < throws; round++) {
+                const rolling = dice.flatMap((die, index) => (die.values.length > round ? [index] : []));
+                const lyingDice = dice.flatMap((die, index) => {
+                    const frame = lying[index];
+                    return frame === undefined || rolling.includes(index) ? [] : [{ shape: model(die).shape, frame }];
+                });
+                const thrown = throwDice(rolling.map((index) => model(dice[index]).shape), stage.tray, Math.random, lyingDice);
+                const last = thrown.frames.at(-1) ?? [];
+                const landing = rolling.map((index, at) => landingTurn(model(dice[index]), turns.get(dice[index].kind) ?? [], last[at].quaternion, dice[index].values[round]));
+                // A die stops as it fell, its number at whatever angle (D-285).
+                const ended = await play(thrown, (frame) => {
+                    rolling.forEach((index, at) => {
+                        poses[index] = { position: frame[at].position, quaternion: combine(frame[at].quaternion, landing[at]) };
+                    });
+                    stage.show(poses);
+                }, showing);
+                if (!ended) {
+                    return false;
+                }
+                rolling.forEach((index, at) => {
+                    lying[index] = last[at];
+                });
+                // The face before a reroll stays in sight a moment.
+                if (round + 1 < throws && !showing.instant && !showing.skipping()) {
+                    await new Promise((done) => setTimeout(done, beforeReroll));
+                }
+            }
+            const instant = showing.instant || showing.skipping();
+            // A die that does not count burns away, or fades with reduced motion (D-358).
+            dice.forEach((die, index) => die.dropped && stage.dim(index, showing.instant));
+            // A rare face is celebrated, still when the throw was shown at once or cut short; at most 80 sparks or puffs in all, fewer on a phone.
+            const rares = dice.filter((die) => die.rare !== undefined).length;
+            const particles = Math.min(matchMedia("(max-width: 600px)").matches ? 24 : 40, Math.floor(80 / Math.max(1, rares)));
+            dice.forEach((die, index) => die.rare !== undefined && stage.celebrate(index, die.rare, { instant, particles }));
+            return true;
+        },
+        cover: (pixels) => stage.cover(pixels),
+        hide: () => stage.hide(),
+        resize: () => stage.resize(),
+    };
+}
+/** Shows a throw's frames, sixty to a second, with its knocks; its last frame alone with reduced motion; its end at once when the tray cuts it short. */
+function play(thrown, show, showing) {
+    const frames = showing.instant ? thrown.frames.slice(-1) : thrown.frames;
+    const started = performance.now();
+    let heard = 0;
+    return new Promise((done) => {
+        const step = (now) => {
+            if (!showing.current()) {
+                done(false);
+                return;
+            }
+            // The first frame of the animation may begin a moment before the throw did.
+            const at = showing.skipping() ? frames.length - 1 : Math.min(frames.length - 1, Math.max(0, Math.floor((now - started) / (1000 / 60))));
+            show(frames[at]);
+            // The knocks up to this frame: none when the throw is shown at once or cut short, nor those left behind when the page stalled a moment, which would
+            // sound late, all together, the dice already still.
+            while (heard < thrown.knocks.length && thrown.knocks[heard].frame <= at) {
+                if (showing.sound && !showing.instant && !showing.skipping() && at - thrown.knocks[heard].frame <= lateKnock) {
+                    knock(thrown.knocks[heard].strength, thrown.knocks[heard].onDie);
+                }
+                heard++;
+            }
+            if (at < frames.length - 1) {
+                requestAnimationFrame(step);
+            }
+            else {
+                done(true);
+            }
+        };
+        requestAnimationFrame(step);
+    });
+}

package/dist/dashboard/dice/sets.js

@@ -0,0 +1,49 @@
+// The look of the dice the player rolls (D-279, D-348, D-352): the theme's, or one of the sets chosen in Settings, as sets of real dice, each a material, a
+// body and the ink of its numbers: resin, metal, wood, stone or crystal, the wood and the stone from CC0 pictures of ambientCG (assets/dice/textures). Kept in
+// this browser alone.
+import { readChoice } from "../prefs.js";
+import { shownTheme } from "../theme.js";
+const resin = { roughness: 0.35, metalness: 0.05, shine: 0 };
+const metal = { roughness: 0.3, metalness: 1, shine: 1 };
+// The gems and the glass: the page and their far faces seen through them (D-418).
+const crystal = { roughness: 0.02, metalness: 0, shine: 1.5, clarity: 0.3 };
+/** The sets, the theme's first, then by material: dark numbers on light bodies and light numbers on dark ones, to be read at a glance. */
+export const diceSets = [
+    { value: "theme", label: "Theme" },
+    { value: "ivory", label: "Ivory", look: { finish: resin, body: "#ece3cf", ink: "#1f1d1b" } },
+    { value: "obsidian", label: "Obsidian", look: { finish: resin, body: "#222227", ink: "#e0b84c" } },
+    { value: "ruby", label: "Ruby", look: { finish: resin, body: "#8f1d2e", ink: "#f2c75a" } },
+    { value: "emerald", label: "Emerald", look: { finish: resin, body: "#1c6b4b", ink: "#f4f0e6" } },
+    { value: "sapphire", label: "Sapphire", look: { finish: resin, body: "#1f4c9c", ink: "#f4f0e6" } },
+    { value: "amethyst", label: "Amethyst", look: { finish: resin, body: "#5d3590", ink: "#dcdce6" } },
+    { value: "ruby-crystal", label: "Crystal ruby", look: { finish: crystal, body: "#8c0a1e", ink: "#f2c75a" } },
+    { value: "sapphire-crystal", label: "Crystal sapphire", look: { finish: crystal, body: "#173aa6", ink: "#f4f0e6" } },
+    { value: "amethyst-crystal", label: "Crystal amethyst", look: { finish: crystal, body: "#5e22b0", ink: "#f6f1ff" } },
+    // Clear as a drinking glass, and ice, frosted: their far numbers only engraved, so that the near ones are read.
+    { value: "glass", label: "Glass", look: { finish: { roughness: 0, metalness: 0, shine: 0.8, clarity: 0.92, engraved: true, glassy: true, prism: 0.5 }, body: "#0b0d10", ink: "#c9971c", swatch: "#d8e9f0" } },
+    { value: "ice", label: "Ice", look: { finish: { roughness: 0.5, metalness: 0, shine: 0.7, clarity: 0.55, engraved: true, glassy: true, frosted: true }, body: "#3f6276", ink: "#2c6fb5", swatch: "#c4e2f0" } },
+    { value: "steel", label: "Steel", look: { finish: metal, body: "#c9ccd2", ink: "#16171a" } },
+    { value: "brass", label: "Brass", look: { finish: { ...metal, roughness: 0.35 }, body: "#d2a64a", ink: "#2a1c08" } },
+    { value: "walnut", label: "Walnut", look: { finish: { roughness: 0.6, metalness: 0, shine: 0, texture: "walnut" }, body: "#ffffff", ink: "#ecd29a" } },
+    { value: "ash", label: "Ash", look: { finish: { roughness: 0.6, metalness: 0, shine: 0, texture: "ash" }, body: "#ffffff", ink: "#2e1c0e" } },
+    { value: "marble", label: "Marble", look: { finish: { roughness: 0.15, metalness: 0, shine: 0.4, texture: "marble" }, body: "#ffffff", ink: "#1d1e24" } },
+    // Black onyx, polished, its bands barely seen (D-418).
+    { value: "onyx", label: "Onyx", look: { finish: { roughness: 0.06, metalness: 0, shine: 0.7, texture: "onyx" }, body: "#3a3a3f", ink: "#e7c46a" } },
+    { value: "granite", label: "Granite", look: { finish: { roughness: 0.25, metalness: 0, shine: 0.3, texture: "granite" }, body: "#ffffff", ink: "#141416" } },
+];
+/** Which set the player rolls. */
+export const diceSetPref = { key: "rpg-engine.dice-set", initial: "theme", values: diceSets.map((set) => set.value) };
+/** Whether the dice's edges are rounded or sharp, as a precision die's (D-354). */
+export const diceEdgesPref = { key: "rpg-engine.dice-edges", initial: "rounded", values: ["rounded", "sharp"] };
+/** The look of a set, by default the one chosen; the theme's by the theme shown: yellow resin with navy numbers on the dark page, navy with yellow on the light. */
+export function diceLook(value = readChoice(diceSetPref)) {
+    const chosen = diceSets.find((set) => set.value === value)?.look;
+    if (chosen !== undefined) {
+        return chosen;
+    }
+    return shownTheme() === "dark" ? { finish: resin, body: "#f5c63e", ink: "#182c4c" } : { finish: resin, body: "#182c4c", ink: "#f5c63e" };
+}
+/** Where the picture of a grain is. */
+export function texturePath(texture) {
+    return `/assets/dice/textures/${texture}.jpg`;
+}

package/dist/dashboard/dice/sounds.js

@@ -0,0 +1,102 @@
+// The sound of the dice (D-278, D-283, D-357): one touch of a die in a felt-lined tray, recorded by the maintainer and equalized low, and the click of two dice
+// hitting each other, recorded too, played at every knock of the physics, so the bounces of each throw make its pattern; as loud as the die hit, duller when
+// softly, barely higher or lower each time. Until they load, the browser makes a knock of its own. Browsers let a page make sounds only after the player's
+// first click or key.
+let audio;
+let output;
+let touch;
+let click;
+// How loud the click is beside the touch: all of it where the ear hears best, it would cover the felt's thud. Dice clicking span less than they thud, some
+// 18 dB from the softest to the hardest in a recording of five real dice, where their gain alone would make 37.
+const clickLevel = 0.07;
+const clickSpan = 0.75;
+/** Lets the page make sounds, from a click or a key of the player's; the first time, it loads the samples. */
+export function wakeSound() {
+    try {
+        if (audio === undefined) {
+            audio = new AudioContext();
+            // Many dice together never clip: a compressor before the speakers.
+            const compressor = audio.createDynamicsCompressor();
+            compressor.connect(audio.destination);
+            output = compressor;
+            void loadSample(audio, "dice-touch.wav").then((loaded) => {
+                touch = loaded;
+            });
+            void loadSample(audio, "dice-collision.wav").then((loaded) => {
+                click = loaded;
+            });
+        }
+        void audio.resume();
+    }
+    catch {
+        // No sound in this browser.
+    }
+}
+/** A die's knock on the floor or on another die, as hard as given. */
+export function knock(strength, onDie) {
+    if (audio === undefined || output === undefined || audio.state !== "running") {
+        return;
+    }
+    // Two dice meet each at half the speed between them, as two equal bodies do.
+    const loudness = Math.min(1, (onDie ? strength / 2 : strength) / 25);
+    if (touch === undefined) {
+        madeKnock(audio, output, loudness);
+        return;
+    }
+    // Two dice click, resin on resin, where the felt muffles a die's touch.
+    const hard = onDie && click !== undefined;
+    const source = audio.createBufferSource();
+    source.buffer = (hard ? click : undefined) ?? touch;
+    // The same die rings at the same pitch: a few hundredths up or down, only so that the same touch never sounds twice alike.
+    source.playbackRate.value = 0.97 + Math.random() * 0.06;
+    // A soft knock is a duller one: the felt lets less of the click through, from 300 Hz for the softest to some 12 kHz for the hardest, the touch's body
+    // being all below 1 kHz; two dice, from 5 kHz to 16 kHz, a click being all above 1 kHz.
+    const filter = audio.createBiquadFilter();
+    filter.type = "lowpass";
+    filter.frequency.value = hard ? 5000 * 3.2 ** loudness : 300 * 40 ** loudness;
+    filter.Q.value = Math.SQRT1_2;
+    // Each bounce, slower, is much softer than the one before, as a real die's on felt.
+    const gain = audio.createGain();
+    gain.gain.value = hard ? clickLevel * Math.max(0.05, loudness) ** clickSpan : Math.max(0.02, loudness ** 1.5);
+    source.connect(filter).connect(gain).connect(output);
+    source.start();
+}
+/** The browser's own knock: a short noise through a filter, with a short tone beneath it. */
+function madeKnock(audio, output, loudness) {
+    const now = audio.currentTime;
+    const samples = Math.floor(audio.sampleRate * 0.06);
+    const noise = audio.createBuffer(1, samples, audio.sampleRate);
+    const data = noise.getChannelData(0);
+    for (let index = 0; index < samples; index++) {
+        data[index] = (Math.random() * 2 - 1) * Math.exp(-index / (samples / 7));
+    }
+    const click = audio.createBufferSource();
+    click.buffer = noise;
+    const filter = audio.createBiquadFilter();
+    filter.type = "bandpass";
+    filter.frequency.value = 1400 + loudness * 1800 + Math.random() * 600;
+    filter.Q.value = 1.4;
+    const clickGain = audio.createGain();
+    clickGain.gain.value = 0.15 + loudness * 0.45;
+    click.connect(filter).connect(clickGain).connect(output);
+    click.start(now);
+    const tone = audio.createOscillator();
+    tone.type = "sine";
+    tone.frequency.value = 900 - loudness * 300 + Math.random() * 80;
+    const toneGain = audio.createGain();
+    toneGain.gain.setValueAtTime(0.08 + loudness * 0.22, now);
+    toneGain.gain.exponentialRampToValueAtTime(0.001, now + 0.09);
+    tone.connect(toneGain).connect(output);
+    tone.start(now);
+    tone.stop(now + 0.1);
+}
+/** Loads and decodes a sample; undefined when it cannot, and the browser's own knock stays. */
+async function loadSample(context, file) {
+    try {
+        const response = await fetch(`/assets/sounds/${file}`);
+        return await context.decodeAudioData(await response.arrayBuffer());
+    }
+    catch {
+        return undefined;
+    }
+}

package/dist/dashboard/dice/stage.js

@@ -0,0 +1,355 @@
+// Where the dice are shown (D-278): a three.js scene over the page, with a light, the dice's shadows on an invisible floor, and the dice of make-dice.py in the
+// set chosen in Settings, by default the theme's (D-279, D-348, D-352): resin, metal mirroring a room made on the spot, wood or stone with its grain.
+import * as THREE from "three";
+import { RoomEnvironment } from "three/addons/environments/RoomEnvironment.js";
+import { shownTheme } from "../theme.js";
+import { burnAway, crack } from "./burn.js";
+import { celebrate, embers, lightInk, makePictures } from "./celebration.js";
+import { floorCrackMaterial } from "./floor-cracks.js";
+import { frostPicture } from "./frost.js";
+import { diceLook, texturePath } from "./sets.js";
+// A die that does not count, as the lower of two d20 with advantage, goes out, whatever its set: its colour gone and darker, its body to a third of its
+// light, its ink to some half, still read; never lighter, which on a dark die would look picked (D-348, D-414).
+const dimmedBody = 0.35;
+// How much of the window's foot the plate of the result covers, in pixels, until the plate of a throw is measured: from the window's edge to the plate's
+// top, on a wide screen and on a phone, where it comes out of the bar of the sections.
+const plateOnWide = 150;
+// The window's height up to which the dice grow with it, in pixels: a laptop's or a desktop's; past it they keep their size.
+const commonHeight = 900;
+const plateOnPhone = 220;
+const dimmedInk = 0.55;
+// The fire the highest face's numbers light with, on every set and theme: a gold ink lights brighter, a dark one turns gold.
+const branding = "#ffbf45";
+/** Makes the stage on a canvas; throws when the browser has no WebGL. */
+export function makeStage(canvas) {
+    const renderer = new THREE.WebGLRenderer({ canvas, alpha: true, antialias: true });
+    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+    renderer.shadowMap.enabled = true;
+    renderer.shadowMap.type = THREE.PCFShadowMap;
+    // From high above, a little tilted, with a narrow view: the face that lands up is the one the player reads, even at the window's edges.
+    const camera = new THREE.PerspectiveCamera(18, 1, 0.1, 200);
+    const above = new THREE.Vector3(0, 45, 9);
+    const scene = new THREE.Scene();
+    scene.add(new THREE.HemisphereLight(0xffffff, 0x334466, 1.4));
+    const sun = new THREE.DirectionalLight(0xffffff, 2.2);
+    sun.position.set(-6, 14, 6);
+    sun.castShadow = true;
+    sun.shadow.mapSize.set(1024, 1024);
+    scene.add(sun);
+    const floor = new THREE.Mesh(new THREE.PlaneGeometry(400, 400), new THREE.ShadowMaterial({ opacity: 0.35 }));
+    floor.rotation.x = -Math.PI / 2;
+    floor.receiveShadow = true;
+    scene.add(floor);
+    let dice = [];
+    // The room the metals and the polished stones mirror, and the grains' pictures, each made or loaded once, the chosen set's at once.
+    let room;
+    const grains = new Map();
+    const grain = (name) => {
+        const known = grains.get(name);
+        if (known !== undefined) {
+            return known;
+        }
+        const loaded = new THREE.TextureLoader().load(texturePath(name));
+        loaded.colorSpace = THREE.SRGBColorSpace;
+        loaded.wrapS = THREE.RepeatWrapping;
+        loaded.wrapT = THREE.RepeatWrapping;
+        grains.set(name, loaded);
+        return loaded;
+    };
+    const chosenTexture = diceLook().finish.texture;
+    if (chosenTexture !== undefined) {
+        grain(chosenTexture);
+    }
+    // A body of the set's material; the grain laid from a different place on each die, once its picture is there, so that no two dice look alike.
+    const bodyOf = (finish, colour) => {
+        const kind = { name: "body", color: colour, roughness: finish.roughness, metalness: finish.metalness };
+        // A crystal: a varnish that mirrors on its faces, the page and its far faces seen through it.
+        const material = finish.clarity === undefined
+            ? new THREE.MeshStandardMaterial(kind)
+            : new THREE.MeshPhysicalMaterial({ ...kind, clearcoat: 1, clearcoatRoughness: 0.03, transparent: true, opacity: 1 - finish.clarity, side: THREE.DoubleSide });
+        if (finish.glassy === true) {
+            glassy(material, finish.prism ?? 0);
+        }
+        if (finish.frosted === true) {
+            const frost = frostPicture();
+            material.bumpMap = frost;
+            material.bumpScale = 6;
+            material.roughnessMap = frost;
+        }
+        if (finish.shine > 0) {
+            room ??= new THREE.PMREMGenerator(renderer).fromScene(new RoomEnvironment(), 0.04).texture;
+            material.envMap = room;
+            material.envMapIntensity = finish.shine;
+        }
+        const picture = finish.texture === undefined ? undefined : grain(finish.texture);
+        if (picture !== undefined) {
+            const laid = picture.image === null || picture.image === undefined ? picture : picture.clone();
+            laid.offset.set(Math.random(), Math.random());
+            laid.needsUpdate = laid !== picture;
+            material.map = laid;
+        }
+        return material;
+    };
+    // The celebrations shown, drawn frame by frame while one of them moves.
+    let effects = [];
+    let pictures;
+    let moving = false;
+    const draw = (now) => {
+        moving = effects.map((effect) => effect.update(now)).some((still) => still);
+        renderer.render(scene, camera);
+        if (moving) {
+            requestAnimationFrame(draw);
+        }
+    };
+    const tray = { width: 7, depth: 4.5 };
+    let covering;
+    // The dice lie on a table that moves up the window as the tray ends above the plate.
+    const table = new THREE.Group();
+    scene.add(table);
+    const resize = () => {
+        const width = window.innerWidth;
+        const height = window.innerHeight;
+        renderer.setSize(width, height, false);
+        // The dice keep their size on the page in a taller window: past a common height the camera goes back, seeing more of the floor (D-375).
+        const back = Math.max(1, height / commonHeight);
+        camera.position.copy(above).multiplyScalar(back);
+        camera.lookAt(0, 0, 0);
+        camera.far = 200 * back;
+        camera.aspect = width / height;
+        camera.updateProjectionMatrix();
+        // The sun's shadows cover all that is seen.
+        Object.assign(sun.shadow.camera, { left: -12 * back, right: 12 * back, top: 12 * back, bottom: -12 * back });
+        sun.shadow.camera.updateProjectionMatrix();
+        // The tray fills what the camera sees on the floor, but for the window's foot the plate covers: no die lies under it (D-366).
+        const seen = 2 * Math.tan(THREE.MathUtils.degToRad(camera.fov / 2)) * camera.position.length();
+        const far = Math.max(3, seen / 2 - 1.2);
+        const covered = (covering ?? (matchMedia("(max-width: 600px)").matches ? plateOnPhone : plateOnWide)) / height * seen;
+        const front = Math.max(6 - far, far - covered);
+        tray.depth = (front + far) / 2;
+        tray.width = Math.max(3, far * camera.aspect);
+        table.position.z = (front - far) / 2;
+    };
+    // The crack of a natural 1 and the burn of a die set aside change the dice's shaders, and a rare face's halo and sparks have their own: made at the chosen
+    // set's first throw, while the dice fly, they cost no pause when a die cracks, burns or shines. The materials that keep them made, for that set's finish;
+    // the halo's and the sparks', and their pictures, for the page's life.
+    let primed;
+    const prime = (die, finish) => {
+        const key = `${finish.texture ?? ""} ${finish.shine > 0} ${finish.clarity ?? ""} ${finish.engraved === true} ${finish.glassy === true} ${finish.frosted === true} ${finish.prism ?? ""}`;
+        if (primed?.finish === key) {
+            return;
+        }
+        primed?.materials.forEach((material) => material.dispose());
+        const copies = new THREE.Group();
+        // A copy of the die with materials of its own, its grain the set's picture.
+        const copy = () => {
+            const object = die.clone();
+            const materials = [];
+            object.traverse((part) => {
+                if (part instanceof THREE.Mesh) {
+                    const material = part.material.clone();
+                    material.map = material.map === null || finish.texture === undefined ? null : grain(finish.texture);
+                    if (material.userData.engraved === true) {
+                        engrave(material);
+                    }
+                    if (material.userData.glassy === true) {
+                        glassy(material, Number(material.userData.prism ?? 0));
+                    }
+                    part.material = material;
+                    materials.push(material);
+                }
+            });
+            copies.add(object);
+            return materials;
+        };
+        const cracked = copy();
+        crack(cracked, true);
+        const burnt = copy();
+        burnAway(new THREE.Group(), burnt, false, () => undefined);
+        primed = { finish: key, materials: [...cracked, ...burnt] };
+        if (pictures === undefined) {
+            pictures = makePictures();
+            Object.values(pictures).forEach((texture) => renderer.initTexture(texture));
+            copies.add(new THREE.Mesh(new THREE.PlaneGeometry(), new THREE.MeshBasicMaterial({ map: pictures.halo, transparent: true, depthWrite: false })));
+            copies.add(new THREE.Sprite(new THREE.SpriteMaterial({ map: pictures.star, transparent: true, depthWrite: false })));
+            copies.add(new THREE.Mesh(new THREE.PlaneGeometry(), floorCrackMaterial()));
+            copies.add(new THREE.Mesh(new THREE.PlaneGeometry(), new THREE.MeshBasicMaterial({ transparent: true, depthWrite: false })));
+        }
+        void renderer.compileAsync(copies, camera, scene);
+    };
+    const clear = () => {
+        dice.forEach((die) => {
+            table.remove(die.object);
+            die.materials.forEach((material) => {
+                // A grain's picture laid for this die alone goes with it.
+                if (material.map !== null && ![...grains.values()].includes(material.map)) {
+                    material.map.dispose();
+                }
+                material.dispose();
+            });
+        });
+        effects.forEach((effect) => effect.dispose());
+        dice = [];
+        effects = [];
+    };
+    resize();
+    return {
+        tray,
+        place(kinds, looks) {
+            clear();
+            const look = diceLook();
+            dice = kinds.map((kind) => {
+                const object = (looks.get(kind) ?? new THREE.Group()).clone();
+                const materials = [];
+                object.traverse((part) => {
+                    if (part instanceof THREE.Mesh) {
+                        const ink = part.material.name === "ink";
+                        const material = ink ? new THREE.MeshStandardMaterial({ name: "ink", color: look.ink, roughness: 0.6, metalness: 0.05 }) : bodyOf(look.finish, look.body);
+                        if (ink && look.finish.engraved === true) {
+                            engrave(material);
+                        }
+                        // Through a crystal, its numbers before its body, which veils the far ones.
+                        part.renderOrder = ink ? 0 : 1;
+                        part.material = material;
+                        part.castShadow = true;
+                        materials.push(material);
+                    }
+                });
+                object.visible = false;
+                table.add(object);
+                return { object, materials };
+            });
+            const first = dice[0];
+            if (first !== undefined) {
+                prime(first.object, look.finish);
+            }
+        },
+        cover(pixels) {
+            covering = pixels;
+            resize();
+        },
+        show(poses) {
+            dice.forEach((die, index) => {
+                const pose = poses[index];
+                if (pose !== undefined) {
+                    die.object.position.set(...pose.position);
+                    die.object.quaternion.set(...pose.quaternion);
+                    die.object.visible = true;
+                }
+            });
+            renderer.render(scene, camera);
+        },
+        dim(die, instant) {
+            const turning = (dice[die]?.materials ?? []).map((material) => ({
+                material,
+                from: material.color.clone(),
+                to: goneOut(material.color, material.name === "ink" ? dimmedInk : dimmedBody),
+                shine: material.envMapIntensity,
+            }));
+            // Out in a blink, not at a stroke (D-358): a metal set aside mirrors little; a wood or a stone keeps its grain, darker, as its colour tints it.
+            const goingOut = (amount) => {
+                turning.forEach(({ material, from, to, shine }) => {
+                    material.color.lerpColors(from, to, amount);
+                    material.envMapIntensity = shine * (1 - 0.7 * amount);
+                });
+            };
+            const dropped = dice[die];
+            if (dropped !== undefined) {
+                effects.push(burnAway(dropped.object, dropped.materials, instant, goingOut));
+                if (!moving) {
+                    moving = true;
+                    requestAnimationFrame(draw);
+                }
+            }
+            renderer.render(scene, camera);
+        },
+        celebrate(die, rare, showing) {
+            const shown = dice[die];
+            if (shown !== undefined) {
+                pictures ??= makePictures();
+                const glow = themeColours().glow;
+                effects.push(celebrate(scene, seenUnder(shown.object.getWorldPosition(new THREE.Vector3()), camera.position), rare, glow, pictures, showing));
+                // The highest face's numbers lit with fire, a few embers flying off them as from a brand (D-363, D-410); the lowest's die cracked.
+                if (rare === "highest") {
+                    const middle = shown.object.getWorldPosition(new THREE.Vector3());
+                    effects.push(lightInk(shown.materials.filter((material) => material.name === "ink"), branding, showing.instant));
+                    effects.push(embers(scene, middle, pictures, showing));
+                }
+                else {
+                    effects.push(crack(shown.materials, showing.instant));
+                }
+                if (!moving) {
+                    moving = true;
+                    requestAnimationFrame(draw);
+                }
+            }
+        },
+        hide() {
+            clear();
+            renderer.render(scene, camera);
+        },
+        resize,
+    };
+}
+/** The point of the floor seen behind a die's middle, from the camera a little aslant: what goes around the die on the floor is centred there, not under it. */
+function seenUnder(middle, eye) {
+    const along = eye.y / Math.max(1e-6, eye.y - middle.y);
+    return eye.clone().lerp(middle, along).setY(0);
+}
+/** Shows a die's numbers on its far half, seen through a clear die, only as engravings: faint and colourless; the near ones as they are. */
+function engrave(material) {
+    material.transparent = true;
+    material.userData.engraved = true;
+    // Its shaders known apart from a plain ink's, even with a crack or a burn wrapped around this.
+    material.customProgramCacheKey = () => `engraved ${material.onBeforeCompile.toString()}`;
+    material.onBeforeCompile = (shader) => {
+        // How much the face a number is on is turned away from the camera: 0 facing it or aside, 1 turned away; a number goes from one to the other whole.
+        shader.vertexShader = shader.vertexShader
+            .replace("#include <common>", `#include <common>
+attribute vec3 dieFace;
+varying float engraving;`)
+            .replace("#include <project_vertex>", `#include <project_vertex>
+engraving = smoothstep(0.05, -0.3, dot(normalize(normalMatrix * dieFace), normalize(-mvPosition.xyz)));`);
+        shader.fragmentShader = shader.fragmentShader
+            .replace("#include <common>", `#include <common>
+varying float engraving;`)
+            .replace("#include <color_fragment>", `#include <color_fragment>
+diffuseColor.rgb = mix(diffuseColor.rgb, vec3(1.0), engraving);
+diffuseColor.a *= mix(1.0, 0.2, engraving);`);
+    };
+    material.needsUpdate = true;
+}
+/**
+ * Makes a die all its reflections, as a glass: they add to what is behind it in full, which shows through it but at its edges, where it is seen aslant and
+ * mirrors more; there its light splits into the colours of the rainbow by the share given, as through a prism.
+ */
+function glassy(material, prism) {
+    material.blending = THREE.CustomBlending;
+    material.blendSrc = THREE.OneFactor;
+    material.blendDst = THREE.OneMinusSrcAlphaFactor;
+    material.userData.glassy = true;
+    material.userData.prism = prism;
+    material.customProgramCacheKey = () => `glassy ${prism} ${material.onBeforeCompile.toString()}`;
+    material.onBeforeCompile = (shader) => {
+        shader.fragmentShader = shader.fragmentShader.replace("#include <opaque_fragment>", `float facing = abs(dot(normalize(normal), normalize(vViewPosition)));
+float edge = pow(1.0 - facing, 3.0);
+outgoingLight += (0.5 + 0.5 * cos(6.2831853 * (vec3(0.0, 0.33, 0.67) + facing * 2.5))) * edge * ${prism.toFixed(2)};
+diffuseColor.a = clamp(diffuseColor.a + 0.8 * edge, 0.0, 1.0);
+#include <opaque_fragment>`);
+    };
+    material.needsUpdate = true;
+}
+/** A colour gone out: its grey, as light as it was, then darker by the share given. */
+function goneOut(colour, share) {
+    const light = 0.2126 * colour.r + 0.7152 * colour.g + 0.0722 * colour.b;
+    return new THREE.Color(light * share, light * share, light * share);
+}
+/** By the theme (D-279, D-282): the glow of the rare faces. */
+function themeColours() {
+    return shownTheme() === "dark"
+        ? {
+            glow: { lights: true, highest: { halo: "#f5c63e", resting: 0.6, sparks: ["#f5c63e", "#ffefcf"] }, lowest: { crack: "#c2503f", hot: "#ffd2c6", ring: "#ff7a66" } },
+        }
+        : {
+            glow: { lights: false, highest: { halo: "#d1a61b", resting: 0.85, sparks: ["#c29803", "#254b83"] }, lowest: { crack: "#5e1f17", hot: "#e0442c", ring: "#a73929" } },
+        };
+}