@woosh/meep-engine 3.51.0 → 3.53.0

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

@@ -0,0 +1,197 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>meep — additive animation blending</title>
+    <style>
+        :root {
+            color-scheme: dark;
+            --panel: rgba(18, 22, 28, 0.90);
+            --line: #2b323d;
+            --text: #dce2ea;
+            --muted: #8b95a5;
+            --pass: #55c46a;
+            --fail: #ff6b6b;
+            --warn: #e5b54a;
+            --accent: #68b5ff;
+        }
+
+        * { box-sizing: border-box; }
+        html, body { margin: 0; height: 100%; overflow: hidden; background: #0d0f12; }
+        body:focus { outline: none; }
+        #view { display: block; width: 100vw; height: 100vh; }
+
+        #panel {
+            position: fixed;
+            top: 12px;
+            left: 12px;
+            width: 350px;
+            padding: 14px 16px;
+            background: var(--panel);
+            border: 1px solid var(--line);
+            border-radius: 8px;
+            backdrop-filter: blur(8px);
+            color: var(--text);
+            font: 13px/1.5 system-ui, -apple-system, Segoe UI, sans-serif;
+            z-index: 10;
+        }
+
+        #panel h1 { font-size: 14px; font-weight: 600; margin: 0 0 6px; color: #fff; }
+        .subtitle { font-size: 11.5px; color: var(--muted); margin-bottom: 10px; }
+
+        .legend {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 6px;
+            margin-bottom: 10px;
+            font-size: 11px;
+            text-align: center;
+        }
+        .legend-card {
+            padding: 5px 6px;
+            background: rgba(255, 255, 255, 0.04);
+            border: 1px solid var(--line);
+            border-radius: 5px;
+        }
+        .legend-card strong { display: block; color: #fff; font-size: 11.5px; }
+
+        .control-row {
+            display: flex;
+            flex-direction: column;
+            gap: 3px;
+            margin-bottom: 8px;
+        }
+        .control-header {
+            display: flex;
+            justify-content: space-between;
+            font-size: 12px;
+        }
+        .control-header span:last-child {
+            font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
+            color: var(--accent);
+            font-weight: 600;
+        }
+        input[type="range"] {
+            width: 100%;
+            accent-color: var(--accent);
+            cursor: pointer;
+        }
+
+        .preset-row {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 5px;
+            margin-bottom: 8px;
+        }
+
+        button {
+            font: inherit;
+            font-size: 11.5px;
+            padding: 5px 9px;
+            border-radius: 5px;
+            border: 1px solid var(--line);
+            background: #1c2128;
+            color: var(--text);
+            cursor: pointer;
+        }
+        button:hover { border-color: #465264; background: #242b35; }
+        button.active { border-color: var(--accent); background: rgba(104, 181, 255, 0.18); color: #fff; }
+
+        label { display: flex; align-items: center; gap: 8px; padding: 2px 0; cursor: pointer; font-size: 12px; }
+        label input { margin: 0; }
+        label .hint { color: var(--muted); font-size: 11px; }
+
+        hr { border: 0; border-top: 1px solid var(--line); margin: 10px 0; }
+
+        #status { font-size: 12px; color: var(--muted); word-break: break-word; }
+        #status.pass { color: var(--pass); }
+        #status.fail { color: var(--fail); }
+        #status.warn { color: var(--warn); }
+
+        #stats, #audit {
+            margin-top: 6px;
+            font: 11.5px/1.45 ui-monospace, SFMono-Regular, Consolas, monospace;
+            color: var(--text);
+            white-space: pre-wrap;
+        }
+    </style>
+</head>
+<body tabindex="0">
+
+<canvas id="view"></canvas>
+
+<div id="panel">
+    <h1>Rest-Anchored Additive Blending</h1>
+    <div class="subtitle">Zero-switch unified delta accumulator: <code>V_rest + &Sigma; w_i(V_i - V_rest)</code></div>
+
+    <div class="legend">
+        <div class="legend-card">
+            <strong>Left</strong>
+            Base Dance
+        </div>
+        <div class="legend-card" style="border-color: rgba(104, 181, 255, 0.45);">
+            <strong>Center</strong>
+            Base + Additive
+        </div>
+        <div class="legend-card">
+            <strong>Right</strong>
+            Additive Only
+        </div>
+    </div>
+
+    <div class="control-row">
+        <div class="control-header">
+            <span>Additive Upper-Body Weight</span>
+            <span id="val_additive_weight">1.00</span>
+        </div>
+        <input type="range" id="slider_additive_weight" min="0" max="1.5" step="0.05" value="1.00">
+    </div>
+
+    <div class="control-row">
+        <div class="control-header">
+            <span>Base Dance Weight</span>
+            <span id="val_base_weight">1.00</span>
+        </div>
+        <input type="range" id="slider_base_weight" min="0" max="1.0" step="0.05" value="1.00">
+    </div>
+
+    <div class="preset-row">
+        <button data-base="1.0" data-add="1.0" class="preset active">Full Layer (1 / 1)</button>
+        <button data-base="1.0" data-add="0.5" class="preset">Half Additive (1 / 0.5)</button>
+        <button data-base="1.0" data-add="1.35" class="preset">Overdrive (1 / 1.35)</button>
+        <button data-base="1.0" data-add="0.0" class="preset">Base Only (1 / 0)</button>
+        <button data-base="0.35" data-add="1.0" class="preset">Faded Base (0.35 / 1)</button>
+    </div>
+
+    <hr>
+
+    <div class="preset-row">
+        <button id="toggle_animation">Freeze pose</button>
+        <button id="run_verify">Verify GPU vs CPU Twin</button>
+    </div>
+
+    <label>
+        <input type="checkbox" id="path_tracing">
+        <span>Path tracer <span class="hint">— refits skinned BLAS</span></span>
+    </label>
+
+    <hr>
+
+    <div id="status">initializing…</div>
+    <div id="audit"></div>
+    <div id="stats"></div>
+</div>
+
+<script type="module">
+    import { start } from './main.js';
+
+    start().catch(error => {
+        const status = document.getElementById('status');
+        status.className = 'fail';
+        status.textContent = String(error?.message ?? error);
+        console.error(error);
+    });
+</script>
+
+</body>
+</html>

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

@@ -0,0 +1,2 @@
+export function start(): Promise<void>;
+//# sourceMappingURL=main.d.ts.map

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

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