@woosh/meep-engine 3.47.0 → 3.49.0

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

@@ -0,0 +1,90 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Tone mapping · GT7 and PBR Neutral</title>
+    <style>
+        body { margin: 24px; background: #14161a; color: #e7e9ee; font: 14px/1.5 system-ui; }
+        h1 { font-size: 22px; margin: 0 0 6px; }
+        p { color: #acb5c5; max-width: 980px; margin: 0 0 12px; }
+        main { display: grid; grid-template-columns: minmax(0, 1280px) 280px; gap: 24px; align-items: start; }
+        .stage { position: relative; }
+        canvas { display: block; width: 100%; height: auto; background: #08090a; touch-action: none; outline: none; }
+        canvas:focus { outline: 1px solid #749ac4; }
+        #labels { position: absolute; inset: 0; pointer-events: none; }
+        #labels span, #single-label { position: absolute; padding: 2px 8px; background: rgba(0, 0, 0, 0.6); color: #fff; font: 600 13px/1.6 system-ui; border-radius: 3px; }
+        #labels span:nth-child(1) { left: 8px; top: calc(25% + 8px); }
+        #labels span:nth-child(2) { left: calc(50% + 8px); top: calc(25% + 8px); }
+        #single-label { left: 8px; top: 8px; pointer-events: none; }
+        label { display: block; margin: 0 0 12px; }
+        input[type=range], select { width: 100%; }
+        button, select { font: inherit; padding: 6px 8px; background: #29313e; color: inherit; border: 1px solid #4b586d; border-radius: 4px; }
+        button { margin: 0 4px 6px 0; }
+        button.scene { display: block; width: 100%; text-align: left; }
+        button.scene.active { background: #3d5a80; border-color: #749ac4; }
+        output { float: right; font-variant-numeric: tabular-nums; }
+        #status { white-space: pre-wrap; font-variant-numeric: tabular-nums; }
+        .error { color: #ff9a9a; }
+        kbd { background: #29313e; border: 1px solid #4b586d; border-radius: 3px; padding: 0 4px; font-size: 12px; }
+        @media (max-width: 1100px) { main { grid-template-columns: 1fr; } }
+    </style>
+</head>
+<body tabindex="0">
+<h1>Tone mapping · GT7 and PBR Neutral, SDR and HDR</h1>
+<p>The engine renders and tonemaps as usual; the page then redraws the canvas from the same HDR colour through each
+    of the engine's operators, GT7 and Khronos PBR Neutral, and GT7 as Polyphony's sample code defines it. Exposure is
+    fixed per scene. A peak above 1 shows an operator's HDR form clipped to SDR white. <code>README.md</code> beside
+    this page has what to look at.</p>
+<main>
+    <section>
+        <div class="stage">
+            <canvas id="view" width="1280" height="720" tabindex="0" aria-label="Scene"></canvas>
+            <div id="labels">
+                <span>GT7 (engine)</span><span>PBR Neutral (engine)</span>
+            </div>
+            <div id="single-label" hidden></div>
+        </div>
+        <p id="note"></p>
+        <p id="status" role="status">Initializing…</p>
+    </section>
+    <aside>
+        <div id="scenes"></div>
+        <label>Layout
+            <select id="layout">
+                <option value="pair">GT7 | PBR Neutral</option>
+                <option value="single">One operator</option>
+                <option value="split">One operator, SDR | peak</option>
+            </select>
+        </label>
+        <label>Operator (one-operator layouts)
+            <select id="operator">
+                <option value="0">1 · GT7 SDR (Polyphony sample)</option>
+                <option value="1">2 · GT7 (engine)</option>
+                <option value="2" selected>3 · PBR Neutral (engine)</option>
+            </select>
+        </label>
+        <label>Peak, in units of SDR white (operators 2 and 3)
+            <select id="headroom">
+                <option value="1" selected>1 · SDR</option>
+                <option value="2">2</option>
+                <option value="4">4 · 1000 cd/m² at a 250 cd/m² paper white</option>
+                <option value="10">10</option>
+            </select>
+        </label>
+        <label>Exposure <output id="ev-value">+0.0</output>
+            <input id="ev" type="range" min="-6" max="6" step="0.5" value="0" aria-label="Exposure offset">
+        </label>
+        <label><input id="match" type="checkbox"> Match mid-grey (0.18 → 0.18 per operator)</label>
+        <label><input id="p3" type="checkbox" checked> Convert to Display P3 (canvas is <code>display-p3</code>)</label>
+        <label><input id="bloom" type="checkbox"> Bloom</label>
+        <label><input id="engine" type="checkbox"> Show the engine's own output</label>
+        <button id="reset-view">Reset camera</button>
+        <p><kbd>1</kbd>–<kbd>3</kbd> one operator · <kbd>P</kbd> GT7 | PBR Neutral · <kbd>S</kbd> SDR | peak split ·
+            <kbd>H</kbd> next peak · <kbd>[</kbd> <kbd>]</kbd> exposure · <kbd>M</kbd> match mid-grey ·
+            <kbd>E</kbd> engine output. Drag to orbit, right-drag to pan, wheel to zoom.</p>
+    </aside>
+</main>
+<script type="module" src="./main.js"></script>
+</body>
+</html>

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

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

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

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

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

@@ -0,0 +1,306 @@
+import Vector3 from "../../../core/geom/Vector3.js";
+import { OrbitalCameraController } from "../../renderer/camera/OrbitalCameraController.js";
+import { PerspectiveCamera } from "../../renderer/camera/PerspectiveCamera.js";
+import { Renderer } from "../../renderer/Renderer.js";
+import { ShadeIndirectLightingMode } from "../../renderer/ShadeIndirectLightingMode.js";
+import { create_scenes } from "./scenes.js";
+import { COMPARE_OPERATOR_LABELS, CompareLayout, CompareOperator, ToneMapCompare } from "./ToneMapCompare.js";
+
+const element = id => document.getElementById(id);
+const params = new URLSearchParams(location.search);
+
+/**
+ * The layout select's values.
+ */
+const LAYOUTS = {
+    pair: CompareLayout.Pair,
+    single: CompareLayout.Single,
+    split: CompareLayout.Split,
+};
+
+/**
+ * @param {string} text
+ * @param {boolean} [error]
+ */
+function report(text, error = false) {
+    const status = element('status');
+
+    status.textContent = text;
+    status.classList.toggle('error', error);
+}
+
+async function start() {
+    const canvas = element('view');
+
+    const camera = new PerspectiveCamera();
+
+    camera.near = 0.05;
+    camera.far = 200;
+    camera.fov = 50 * Math.PI / 180;
+    camera.aspect = canvas.width / canvas.height;
+
+    const controller = new OrbitalCameraController(camera, canvas);
+
+    const compare = new ToneMapCompare();
+
+    // everything the page reads, wired before the device exists so a page with no adapter still answers
+    const state = {
+        scene_index: 0,
+        /** f-stops over the scene's own exposure */
+        ev_offset: 0,
+    };
+
+    const renderer = new Renderer();
+
+    report('Acquiring GPU…');
+
+    await renderer.initialize({ context: canvas.getContext('webgpu'), pixelRatio: 1 });
+
+    renderer.indirect_lighting_mode = ShadeIndirectLightingMode.IBL;
+    renderer.feature_shadows_enabled = true;
+    renderer.feature_automatic_exposure_enabled = false;
+    renderer.resize(canvas.width, canvas.height);
+
+    for (const extension of compare.extensions) {
+        renderer.add_extension(extension);
+    }
+
+    report('Building scenes…');
+
+    const scenes = await create_scenes(renderer);
+
+    // what the canvas was configured as decides whether Rec.709 has to become Display P3 before encoding
+    const configuration = canvas.getContext('webgpu').getConfiguration?.();
+    const canvas_space = configuration?.colorSpace ?? 'unknown';
+    const canvas_format = configuration?.format ?? 'unknown';
+    const canvas_tone = configuration?.toneMapping?.mode ?? 'standard';
+
+    compare.convert_to_p3 = canvas_space === 'display-p3';
+
+    function exposure_ev() {
+        return scenes[state.scene_index].exposure_ev + state.ev_offset;
+    }
+
+    function apply() {
+        const ev = exposure_ev();
+
+        compare.exposure_ev = ev;
+        renderer.exposure_compensation = ev;
+
+        compare.enabled = !element('engine').checked;
+        compare.layout = LAYOUTS[element('layout').value] ?? CompareLayout.Pair;
+        compare.operator = Number(element('operator').value);
+        compare.headroom = Number(element('headroom').value);
+        compare.match_mid_grey = element('match').checked;
+        compare.convert_to_p3 = element('p3').checked;
+
+        renderer.feature_bloom_enabled = element('bloom').checked;
+
+        element('ev-value').textContent = `${state.ev_offset >= 0 ? '+' : ''}${state.ev_offset.toFixed(1)} (${ev >= 0 ? '+' : ''}${ev.toFixed(1)} EV)`;
+        element('ev').value = String(state.ev_offset);
+
+        const pair = compare.enabled && compare.layout === CompareLayout.Pair;
+        const split = compare.layout === CompareLayout.Split;
+
+        element('labels').hidden = !pair;
+        element('single-label').hidden = !compare.enabled || pair;
+        element('single-label').textContent = COMPARE_OPERATOR_LABELS[compare.operator]
+            + (split ? ` · SDR | peak ×${compare.headroom}` : compare.headroom !== 1 ? ` · peak ×${compare.headroom}` : '');
+        element('operator').disabled = pair;
+
+        const scene = scenes[state.scene_index];
+
+        element('note').textContent = scene.note;
+
+        for (const button of document.querySelectorAll('button.scene')) {
+            button.classList.toggle('active', Number(button.dataset.index) === state.scene_index);
+        }
+
+        report(`${scene.name} · ${compare.enabled ? (pair ? 'GT7 | PBR Neutral' : COMPARE_OPERATOR_LABELS[compare.operator]) : "engine's own output"}`
+            + `${compare.enabled && !pair ? (split ? ` · SDR | peak ×${compare.headroom}` : ` · peak ×${compare.headroom}`) : ''}`
+            + ` · ${ev >= 0 ? '+' : ''}${ev.toFixed(1)} EV${compare.match_mid_grey ? ' · mid-grey matched' : ''}`
+            + `\ncanvas: ${canvas_format}, ${canvas_space}, tone mapping ${canvas_tone} · P3 conversion ${compare.convert_to_p3 ? 'on' : 'off'}`);
+    }
+
+    function select_scene(index) {
+        state.scene_index = index;
+
+        const [from, to] = scenes[index].view;
+
+        controller.look(new Vector3(...from), new Vector3(...to));
+        renderer.indicate_view_change();
+        apply();
+    }
+
+    const scene_buttons = element('scenes');
+
+    for (let i = 0; i < scenes.length; i++) {
+        const button = document.createElement('button');
+
+        button.className = 'scene';
+        button.dataset.index = String(i);
+        button.textContent = `${i + 1}. ${scenes[i].name}`;
+        button.onclick = () => select_scene(i);
+
+        scene_buttons.appendChild(button);
+    }
+
+    for (const id of ['layout', 'operator', 'headroom', 'match', 'p3', 'engine', 'bloom']) {
+        element(id).addEventListener('input', apply);
+    }
+
+    element('ev').addEventListener('input', () => {
+        state.ev_offset = Number(element('ev').value);
+        apply();
+    });
+
+    element('reset-view').onclick = () => select_scene(state.scene_index);
+
+    addEventListener('keydown', event => {
+        if (event.target instanceof HTMLInputElement || event.target instanceof HTMLSelectElement) {
+            return;
+        }
+
+        const key = event.key;
+
+        if (key >= '1' && key <= '3') {
+            if (element('layout').value === 'pair') {
+                element('layout').value = 'single';
+            }
+            element('operator').value = String(Number(key) - 1);
+        } else if (key === 'p' || key === 'P') {
+            element('layout').value = 'pair';
+        } else if (key === 's' || key === 'S') {
+            element('layout').value = 'split';
+        } else if (key === 'h' || key === 'H') {
+            const options = [...element('headroom').options].map(option => option.value);
+            element('headroom').value = options[(options.indexOf(element('headroom').value) + 1) % options.length];
+        } else if (key === '[') {
+            state.ev_offset = Math.max(-6, state.ev_offset - 0.5);
+        } else if (key === ']') {
+            state.ev_offset = Math.min(6, state.ev_offset + 0.5);
+        } else if (key === 'm' || key === 'M') {
+            element('match').checked = !element('match').checked;
+        } else if (key === 'e' || key === 'E') {
+            element('engine').checked = !element('engine').checked;
+        } else {
+            return;
+        }
+
+        apply();
+    });
+
+    // URL parameters, for a scripted session:
+    // ?scene=1..4&layout=pair|single|split&operator=0..2&headroom=1|2|4|10&ev=<offset>&match=1
+    const scene_param = Number(params.get('scene'));
+    const initial_scene = Number.isInteger(scene_param) && scene_param >= 1 && scene_param <= scenes.length ? scene_param - 1 : 0;
+
+    if (Object.hasOwn(LAYOUTS, params.get('layout') ?? '')) {
+        element('layout').value = params.get('layout');
+    }
+
+    if ([...element('headroom').options].some(option => option.value === params.get('headroom'))) {
+        element('headroom').value = params.get('headroom');
+    }
+
+    if (params.has('operator')) {
+        const operator = Number(params.get('operator'));
+
+        if (Object.values(CompareOperator).includes(operator)) {
+            element('operator').value = String(operator);
+        }
+    }
+
+    if (params.has('ev')) {
+        const ev = Number(params.get('ev'));
+
+        if (Number.isFinite(ev)) {
+            state.ev_offset = Math.min(6, Math.max(-6, ev));
+        }
+    }
+
+    element('match').checked = params.get('match') === '1';
+    element('p3').checked = compare.convert_to_p3;
+    element('bloom').checked = renderer.feature_bloom_enabled;
+
+    select_scene(initial_scene);
+
+    let stopped = false;
+    let last_time;
+    let frame_count = 0;
+    let request = 0;
+
+    function fail(error) {
+        stopped = true;
+        cancelAnimationFrame(request);
+        report(error.message ?? String(error), true);
+        console.error(error);
+    }
+
+    function tick(time) {
+        if (stopped) {
+            return;
+        }
+
+        const dt = last_time === undefined ? 1 / 60 : Math.min((time - last_time) / 1000, 0.05);
+
+        last_time = time;
+
+        try {
+            controller.update(dt);
+            renderer.render(camera, scenes[state.scene_index].scene, dt);
+            frame_count++;
+        } catch (error) {
+            fail(error);
+            return;
+        }
+
+        request = requestAnimationFrame(tick);
+    }
+
+    const device = renderer.graphics.device;
+
+    device.addEventListener('uncapturederror', event => fail(event.error));
+    device.lost.then(info => {
+        if (!stopped) {
+            fail(new Error(`GPU device lost: ${info.message}`));
+        }
+    });
+
+    addEventListener('pagehide', () => {
+        stopped = true;
+        cancelAnimationFrame(request);
+        controller.pointer.stop();
+        controller.keyboard.stop();
+        renderer.destroy();
+        device.destroy();
+    });
+
+    request = requestAnimationFrame(tick);
+
+    return {
+        renderer,
+        camera,
+        controller,
+        compare,
+        scenes,
+        select_scene,
+        apply,
+        canvas_space,
+        get frame_count() {
+            return frame_count;
+        },
+    };
+}
+
+globalThis.tonemap_sdr_ready = start()
+    .then(lab => {
+        globalThis.tonemap_sdr = lab;
+
+        return lab;
+    })
+    .catch(error => {
+        report(error.message ?? String(error), true);
+        console.error(error);
+        throw error;
+    });

package/src/shade/playground/tonemap_sdr/scenes.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Every scene the page offers, in menu order.
+ *
+ * @param {Renderer} renderer
+ * @returns {Promise<ToneMapScene[]>}
+ */
+export function create_scenes(renderer: Renderer): Promise<ToneMapScene[]>;
+export type Renderer = import("../../renderer/Renderer.js").Renderer;
+export type ToneMapScene = {
+    name: string;
+    scene: Scene;
+    /**
+     * camera position and target
+     */
+    view: number[][];
+    /**
+     * the fixed exposure the scene is authored for, in f-stops over a scene value of 1
+     */
+    exposure_ev: number;
+    /**
+     * what the scene is there to show
+     */
+    note: string;
+};
+import { Scene } from "../../renderer/scene/Scene.js";
+//# sourceMappingURL=scenes.d.ts.map

package/src/shade/playground/tonemap_sdr/scenes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scenes.d.ts","sourceRoot":"","sources":["../../../../../src/shade/playground/tonemap_sdr/scenes.js"],"names":[],"mappings":"AAoYA;;;;;GAKG;AACH,wCAHW,QAAQ,GACN,QAAQ,YAAY,EAAE,CAAC,CAWnC;uBA7XY,OAAO,4BAA4B,EAAE,QAAQ;;UAK5C,MAAM;WACN,KAAK;;;;UACL,MAAM,EAAE,EAAE;;;;iBACV,MAAM;;;;UACN,MAAM;;sBAdE,+BAA+B"}