@woosh/meep-engine 3.53.0 → 3.55.0

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

@@ -1,254 +1,260 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Shade — Procedural Foliage &amp; GPU Fluid Wind Playground (ECS)</title>
-    <style>
-        * { margin: 0; padding: 0; box-sizing: border-box; }
-        html, body { width: 100%; height: 100%; overflow: hidden; background: #0e1318; font-family: system-ui, -apple-system, sans-serif; color: #e4ece6; }
-        #viewport { width: 100%; height: 100%; position: relative; }
-        #viewport canvas { width: 100%; height: 100%; display: block; }
-
-        #hud {
-            position: fixed;
-            top: 12px;
-            left: 12px;
-            width: 310px;
-            padding: 12px 14px;
-            background: rgba(14, 20, 24, 0.86);
-            backdrop-filter: blur(8px);
-            border: 1px solid rgba(130, 180, 140, 0.22);
-            border-radius: 8px;
-            font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-            user-select: none;
-            z-index: 10;
-            max-height: calc(100vh - 24px);
-            overflow-y: auto;
-        }
-
-        #hud h1 {
-            font-size: 13px;
-            font-weight: 700;
-            color: #9be3a8;
-            letter-spacing: 0.02em;
-            margin-bottom: 8px;
-        }
-
-        .section-title {
-            margin-top: 10px;
-            margin-bottom: 5px;
-            padding-top: 7px;
-            border-top: 1px solid rgba(255, 255, 255, 0.08);
-            font-size: 10px;
-            text-transform: uppercase;
-            letter-spacing: 0.08em;
-            color: #84a58c;
-        }
-
-        .stats-grid {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 3px 10px;
-            margin-bottom: 4px;
-        }
-
-        .stat-row {
-            display: flex;
-            justify-content: space-between;
-            color: #9cb0a2;
-        }
-
-        .stat-val {
-            color: #eef7f0;
-            font-weight: 600;
-        }
-
-        .preset-grid {
-            display: grid;
-            grid-template-columns: repeat(3, 1fr);
-            gap: 4px;
-        }
-
-        .lod-grid, .mode-grid {
-            display: grid;
-            grid-template-columns: repeat(4, 1fr);
-            gap: 4px;
-        }
-
-        .mode-grid {
-            grid-template-columns: repeat(2, 1fr);
-        }
-
-        button {
-            padding: 5px 7px;
-            background: rgba(255, 255, 255, 0.06);
-            color: #d0dfd4;
-            border: 1px solid rgba(255, 255, 255, 0.14);
-            border-radius: 4px;
-            font: inherit;
-            font-size: 11px;
-            cursor: pointer;
-            transition: background 0.12s, border-color 0.12s;
-        }
-
-        button:hover {
-            background: rgba(155, 227, 168, 0.14);
-            border-color: rgba(155, 227, 168, 0.35);
-        }
-
-        button.active {
-            background: rgba(88, 184, 112, 0.28);
-            border-color: rgba(130, 224, 150, 0.65);
-            color: #ffffff;
-            font-weight: 600;
-        }
-
-        button.gust-btn {
-            width: 100%;
-            margin-top: 6px;
-            padding: 7px 10px;
-            background: linear-gradient(135deg, rgba(64, 156, 196, 0.32), rgba(88, 184, 112, 0.32));
-            border-color: rgba(120, 210, 230, 0.5);
-            color: #eafff5;
-            font-weight: 600;
-        }
-
-        button.gust-btn:hover {
-            background: linear-gradient(135deg, rgba(64, 156, 196, 0.48), rgba(88, 184, 112, 0.48));
-        }
-
-        .control-row {
-            display: flex;
-            flex-direction: column;
-            gap: 2px;
-            margin-bottom: 6px;
-        }
-
-        .control-header {
-            display: flex;
-            justify-content: space-between;
-            font-size: 11px;
-            color: #b4c7b9;
-        }
-
-        input[type="range"] {
-            width: 100%;
-            accent-color: #6fd486;
-            cursor: pointer;
-        }
-
-        .seed-row {
-            display: flex;
-            gap: 6px;
-            align-items: center;
-        }
-
-        input[type="number"] {
-            width: 90px;
-            padding: 4px 6px;
-            background: rgba(0, 0, 0, 0.35);
-            border: 1px solid rgba(255, 255, 255, 0.18);
-            border-radius: 4px;
-            color: #fff;
-            font: inherit;
-        }
-
-        .hint {
-            margin-top: 8px;
-            font-size: 10px;
-            color: #789080;
-            text-align: center;
-        }
-
-        #message:not(:empty) {
-            position: fixed;
-            inset: 0;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            padding: 32px;
-            background: rgba(14, 19, 24, 0.92);
-            color: #f0d8c8;
-            font: 14px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
-            white-space: pre-wrap;
-            text-align: center;
-            z-index: 20;
-        }
-    </style>
-</head>
-<body tabindex="0">
-    <div id="viewport"></div>
-
-    <div id="hud">
-        <h1>Foliage &amp; GPU Fluid Wind (ECS)</h1>
-
-        <div class="stats-grid">
-            <div class="stat-row"><span>FPS</span><span id="stat-fps" class="stat-val">--</span></div>
-            <div class="stat-row"><span>Trees</span><span id="stat-trees" class="stat-val">--</span></div>
-            <div class="stat-row"><span>Wind Rigs</span><span id="stat-rigs" class="stat-val">--</span></div>
-            <div class="stat-row"><span>Joints</span><span id="stat-joints" class="stat-val">--</span></div>
-            <div class="stat-row"><span>Triangles</span><span id="stat-tris" class="stat-val">--</span></div>
-            <div class="stat-row"><span>Gust Wave</span><span id="stat-gust" class="stat-val">Idle</span></div>
-        </div>
-
-        <div class="section-title">Scene Layout</div>
-        <div class="mode-grid" id="mode-buttons">
-            <button data-mode="specimen" class="active">Single Specimen</button>
-            <button data-mode="grove">Mixed Grove (9)</button>
-        </div>
-
-        <div class="section-title">Species Preset</div>
-        <div class="preset-grid" id="preset-buttons"></div>
-
-        <div class="section-title">Level of Detail (LOD)</div>
-        <div class="lod-grid" id="lod-buttons">
-            <button data-lod="0" class="active">LOD 0</button>
-            <button data-lod="1">LOD 1</button>
-            <button data-lod="2">LOD 2</button>
-            <button data-lod="3">LOD 3</button>
-        </div>
-
-        <div class="section-title">Botanical Seed</div>
-        <div class="seed-row">
-            <input type="number" id="seed-input" value="1337" step="1" />
-            <button id="seed-random-btn" style="flex: 1;">Randomize Seed</button>
-        </div>
-
-        <div class="section-title">ECS Fluid &amp; Aeroelastic Wind</div>
-
-        <div class="control-row">
-            <div class="control-header"><span>Wind Speed</span><span id="val-wind-speed">6.5 m/s</span></div>
-            <input type="range" id="slider-wind-speed" min="0" max="22" step="0.25" value="6.5" />
-        </div>
-
-        <div class="control-row">
-            <div class="control-header"><span>Gust Amplitude</span><span id="val-gust-strength">4.5 m/s</span></div>
-            <input type="range" id="slider-gust-strength" min="0" max="16" step="0.25" value="4.5" />
-        </div>
-
-        <div class="control-row">
-            <div class="control-header"><span>Gust Period</span><span id="val-gust-period">5.5 s</span></div>
-            <input type="range" id="slider-gust-period" min="1.0" max="14.0" step="0.5" value="5.5" />
-        </div>
-
-        <div class="control-row">
-            <div class="control-header"><span>Wind Heading</span><span id="val-wind-heading">25°</span></div>
-            <input type="range" id="slider-wind-heading" min="0" max="360" step="5" value="25" />
-        </div>
-
-        <div class="control-row">
-            <div class="control-header"><span>Foliage Rig Weight</span><span id="val-wind-weight">1.00</span></div>
-            <input type="range" id="slider-wind-weight" min="0" max="1.5" step="0.05" value="1.0" />
-        </div>
-
-        <button id="btn-trigger-gust" class="gust-btn">Send 3D Fluid Gust &amp; Vortex Wave</button>
-
-        <div class="hint">Left-drag: Orbit &bull; WASD/QE: Fly &bull; Scroll: Zoom</div>
-    </div>
-
-    <div id="message"></div>
-
-    <script type="module" src="./main.js"></script>
-</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Shade — Procedural Foliage &amp; GPU Fluid Wind Playground (ECS)</title>
+    <style>
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        html, body { width: 100%; height: 100%; overflow: hidden; background: #0e1318; font-family: system-ui, -apple-system, sans-serif; color: #e4ece6; }
+        #viewport { width: 100%; height: 100%; position: relative; }
+        #viewport canvas { width: 100%; height: 100%; display: block; }
+
+        #hud {
+            position: fixed;
+            top: 12px;
+            left: 12px;
+            width: 310px;
+            padding: 12px 14px;
+            background: rgba(14, 20, 24, 0.86);
+            backdrop-filter: blur(8px);
+            border: 1px solid rgba(130, 180, 140, 0.22);
+            border-radius: 8px;
+            font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+            user-select: none;
+            z-index: 10;
+            max-height: calc(100vh - 24px);
+            overflow-y: auto;
+        }
+
+        #hud h1 {
+            font-size: 13px;
+            font-weight: 700;
+            color: #9be3a8;
+            letter-spacing: 0.02em;
+            margin-bottom: 8px;
+        }
+
+        .section-title {
+            margin-top: 10px;
+            margin-bottom: 5px;
+            padding-top: 7px;
+            border-top: 1px solid rgba(255, 255, 255, 0.08);
+            font-size: 10px;
+            text-transform: uppercase;
+            letter-spacing: 0.08em;
+            color: #84a58c;
+        }
+
+        .stats-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 3px 10px;
+            margin-bottom: 4px;
+        }
+
+        .stat-row {
+            display: flex;
+            justify-content: space-between;
+            color: #9cb0a2;
+        }
+
+        .stat-val {
+            color: #eef7f0;
+            font-weight: 600;
+        }
+
+        .preset-grid {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 4px;
+        }
+
+        .lod-grid, .mode-grid {
+            display: grid;
+            grid-template-columns: repeat(4, 1fr);
+            gap: 4px;
+        }
+
+        .mode-grid {
+            grid-template-columns: repeat(2, 1fr);
+        }
+
+        button {
+            padding: 5px 7px;
+            background: rgba(255, 255, 255, 0.06);
+            color: #d0dfd4;
+            border: 1px solid rgba(255, 255, 255, 0.14);
+            border-radius: 4px;
+            font: inherit;
+            font-size: 11px;
+            cursor: pointer;
+            transition: background 0.12s, border-color 0.12s;
+        }
+
+        button:hover {
+            background: rgba(155, 227, 168, 0.14);
+            border-color: rgba(155, 227, 168, 0.35);
+        }
+
+        button.active {
+            background: rgba(88, 184, 112, 0.28);
+            border-color: rgba(130, 224, 150, 0.65);
+            color: #ffffff;
+            font-weight: 600;
+        }
+
+        button.gust-btn {
+            width: 100%;
+            margin-top: 6px;
+            padding: 7px 10px;
+            background: linear-gradient(135deg, rgba(64, 156, 196, 0.32), rgba(88, 184, 112, 0.32));
+            border-color: rgba(120, 210, 230, 0.5);
+            color: #eafff5;
+            font-weight: 600;
+        }
+
+        button.gust-btn:hover {
+            background: linear-gradient(135deg, rgba(64, 156, 196, 0.48), rgba(88, 184, 112, 0.48));
+        }
+
+        .control-row {
+            display: flex;
+            flex-direction: column;
+            gap: 2px;
+            margin-bottom: 6px;
+        }
+
+        .control-header {
+            display: flex;
+            justify-content: space-between;
+            font-size: 11px;
+            color: #b4c7b9;
+        }
+
+        input[type="range"] {
+            width: 100%;
+            accent-color: #6fd486;
+            cursor: pointer;
+        }
+
+        .seed-row {
+            display: flex;
+            gap: 6px;
+            align-items: center;
+        }
+
+        input[type="number"] {
+            width: 90px;
+            padding: 4px 6px;
+            background: rgba(0, 0, 0, 0.35);
+            border: 1px solid rgba(255, 255, 255, 0.18);
+            border-radius: 4px;
+            color: #fff;
+            font: inherit;
+        }
+
+        .hint {
+            margin-top: 8px;
+            font-size: 10px;
+            color: #789080;
+            text-align: center;
+        }
+
+        #message:not(:empty) {
+            position: fixed;
+            inset: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 32px;
+            background: rgba(14, 19, 24, 0.92);
+            color: #f0d8c8;
+            font: 14px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
+            white-space: pre-wrap;
+            text-align: center;
+            z-index: 20;
+        }
+    </style>
+</head>
+<body tabindex="0">
+    <div id="viewport"></div>
+
+    <div id="hud">
+        <h1>Foliage &amp; GPU Fluid Wind (ECS)</h1>
+
+        <div class="stats-grid">
+            <div class="stat-row"><span>FPS</span><span id="stat-fps" class="stat-val">--</span></div>
+            <div class="stat-row"><span>Trees</span><span id="stat-trees" class="stat-val">--</span></div>
+            <div class="stat-row"><span>Wind Rigs</span><span id="stat-rigs" class="stat-val">--</span></div>
+            <div class="stat-row"><span>Joints</span><span id="stat-joints" class="stat-val">--</span></div>
+            <div class="stat-row"><span>Triangles</span><span id="stat-tris" class="stat-val">--</span></div>
+            <div class="stat-row"><span>Gust Wave</span><span id="stat-gust" class="stat-val">Idle</span></div>
+        </div>
+
+        <div class="section-title">Scene Layout</div>
+        <div class="mode-grid" id="mode-buttons">
+            <button data-mode="specimen" class="active">Single Specimen</button>
+            <button data-mode="grove">Mixed Grove (9)</button>
+        </div>
+
+        <div class="section-title">Foliage Visibility</div>
+        <div class="mode-grid" id="leaves-buttons">
+            <button data-leaves="true" class="active">Leaves On</button>
+            <button data-leaves="false">Bare Branches</button>
+        </div>
+
+        <div class="section-title">Species Preset</div>
+        <div class="preset-grid" id="preset-buttons"></div>
+
+        <div class="section-title">Level of Detail (LOD)</div>
+        <div class="lod-grid" id="lod-buttons">
+            <button data-lod="0" class="active">LOD 0</button>
+            <button data-lod="1">LOD 1</button>
+            <button data-lod="2">LOD 2</button>
+            <button data-lod="3">LOD 3</button>
+        </div>
+
+        <div class="section-title">Botanical Seed</div>
+        <div class="seed-row">
+            <input type="number" id="seed-input" value="1337" step="1" />
+            <button id="seed-random-btn" style="flex: 1;">Randomize Seed</button>
+        </div>
+
+        <div class="section-title">ECS Fluid &amp; Aeroelastic Wind</div>
+
+        <div class="control-row">
+            <div class="control-header"><span>Wind Speed</span><span id="val-wind-speed">6.5 m/s</span></div>
+            <input type="range" id="slider-wind-speed" min="0" max="22" step="0.25" value="6.5" />
+        </div>
+
+        <div class="control-row">
+            <div class="control-header"><span>Gust Amplitude</span><span id="val-gust-strength">4.5 m/s</span></div>
+            <input type="range" id="slider-gust-strength" min="0" max="16" step="0.25" value="4.5" />
+        </div>
+
+        <div class="control-row">
+            <div class="control-header"><span>Gust Period</span><span id="val-gust-period">5.5 s</span></div>
+            <input type="range" id="slider-gust-period" min="1.0" max="14.0" step="0.5" value="5.5" />
+        </div>
+
+        <div class="control-row">
+            <div class="control-header"><span>Wind Heading</span><span id="val-wind-heading">25°</span></div>
+            <input type="range" id="slider-wind-heading" min="0" max="360" step="5" value="25" />
+        </div>
+
+        <div class="control-row">
+            <div class="control-header"><span>Foliage Rig Weight</span><span id="val-wind-weight">1.00</span></div>
+            <input type="range" id="slider-wind-weight" min="0" max="1.5" step="0.05" value="1.0" />
+        </div>
+
+        <button id="btn-trigger-gust" class="gust-btn">Send 3D Fluid Gust &amp; Vortex Wave</button>
+
+        <div class="hint">Left-drag: Orbit &bull; WASD/QE: Fly &bull; Scroll: Zoom</div>
+    </div>
+
+    <div id="message"></div>
+
+    <script type="module" src="./main.js"></script>
+</body>
+</html>