npm - @woosh/meep-engine - Versions diffs - 3.18.0 → 3.20.0 - Mend

@woosh/meep-engine 3.18.0 → 3.20.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (228) hide show

package/src/shade/playground/particle_ecs/index.html ADDED Viewed

@@ -0,0 +1,330 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Bonfire — ECS GPU particles</title>
+    <!-- the editor's own stylesheets; the panel below only opens once somebody presses E -->
+    <link rel="stylesheet" href="/editor/view/node-graph/node-graph.css">
+    <link rel="stylesheet" href="/editor/view/particles/effect/particle-editor.css">
+    <style>
+        :root {
+            color-scheme: dark;
+            --panel: rgba(14, 15, 20, 0.78);
+            --edge: rgba(255, 255, 255, 0.1);
+            --text: #e7e4de;
+            --muted: #9a978f;
+            --ember: #ff9a3c;
+            /* the editor's tokens, so its panels theme as they do inside the editor shell */
+            --meep-panel-bg: #1a1e25;
+            --meep-header-bg: #22262e;
+            --meep-divider-color: #10131a;
+            --meep-fg: #d6dae0;
+            --meep-fg-muted: #8b939f;
+            --meep-accent: #ff9a3c;
+            --meep-error: #ff7a7a;
+            --meep-warning: #e2b341;
+            --meep-font: 12px 'Segoe UI', system-ui, sans-serif;
+            --meep-graph-bg: #12151b;
+            --meep-graph-bg-glow: #1a1e26;
+            --meep-graph-node-bg: #232830;
+            --meep-graph-node-header: #2b313b;
+            --meep-graph-node-border: #363c46;
+            --meep-graph-input-bg: #171b21;
+        }
+        * {
+            box-sizing: border-box;
+        }
+        html, body {
+            margin: 0;
+            height: 100%;
+            overflow: hidden;
+            background: #05060a;
+            color: var(--text);
+            font: 13px/1.5 ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
+        }
+        #viewport {
+            position: fixed;
+            inset: 0;
+            /* the canvas is sized by the engine and is shorter than this while the editor is open */
+            overflow: hidden;
+        }
+        #viewport canvas {
+            display: block;
+        }
+        .panel {
+            position: fixed;
+            background: var(--panel);
+            border: 1px solid var(--edge);
+            border-radius: 10px;
+            padding: 12px 14px;
+            backdrop-filter: blur(8px);
+        }
+        #controls {
+            top: 14px;
+            left: 14px;
+            width: 236px;
+        }
+        #stats {
+            top: 14px;
+            right: 14px;
+            min-width: 190px;
+            font-variant-numeric: tabular-nums;
+        }
+        #hint {
+            bottom: 14px;
+            left: 14px;
+            color: var(--muted);
+            max-width: 460px;
+        }
+        #profile_status {
+            bottom: 14px;
+            right: 14px;
+            max-width: 420px;
+            color: var(--muted);
+            font-variant-numeric: tabular-nums;
+        }
+        #profile_status.recording {
+            color: #ff6a5c;
+            border-color: rgba(255, 106, 92, 0.5);
+        }
+        /* --- the particle editor ------------------------------------------------------------- */
+        /*
+         The whole window. E is a mode switch between looking at the fire and editing it, rather than
+         a panel that takes a share of the screen: a node graph wants every pixel it can get, and so
+         does the fire.
+        */
+        #effect_editor {
+            position: fixed;
+            inset: 0;
+            display: flex;
+            flex-direction: column;
+            background: var(--meep-panel-bg);
+            font: var(--meep-font);
+            color: var(--meep-fg);
+        }
+        /*
+         An id selector outranks the user agent's `[hidden] { display: none }`, so the `display: flex`
+         above would otherwise keep the panel over the scene from the moment the page loaded, while
+         the `hidden` property everything reads went on saying it was closed. This rule matches the
+         attribute at the same specificity and comes later, so the attribute wins — which is what
+         makes `hidden` the switch the editor already treats it as.
+        */
+        #effect_editor[hidden] {
+            display: none;
+        }
+        #editor_bar {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            padding: 6px 10px;
+            background: var(--meep-header-bg);
+            border-bottom: 1px solid var(--meep-divider-color);
+        }
+        #editor_bar strong {
+            font-size: 12px;
+            font-weight: 600;
+        }
+        #editor_bar select,
+        #editor_bar button {
+            font: inherit;
+            color: var(--meep-fg);
+            background: var(--meep-graph-input-bg);
+            border: 1px solid var(--meep-graph-node-border);
+            border-radius: 5px;
+            padding: 4px 9px;
+            cursor: pointer;
+            width: auto;
+            margin: 0;
+        }
+        #editor_bar select:hover,
+        #editor_bar button:hover {
+            border-color: var(--meep-accent);
+        }
+        #editor_status {
+            flex: 1;
+            color: var(--meep-fg-muted);
+            font-variant-numeric: tabular-nums;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+        #editor_status.failed {
+            color: var(--meep-error);
+        }
+        #editor_mount {
+            position: relative;
+            flex: 1;
+            min-height: 0;
+        }
+        h1 {
+            margin: 0 0 2px;
+            font-size: 13px;
+            font-weight: 600;
+            letter-spacing: 0.02em;
+        }
+        h1 span {
+            color: var(--ember);
+        }
+        p.sub {
+            margin: 0 0 10px;
+            color: var(--muted);
+            font-size: 12px;
+        }
+        label.row {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 3px 0;
+            cursor: pointer;
+        }
+        label.row input {
+            accent-color: var(--ember);
+            margin: 0;
+        }
+        label.row span {
+            flex: 1;
+        }
+        button {
+            width: 100%;
+            margin-top: 10px;
+            padding: 7px 10px;
+            font: inherit;
+            font-weight: 600;
+            color: #1a1206;
+            background: var(--ember);
+            border: 0;
+            border-radius: 7px;
+            cursor: pointer;
+        }
+        button:hover {
+            filter: brightness(1.1);
+        }
+        dl {
+            display: grid;
+            grid-template-columns: auto 1fr;
+            gap: 2px 12px;
+            margin: 0;
+        }
+        dt {
+            color: var(--muted);
+        }
+        dd {
+            margin: 0;
+            text-align: right;
+        }
+        #message {
+            position: fixed;
+            inset: 0;
+            display: grid;
+            place-content: center;
+            padding: 40px;
+            text-align: center;
+            white-space: pre-wrap;
+            color: #ffb4a4;
+            pointer-events: none;
+        }
+        kbd {
+            padding: 1px 5px;
+            border: 1px solid var(--edge);
+            border-radius: 4px;
+            background: rgba(255, 255, 255, 0.06);
+            font: inherit;
+            font-size: 11px;
+        }
+    </style>
+</head>
+<body tabindex="0">
+<div id="viewport"></div>
+<section class="panel" id="controls">
+    <h1>Bonfire · <span>ECS particles</span></h1>
+    <p class="sub">Four <code>ParticleEffect</code> entities</p>
+    <label class="row"><input type="checkbox" id="flame" checked><span>Flame</span></label>
+    <label class="row"><input type="checkbox" id="smoke" checked><span>Smoke</span></label>
+    <label class="row"><input type="checkbox" id="embers" checked><span>Embers</span></label>
+    <label class="row"><input type="checkbox" id="soot" checked><span>Soot</span></label>
+    <button id="stoke">Stoke the fire</button>
+</section>
+<section class="panel" id="stats">
+    <dl>
+        <dt>fps</dt>
+        <dd id="stat-fps">—</dd>
+        <dt>alive</dt>
+        <dd id="stat-alive">—</dd>
+        <dt>free</dt>
+        <dd id="stat-dead">—</dd>
+        <dt>drawn</dt>
+        <dd id="stat-draw">—</dd>
+        <dt>emitters</dt>
+        <dd id="stat-emitters">—</dd>
+    </dl>
+</section>
+<p class="panel" id="hint">
+    Drag to orbit, <kbd>W</kbd><kbd>A</kbd><kbd>S</kbd><kbd>D</kbd> to move, wheel to zoom. The
+    checkboxes write <code>emitting</code> on a component; the button asks an entity for a burst.
+    Both go through the ECS — nothing here touches the scene graph.
+    <br><kbd>E</kbd> switches to the particle editor — full screen, editing whichever effect the
+    selector names, live. <kbd>Esc</kbd> comes back from anywhere in it.
+</p>
+<p class="panel" id="profile_status"><kbd>T</kbd> to record a GPU profile</p>
+<section id="effect_editor" hidden>
+    <div id="editor_bar">
+        <strong>Effect</strong>
+        <select id="editor_effect" title="which effect the graph below edits"></select>
+        <button id="editor_download" title="save this effect as JSON — drop it over effects/&lt;name&gt;.json">Download</button>
+        <button id="editor_import" title="open a document downloaded earlier">Import…</button>
+        <input type="file" id="editor_file" accept="application/json,.json" hidden>
+        <span id="editor_status"></span>
+        <button id="editor_close" title="Escape, or E when nothing is focused">Close · Esc</button>
+    </div>
+    <div id="editor_mount"></div>
+</section>
+<div id="message"></div>
+<script type="module" src="./main.js"></script>
+</body>
+</html>

package/src/shade/playground/particle_ecs/main.d.ts ADDED Viewed

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

package/src/shade/playground/particle_ecs/main.d.ts.map ADDED Viewed

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