Ampandheaust
d4e8634f67
Amp-Thread-ID: https://ampcode.com/threads/T-019f9d91-77c1-7206-a60f-ed6554ce92ab Co-authored-by: Heaust Azure <heaust.azure@gmail.com>
305 lines
10 KiB
HTML
305 lines
10 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>fxnode deterministic browser example</title>
|
|
<link rel="stylesheet" href="./style.css" />
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<h1>fxnode browser baseline</h1>
|
|
<p>Deterministic fxnode regression composition; genuine Blender parity references remain pending.</p>
|
|
<canvas id="graph" width="1200" height="640" aria-label="Material node graph"></canvas>
|
|
</main>
|
|
<template id="add-node-menu-template">
|
|
<div data-fxnode-add-menu style="position: fixed; z-index: 2147483647; visibility: hidden">
|
|
<style>
|
|
[data-fxnode-add-menu] * {
|
|
box-sizing: border-box;
|
|
}
|
|
.fxnode-add-dialog {
|
|
width: 286px;
|
|
max-height: min(520px, calc(100vh - 16px));
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 8px;
|
|
background: #25282d;
|
|
color: #e5e5e5;
|
|
border: 1px solid #111216;
|
|
border-radius: 7px;
|
|
box-shadow: 0 12px 32px #000a;
|
|
font:
|
|
12px/1.3 system-ui,
|
|
sans-serif;
|
|
}
|
|
.fxnode-add-title {
|
|
font-weight: 650;
|
|
margin: 1px 2px 7px;
|
|
}
|
|
.fxnode-add-search {
|
|
width: 100%;
|
|
border: 1px solid #111216;
|
|
border-radius: 4px;
|
|
background: #181a1e;
|
|
color: #fff;
|
|
padding: 7px 8px;
|
|
outline: none;
|
|
}
|
|
.fxnode-add-search:focus {
|
|
border-color: #ed5700;
|
|
}
|
|
.fxnode-add-results {
|
|
overflow: auto;
|
|
margin-top: 7px;
|
|
min-height: 40px;
|
|
}
|
|
.fxnode-add-group {
|
|
margin: 4px 0 7px;
|
|
}
|
|
.fxnode-add-heading {
|
|
padding: 3px 7px;
|
|
color: #a5a8ad;
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.07em;
|
|
}
|
|
.fxnode-add-option {
|
|
display: block;
|
|
width: 100%;
|
|
padding: 6px 8px;
|
|
border: 0;
|
|
border-radius: 4px;
|
|
background: transparent;
|
|
color: #e5e5e5;
|
|
text-align: left;
|
|
font: inherit;
|
|
cursor: default;
|
|
}
|
|
.fxnode-add-option:hover,
|
|
.fxnode-add-option.active {
|
|
background: #ed5700;
|
|
color: #fff;
|
|
}
|
|
.fxnode-add-empty {
|
|
padding: 14px 8px;
|
|
color: #a5a8ad;
|
|
text-align: center;
|
|
}
|
|
</style>
|
|
<section class="fxnode-add-dialog" role="dialog" aria-label="Add node">
|
|
<div class="fxnode-add-title">Add Node</div>
|
|
<input
|
|
data-fxnode-menu-search
|
|
class="fxnode-add-search"
|
|
type="search"
|
|
role="combobox"
|
|
aria-label="Search nodes"
|
|
aria-autocomplete="list"
|
|
aria-controls="fxnode-node-results"
|
|
autocomplete="off"
|
|
placeholder="Search…"
|
|
/>
|
|
<div data-fxnode-menu-results class="fxnode-add-results" id="fxnode-node-results" role="listbox">
|
|
<section data-fxnode-menu-group class="fxnode-add-group" role="group" aria-label="Common">
|
|
<h2 data-fxnode-menu-heading class="fxnode-add-heading">Common</h2>
|
|
<button
|
|
data-fxnode-menu-option
|
|
data-type-id="fxnode.common.frame"
|
|
class="fxnode-add-option"
|
|
type="button"
|
|
role="option"
|
|
>
|
|
Frame</button
|
|
><button
|
|
data-fxnode-menu-option
|
|
data-type-id="fxnode.common.reroute"
|
|
class="fxnode-add-option"
|
|
type="button"
|
|
role="option"
|
|
>
|
|
Reroute</button
|
|
><button
|
|
data-fxnode-menu-option
|
|
data-type-id="fxnode.common.group-input"
|
|
class="fxnode-add-option"
|
|
type="button"
|
|
role="option"
|
|
>
|
|
Group Input</button
|
|
><button
|
|
data-fxnode-menu-option
|
|
data-type-id="fxnode.common.group-output"
|
|
class="fxnode-add-option"
|
|
type="button"
|
|
role="option"
|
|
>
|
|
Group Output
|
|
</button>
|
|
</section>
|
|
<section data-fxnode-menu-group class="fxnode-add-group" role="group" aria-label="Shader">
|
|
<h2 data-fxnode-menu-heading class="fxnode-add-heading">Shader</h2>
|
|
<button
|
|
data-fxnode-menu-option
|
|
data-type-id="fxnode.shader.value"
|
|
class="fxnode-add-option"
|
|
type="button"
|
|
role="option"
|
|
>
|
|
Value</button
|
|
><button
|
|
data-fxnode-menu-option
|
|
data-type-id="fxnode.shader.color"
|
|
class="fxnode-add-option"
|
|
type="button"
|
|
role="option"
|
|
>
|
|
Color</button
|
|
><button
|
|
data-fxnode-menu-option
|
|
data-type-id="fxnode.shader.math"
|
|
class="fxnode-add-option"
|
|
type="button"
|
|
role="option"
|
|
>
|
|
Math</button
|
|
><button
|
|
data-fxnode-menu-option
|
|
data-type-id="fxnode.shader.vector-math"
|
|
class="fxnode-add-option"
|
|
type="button"
|
|
role="option"
|
|
>
|
|
Vector Math</button
|
|
><button
|
|
data-fxnode-menu-option
|
|
data-type-id="fxnode.shader.mix"
|
|
class="fxnode-add-option"
|
|
type="button"
|
|
role="option"
|
|
>
|
|
Mix</button
|
|
><button
|
|
data-fxnode-menu-option
|
|
data-type-id="fxnode.shader.color-ramp"
|
|
class="fxnode-add-option"
|
|
type="button"
|
|
role="option"
|
|
>
|
|
Color Ramp</button
|
|
><button
|
|
data-fxnode-menu-option
|
|
data-type-id="fxnode.shader.texture-coordinate"
|
|
class="fxnode-add-option"
|
|
type="button"
|
|
role="option"
|
|
>
|
|
Texture Coordinate</button
|
|
><button
|
|
data-fxnode-menu-option
|
|
data-type-id="fxnode.shader.noise-texture"
|
|
class="fxnode-add-option"
|
|
type="button"
|
|
role="option"
|
|
>
|
|
Noise Texture</button
|
|
><button
|
|
data-fxnode-menu-option
|
|
data-type-id="fxnode.shader.image-texture"
|
|
class="fxnode-add-option"
|
|
type="button"
|
|
role="option"
|
|
>
|
|
Image Texture</button
|
|
><button
|
|
data-fxnode-menu-option
|
|
data-type-id="fxnode.shader.principled-bsdf"
|
|
class="fxnode-add-option"
|
|
type="button"
|
|
role="option"
|
|
>
|
|
Principled BSDF</button
|
|
><button
|
|
data-fxnode-menu-option
|
|
data-type-id="fxnode.shader.material-output"
|
|
class="fxnode-add-option"
|
|
type="button"
|
|
role="option"
|
|
>
|
|
Material Output
|
|
</button>
|
|
</section>
|
|
<section data-fxnode-menu-group class="fxnode-add-group" role="group" aria-label="Geometry">
|
|
<h2 data-fxnode-menu-heading class="fxnode-add-heading">Geometry</h2>
|
|
<button
|
|
data-fxnode-menu-option
|
|
data-type-id="fxnode.geometry.position"
|
|
class="fxnode-add-option"
|
|
type="button"
|
|
role="option"
|
|
>
|
|
Position</button
|
|
><button
|
|
data-fxnode-menu-option
|
|
data-type-id="fxnode.geometry.mesh-cube"
|
|
class="fxnode-add-option"
|
|
type="button"
|
|
role="option"
|
|
>
|
|
Mesh Cube</button
|
|
><button
|
|
data-fxnode-menu-option
|
|
data-type-id="fxnode.geometry.set-position"
|
|
class="fxnode-add-option"
|
|
type="button"
|
|
role="option"
|
|
>
|
|
Set Position</button
|
|
><button
|
|
data-fxnode-menu-option
|
|
data-type-id="fxnode.geometry.transform-geometry"
|
|
class="fxnode-add-option"
|
|
type="button"
|
|
role="option"
|
|
>
|
|
Transform Geometry</button
|
|
><button
|
|
data-fxnode-menu-option
|
|
data-type-id="fxnode.geometry.join-geometry"
|
|
class="fxnode-add-option"
|
|
type="button"
|
|
role="option"
|
|
>
|
|
Join Geometry
|
|
</button>
|
|
</section>
|
|
<section data-fxnode-menu-group class="fxnode-add-group" role="group" aria-label="Compositor">
|
|
<h2 data-fxnode-menu-heading class="fxnode-add-heading">Compositor</h2>
|
|
<button
|
|
data-fxnode-menu-option
|
|
data-type-id="fxnode.compositor.image"
|
|
class="fxnode-add-option"
|
|
type="button"
|
|
role="option"
|
|
>
|
|
Image</button
|
|
><button
|
|
data-fxnode-menu-option
|
|
data-type-id="fxnode.compositor.color-balance"
|
|
class="fxnode-add-option"
|
|
type="button"
|
|
role="option"
|
|
>
|
|
Color Balance
|
|
</button>
|
|
</section>
|
|
<div data-fxnode-menu-empty class="fxnode-add-empty" role="status" hidden>No nodes found</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</template>
|
|
<script type="module" src="./main.ts"></script>
|
|
</body>
|
|
</html>
|