feat: add render graph driven renderer architecture
Amp-Thread-ID: https://ampcode.com/threads/T-019f9d91-77c1-7206-a60f-ed6554ce92ab Co-authored-by: Heaust Azure <heaust.azure@gmail.com>
This commit is contained in:
Amp
@@ -0,0 +1,12 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>fxnode all supported</title>
|
||||
<link rel="stylesheet" href="./style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="graph"></canvas>
|
||||
<script type="module" src="./main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,20 @@
|
||||
import { createApplicationFxNode } from "../application-browser.js";
|
||||
import { prepareFxNodeBrowserHost } from "../../shared/browser-host.js";
|
||||
import initialLayout from "./initialLayout.json" with { type: "json" };
|
||||
const canvas = document.querySelector("canvas")!,
|
||||
host = prepareFxNodeBrowserHost({ canvas });
|
||||
let root: Awaited<ReturnType<typeof createApplicationFxNode>> | undefined,
|
||||
view: Awaited<ReturnType<NonNullable<typeof root>["attachView"]>> | undefined;
|
||||
try {
|
||||
root = await createApplicationFxNode();
|
||||
await root.setState(initialLayout);
|
||||
view = await root.attachView({ canvas, viewport: host.initialViewport });
|
||||
host.attach(root, view);
|
||||
(window as unknown as { fxnodeExample: unknown }).fxnodeExample = { root, view };
|
||||
await view.whenRendered();
|
||||
} catch (error) {
|
||||
host.destroy();
|
||||
await view?.detach();
|
||||
root?.destroy();
|
||||
throw error;
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background: #202124;
|
||||
}
|
||||
canvas {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
@@ -0,0 +1,86 @@
|
||||
import { createFxNode, type CreateFxNodeOptions, type FxNode } from "@lib/index.js";
|
||||
import {
|
||||
APPLICATION_HEADER_STYLES,
|
||||
APPLICATION_ID,
|
||||
APPLICATION_RESOURCES,
|
||||
APPLICATION_VERSION,
|
||||
applicationCompatibility,
|
||||
} from "./nodes/application.js";
|
||||
import { exampleTheme } from "../shared/theme.js";
|
||||
import { frameNode } from "./nodes/common/frame.js";
|
||||
import { rerouteNode } from "./nodes/common/reroute.js";
|
||||
import {
|
||||
anySocket,
|
||||
floatSocket,
|
||||
vectorSocket,
|
||||
colorSocket,
|
||||
shaderSocket,
|
||||
geometrySocket,
|
||||
} from "./nodes/socket-types.js";
|
||||
import { groupInputNode } from "./nodes/common/group-input.js";
|
||||
import { groupOutputNode } from "./nodes/common/group-output.js";
|
||||
import { valueNode } from "./nodes/shader/value.js";
|
||||
import { colorNode } from "./nodes/shader/color.js";
|
||||
import { mathNode } from "./nodes/shader/math.js";
|
||||
import { vectorMathNode } from "./nodes/shader/vector-math.js";
|
||||
import { mixNode } from "./nodes/shader/mix.js";
|
||||
import { colorRampNode } from "./nodes/shader/color-ramp.js";
|
||||
import { textureCoordinateNode } from "./nodes/shader/texture-coordinate.js";
|
||||
import { noiseTextureNode } from "./nodes/shader/noise-texture.js";
|
||||
import { imageTextureNode } from "./nodes/shader/image-texture.js";
|
||||
import { principledBsdfNode } from "./nodes/shader/principled-bsdf.js";
|
||||
import { materialOutputNode } from "./nodes/shader/material-output.js";
|
||||
import { positionNode } from "./nodes/geometry/position.js";
|
||||
import { meshCubeNode } from "./nodes/geometry/mesh-cube.js";
|
||||
import { setPositionNode } from "./nodes/geometry/set-position.js";
|
||||
import { transformGeometryNode } from "./nodes/geometry/transform-geometry.js";
|
||||
import { joinGeometryNode } from "./nodes/geometry/join-geometry.js";
|
||||
import { imageNode } from "./nodes/compositor/image.js";
|
||||
import { colorBalanceNode } from "../shared/nodes/color-balance.js";
|
||||
export type ApplicationFxNode = FxNode;
|
||||
type ApplicationBrowserOptions = Omit<CreateFxNodeOptions, "applicationId" | "applicationVersion" | "resources">;
|
||||
export async function createApplicationFxNode(options: ApplicationBrowserOptions = {}): Promise<ApplicationFxNode> {
|
||||
const api = await createFxNode({
|
||||
...options,
|
||||
applicationId: APPLICATION_ID,
|
||||
applicationVersion: APPLICATION_VERSION,
|
||||
resources: APPLICATION_RESOURCES,
|
||||
});
|
||||
try {
|
||||
await api.setTheme(exampleTheme);
|
||||
await api.setHeaderStyles(APPLICATION_HEADER_STYLES);
|
||||
await api.composeSocket(...anySocket);
|
||||
await api.composeSocket(...floatSocket);
|
||||
await api.composeSocket(...vectorSocket);
|
||||
await api.composeSocket(...colorSocket);
|
||||
await api.composeSocket(...shaderSocket);
|
||||
await api.composeSocket(...geometrySocket);
|
||||
await api.setCompatibility(applicationCompatibility);
|
||||
await api.composeNode(...frameNode);
|
||||
await api.composeNode(...rerouteNode);
|
||||
await api.composeNode(...groupInputNode);
|
||||
await api.composeNode(...groupOutputNode);
|
||||
await api.composeNode(...valueNode);
|
||||
await api.composeNode(...colorNode);
|
||||
await api.composeNode(...mathNode);
|
||||
await api.composeNode(...vectorMathNode);
|
||||
await api.composeNode(...mixNode);
|
||||
await api.composeNode(...colorRampNode);
|
||||
await api.composeNode(...textureCoordinateNode);
|
||||
await api.composeNode(...noiseTextureNode);
|
||||
await api.composeNode(...imageTextureNode);
|
||||
await api.composeNode(...principledBsdfNode);
|
||||
await api.composeNode(...materialOutputNode);
|
||||
await api.composeNode(...positionNode);
|
||||
await api.composeNode(...meshCubeNode);
|
||||
await api.composeNode(...setPositionNode);
|
||||
await api.composeNode(...transformGeometryNode);
|
||||
await api.composeNode(...joinGeometryNode);
|
||||
await api.composeNode(...imageNode);
|
||||
await api.composeNode(...colorBalanceNode);
|
||||
return api;
|
||||
} catch (error) {
|
||||
api.destroy();
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>FxNode controls</title>
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
background: #111;
|
||||
}
|
||||
canvas {
|
||||
display: block;
|
||||
width: 1200px;
|
||||
height: 640px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="controls"></canvas>
|
||||
<script type="module" src="./main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,293 @@
|
||||
{
|
||||
"graphId": "control-test",
|
||||
"catalogVersion": 4,
|
||||
"nodes": [
|
||||
{
|
||||
"id": "color",
|
||||
"typeId": "fxnode.shader.color",
|
||||
"typeVersion": 1,
|
||||
"known": true,
|
||||
"position": {
|
||||
"x": 300,
|
||||
"y": 200
|
||||
},
|
||||
"size": {
|
||||
"x": 151,
|
||||
"y": 100
|
||||
},
|
||||
"label": "Color",
|
||||
"parameters": {
|
||||
"color": {
|
||||
"kind": "color",
|
||||
"value": [
|
||||
0.8,
|
||||
0.8,
|
||||
0.8,
|
||||
1
|
||||
]
|
||||
}
|
||||
},
|
||||
"sockets": [
|
||||
{
|
||||
"id": "color:color",
|
||||
"key": "color",
|
||||
"label": "Color",
|
||||
"direction": "output",
|
||||
"dataType": "color",
|
||||
"accepts": [],
|
||||
"maxIncomingLinks": 0,
|
||||
"visible": true
|
||||
}
|
||||
],
|
||||
"muted": false,
|
||||
"collapsed": false,
|
||||
"extensions": {}
|
||||
},
|
||||
{
|
||||
"id": "group",
|
||||
"typeId": "fxnode.common.group-input",
|
||||
"typeVersion": 1,
|
||||
"known": true,
|
||||
"position": {
|
||||
"x": -100,
|
||||
"y": -100
|
||||
},
|
||||
"size": {
|
||||
"x": 257,
|
||||
"y": 100
|
||||
},
|
||||
"label": "Group Input",
|
||||
"parameters": {
|
||||
"interfaceName": {
|
||||
"kind": "string",
|
||||
"value": "Socket"
|
||||
}
|
||||
},
|
||||
"sockets": [
|
||||
{
|
||||
"id": "group:output",
|
||||
"key": "output",
|
||||
"label": "Interface",
|
||||
"direction": "output",
|
||||
"dataType": "any",
|
||||
"accepts": [],
|
||||
"maxIncomingLinks": 0,
|
||||
"visible": true
|
||||
}
|
||||
],
|
||||
"muted": false,
|
||||
"collapsed": false,
|
||||
"extensions": {}
|
||||
},
|
||||
{
|
||||
"id": "math",
|
||||
"typeId": "fxnode.shader.math",
|
||||
"typeVersion": 1,
|
||||
"known": true,
|
||||
"position": {
|
||||
"x": -250,
|
||||
"y": 200
|
||||
},
|
||||
"size": {
|
||||
"x": 192,
|
||||
"y": 148
|
||||
},
|
||||
"label": "Math",
|
||||
"parameters": {
|
||||
"operation": {
|
||||
"kind": "string",
|
||||
"value": "add"
|
||||
},
|
||||
"clamp": {
|
||||
"kind": "boolean",
|
||||
"value": false
|
||||
}
|
||||
},
|
||||
"sockets": [
|
||||
{
|
||||
"id": "math:a",
|
||||
"key": "a",
|
||||
"label": "A",
|
||||
"direction": "input",
|
||||
"dataType": "float",
|
||||
"accepts": [
|
||||
"float",
|
||||
"any"
|
||||
],
|
||||
"maxIncomingLinks": 1,
|
||||
"visible": true,
|
||||
"defaultValue": {
|
||||
"kind": "number",
|
||||
"value": 0
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "math:b",
|
||||
"key": "b",
|
||||
"label": "B",
|
||||
"direction": "input",
|
||||
"dataType": "float",
|
||||
"accepts": [
|
||||
"float",
|
||||
"any"
|
||||
],
|
||||
"maxIncomingLinks": 1,
|
||||
"visible": true,
|
||||
"defaultValue": {
|
||||
"kind": "number",
|
||||
"value": 0
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "math:value",
|
||||
"key": "value",
|
||||
"label": "Value",
|
||||
"direction": "output",
|
||||
"dataType": "float",
|
||||
"accepts": [],
|
||||
"maxIncomingLinks": 0,
|
||||
"visible": true
|
||||
}
|
||||
],
|
||||
"muted": false,
|
||||
"collapsed": false,
|
||||
"extensions": {}
|
||||
},
|
||||
{
|
||||
"id": "value",
|
||||
"typeId": "fxnode.shader.value",
|
||||
"typeVersion": 1,
|
||||
"known": true,
|
||||
"position": {
|
||||
"x": -500,
|
||||
"y": 200
|
||||
},
|
||||
"size": {
|
||||
"x": 151,
|
||||
"y": 100
|
||||
},
|
||||
"label": "Value",
|
||||
"parameters": {
|
||||
"value": {
|
||||
"kind": "number",
|
||||
"value": 0
|
||||
}
|
||||
},
|
||||
"sockets": [
|
||||
{
|
||||
"id": "value:value",
|
||||
"key": "value",
|
||||
"label": "Value",
|
||||
"direction": "output",
|
||||
"dataType": "float",
|
||||
"accepts": [],
|
||||
"maxIncomingLinks": 0,
|
||||
"visible": true
|
||||
}
|
||||
],
|
||||
"muted": false,
|
||||
"collapsed": false,
|
||||
"extensions": {}
|
||||
},
|
||||
{
|
||||
"id": "vector",
|
||||
"typeId": "fxnode.shader.vector-math",
|
||||
"typeVersion": 1,
|
||||
"known": true,
|
||||
"position": {
|
||||
"x": 20,
|
||||
"y": 200
|
||||
},
|
||||
"size": {
|
||||
"x": 340,
|
||||
"y": 148
|
||||
},
|
||||
"label": "Vector Math",
|
||||
"parameters": {
|
||||
"operation": {
|
||||
"kind": "string",
|
||||
"value": "add"
|
||||
}
|
||||
},
|
||||
"sockets": [
|
||||
{
|
||||
"id": "vector:a",
|
||||
"key": "a",
|
||||
"label": "A",
|
||||
"direction": "input",
|
||||
"dataType": "vector",
|
||||
"accepts": [
|
||||
"vector",
|
||||
"any"
|
||||
],
|
||||
"maxIncomingLinks": 1,
|
||||
"visible": true,
|
||||
"defaultValue": {
|
||||
"kind": "vector",
|
||||
"value": [
|
||||
0,
|
||||
0,
|
||||
0
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "vector:b",
|
||||
"key": "b",
|
||||
"label": "B",
|
||||
"direction": "input",
|
||||
"dataType": "vector",
|
||||
"accepts": [
|
||||
"vector",
|
||||
"any"
|
||||
],
|
||||
"maxIncomingLinks": 1,
|
||||
"visible": true,
|
||||
"defaultValue": {
|
||||
"kind": "vector",
|
||||
"value": [
|
||||
0,
|
||||
0,
|
||||
0
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "vector:vector",
|
||||
"key": "vector",
|
||||
"label": "Vector",
|
||||
"direction": "output",
|
||||
"dataType": "vector",
|
||||
"accepts": [],
|
||||
"maxIncomingLinks": 0,
|
||||
"visible": true
|
||||
},
|
||||
{
|
||||
"id": "vector:value",
|
||||
"key": "value",
|
||||
"label": "Value",
|
||||
"direction": "output",
|
||||
"dataType": "float",
|
||||
"accepts": [],
|
||||
"maxIncomingLinks": 0,
|
||||
"visible": true
|
||||
}
|
||||
],
|
||||
"muted": false,
|
||||
"collapsed": false,
|
||||
"extensions": {}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
"id": "value-math",
|
||||
"fromNodeId": "value",
|
||||
"fromSocketId": "value:value",
|
||||
"toNodeId": "math",
|
||||
"toSocketId": "math:a",
|
||||
"muted": false,
|
||||
"extensions": {}
|
||||
}
|
||||
],
|
||||
"metadata": {}
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
import { createApplicationFxNode, type ApplicationFxNode } from "../application-browser.js";
|
||||
import type { FxNodeView } from "@lib/index.js";
|
||||
import { prepareFxNodeBrowserHost } from "../../shared/browser-host.js";
|
||||
import initialLayout from "./initialLayout.json" with { type: "json" };
|
||||
const canvas = document.querySelector<HTMLCanvasElement>("#controls");
|
||||
if (!canvas) throw new Error("Control test canvas missing");
|
||||
const host = prepareFxNodeBrowserHost({ canvas });
|
||||
const handle: { root: ApplicationFxNode | null; view: FxNodeView | null; ready: Promise<void> } = {
|
||||
root: null,
|
||||
view: null,
|
||||
ready: Promise.resolve(),
|
||||
};
|
||||
window.controlTest = handle;
|
||||
handle.ready = (async () => {
|
||||
let root: ApplicationFxNode | undefined, view: FxNodeView | undefined;
|
||||
try {
|
||||
root = await createApplicationFxNode();
|
||||
await root.setState(initialLayout);
|
||||
view = await root.attachView({ canvas, viewport: host.initialViewport });
|
||||
handle.root = root;
|
||||
handle.view = view;
|
||||
host.attach(root, view);
|
||||
await view.whenRendered();
|
||||
} catch (error) {
|
||||
host.destroy();
|
||||
await view?.detach();
|
||||
root?.destroy();
|
||||
throw error;
|
||||
}
|
||||
})();
|
||||
+18
@@ -0,0 +1,18 @@
|
||||
import type { FxNode, FxNodeView } from "@lib/index.js";
|
||||
import type { PreparedFxNodeBrowserHost } from "../shared/browser-host.js";
|
||||
|
||||
declare global {
|
||||
interface FxNodeExampleHandle {
|
||||
root: FxNode | null;
|
||||
view: FxNodeView | null;
|
||||
host: PreparedFxNodeBrowserHost;
|
||||
ready: Promise<void>;
|
||||
readonly rendered: Promise<void>;
|
||||
}
|
||||
interface Window {
|
||||
fxnodeExample: FxNodeExampleHandle;
|
||||
linkToolsTest: { root: FxNode | null; view: FxNodeView | null; ready: Promise<void> };
|
||||
}
|
||||
}
|
||||
|
||||
export {};
|
||||
+304
@@ -0,0 +1,304 @@
|
||||
<!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>
|
||||
+697
@@ -0,0 +1,697 @@
|
||||
{
|
||||
"graphId": "phase-4-example",
|
||||
"catalogVersion": 4,
|
||||
"nodes": [
|
||||
{
|
||||
"id": "frame",
|
||||
"typeId": "fxnode.common.frame",
|
||||
"typeVersion": 1,
|
||||
"position": {
|
||||
"x": -550,
|
||||
"y": 250
|
||||
},
|
||||
"size": {
|
||||
"x": 190,
|
||||
"y": 270
|
||||
},
|
||||
"label": "Surface Controls",
|
||||
"parameters": {},
|
||||
"sockets": [],
|
||||
"muted": false,
|
||||
"collapsed": false,
|
||||
"extensions": {},
|
||||
"known": true
|
||||
},
|
||||
{
|
||||
"id": "math",
|
||||
"typeId": "fxnode.shader.math",
|
||||
"typeVersion": 1,
|
||||
"position": {
|
||||
"x": -300,
|
||||
"y": 170
|
||||
},
|
||||
"size": {
|
||||
"x": 160,
|
||||
"y": 110
|
||||
},
|
||||
"label": "Math",
|
||||
"parameters": {
|
||||
"operation": {
|
||||
"kind": "string",
|
||||
"value": "add"
|
||||
},
|
||||
"clamp": {
|
||||
"kind": "boolean",
|
||||
"value": false
|
||||
}
|
||||
},
|
||||
"sockets": [
|
||||
{
|
||||
"id": "math:a",
|
||||
"key": "a",
|
||||
"label": "A",
|
||||
"direction": "input",
|
||||
"dataType": "float",
|
||||
"accepts": [
|
||||
"float",
|
||||
"any"
|
||||
],
|
||||
"maxIncomingLinks": 1,
|
||||
"visible": true,
|
||||
"defaultValue": {
|
||||
"kind": "number",
|
||||
"value": 0
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "math:b",
|
||||
"key": "b",
|
||||
"label": "B",
|
||||
"direction": "input",
|
||||
"dataType": "float",
|
||||
"accepts": [
|
||||
"float",
|
||||
"any"
|
||||
],
|
||||
"maxIncomingLinks": 1,
|
||||
"visible": true,
|
||||
"defaultValue": {
|
||||
"kind": "number",
|
||||
"value": 0
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "math:value",
|
||||
"key": "value",
|
||||
"label": "Value",
|
||||
"direction": "output",
|
||||
"dataType": "float",
|
||||
"accepts": [],
|
||||
"maxIncomingLinks": 0,
|
||||
"visible": true
|
||||
}
|
||||
],
|
||||
"muted": false,
|
||||
"collapsed": false,
|
||||
"extensions": {},
|
||||
"known": true
|
||||
},
|
||||
{
|
||||
"id": "noise",
|
||||
"typeId": "fxnode.shader.noise-texture",
|
||||
"typeVersion": 2,
|
||||
"position": {
|
||||
"x": -100,
|
||||
"y": 190
|
||||
},
|
||||
"size": {
|
||||
"x": 165,
|
||||
"y": 130
|
||||
},
|
||||
"label": "Noise Texture",
|
||||
"parameters": {
|
||||
"dimensions": {
|
||||
"kind": "string",
|
||||
"value": "3d"
|
||||
},
|
||||
"noiseType": {
|
||||
"kind": "string",
|
||||
"value": "fbm"
|
||||
},
|
||||
"normalize": {
|
||||
"kind": "boolean",
|
||||
"value": false
|
||||
}
|
||||
},
|
||||
"sockets": [
|
||||
{
|
||||
"id": "noise:vector",
|
||||
"key": "vector",
|
||||
"label": "Vector",
|
||||
"direction": "input",
|
||||
"dataType": "vector",
|
||||
"accepts": [
|
||||
"vector",
|
||||
"any"
|
||||
],
|
||||
"maxIncomingLinks": 1,
|
||||
"visible": true,
|
||||
"defaultValue": {
|
||||
"kind": "vector",
|
||||
"value": [
|
||||
0,
|
||||
0,
|
||||
0
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "noise:w",
|
||||
"key": "w",
|
||||
"label": "W",
|
||||
"direction": "input",
|
||||
"dataType": "float",
|
||||
"accepts": [
|
||||
"float",
|
||||
"any"
|
||||
],
|
||||
"maxIncomingLinks": 1,
|
||||
"visible": true,
|
||||
"defaultValue": {
|
||||
"kind": "number",
|
||||
"value": 0
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "noise:scale",
|
||||
"key": "scale",
|
||||
"label": "Scale",
|
||||
"direction": "input",
|
||||
"dataType": "float",
|
||||
"accepts": [
|
||||
"float",
|
||||
"any"
|
||||
],
|
||||
"maxIncomingLinks": 1,
|
||||
"visible": true,
|
||||
"defaultValue": {
|
||||
"kind": "number",
|
||||
"value": 5
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "noise:detail",
|
||||
"key": "detail",
|
||||
"label": "Detail",
|
||||
"direction": "input",
|
||||
"dataType": "float",
|
||||
"accepts": [
|
||||
"float",
|
||||
"any"
|
||||
],
|
||||
"maxIncomingLinks": 1,
|
||||
"visible": true,
|
||||
"defaultValue": {
|
||||
"kind": "number",
|
||||
"value": 2
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "noise:roughness",
|
||||
"key": "roughness",
|
||||
"label": "Roughness",
|
||||
"direction": "input",
|
||||
"dataType": "float",
|
||||
"accepts": [
|
||||
"float",
|
||||
"any"
|
||||
],
|
||||
"maxIncomingLinks": 1,
|
||||
"visible": true,
|
||||
"defaultValue": {
|
||||
"kind": "number",
|
||||
"value": 0.5
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "noise:lacunarity",
|
||||
"key": "lacunarity",
|
||||
"label": "Lacunarity",
|
||||
"direction": "input",
|
||||
"dataType": "float",
|
||||
"accepts": [
|
||||
"float",
|
||||
"any"
|
||||
],
|
||||
"maxIncomingLinks": 1,
|
||||
"visible": true,
|
||||
"defaultValue": {
|
||||
"kind": "number",
|
||||
"value": 2
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "noise:offset",
|
||||
"key": "offset",
|
||||
"label": "Offset",
|
||||
"direction": "input",
|
||||
"dataType": "float",
|
||||
"accepts": [
|
||||
"float",
|
||||
"any"
|
||||
],
|
||||
"maxIncomingLinks": 1,
|
||||
"visible": true,
|
||||
"defaultValue": {
|
||||
"kind": "number",
|
||||
"value": 0
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "noise:gain",
|
||||
"key": "gain",
|
||||
"label": "Gain",
|
||||
"direction": "input",
|
||||
"dataType": "float",
|
||||
"accepts": [
|
||||
"float",
|
||||
"any"
|
||||
],
|
||||
"maxIncomingLinks": 1,
|
||||
"visible": true,
|
||||
"defaultValue": {
|
||||
"kind": "number",
|
||||
"value": 1
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "noise:distortion",
|
||||
"key": "distortion",
|
||||
"label": "Distortion",
|
||||
"direction": "input",
|
||||
"dataType": "float",
|
||||
"accepts": [
|
||||
"float",
|
||||
"any"
|
||||
],
|
||||
"maxIncomingLinks": 1,
|
||||
"visible": true,
|
||||
"defaultValue": {
|
||||
"kind": "number",
|
||||
"value": 0
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "noise:factor",
|
||||
"key": "factor",
|
||||
"label": "Factor",
|
||||
"direction": "output",
|
||||
"dataType": "float",
|
||||
"accepts": [],
|
||||
"maxIncomingLinks": 0,
|
||||
"visible": true
|
||||
},
|
||||
{
|
||||
"id": "noise:color",
|
||||
"key": "color",
|
||||
"label": "Color",
|
||||
"direction": "output",
|
||||
"dataType": "color",
|
||||
"accepts": [],
|
||||
"maxIncomingLinks": 0,
|
||||
"visible": true
|
||||
}
|
||||
],
|
||||
"muted": false,
|
||||
"collapsed": false,
|
||||
"extensions": {},
|
||||
"known": true
|
||||
},
|
||||
{
|
||||
"id": "output",
|
||||
"typeId": "fxnode.shader.material-output",
|
||||
"typeVersion": 1,
|
||||
"position": {
|
||||
"x": 405,
|
||||
"y": 115
|
||||
},
|
||||
"size": {
|
||||
"x": 155,
|
||||
"y": 100
|
||||
},
|
||||
"label": "Material Output",
|
||||
"parameters": {},
|
||||
"sockets": [
|
||||
{
|
||||
"id": "output:surface",
|
||||
"key": "surface",
|
||||
"label": "Surface",
|
||||
"direction": "input",
|
||||
"dataType": "shader",
|
||||
"accepts": [
|
||||
"shader",
|
||||
"any"
|
||||
],
|
||||
"maxIncomingLinks": 1,
|
||||
"visible": true
|
||||
},
|
||||
{
|
||||
"id": "output:volume",
|
||||
"key": "volume",
|
||||
"label": "Volume",
|
||||
"direction": "input",
|
||||
"dataType": "shader",
|
||||
"accepts": [
|
||||
"shader",
|
||||
"any"
|
||||
],
|
||||
"maxIncomingLinks": 1,
|
||||
"visible": true
|
||||
},
|
||||
{
|
||||
"id": "output:displacement",
|
||||
"key": "displacement",
|
||||
"label": "Displacement",
|
||||
"direction": "input",
|
||||
"dataType": "vector",
|
||||
"accepts": [
|
||||
"vector",
|
||||
"any"
|
||||
],
|
||||
"maxIncomingLinks": 1,
|
||||
"visible": true,
|
||||
"defaultValue": {
|
||||
"kind": "vector",
|
||||
"value": [
|
||||
0,
|
||||
0,
|
||||
0
|
||||
]
|
||||
}
|
||||
}
|
||||
],
|
||||
"muted": false,
|
||||
"collapsed": false,
|
||||
"extensions": {},
|
||||
"known": true
|
||||
},
|
||||
{
|
||||
"id": "principled",
|
||||
"typeId": "fxnode.shader.principled-bsdf",
|
||||
"typeVersion": 1,
|
||||
"position": {
|
||||
"x": 165,
|
||||
"y": 175
|
||||
},
|
||||
"size": {
|
||||
"x": 185,
|
||||
"y": 125
|
||||
},
|
||||
"label": "Principled BSDF",
|
||||
"parameters": {},
|
||||
"sockets": [
|
||||
{
|
||||
"id": "principled:base-color",
|
||||
"key": "base-color",
|
||||
"label": "Base Color",
|
||||
"direction": "input",
|
||||
"dataType": "color",
|
||||
"accepts": [
|
||||
"color",
|
||||
"any"
|
||||
],
|
||||
"maxIncomingLinks": 1,
|
||||
"visible": true,
|
||||
"defaultValue": {
|
||||
"kind": "color",
|
||||
"value": [
|
||||
0.8,
|
||||
0.8,
|
||||
0.8,
|
||||
1
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "principled:metallic",
|
||||
"key": "metallic",
|
||||
"label": "Metallic",
|
||||
"direction": "input",
|
||||
"dataType": "float",
|
||||
"accepts": [
|
||||
"float",
|
||||
"any"
|
||||
],
|
||||
"maxIncomingLinks": 1,
|
||||
"visible": true,
|
||||
"defaultValue": {
|
||||
"kind": "number",
|
||||
"value": 0
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "principled:roughness",
|
||||
"key": "roughness",
|
||||
"label": "Roughness",
|
||||
"direction": "input",
|
||||
"dataType": "float",
|
||||
"accepts": [
|
||||
"float",
|
||||
"any"
|
||||
],
|
||||
"maxIncomingLinks": 1,
|
||||
"visible": true,
|
||||
"defaultValue": {
|
||||
"kind": "number",
|
||||
"value": 0.5
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "principled:ior",
|
||||
"key": "ior",
|
||||
"label": "IOR",
|
||||
"direction": "input",
|
||||
"dataType": "float",
|
||||
"accepts": [
|
||||
"float",
|
||||
"any"
|
||||
],
|
||||
"maxIncomingLinks": 1,
|
||||
"visible": true,
|
||||
"defaultValue": {
|
||||
"kind": "number",
|
||||
"value": 1.5
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "principled:alpha",
|
||||
"key": "alpha",
|
||||
"label": "Alpha",
|
||||
"direction": "input",
|
||||
"dataType": "float",
|
||||
"accepts": [
|
||||
"float",
|
||||
"any"
|
||||
],
|
||||
"maxIncomingLinks": 1,
|
||||
"visible": true,
|
||||
"defaultValue": {
|
||||
"kind": "number",
|
||||
"value": 1
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "principled:normal",
|
||||
"key": "normal",
|
||||
"label": "Normal",
|
||||
"direction": "input",
|
||||
"dataType": "vector",
|
||||
"accepts": [
|
||||
"vector",
|
||||
"any"
|
||||
],
|
||||
"maxIncomingLinks": 1,
|
||||
"visible": true,
|
||||
"defaultValue": {
|
||||
"kind": "vector",
|
||||
"value": [
|
||||
0,
|
||||
0,
|
||||
0
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "principled:bsdf",
|
||||
"key": "bsdf",
|
||||
"label": "BSDF",
|
||||
"direction": "output",
|
||||
"dataType": "shader",
|
||||
"accepts": [],
|
||||
"maxIncomingLinks": 0,
|
||||
"visible": true
|
||||
}
|
||||
],
|
||||
"muted": false,
|
||||
"collapsed": false,
|
||||
"extensions": {},
|
||||
"known": true
|
||||
},
|
||||
{
|
||||
"id": "reroute",
|
||||
"typeId": "fxnode.common.reroute",
|
||||
"typeVersion": 1,
|
||||
"position": {
|
||||
"x": 105,
|
||||
"y": 55
|
||||
},
|
||||
"size": {
|
||||
"x": 140,
|
||||
"y": 100
|
||||
},
|
||||
"label": "Reroute",
|
||||
"parameters": {},
|
||||
"sockets": [
|
||||
{
|
||||
"id": "reroute:input",
|
||||
"key": "input",
|
||||
"label": "Input",
|
||||
"direction": "input",
|
||||
"dataType": "any",
|
||||
"accepts": [
|
||||
"any"
|
||||
],
|
||||
"maxIncomingLinks": 1,
|
||||
"visible": true
|
||||
},
|
||||
{
|
||||
"id": "reroute:output",
|
||||
"key": "output",
|
||||
"label": "Output",
|
||||
"direction": "output",
|
||||
"dataType": "any",
|
||||
"accepts": [],
|
||||
"maxIncomingLinks": 0,
|
||||
"visible": true
|
||||
}
|
||||
],
|
||||
"muted": false,
|
||||
"collapsed": false,
|
||||
"extensions": {},
|
||||
"known": true
|
||||
},
|
||||
{
|
||||
"id": "value-collapsed",
|
||||
"typeId": "fxnode.shader.value",
|
||||
"typeVersion": 1,
|
||||
"position": {
|
||||
"x": 30,
|
||||
"y": -175
|
||||
},
|
||||
"size": {
|
||||
"x": 140,
|
||||
"y": 100
|
||||
},
|
||||
"label": "Value",
|
||||
"parameters": {
|
||||
"value": {
|
||||
"kind": "number",
|
||||
"value": 0
|
||||
}
|
||||
},
|
||||
"sockets": [
|
||||
{
|
||||
"id": "value-collapsed:value",
|
||||
"key": "value",
|
||||
"label": "Value",
|
||||
"direction": "output",
|
||||
"dataType": "float",
|
||||
"accepts": [],
|
||||
"maxIncomingLinks": 0,
|
||||
"visible": true
|
||||
}
|
||||
],
|
||||
"muted": false,
|
||||
"collapsed": true,
|
||||
"extensions": {},
|
||||
"parentId": "frame",
|
||||
"known": true
|
||||
},
|
||||
{
|
||||
"id": "value-expanded",
|
||||
"typeId": "fxnode.shader.value",
|
||||
"typeVersion": 1,
|
||||
"position": {
|
||||
"x": 30,
|
||||
"y": -55
|
||||
},
|
||||
"size": {
|
||||
"x": 140,
|
||||
"y": 100
|
||||
},
|
||||
"label": "Value",
|
||||
"parameters": {
|
||||
"value": {
|
||||
"kind": "number",
|
||||
"value": 0
|
||||
}
|
||||
},
|
||||
"sockets": [
|
||||
{
|
||||
"id": "value-expanded:value",
|
||||
"key": "value",
|
||||
"label": "Value",
|
||||
"direction": "output",
|
||||
"dataType": "float",
|
||||
"accepts": [],
|
||||
"maxIncomingLinks": 0,
|
||||
"visible": true
|
||||
}
|
||||
],
|
||||
"muted": false,
|
||||
"collapsed": false,
|
||||
"extensions": {},
|
||||
"parentId": "frame",
|
||||
"known": true
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
"id": "link-1",
|
||||
"fromNodeId": "value-expanded",
|
||||
"fromSocketId": "value-expanded:value",
|
||||
"toNodeId": "math",
|
||||
"toSocketId": "math:a",
|
||||
"muted": false,
|
||||
"extensions": {}
|
||||
},
|
||||
{
|
||||
"id": "link-2",
|
||||
"fromNodeId": "value-collapsed",
|
||||
"fromSocketId": "value-collapsed:value",
|
||||
"toNodeId": "math",
|
||||
"toSocketId": "math:b",
|
||||
"muted": false,
|
||||
"extensions": {}
|
||||
},
|
||||
{
|
||||
"id": "link-3",
|
||||
"fromNodeId": "math",
|
||||
"fromSocketId": "math:value",
|
||||
"toNodeId": "noise",
|
||||
"toSocketId": "noise:scale",
|
||||
"muted": false,
|
||||
"extensions": {}
|
||||
},
|
||||
{
|
||||
"id": "link-4",
|
||||
"fromNodeId": "noise",
|
||||
"fromSocketId": "noise:factor",
|
||||
"toNodeId": "reroute",
|
||||
"toSocketId": "reroute:input",
|
||||
"muted": false,
|
||||
"extensions": {}
|
||||
},
|
||||
{
|
||||
"id": "link-5",
|
||||
"fromNodeId": "reroute",
|
||||
"fromSocketId": "reroute:output",
|
||||
"toNodeId": "principled",
|
||||
"toSocketId": "principled:roughness",
|
||||
"muted": false,
|
||||
"extensions": {}
|
||||
},
|
||||
{
|
||||
"id": "link-6",
|
||||
"fromNodeId": "principled",
|
||||
"fromSocketId": "principled:bsdf",
|
||||
"toNodeId": "output",
|
||||
"toSocketId": "output:surface",
|
||||
"muted": false,
|
||||
"extensions": {}
|
||||
}
|
||||
],
|
||||
"metadata": {
|
||||
"description": "Deterministic fxnode browser baseline"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>FxNode link tools test</title>
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
background: #111;
|
||||
}
|
||||
canvas {
|
||||
display: block;
|
||||
width: 1200px;
|
||||
height: 640px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="link-tools"></canvas>
|
||||
<script type="module" src="./main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,855 @@
|
||||
{
|
||||
"graphId": "link-tools-test",
|
||||
"catalogVersion": 4,
|
||||
"nodes": [
|
||||
{
|
||||
"id": "chain-math",
|
||||
"typeId": "fxnode.shader.math",
|
||||
"typeVersion": 1,
|
||||
"known": true,
|
||||
"position": {
|
||||
"x": 260,
|
||||
"y": -100
|
||||
},
|
||||
"size": {
|
||||
"x": 192,
|
||||
"y": 148
|
||||
},
|
||||
"label": "Math",
|
||||
"parameters": {
|
||||
"operation": {
|
||||
"kind": "string",
|
||||
"value": "add"
|
||||
},
|
||||
"clamp": {
|
||||
"kind": "boolean",
|
||||
"value": false
|
||||
}
|
||||
},
|
||||
"sockets": [
|
||||
{
|
||||
"id": "chain-math:a",
|
||||
"key": "a",
|
||||
"label": "A",
|
||||
"direction": "input",
|
||||
"dataType": "float",
|
||||
"accepts": [
|
||||
"float",
|
||||
"any"
|
||||
],
|
||||
"maxIncomingLinks": 1,
|
||||
"visible": true,
|
||||
"defaultValue": {
|
||||
"kind": "number",
|
||||
"value": 0
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "chain-math:b",
|
||||
"key": "b",
|
||||
"label": "B",
|
||||
"direction": "input",
|
||||
"dataType": "float",
|
||||
"accepts": [
|
||||
"float",
|
||||
"any"
|
||||
],
|
||||
"maxIncomingLinks": 1,
|
||||
"visible": true,
|
||||
"defaultValue": {
|
||||
"kind": "number",
|
||||
"value": 0
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "chain-math:value",
|
||||
"key": "value",
|
||||
"label": "Value",
|
||||
"direction": "output",
|
||||
"dataType": "float",
|
||||
"accepts": [],
|
||||
"maxIncomingLinks": 0,
|
||||
"visible": true
|
||||
}
|
||||
],
|
||||
"muted": false,
|
||||
"collapsed": false,
|
||||
"extensions": {}
|
||||
},
|
||||
{
|
||||
"id": "chain-source",
|
||||
"typeId": "fxnode.shader.value",
|
||||
"typeVersion": 1,
|
||||
"known": true,
|
||||
"position": {
|
||||
"x": -560,
|
||||
"y": -100
|
||||
},
|
||||
"size": {
|
||||
"x": 151,
|
||||
"y": 100
|
||||
},
|
||||
"label": "Value",
|
||||
"parameters": {
|
||||
"value": {
|
||||
"kind": "number",
|
||||
"value": 0
|
||||
}
|
||||
},
|
||||
"sockets": [
|
||||
{
|
||||
"id": "chain-source:value",
|
||||
"key": "value",
|
||||
"label": "Value",
|
||||
"direction": "output",
|
||||
"dataType": "float",
|
||||
"accepts": [],
|
||||
"maxIncomingLinks": 0,
|
||||
"visible": true
|
||||
}
|
||||
],
|
||||
"muted": false,
|
||||
"collapsed": false,
|
||||
"extensions": {}
|
||||
},
|
||||
{
|
||||
"id": "math-a",
|
||||
"typeId": "fxnode.shader.math",
|
||||
"typeVersion": 1,
|
||||
"known": true,
|
||||
"position": {
|
||||
"x": 180,
|
||||
"y": 240
|
||||
},
|
||||
"size": {
|
||||
"x": 192,
|
||||
"y": 148
|
||||
},
|
||||
"label": "Math",
|
||||
"parameters": {
|
||||
"operation": {
|
||||
"kind": "string",
|
||||
"value": "add"
|
||||
},
|
||||
"clamp": {
|
||||
"kind": "boolean",
|
||||
"value": false
|
||||
}
|
||||
},
|
||||
"sockets": [
|
||||
{
|
||||
"id": "math-a:a",
|
||||
"key": "a",
|
||||
"label": "A",
|
||||
"direction": "input",
|
||||
"dataType": "float",
|
||||
"accepts": [
|
||||
"float",
|
||||
"any"
|
||||
],
|
||||
"maxIncomingLinks": 1,
|
||||
"visible": true,
|
||||
"defaultValue": {
|
||||
"kind": "number",
|
||||
"value": 0
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "math-a:b",
|
||||
"key": "b",
|
||||
"label": "B",
|
||||
"direction": "input",
|
||||
"dataType": "float",
|
||||
"accepts": [
|
||||
"float",
|
||||
"any"
|
||||
],
|
||||
"maxIncomingLinks": 1,
|
||||
"visible": true,
|
||||
"defaultValue": {
|
||||
"kind": "number",
|
||||
"value": 0
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "math-a:value",
|
||||
"key": "value",
|
||||
"label": "Value",
|
||||
"direction": "output",
|
||||
"dataType": "float",
|
||||
"accepts": [],
|
||||
"maxIncomingLinks": 0,
|
||||
"visible": true
|
||||
}
|
||||
],
|
||||
"muted": false,
|
||||
"collapsed": false,
|
||||
"extensions": {}
|
||||
},
|
||||
{
|
||||
"id": "math-b",
|
||||
"typeId": "fxnode.shader.math",
|
||||
"typeVersion": 1,
|
||||
"known": true,
|
||||
"position": {
|
||||
"x": 180,
|
||||
"y": 120
|
||||
},
|
||||
"size": {
|
||||
"x": 192,
|
||||
"y": 148
|
||||
},
|
||||
"label": "Math",
|
||||
"parameters": {
|
||||
"operation": {
|
||||
"kind": "string",
|
||||
"value": "add"
|
||||
},
|
||||
"clamp": {
|
||||
"kind": "boolean",
|
||||
"value": false
|
||||
}
|
||||
},
|
||||
"sockets": [
|
||||
{
|
||||
"id": "math-b:a",
|
||||
"key": "a",
|
||||
"label": "A",
|
||||
"direction": "input",
|
||||
"dataType": "float",
|
||||
"accepts": [
|
||||
"float",
|
||||
"any"
|
||||
],
|
||||
"maxIncomingLinks": 1,
|
||||
"visible": true,
|
||||
"defaultValue": {
|
||||
"kind": "number",
|
||||
"value": 0
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "math-b:b",
|
||||
"key": "b",
|
||||
"label": "B",
|
||||
"direction": "input",
|
||||
"dataType": "float",
|
||||
"accepts": [
|
||||
"float",
|
||||
"any"
|
||||
],
|
||||
"maxIncomingLinks": 1,
|
||||
"visible": true,
|
||||
"defaultValue": {
|
||||
"kind": "number",
|
||||
"value": 0
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "math-b:value",
|
||||
"key": "value",
|
||||
"label": "Value",
|
||||
"direction": "output",
|
||||
"dataType": "float",
|
||||
"accepts": [],
|
||||
"maxIncomingLinks": 0,
|
||||
"visible": true
|
||||
}
|
||||
],
|
||||
"muted": false,
|
||||
"collapsed": false,
|
||||
"extensions": {}
|
||||
},
|
||||
{
|
||||
"id": "math-c",
|
||||
"typeId": "fxnode.shader.math",
|
||||
"typeVersion": 1,
|
||||
"known": true,
|
||||
"position": {
|
||||
"x": 180,
|
||||
"y": 0
|
||||
},
|
||||
"size": {
|
||||
"x": 192,
|
||||
"y": 148
|
||||
},
|
||||
"label": "Math",
|
||||
"parameters": {
|
||||
"operation": {
|
||||
"kind": "string",
|
||||
"value": "add"
|
||||
},
|
||||
"clamp": {
|
||||
"kind": "boolean",
|
||||
"value": false
|
||||
}
|
||||
},
|
||||
"sockets": [
|
||||
{
|
||||
"id": "math-c:a",
|
||||
"key": "a",
|
||||
"label": "A",
|
||||
"direction": "input",
|
||||
"dataType": "float",
|
||||
"accepts": [
|
||||
"float",
|
||||
"any"
|
||||
],
|
||||
"maxIncomingLinks": 1,
|
||||
"visible": true,
|
||||
"defaultValue": {
|
||||
"kind": "number",
|
||||
"value": 0
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "math-c:b",
|
||||
"key": "b",
|
||||
"label": "B",
|
||||
"direction": "input",
|
||||
"dataType": "float",
|
||||
"accepts": [
|
||||
"float",
|
||||
"any"
|
||||
],
|
||||
"maxIncomingLinks": 1,
|
||||
"visible": true,
|
||||
"defaultValue": {
|
||||
"kind": "number",
|
||||
"value": 0
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "math-c:value",
|
||||
"key": "value",
|
||||
"label": "Value",
|
||||
"direction": "output",
|
||||
"dataType": "float",
|
||||
"accepts": [],
|
||||
"maxIncomingLinks": 0,
|
||||
"visible": true
|
||||
}
|
||||
],
|
||||
"muted": false,
|
||||
"collapsed": false,
|
||||
"extensions": {}
|
||||
},
|
||||
{
|
||||
"id": "noise",
|
||||
"typeId": "fxnode.shader.noise-texture",
|
||||
"typeVersion": 2,
|
||||
"known": true,
|
||||
"position": {
|
||||
"x": 180,
|
||||
"y": -230
|
||||
},
|
||||
"size": {
|
||||
"x": 286,
|
||||
"y": 292
|
||||
},
|
||||
"label": "Noise Texture",
|
||||
"parameters": {
|
||||
"dimensions": {
|
||||
"kind": "string",
|
||||
"value": "3d"
|
||||
},
|
||||
"noiseType": {
|
||||
"kind": "string",
|
||||
"value": "fbm"
|
||||
},
|
||||
"normalize": {
|
||||
"kind": "boolean",
|
||||
"value": false
|
||||
}
|
||||
},
|
||||
"sockets": [
|
||||
{
|
||||
"id": "noise:vector",
|
||||
"key": "vector",
|
||||
"label": "Vector",
|
||||
"direction": "input",
|
||||
"dataType": "vector",
|
||||
"accepts": [
|
||||
"vector",
|
||||
"any"
|
||||
],
|
||||
"maxIncomingLinks": 1,
|
||||
"visible": true,
|
||||
"defaultValue": {
|
||||
"kind": "vector",
|
||||
"value": [
|
||||
0,
|
||||
0,
|
||||
0
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "noise:w",
|
||||
"key": "w",
|
||||
"label": "W",
|
||||
"direction": "input",
|
||||
"dataType": "float",
|
||||
"accepts": [
|
||||
"float",
|
||||
"any"
|
||||
],
|
||||
"maxIncomingLinks": 1,
|
||||
"visible": true,
|
||||
"defaultValue": {
|
||||
"kind": "number",
|
||||
"value": 0
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "noise:scale",
|
||||
"key": "scale",
|
||||
"label": "Scale",
|
||||
"direction": "input",
|
||||
"dataType": "float",
|
||||
"accepts": [
|
||||
"float",
|
||||
"any"
|
||||
],
|
||||
"maxIncomingLinks": 1,
|
||||
"visible": true,
|
||||
"defaultValue": {
|
||||
"kind": "number",
|
||||
"value": 5
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "noise:detail",
|
||||
"key": "detail",
|
||||
"label": "Detail",
|
||||
"direction": "input",
|
||||
"dataType": "float",
|
||||
"accepts": [
|
||||
"float",
|
||||
"any"
|
||||
],
|
||||
"maxIncomingLinks": 1,
|
||||
"visible": true,
|
||||
"defaultValue": {
|
||||
"kind": "number",
|
||||
"value": 2
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "noise:roughness",
|
||||
"key": "roughness",
|
||||
"label": "Roughness",
|
||||
"direction": "input",
|
||||
"dataType": "float",
|
||||
"accepts": [
|
||||
"float",
|
||||
"any"
|
||||
],
|
||||
"maxIncomingLinks": 1,
|
||||
"visible": true,
|
||||
"defaultValue": {
|
||||
"kind": "number",
|
||||
"value": 0.5
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "noise:lacunarity",
|
||||
"key": "lacunarity",
|
||||
"label": "Lacunarity",
|
||||
"direction": "input",
|
||||
"dataType": "float",
|
||||
"accepts": [
|
||||
"float",
|
||||
"any"
|
||||
],
|
||||
"maxIncomingLinks": 1,
|
||||
"visible": true,
|
||||
"defaultValue": {
|
||||
"kind": "number",
|
||||
"value": 2
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "noise:offset",
|
||||
"key": "offset",
|
||||
"label": "Offset",
|
||||
"direction": "input",
|
||||
"dataType": "float",
|
||||
"accepts": [
|
||||
"float",
|
||||
"any"
|
||||
],
|
||||
"maxIncomingLinks": 1,
|
||||
"visible": true,
|
||||
"defaultValue": {
|
||||
"kind": "number",
|
||||
"value": 0
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "noise:gain",
|
||||
"key": "gain",
|
||||
"label": "Gain",
|
||||
"direction": "input",
|
||||
"dataType": "float",
|
||||
"accepts": [
|
||||
"float",
|
||||
"any"
|
||||
],
|
||||
"maxIncomingLinks": 1,
|
||||
"visible": true,
|
||||
"defaultValue": {
|
||||
"kind": "number",
|
||||
"value": 1
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "noise:distortion",
|
||||
"key": "distortion",
|
||||
"label": "Distortion",
|
||||
"direction": "input",
|
||||
"dataType": "float",
|
||||
"accepts": [
|
||||
"float",
|
||||
"any"
|
||||
],
|
||||
"maxIncomingLinks": 1,
|
||||
"visible": true,
|
||||
"defaultValue": {
|
||||
"kind": "number",
|
||||
"value": 0
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "noise:factor",
|
||||
"key": "factor",
|
||||
"label": "Factor",
|
||||
"direction": "output",
|
||||
"dataType": "float",
|
||||
"accepts": [],
|
||||
"maxIncomingLinks": 0,
|
||||
"visible": true
|
||||
},
|
||||
{
|
||||
"id": "noise:color",
|
||||
"key": "color",
|
||||
"label": "Color",
|
||||
"direction": "output",
|
||||
"dataType": "color",
|
||||
"accepts": [],
|
||||
"maxIncomingLinks": 0,
|
||||
"visible": true
|
||||
}
|
||||
],
|
||||
"muted": false,
|
||||
"collapsed": false,
|
||||
"extensions": {}
|
||||
},
|
||||
{
|
||||
"id": "reroute",
|
||||
"typeId": "fxnode.common.reroute",
|
||||
"typeVersion": 1,
|
||||
"known": true,
|
||||
"position": {
|
||||
"x": 0,
|
||||
"y": -100
|
||||
},
|
||||
"size": {
|
||||
"x": 10,
|
||||
"y": 10
|
||||
},
|
||||
"label": "Reroute",
|
||||
"parameters": {},
|
||||
"sockets": [
|
||||
{
|
||||
"id": "reroute:input",
|
||||
"key": "input",
|
||||
"label": "Input",
|
||||
"direction": "input",
|
||||
"dataType": "any",
|
||||
"accepts": [
|
||||
"any"
|
||||
],
|
||||
"maxIncomingLinks": 1,
|
||||
"visible": true
|
||||
},
|
||||
{
|
||||
"id": "reroute:output",
|
||||
"key": "output",
|
||||
"label": "Output",
|
||||
"direction": "output",
|
||||
"dataType": "any",
|
||||
"accepts": [],
|
||||
"maxIncomingLinks": 0,
|
||||
"visible": true
|
||||
}
|
||||
],
|
||||
"muted": false,
|
||||
"collapsed": false,
|
||||
"extensions": {}
|
||||
},
|
||||
{
|
||||
"id": "source-a",
|
||||
"typeId": "fxnode.shader.value",
|
||||
"typeVersion": 1,
|
||||
"known": true,
|
||||
"position": {
|
||||
"x": -560,
|
||||
"y": 240
|
||||
},
|
||||
"size": {
|
||||
"x": 151,
|
||||
"y": 100
|
||||
},
|
||||
"label": "Value",
|
||||
"parameters": {
|
||||
"value": {
|
||||
"kind": "number",
|
||||
"value": 0
|
||||
}
|
||||
},
|
||||
"sockets": [
|
||||
{
|
||||
"id": "source-a:value",
|
||||
"key": "value",
|
||||
"label": "Value",
|
||||
"direction": "output",
|
||||
"dataType": "float",
|
||||
"accepts": [],
|
||||
"maxIncomingLinks": 0,
|
||||
"visible": true
|
||||
}
|
||||
],
|
||||
"muted": false,
|
||||
"collapsed": false,
|
||||
"extensions": {}
|
||||
},
|
||||
{
|
||||
"id": "source-b",
|
||||
"typeId": "fxnode.shader.value",
|
||||
"typeVersion": 1,
|
||||
"known": true,
|
||||
"position": {
|
||||
"x": -560,
|
||||
"y": 120
|
||||
},
|
||||
"size": {
|
||||
"x": 151,
|
||||
"y": 100
|
||||
},
|
||||
"label": "Value",
|
||||
"parameters": {
|
||||
"value": {
|
||||
"kind": "number",
|
||||
"value": 0
|
||||
}
|
||||
},
|
||||
"sockets": [
|
||||
{
|
||||
"id": "source-b:value",
|
||||
"key": "value",
|
||||
"label": "Value",
|
||||
"direction": "output",
|
||||
"dataType": "float",
|
||||
"accepts": [],
|
||||
"maxIncomingLinks": 0,
|
||||
"visible": true
|
||||
}
|
||||
],
|
||||
"muted": false,
|
||||
"collapsed": false,
|
||||
"extensions": {}
|
||||
},
|
||||
{
|
||||
"id": "source-c",
|
||||
"typeId": "fxnode.shader.value",
|
||||
"typeVersion": 1,
|
||||
"known": true,
|
||||
"position": {
|
||||
"x": -560,
|
||||
"y": 0
|
||||
},
|
||||
"size": {
|
||||
"x": 151,
|
||||
"y": 100
|
||||
},
|
||||
"label": "Value",
|
||||
"parameters": {
|
||||
"value": {
|
||||
"kind": "number",
|
||||
"value": 0
|
||||
}
|
||||
},
|
||||
"sockets": [
|
||||
{
|
||||
"id": "source-c:value",
|
||||
"key": "value",
|
||||
"label": "Value",
|
||||
"direction": "output",
|
||||
"dataType": "float",
|
||||
"accepts": [],
|
||||
"maxIncomingLinks": 0,
|
||||
"visible": true
|
||||
}
|
||||
],
|
||||
"muted": false,
|
||||
"collapsed": false,
|
||||
"extensions": {}
|
||||
},
|
||||
{
|
||||
"id": "transform",
|
||||
"typeId": "fxnode.geometry.transform-geometry",
|
||||
"typeVersion": 1,
|
||||
"known": true,
|
||||
"position": {
|
||||
"x": -300,
|
||||
"y": -230
|
||||
},
|
||||
"size": {
|
||||
"x": 340,
|
||||
"y": 148
|
||||
},
|
||||
"label": "Transform Geometry",
|
||||
"parameters": {},
|
||||
"sockets": [
|
||||
{
|
||||
"id": "transform:geometry",
|
||||
"key": "geometry",
|
||||
"label": "Geometry",
|
||||
"direction": "input",
|
||||
"dataType": "geometry",
|
||||
"accepts": [
|
||||
"geometry",
|
||||
"any"
|
||||
],
|
||||
"maxIncomingLinks": 1,
|
||||
"visible": true
|
||||
},
|
||||
{
|
||||
"id": "transform:translation",
|
||||
"key": "translation",
|
||||
"label": "Translation",
|
||||
"direction": "input",
|
||||
"dataType": "vector",
|
||||
"accepts": [
|
||||
"vector",
|
||||
"any"
|
||||
],
|
||||
"maxIncomingLinks": 1,
|
||||
"visible": true,
|
||||
"defaultValue": {
|
||||
"kind": "vector",
|
||||
"value": [
|
||||
0,
|
||||
0,
|
||||
0
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "transform:rotation",
|
||||
"key": "rotation",
|
||||
"label": "Rotation",
|
||||
"direction": "input",
|
||||
"dataType": "vector",
|
||||
"accepts": [
|
||||
"vector",
|
||||
"any"
|
||||
],
|
||||
"maxIncomingLinks": 1,
|
||||
"visible": true,
|
||||
"defaultValue": {
|
||||
"kind": "vector",
|
||||
"value": [
|
||||
0,
|
||||
0,
|
||||
0
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "transform:scale",
|
||||
"key": "scale",
|
||||
"label": "Scale",
|
||||
"direction": "input",
|
||||
"dataType": "vector",
|
||||
"accepts": [
|
||||
"vector",
|
||||
"any"
|
||||
],
|
||||
"maxIncomingLinks": 1,
|
||||
"visible": true,
|
||||
"defaultValue": {
|
||||
"kind": "vector",
|
||||
"value": [
|
||||
1,
|
||||
1,
|
||||
1
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "transform:result",
|
||||
"key": "result",
|
||||
"label": "Geometry",
|
||||
"direction": "output",
|
||||
"dataType": "geometry",
|
||||
"accepts": [],
|
||||
"maxIncomingLinks": 0,
|
||||
"visible": true
|
||||
}
|
||||
],
|
||||
"muted": false,
|
||||
"collapsed": false,
|
||||
"extensions": {}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
"id": "chain-in",
|
||||
"fromNodeId": "chain-source",
|
||||
"fromSocketId": "chain-source:value",
|
||||
"toNodeId": "reroute",
|
||||
"toSocketId": "reroute:input",
|
||||
"muted": false,
|
||||
"extensions": {}
|
||||
},
|
||||
{
|
||||
"id": "chain-out",
|
||||
"fromNodeId": "reroute",
|
||||
"fromSocketId": "reroute:output",
|
||||
"toNodeId": "chain-math",
|
||||
"toSocketId": "chain-math:a",
|
||||
"muted": false,
|
||||
"extensions": {}
|
||||
},
|
||||
{
|
||||
"id": "parallel-a",
|
||||
"fromNodeId": "source-a",
|
||||
"fromSocketId": "source-a:value",
|
||||
"toNodeId": "math-a",
|
||||
"toSocketId": "math-a:a",
|
||||
"muted": false,
|
||||
"extensions": {}
|
||||
},
|
||||
{
|
||||
"id": "parallel-b",
|
||||
"fromNodeId": "source-b",
|
||||
"fromSocketId": "source-b:value",
|
||||
"toNodeId": "math-b",
|
||||
"toSocketId": "math-b:a",
|
||||
"muted": false,
|
||||
"extensions": {}
|
||||
},
|
||||
{
|
||||
"id": "parallel-c",
|
||||
"fromNodeId": "source-c",
|
||||
"fromSocketId": "source-c:value",
|
||||
"toNodeId": "math-c",
|
||||
"toSocketId": "math-c:a",
|
||||
"muted": false,
|
||||
"extensions": {}
|
||||
}
|
||||
],
|
||||
"metadata": {}
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
import { createApplicationFxNode, type ApplicationFxNode } from "../application-browser.js";
|
||||
import type { FxNodeView } from "@lib/index.js";
|
||||
import { prepareFxNodeBrowserHost } from "../../shared/browser-host.js";
|
||||
import initialLayout from "./initialLayout.json" with { type: "json" };
|
||||
const canvas = document.querySelector<HTMLCanvasElement>("#link-tools");
|
||||
if (!canvas) throw new Error("Link tools test canvas missing");
|
||||
const host = prepareFxNodeBrowserHost({ canvas });
|
||||
const handle: { root: ApplicationFxNode | null; view: FxNodeView | null; ready: Promise<void> } = {
|
||||
root: null,
|
||||
view: null,
|
||||
ready: Promise.resolve(),
|
||||
};
|
||||
window.linkToolsTest = handle;
|
||||
handle.ready = (async () => {
|
||||
let root: ApplicationFxNode | undefined, view: FxNodeView | undefined;
|
||||
try {
|
||||
root = await createApplicationFxNode();
|
||||
await root.setState(initialLayout);
|
||||
view = await root.attachView({ canvas, viewport: host.initialViewport });
|
||||
handle.root = root;
|
||||
handle.view = view;
|
||||
host.attach(root, view);
|
||||
await view.whenRendered();
|
||||
} catch (error) {
|
||||
host.destroy();
|
||||
await view?.detach();
|
||||
root?.destroy();
|
||||
throw error;
|
||||
}
|
||||
})();
|
||||
+35
@@ -0,0 +1,35 @@
|
||||
import { createApplicationFxNode } from "./application-browser.js";
|
||||
import { prepareFxNodeBrowserHost } from "../shared/browser-host.js";
|
||||
import initialLayout from "./initialLayout.json" with { type: "json" };
|
||||
|
||||
const canvas = document.querySelector<HTMLCanvasElement>("#graph");
|
||||
const addNodeMenuTemplate = document.querySelector<HTMLTemplateElement>("#add-node-menu-template");
|
||||
if (!canvas || !addNodeMenuTemplate) throw new Error("Example canvas or add-node menu template is missing");
|
||||
const host = prepareFxNodeBrowserHost({ canvas, addNodeMenuTemplate });
|
||||
|
||||
let resolveRendered!: () => void;
|
||||
const rendered = new Promise<void>((resolve) => {
|
||||
resolveRendered = resolve;
|
||||
});
|
||||
const handle: FxNodeExampleHandle = { root: null, view: null, host, ready: Promise.resolve(), rendered };
|
||||
window.fxnodeExample = handle;
|
||||
|
||||
handle.ready = (async () => {
|
||||
let root: Awaited<ReturnType<typeof createApplicationFxNode>> | undefined,
|
||||
view: Awaited<ReturnType<NonNullable<typeof root>["attachView"]>> | undefined;
|
||||
try {
|
||||
root = await createApplicationFxNode();
|
||||
await root.setState(initialLayout);
|
||||
view = await root.attachView({ canvas, viewport: host.initialViewport });
|
||||
handle.root = root;
|
||||
handle.view = view;
|
||||
host.attach(root, view);
|
||||
await view.whenRendered();
|
||||
resolveRendered();
|
||||
} catch (error) {
|
||||
host.destroy();
|
||||
await view?.detach();
|
||||
root?.destroy();
|
||||
throw error;
|
||||
}
|
||||
})();
|
||||
@@ -0,0 +1,49 @@
|
||||
/** Shared constants for the example application composition. */
|
||||
import type { FxNodeCompositionData } from "@lib/composition/index.js";
|
||||
export const applicationCompatibility = {
|
||||
wildcardInputTypes: ["any"],
|
||||
} as const satisfies FxNodeCompositionData["compatibility"];
|
||||
export const APPLICATION_ID = "fxnode.example.application";
|
||||
export const APPLICATION_VERSION = 4;
|
||||
export const APPLICATION_HEADER_STYLES = {
|
||||
input: {
|
||||
header: "#8b3f72",
|
||||
},
|
||||
converter: {
|
||||
header: "#4f5964",
|
||||
},
|
||||
texture: {
|
||||
header: "#a36b34",
|
||||
},
|
||||
shader: {
|
||||
header: "#3b7551",
|
||||
},
|
||||
output: {
|
||||
header: "#963d3d",
|
||||
},
|
||||
geometry: {
|
||||
header: "#2c7a75",
|
||||
},
|
||||
common: {
|
||||
header: "#555b64",
|
||||
},
|
||||
compositorInput: {
|
||||
header: "#8b3f72",
|
||||
},
|
||||
compositorColor: {
|
||||
header: "#4f5964",
|
||||
},
|
||||
} as const satisfies FxNodeCompositionData["nodeStyles"];
|
||||
export const APPLICATION_RESOURCES = {
|
||||
legacyImage: {
|
||||
kind: "image",
|
||||
title: "Image",
|
||||
openTitle: "Open",
|
||||
accept: ["image/*"],
|
||||
referencePrefix: "fxnode-local-image:",
|
||||
maxBytes: 33554432,
|
||||
maxWidth: 8192,
|
||||
maxHeight: 8192,
|
||||
maxPixels: 16777216,
|
||||
},
|
||||
} as const satisfies FxNodeCompositionData["resources"];
|
||||
@@ -0,0 +1,15 @@
|
||||
import type { FxNodeDefinition } from "@lib/composition/index.js";
|
||||
export const frameNode = [
|
||||
"fxnode.common.frame",
|
||||
{
|
||||
version: 1,
|
||||
title: "Frame",
|
||||
behavior: "frame",
|
||||
style: "common",
|
||||
parameters: {},
|
||||
sockets: {},
|
||||
ui: [],
|
||||
muteBypass: [],
|
||||
migrations: [],
|
||||
},
|
||||
] as const satisfies readonly [string, FxNodeDefinition];
|
||||
@@ -0,0 +1,42 @@
|
||||
import type { FxNodeDefinition } from "@lib/composition/index.js";
|
||||
export const groupInputNode = [
|
||||
"fxnode.common.group-input",
|
||||
{
|
||||
version: 1,
|
||||
title: "Group Input",
|
||||
behavior: "standard",
|
||||
style: "input",
|
||||
parameters: {
|
||||
interfaceName: {
|
||||
type: "string",
|
||||
default: {
|
||||
kind: "string",
|
||||
value: "Socket",
|
||||
},
|
||||
},
|
||||
},
|
||||
sockets: {
|
||||
output: {
|
||||
title: "Interface",
|
||||
direction: "output",
|
||||
type: "any",
|
||||
maxIncomingLinks: 0,
|
||||
visible: true,
|
||||
value: null,
|
||||
showValue: false,
|
||||
},
|
||||
},
|
||||
ui: [
|
||||
{
|
||||
kind: "parameter",
|
||||
parameter: "interfaceName",
|
||||
},
|
||||
{
|
||||
kind: "socket",
|
||||
socket: "output",
|
||||
},
|
||||
],
|
||||
muteBypass: [],
|
||||
migrations: [],
|
||||
},
|
||||
] as const satisfies readonly [string, FxNodeDefinition];
|
||||
@@ -0,0 +1,42 @@
|
||||
import type { FxNodeDefinition } from "@lib/composition/index.js";
|
||||
export const groupOutputNode = [
|
||||
"fxnode.common.group-output",
|
||||
{
|
||||
version: 1,
|
||||
title: "Group Output",
|
||||
behavior: "standard",
|
||||
style: "output",
|
||||
parameters: {
|
||||
interfaceName: {
|
||||
type: "string",
|
||||
default: {
|
||||
kind: "string",
|
||||
value: "Socket",
|
||||
},
|
||||
},
|
||||
},
|
||||
sockets: {
|
||||
input: {
|
||||
title: "Interface",
|
||||
direction: "input",
|
||||
type: "any",
|
||||
maxIncomingLinks: 9007199254740991,
|
||||
visible: true,
|
||||
value: null,
|
||||
showValue: false,
|
||||
},
|
||||
},
|
||||
ui: [
|
||||
{
|
||||
kind: "parameter",
|
||||
parameter: "interfaceName",
|
||||
},
|
||||
{
|
||||
kind: "socket",
|
||||
socket: "input",
|
||||
},
|
||||
],
|
||||
muteBypass: [],
|
||||
migrations: [],
|
||||
},
|
||||
] as const satisfies readonly [string, FxNodeDefinition];
|
||||
@@ -0,0 +1,43 @@
|
||||
import type { FxNodeDefinition } from "@lib/composition/index.js";
|
||||
export const rerouteNode = [
|
||||
"fxnode.common.reroute",
|
||||
{
|
||||
version: 1,
|
||||
title: "Reroute",
|
||||
behavior: "reroute",
|
||||
style: "common",
|
||||
parameters: {},
|
||||
sockets: {
|
||||
input: {
|
||||
title: "Input",
|
||||
direction: "input",
|
||||
type: "any",
|
||||
maxIncomingLinks: 1,
|
||||
visible: true,
|
||||
value: null,
|
||||
showValue: false,
|
||||
},
|
||||
output: {
|
||||
title: "Output",
|
||||
direction: "output",
|
||||
type: "any",
|
||||
maxIncomingLinks: 0,
|
||||
visible: true,
|
||||
value: null,
|
||||
showValue: false,
|
||||
},
|
||||
},
|
||||
ui: [
|
||||
{
|
||||
kind: "socket",
|
||||
socket: "input",
|
||||
},
|
||||
{
|
||||
kind: "socket",
|
||||
socket: "output",
|
||||
},
|
||||
],
|
||||
muteBypass: [["input", "output"]],
|
||||
migrations: [],
|
||||
},
|
||||
] as const satisfies readonly [string, FxNodeDefinition];
|
||||
@@ -0,0 +1,170 @@
|
||||
import type { FxNodeDefinition } from "@lib/composition/index.js";
|
||||
export const imageNode = [
|
||||
"fxnode.compositor.image",
|
||||
{
|
||||
version: 1,
|
||||
title: "Image",
|
||||
behavior: "standard",
|
||||
style: "compositorInput",
|
||||
parameters: {
|
||||
image: {
|
||||
type: "string",
|
||||
default: {
|
||||
kind: "string",
|
||||
value: "",
|
||||
},
|
||||
},
|
||||
source: {
|
||||
type: "string",
|
||||
default: {
|
||||
kind: "string",
|
||||
value: "File",
|
||||
},
|
||||
enum: ["Generated", "File", "Movie", "Sequence", "Multilayer"],
|
||||
},
|
||||
frames: {
|
||||
type: "number",
|
||||
default: {
|
||||
kind: "number",
|
||||
value: 1,
|
||||
},
|
||||
minimum: 1,
|
||||
maximum: 1048574,
|
||||
integer: true,
|
||||
},
|
||||
startFrame: {
|
||||
type: "number",
|
||||
default: {
|
||||
kind: "number",
|
||||
value: 1,
|
||||
},
|
||||
minimum: -1048574,
|
||||
maximum: 1048574,
|
||||
integer: true,
|
||||
},
|
||||
offset: {
|
||||
type: "number",
|
||||
default: {
|
||||
kind: "number",
|
||||
value: 0,
|
||||
},
|
||||
minimum: -1048574,
|
||||
maximum: 1048574,
|
||||
integer: true,
|
||||
},
|
||||
cyclic: {
|
||||
type: "boolean",
|
||||
default: {
|
||||
kind: "boolean",
|
||||
value: false,
|
||||
},
|
||||
},
|
||||
autoRefresh: {
|
||||
type: "boolean",
|
||||
default: {
|
||||
kind: "boolean",
|
||||
value: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
sockets: {
|
||||
image: {
|
||||
title: "Image",
|
||||
direction: "output",
|
||||
type: "color",
|
||||
maxIncomingLinks: 0,
|
||||
visible: true,
|
||||
value: null,
|
||||
showValue: false,
|
||||
},
|
||||
alpha: {
|
||||
title: "Alpha",
|
||||
direction: "output",
|
||||
type: "float",
|
||||
maxIncomingLinks: 0,
|
||||
visible: true,
|
||||
value: null,
|
||||
showValue: false,
|
||||
},
|
||||
z: {
|
||||
title: "Z",
|
||||
direction: "output",
|
||||
type: "float",
|
||||
maxIncomingLinks: 0,
|
||||
visible: true,
|
||||
value: null,
|
||||
showValue: false,
|
||||
},
|
||||
},
|
||||
ui: [
|
||||
{
|
||||
kind: "resource",
|
||||
resource: "legacyImage",
|
||||
parameter: "image",
|
||||
title: "Image",
|
||||
openTitle: "Open",
|
||||
},
|
||||
{
|
||||
kind: "parameter",
|
||||
parameter: "source",
|
||||
},
|
||||
{
|
||||
kind: "parameter",
|
||||
parameter: "frames",
|
||||
title: "Frames",
|
||||
visibleWhen: {
|
||||
parameter: "source",
|
||||
in: ["Movie", "Sequence"],
|
||||
},
|
||||
},
|
||||
{
|
||||
kind: "parameter",
|
||||
parameter: "startFrame",
|
||||
title: "Start Frame",
|
||||
visibleWhen: {
|
||||
parameter: "source",
|
||||
in: ["Movie", "Sequence"],
|
||||
},
|
||||
},
|
||||
{
|
||||
kind: "parameter",
|
||||
parameter: "offset",
|
||||
visibleWhen: {
|
||||
parameter: "source",
|
||||
in: ["Movie", "Sequence"],
|
||||
},
|
||||
},
|
||||
{
|
||||
kind: "parameter",
|
||||
parameter: "cyclic",
|
||||
visibleWhen: {
|
||||
parameter: "source",
|
||||
in: ["Movie", "Sequence"],
|
||||
},
|
||||
},
|
||||
{
|
||||
kind: "parameter",
|
||||
parameter: "autoRefresh",
|
||||
title: "Auto Refresh",
|
||||
visibleWhen: {
|
||||
parameter: "source",
|
||||
in: ["Movie", "Sequence"],
|
||||
},
|
||||
},
|
||||
{
|
||||
kind: "socket",
|
||||
socket: "image",
|
||||
},
|
||||
{
|
||||
kind: "socket",
|
||||
socket: "alpha",
|
||||
},
|
||||
{
|
||||
kind: "socket",
|
||||
socket: "z",
|
||||
},
|
||||
],
|
||||
muteBypass: [],
|
||||
migrations: [],
|
||||
},
|
||||
] as const satisfies readonly [string, FxNodeDefinition];
|
||||
@@ -0,0 +1,43 @@
|
||||
import type { FxNodeDefinition } from "@lib/composition/index.js";
|
||||
export const joinGeometryNode = [
|
||||
"fxnode.geometry.join-geometry",
|
||||
{
|
||||
version: 1,
|
||||
title: "Join Geometry",
|
||||
behavior: "standard",
|
||||
style: "geometry",
|
||||
parameters: {},
|
||||
sockets: {
|
||||
geometry: {
|
||||
title: "Geometry",
|
||||
direction: "input",
|
||||
type: "geometry",
|
||||
maxIncomingLinks: 9007199254740991,
|
||||
visible: true,
|
||||
value: null,
|
||||
showValue: false,
|
||||
},
|
||||
result: {
|
||||
title: "Geometry",
|
||||
direction: "output",
|
||||
type: "geometry",
|
||||
maxIncomingLinks: 0,
|
||||
visible: true,
|
||||
value: null,
|
||||
showValue: false,
|
||||
},
|
||||
},
|
||||
ui: [
|
||||
{
|
||||
kind: "socket",
|
||||
socket: "geometry",
|
||||
},
|
||||
{
|
||||
kind: "socket",
|
||||
socket: "result",
|
||||
},
|
||||
],
|
||||
muteBypass: [],
|
||||
migrations: [],
|
||||
},
|
||||
] as const satisfies readonly [string, FxNodeDefinition];
|
||||
@@ -0,0 +1,116 @@
|
||||
import type { FxNodeDefinition } from "@lib/composition/index.js";
|
||||
export const meshCubeNode = [
|
||||
"fxnode.geometry.mesh-cube",
|
||||
{
|
||||
version: 1,
|
||||
title: "Mesh Cube",
|
||||
behavior: "standard",
|
||||
style: "geometry",
|
||||
parameters: {},
|
||||
sockets: {
|
||||
size: {
|
||||
title: "Size",
|
||||
direction: "input",
|
||||
type: "vector",
|
||||
maxIncomingLinks: 1,
|
||||
visible: true,
|
||||
value: {
|
||||
type: "vector",
|
||||
default: {
|
||||
kind: "vector",
|
||||
value: [1, 1, 1],
|
||||
},
|
||||
minimum: 0,
|
||||
},
|
||||
showValue: true,
|
||||
},
|
||||
"vertices-x": {
|
||||
title: "Vertices X",
|
||||
direction: "input",
|
||||
type: "float",
|
||||
maxIncomingLinks: 1,
|
||||
visible: true,
|
||||
value: {
|
||||
type: "number",
|
||||
default: {
|
||||
kind: "number",
|
||||
value: 2,
|
||||
},
|
||||
minimum: 2,
|
||||
maximum: 1000,
|
||||
integer: true,
|
||||
},
|
||||
showValue: true,
|
||||
},
|
||||
"vertices-y": {
|
||||
title: "Vertices Y",
|
||||
direction: "input",
|
||||
type: "float",
|
||||
maxIncomingLinks: 1,
|
||||
visible: true,
|
||||
value: {
|
||||
type: "number",
|
||||
default: {
|
||||
kind: "number",
|
||||
value: 2,
|
||||
},
|
||||
minimum: 2,
|
||||
maximum: 1000,
|
||||
integer: true,
|
||||
},
|
||||
showValue: true,
|
||||
},
|
||||
"vertices-z": {
|
||||
title: "Vertices Z",
|
||||
direction: "input",
|
||||
type: "float",
|
||||
maxIncomingLinks: 1,
|
||||
visible: true,
|
||||
value: {
|
||||
type: "number",
|
||||
default: {
|
||||
kind: "number",
|
||||
value: 2,
|
||||
},
|
||||
minimum: 2,
|
||||
maximum: 1000,
|
||||
integer: true,
|
||||
},
|
||||
showValue: true,
|
||||
},
|
||||
mesh: {
|
||||
title: "Mesh",
|
||||
direction: "output",
|
||||
type: "geometry",
|
||||
maxIncomingLinks: 0,
|
||||
visible: true,
|
||||
value: null,
|
||||
showValue: false,
|
||||
},
|
||||
},
|
||||
ui: [
|
||||
{
|
||||
kind: "socket",
|
||||
socket: "size",
|
||||
},
|
||||
{
|
||||
kind: "socket",
|
||||
socket: "vertices-x",
|
||||
},
|
||||
{
|
||||
kind: "socket",
|
||||
socket: "vertices-y",
|
||||
},
|
||||
{
|
||||
kind: "socket",
|
||||
socket: "vertices-z",
|
||||
},
|
||||
{
|
||||
kind: "socket",
|
||||
socket: "mesh",
|
||||
},
|
||||
],
|
||||
muteBypass: [],
|
||||
migrations: [],
|
||||
},
|
||||
] as const satisfies readonly [string, FxNodeDefinition];
|
||||
@@ -0,0 +1,30 @@
|
||||
import type { FxNodeDefinition } from "@lib/composition/index.js";
|
||||
export const positionNode = [
|
||||
"fxnode.geometry.position",
|
||||
{
|
||||
version: 1,
|
||||
title: "Position",
|
||||
behavior: "standard",
|
||||
style: "geometry",
|
||||
parameters: {},
|
||||
sockets: {
|
||||
position: {
|
||||
title: "Position",
|
||||
direction: "output",
|
||||
type: "vector",
|
||||
maxIncomingLinks: 0,
|
||||
visible: true,
|
||||
value: null,
|
||||
showValue: false,
|
||||
},
|
||||
},
|
||||
ui: [
|
||||
{
|
||||
kind: "socket",
|
||||
socket: "position",
|
||||
},
|
||||
],
|
||||
muteBypass: [],
|
||||
migrations: [],
|
||||
},
|
||||
] as const satisfies readonly [string, FxNodeDefinition];
|
||||
@@ -0,0 +1,81 @@
|
||||
import type { FxNodeDefinition } from "@lib/composition/index.js";
|
||||
export const setPositionNode = [
|
||||
"fxnode.geometry.set-position",
|
||||
{
|
||||
version: 1,
|
||||
title: "Set Position",
|
||||
behavior: "standard",
|
||||
style: "geometry",
|
||||
parameters: {},
|
||||
sockets: {
|
||||
geometry: {
|
||||
title: "Geometry",
|
||||
direction: "input",
|
||||
type: "geometry",
|
||||
maxIncomingLinks: 1,
|
||||
visible: true,
|
||||
value: null,
|
||||
showValue: false,
|
||||
},
|
||||
position: {
|
||||
title: "Position",
|
||||
direction: "input",
|
||||
type: "vector",
|
||||
maxIncomingLinks: 1,
|
||||
visible: true,
|
||||
value: {
|
||||
type: "vector",
|
||||
default: {
|
||||
kind: "vector",
|
||||
value: [0, 0, 0],
|
||||
},
|
||||
},
|
||||
showValue: true,
|
||||
},
|
||||
offset: {
|
||||
title: "Offset",
|
||||
direction: "input",
|
||||
type: "vector",
|
||||
maxIncomingLinks: 1,
|
||||
visible: true,
|
||||
value: {
|
||||
type: "vector",
|
||||
default: {
|
||||
kind: "vector",
|
||||
value: [0, 0, 0],
|
||||
},
|
||||
},
|
||||
showValue: true,
|
||||
},
|
||||
result: {
|
||||
title: "Geometry",
|
||||
direction: "output",
|
||||
type: "geometry",
|
||||
maxIncomingLinks: 0,
|
||||
visible: true,
|
||||
value: null,
|
||||
showValue: false,
|
||||
},
|
||||
},
|
||||
ui: [
|
||||
{
|
||||
kind: "socket",
|
||||
socket: "geometry",
|
||||
},
|
||||
{
|
||||
kind: "socket",
|
||||
socket: "position",
|
||||
},
|
||||
{
|
||||
kind: "socket",
|
||||
socket: "offset",
|
||||
},
|
||||
{
|
||||
kind: "socket",
|
||||
socket: "result",
|
||||
},
|
||||
],
|
||||
muteBypass: [["geometry", "result"]],
|
||||
migrations: [],
|
||||
},
|
||||
] as const satisfies readonly [string, FxNodeDefinition];
|
||||
@@ -0,0 +1,100 @@
|
||||
import type { FxNodeDefinition } from "@lib/composition/index.js";
|
||||
export const transformGeometryNode = [
|
||||
"fxnode.geometry.transform-geometry",
|
||||
{
|
||||
version: 1,
|
||||
title: "Transform Geometry",
|
||||
behavior: "standard",
|
||||
style: "geometry",
|
||||
parameters: {},
|
||||
sockets: {
|
||||
geometry: {
|
||||
title: "Geometry",
|
||||
direction: "input",
|
||||
type: "geometry",
|
||||
maxIncomingLinks: 1,
|
||||
visible: true,
|
||||
value: null,
|
||||
showValue: false,
|
||||
},
|
||||
translation: {
|
||||
title: "Translation",
|
||||
direction: "input",
|
||||
type: "vector",
|
||||
maxIncomingLinks: 1,
|
||||
visible: true,
|
||||
value: {
|
||||
type: "vector",
|
||||
default: {
|
||||
kind: "vector",
|
||||
value: [0, 0, 0],
|
||||
},
|
||||
},
|
||||
showValue: true,
|
||||
},
|
||||
rotation: {
|
||||
title: "Rotation",
|
||||
direction: "input",
|
||||
type: "vector",
|
||||
maxIncomingLinks: 1,
|
||||
visible: true,
|
||||
value: {
|
||||
type: "vector",
|
||||
default: {
|
||||
kind: "vector",
|
||||
value: [0, 0, 0],
|
||||
},
|
||||
},
|
||||
showValue: true,
|
||||
},
|
||||
scale: {
|
||||
title: "Scale",
|
||||
direction: "input",
|
||||
type: "vector",
|
||||
maxIncomingLinks: 1,
|
||||
visible: true,
|
||||
value: {
|
||||
type: "vector",
|
||||
default: {
|
||||
kind: "vector",
|
||||
value: [1, 1, 1],
|
||||
},
|
||||
},
|
||||
showValue: true,
|
||||
},
|
||||
result: {
|
||||
title: "Geometry",
|
||||
direction: "output",
|
||||
type: "geometry",
|
||||
maxIncomingLinks: 0,
|
||||
visible: true,
|
||||
value: null,
|
||||
showValue: false,
|
||||
},
|
||||
},
|
||||
ui: [
|
||||
{
|
||||
kind: "socket",
|
||||
socket: "geometry",
|
||||
},
|
||||
{
|
||||
kind: "socket",
|
||||
socket: "translation",
|
||||
},
|
||||
{
|
||||
kind: "socket",
|
||||
socket: "rotation",
|
||||
},
|
||||
{
|
||||
kind: "socket",
|
||||
socket: "scale",
|
||||
},
|
||||
{
|
||||
kind: "socket",
|
||||
socket: "result",
|
||||
},
|
||||
],
|
||||
muteBypass: [["geometry", "result"]],
|
||||
migrations: [],
|
||||
},
|
||||
] as const satisfies readonly [string, FxNodeDefinition];
|
||||
@@ -0,0 +1,127 @@
|
||||
import type { FxNodeDefinition } from "@lib/composition/index.js";
|
||||
export const colorRampNode = [
|
||||
"fxnode.shader.color-ramp",
|
||||
{
|
||||
version: 2,
|
||||
title: "Color Ramp",
|
||||
behavior: "standard",
|
||||
style: "shader",
|
||||
parameters: {
|
||||
ramp: {
|
||||
type: "json",
|
||||
codec: "color-ramp/v1",
|
||||
default: {
|
||||
kind: "json",
|
||||
value: {
|
||||
colorMode: "rgb",
|
||||
interpolation: "linear",
|
||||
hueInterpolation: "near",
|
||||
stops: [
|
||||
{
|
||||
id: "stop-0",
|
||||
position: 0,
|
||||
color: [0, 0, 0, 1],
|
||||
},
|
||||
{
|
||||
id: "stop-1",
|
||||
position: 1,
|
||||
color: [1, 1, 1, 1],
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
sockets: {
|
||||
factor: {
|
||||
title: "Factor",
|
||||
direction: "input",
|
||||
type: "float",
|
||||
maxIncomingLinks: 1,
|
||||
visible: true,
|
||||
value: {
|
||||
type: "number",
|
||||
default: {
|
||||
kind: "number",
|
||||
value: 0.5,
|
||||
},
|
||||
minimum: 0,
|
||||
maximum: 1,
|
||||
},
|
||||
showValue: true,
|
||||
},
|
||||
color: {
|
||||
title: "Color",
|
||||
direction: "output",
|
||||
type: "color",
|
||||
maxIncomingLinks: 0,
|
||||
visible: true,
|
||||
value: null,
|
||||
showValue: false,
|
||||
},
|
||||
alpha: {
|
||||
title: "Alpha",
|
||||
direction: "output",
|
||||
type: "float",
|
||||
maxIncomingLinks: 0,
|
||||
visible: true,
|
||||
value: null,
|
||||
showValue: false,
|
||||
},
|
||||
},
|
||||
ui: [
|
||||
{
|
||||
kind: "socket",
|
||||
socket: "color",
|
||||
},
|
||||
{
|
||||
kind: "socket",
|
||||
socket: "alpha",
|
||||
},
|
||||
{
|
||||
kind: "widget",
|
||||
widget: "color-ramp",
|
||||
parameter: "ramp",
|
||||
title: "",
|
||||
},
|
||||
{
|
||||
kind: "socket",
|
||||
socket: "factor",
|
||||
},
|
||||
],
|
||||
muteBypass: [],
|
||||
migrations: [
|
||||
{
|
||||
fromVersion: 1,
|
||||
toVersion: 2,
|
||||
steps: [
|
||||
{
|
||||
kind: "materialize-missing",
|
||||
target: "parameter",
|
||||
key: "ramp",
|
||||
},
|
||||
{
|
||||
kind: "materialize-missing",
|
||||
target: "socket",
|
||||
key: "factor",
|
||||
},
|
||||
{
|
||||
kind: "materialize-missing",
|
||||
target: "socket",
|
||||
key: "color",
|
||||
},
|
||||
{
|
||||
kind: "materialize-missing",
|
||||
target: "socket",
|
||||
key: "alpha",
|
||||
},
|
||||
{
|
||||
kind: "migrate-parameter",
|
||||
parameter: "ramp",
|
||||
codec: "color-ramp/legacy-stops",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
] as const satisfies readonly [string, FxNodeDefinition];
|
||||
@@ -0,0 +1,44 @@
|
||||
import type { FxNodeDefinition } from "@lib/composition/index.js";
|
||||
export const colorNode = [
|
||||
"fxnode.shader.color",
|
||||
{
|
||||
version: 1,
|
||||
title: "Color",
|
||||
behavior: "standard",
|
||||
style: "shader",
|
||||
parameters: {
|
||||
color: {
|
||||
type: "color",
|
||||
default: {
|
||||
kind: "color",
|
||||
value: [0.8, 0.8, 0.8, 1],
|
||||
},
|
||||
minimum: 0,
|
||||
maximum: 1,
|
||||
},
|
||||
},
|
||||
sockets: {
|
||||
color: {
|
||||
title: "Color",
|
||||
direction: "output",
|
||||
type: "color",
|
||||
maxIncomingLinks: 0,
|
||||
visible: true,
|
||||
value: null,
|
||||
showValue: false,
|
||||
},
|
||||
},
|
||||
ui: [
|
||||
{
|
||||
kind: "parameter",
|
||||
parameter: "color",
|
||||
},
|
||||
{
|
||||
kind: "socket",
|
||||
socket: "color",
|
||||
},
|
||||
],
|
||||
muteBypass: [],
|
||||
migrations: [],
|
||||
},
|
||||
] as const satisfies readonly [string, FxNodeDefinition];
|
||||
@@ -0,0 +1,157 @@
|
||||
import type { FxNodeDefinition } from "@lib/composition/index.js";
|
||||
export const imageTextureNode = [
|
||||
"fxnode.shader.image-texture",
|
||||
{
|
||||
version: 1,
|
||||
title: "Image Texture",
|
||||
behavior: "standard",
|
||||
style: "input",
|
||||
parameters: {
|
||||
image: {
|
||||
type: "string",
|
||||
default: {
|
||||
kind: "string",
|
||||
value: "",
|
||||
},
|
||||
},
|
||||
interpolation: {
|
||||
type: "string",
|
||||
default: {
|
||||
kind: "string",
|
||||
value: "Linear",
|
||||
},
|
||||
enum: ["Linear", "Closest", "Cubic", "Smart"],
|
||||
},
|
||||
projection: {
|
||||
type: "string",
|
||||
default: {
|
||||
kind: "string",
|
||||
value: "Flat",
|
||||
},
|
||||
enum: ["Flat", "Box", "Sphere", "Tube"],
|
||||
},
|
||||
blend: {
|
||||
type: "number",
|
||||
default: {
|
||||
kind: "number",
|
||||
value: 0,
|
||||
},
|
||||
minimum: 0,
|
||||
maximum: 1,
|
||||
},
|
||||
extension: {
|
||||
type: "string",
|
||||
default: {
|
||||
kind: "string",
|
||||
value: "Repeat",
|
||||
},
|
||||
enum: ["Repeat", "Extend", "Clip", "Mirror"],
|
||||
},
|
||||
colorSpace: {
|
||||
type: "string",
|
||||
default: {
|
||||
kind: "string",
|
||||
value: "sRGB",
|
||||
},
|
||||
enum: ["sRGB", "Linear", "Non-Color"],
|
||||
},
|
||||
alphaMode: {
|
||||
type: "string",
|
||||
default: {
|
||||
kind: "string",
|
||||
value: "Straight",
|
||||
},
|
||||
enum: ["Straight", "Premultiplied", "Channel Packed", "None"],
|
||||
},
|
||||
},
|
||||
sockets: {
|
||||
vector: {
|
||||
title: "Vector",
|
||||
direction: "input",
|
||||
type: "vector",
|
||||
maxIncomingLinks: 1,
|
||||
visible: true,
|
||||
value: {
|
||||
type: "vector",
|
||||
default: {
|
||||
kind: "vector",
|
||||
value: [0, 0, 0],
|
||||
},
|
||||
},
|
||||
showValue: false,
|
||||
},
|
||||
color: {
|
||||
title: "Color",
|
||||
direction: "output",
|
||||
type: "color",
|
||||
maxIncomingLinks: 0,
|
||||
visible: true,
|
||||
value: null,
|
||||
showValue: false,
|
||||
},
|
||||
alpha: {
|
||||
title: "Alpha",
|
||||
direction: "output",
|
||||
type: "float",
|
||||
maxIncomingLinks: 0,
|
||||
visible: true,
|
||||
value: null,
|
||||
showValue: false,
|
||||
},
|
||||
},
|
||||
ui: [
|
||||
{
|
||||
kind: "resource",
|
||||
resource: "legacyImage",
|
||||
parameter: "image",
|
||||
title: "Image",
|
||||
openTitle: "Open",
|
||||
},
|
||||
{
|
||||
kind: "parameter",
|
||||
parameter: "interpolation",
|
||||
},
|
||||
{
|
||||
kind: "parameter",
|
||||
parameter: "projection",
|
||||
},
|
||||
{
|
||||
kind: "parameter",
|
||||
parameter: "blend",
|
||||
title: "Blend",
|
||||
visibleWhen: {
|
||||
parameter: "projection",
|
||||
equals: "Box",
|
||||
},
|
||||
},
|
||||
{
|
||||
kind: "parameter",
|
||||
parameter: "extension",
|
||||
},
|
||||
{
|
||||
kind: "parameter",
|
||||
parameter: "colorSpace",
|
||||
title: "Color Space",
|
||||
},
|
||||
{
|
||||
kind: "parameter",
|
||||
parameter: "alphaMode",
|
||||
title: "Alpha Mode",
|
||||
},
|
||||
{
|
||||
kind: "socket",
|
||||
socket: "vector",
|
||||
},
|
||||
{
|
||||
kind: "socket",
|
||||
socket: "color",
|
||||
},
|
||||
{
|
||||
kind: "socket",
|
||||
socket: "alpha",
|
||||
},
|
||||
],
|
||||
muteBypass: [],
|
||||
migrations: [],
|
||||
},
|
||||
] as const satisfies readonly [string, FxNodeDefinition];
|
||||
@@ -0,0 +1,62 @@
|
||||
import type { FxNodeDefinition } from "@lib/composition/index.js";
|
||||
export const materialOutputNode = [
|
||||
"fxnode.shader.material-output",
|
||||
{
|
||||
version: 1,
|
||||
title: "Material Output",
|
||||
behavior: "standard",
|
||||
style: "output",
|
||||
parameters: {},
|
||||
sockets: {
|
||||
surface: {
|
||||
title: "Surface",
|
||||
direction: "input",
|
||||
type: "shader",
|
||||
maxIncomingLinks: 1,
|
||||
visible: true,
|
||||
value: null,
|
||||
showValue: false,
|
||||
},
|
||||
volume: {
|
||||
title: "Volume",
|
||||
direction: "input",
|
||||
type: "shader",
|
||||
maxIncomingLinks: 1,
|
||||
visible: true,
|
||||
value: null,
|
||||
showValue: false,
|
||||
},
|
||||
displacement: {
|
||||
title: "Displacement",
|
||||
direction: "input",
|
||||
type: "vector",
|
||||
maxIncomingLinks: 1,
|
||||
visible: true,
|
||||
value: {
|
||||
type: "vector",
|
||||
default: {
|
||||
kind: "vector",
|
||||
value: [0, 0, 0],
|
||||
},
|
||||
},
|
||||
showValue: true,
|
||||
},
|
||||
},
|
||||
ui: [
|
||||
{
|
||||
kind: "socket",
|
||||
socket: "surface",
|
||||
},
|
||||
{
|
||||
kind: "socket",
|
||||
socket: "volume",
|
||||
},
|
||||
{
|
||||
kind: "socket",
|
||||
socket: "displacement",
|
||||
},
|
||||
],
|
||||
muteBypass: [],
|
||||
migrations: [],
|
||||
},
|
||||
] as const satisfies readonly [string, FxNodeDefinition];
|
||||
@@ -0,0 +1,92 @@
|
||||
import type { FxNodeDefinition } from "@lib/composition/index.js";
|
||||
export const mathNode = [
|
||||
"fxnode.shader.math",
|
||||
{
|
||||
version: 1,
|
||||
title: "Math",
|
||||
behavior: "standard",
|
||||
style: "converter",
|
||||
parameters: {
|
||||
operation: {
|
||||
type: "string",
|
||||
default: {
|
||||
kind: "string",
|
||||
value: "add",
|
||||
},
|
||||
enum: ["add", "subtract", "multiply", "divide", "power", "minimum", "maximum"],
|
||||
},
|
||||
clamp: {
|
||||
type: "boolean",
|
||||
default: {
|
||||
kind: "boolean",
|
||||
value: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
sockets: {
|
||||
a: {
|
||||
title: "A",
|
||||
direction: "input",
|
||||
type: "float",
|
||||
maxIncomingLinks: 1,
|
||||
visible: true,
|
||||
value: {
|
||||
type: "number",
|
||||
default: {
|
||||
kind: "number",
|
||||
value: 0,
|
||||
},
|
||||
},
|
||||
showValue: true,
|
||||
},
|
||||
b: {
|
||||
title: "B",
|
||||
direction: "input",
|
||||
type: "float",
|
||||
maxIncomingLinks: 1,
|
||||
visible: true,
|
||||
value: {
|
||||
type: "number",
|
||||
default: {
|
||||
kind: "number",
|
||||
value: 0,
|
||||
},
|
||||
},
|
||||
showValue: true,
|
||||
},
|
||||
value: {
|
||||
title: "Value",
|
||||
direction: "output",
|
||||
type: "float",
|
||||
maxIncomingLinks: 0,
|
||||
visible: true,
|
||||
value: null,
|
||||
showValue: false,
|
||||
},
|
||||
},
|
||||
ui: [
|
||||
{
|
||||
kind: "parameter",
|
||||
parameter: "operation",
|
||||
},
|
||||
{
|
||||
kind: "parameter",
|
||||
parameter: "clamp",
|
||||
},
|
||||
{
|
||||
kind: "socket",
|
||||
socket: "a",
|
||||
},
|
||||
{
|
||||
kind: "socket",
|
||||
socket: "b",
|
||||
},
|
||||
{
|
||||
kind: "socket",
|
||||
socket: "value",
|
||||
},
|
||||
],
|
||||
muteBypass: [["a", "value"]],
|
||||
migrations: [],
|
||||
},
|
||||
] as const satisfies readonly [string, FxNodeDefinition];
|
||||
+117
@@ -0,0 +1,117 @@
|
||||
import type { FxNodeDefinition } from "@lib/composition/index.js";
|
||||
export const mixNode = [
|
||||
"fxnode.shader.mix",
|
||||
{
|
||||
version: 1,
|
||||
title: "Mix",
|
||||
behavior: "standard",
|
||||
style: "shader",
|
||||
parameters: {
|
||||
blend: {
|
||||
type: "string",
|
||||
default: {
|
||||
kind: "string",
|
||||
value: "mix",
|
||||
},
|
||||
enum: ["mix", "add", "multiply", "screen", "overlay"],
|
||||
},
|
||||
clamp: {
|
||||
type: "boolean",
|
||||
default: {
|
||||
kind: "boolean",
|
||||
value: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
sockets: {
|
||||
factor: {
|
||||
title: "Factor",
|
||||
direction: "input",
|
||||
type: "float",
|
||||
maxIncomingLinks: 1,
|
||||
visible: true,
|
||||
value: {
|
||||
type: "number",
|
||||
default: {
|
||||
kind: "number",
|
||||
value: 0.5,
|
||||
},
|
||||
minimum: 0,
|
||||
maximum: 1,
|
||||
},
|
||||
showValue: true,
|
||||
},
|
||||
a: {
|
||||
title: "A",
|
||||
direction: "input",
|
||||
type: "color",
|
||||
maxIncomingLinks: 1,
|
||||
visible: true,
|
||||
value: {
|
||||
type: "color",
|
||||
default: {
|
||||
kind: "color",
|
||||
value: [0.8, 0.8, 0.8, 1],
|
||||
},
|
||||
minimum: 0,
|
||||
maximum: 1,
|
||||
},
|
||||
showValue: true,
|
||||
},
|
||||
b: {
|
||||
title: "B",
|
||||
direction: "input",
|
||||
type: "color",
|
||||
maxIncomingLinks: 1,
|
||||
visible: true,
|
||||
value: {
|
||||
type: "color",
|
||||
default: {
|
||||
kind: "color",
|
||||
value: [0.8, 0.8, 0.8, 1],
|
||||
},
|
||||
minimum: 0,
|
||||
maximum: 1,
|
||||
},
|
||||
showValue: true,
|
||||
},
|
||||
result: {
|
||||
title: "Result",
|
||||
direction: "output",
|
||||
type: "color",
|
||||
maxIncomingLinks: 0,
|
||||
visible: true,
|
||||
value: null,
|
||||
showValue: false,
|
||||
},
|
||||
},
|
||||
ui: [
|
||||
{
|
||||
kind: "parameter",
|
||||
parameter: "blend",
|
||||
},
|
||||
{
|
||||
kind: "parameter",
|
||||
parameter: "clamp",
|
||||
},
|
||||
{
|
||||
kind: "socket",
|
||||
socket: "factor",
|
||||
},
|
||||
{
|
||||
kind: "socket",
|
||||
socket: "a",
|
||||
},
|
||||
{
|
||||
kind: "socket",
|
||||
socket: "b",
|
||||
},
|
||||
{
|
||||
kind: "socket",
|
||||
socket: "result",
|
||||
},
|
||||
],
|
||||
muteBypass: [["a", "result"]],
|
||||
migrations: [],
|
||||
},
|
||||
] as const satisfies readonly [string, FxNodeDefinition];
|
||||
@@ -0,0 +1,364 @@
|
||||
import type { FxNodeDefinition } from "@lib/composition/index.js";
|
||||
export const noiseTextureNode = [
|
||||
"fxnode.shader.noise-texture",
|
||||
{
|
||||
version: 2,
|
||||
title: "Noise Texture",
|
||||
behavior: "standard",
|
||||
style: "texture",
|
||||
parameters: {
|
||||
dimensions: {
|
||||
type: "string",
|
||||
default: {
|
||||
kind: "string",
|
||||
value: "3d",
|
||||
},
|
||||
enum: ["1d", "2d", "3d", "4d"],
|
||||
},
|
||||
noiseType: {
|
||||
type: "string",
|
||||
default: {
|
||||
kind: "string",
|
||||
value: "fbm",
|
||||
},
|
||||
enum: ["fbm", "multifractal", "hybrid-multifractal", "ridged-multifractal", "hetero-terrain"],
|
||||
},
|
||||
normalize: {
|
||||
type: "boolean",
|
||||
default: {
|
||||
kind: "boolean",
|
||||
value: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
sockets: {
|
||||
vector: {
|
||||
title: "Vector",
|
||||
direction: "input",
|
||||
type: "vector",
|
||||
maxIncomingLinks: 1,
|
||||
visible: true,
|
||||
value: {
|
||||
type: "vector",
|
||||
default: {
|
||||
kind: "vector",
|
||||
value: [0, 0, 0],
|
||||
},
|
||||
},
|
||||
showValue: false,
|
||||
},
|
||||
w: {
|
||||
title: "W",
|
||||
direction: "input",
|
||||
type: "float",
|
||||
maxIncomingLinks: 1,
|
||||
visible: true,
|
||||
value: {
|
||||
type: "number",
|
||||
default: {
|
||||
kind: "number",
|
||||
value: 0,
|
||||
},
|
||||
},
|
||||
showValue: true,
|
||||
},
|
||||
scale: {
|
||||
title: "Scale",
|
||||
direction: "input",
|
||||
type: "float",
|
||||
maxIncomingLinks: 1,
|
||||
visible: true,
|
||||
value: {
|
||||
type: "number",
|
||||
default: {
|
||||
kind: "number",
|
||||
value: 5,
|
||||
},
|
||||
minimum: -1000,
|
||||
maximum: 1000,
|
||||
},
|
||||
showValue: true,
|
||||
},
|
||||
detail: {
|
||||
title: "Detail",
|
||||
direction: "input",
|
||||
type: "float",
|
||||
maxIncomingLinks: 1,
|
||||
visible: true,
|
||||
value: {
|
||||
type: "number",
|
||||
default: {
|
||||
kind: "number",
|
||||
value: 2,
|
||||
},
|
||||
minimum: 0,
|
||||
maximum: 15,
|
||||
},
|
||||
showValue: true,
|
||||
},
|
||||
roughness: {
|
||||
title: "Roughness",
|
||||
direction: "input",
|
||||
type: "float",
|
||||
maxIncomingLinks: 1,
|
||||
visible: true,
|
||||
value: {
|
||||
type: "number",
|
||||
default: {
|
||||
kind: "number",
|
||||
value: 0.5,
|
||||
},
|
||||
minimum: 0,
|
||||
maximum: 1,
|
||||
},
|
||||
showValue: true,
|
||||
},
|
||||
lacunarity: {
|
||||
title: "Lacunarity",
|
||||
direction: "input",
|
||||
type: "float",
|
||||
maxIncomingLinks: 1,
|
||||
visible: true,
|
||||
value: {
|
||||
type: "number",
|
||||
default: {
|
||||
kind: "number",
|
||||
value: 2,
|
||||
},
|
||||
minimum: 0,
|
||||
maximum: 1000,
|
||||
},
|
||||
showValue: true,
|
||||
},
|
||||
offset: {
|
||||
title: "Offset",
|
||||
direction: "input",
|
||||
type: "float",
|
||||
maxIncomingLinks: 1,
|
||||
visible: true,
|
||||
value: {
|
||||
type: "number",
|
||||
default: {
|
||||
kind: "number",
|
||||
value: 0,
|
||||
},
|
||||
minimum: -1000,
|
||||
maximum: 1000,
|
||||
},
|
||||
showValue: true,
|
||||
},
|
||||
gain: {
|
||||
title: "Gain",
|
||||
direction: "input",
|
||||
type: "float",
|
||||
maxIncomingLinks: 1,
|
||||
visible: true,
|
||||
value: {
|
||||
type: "number",
|
||||
default: {
|
||||
kind: "number",
|
||||
value: 1,
|
||||
},
|
||||
minimum: 0,
|
||||
maximum: 1000,
|
||||
},
|
||||
showValue: true,
|
||||
},
|
||||
distortion: {
|
||||
title: "Distortion",
|
||||
direction: "input",
|
||||
type: "float",
|
||||
maxIncomingLinks: 1,
|
||||
visible: true,
|
||||
value: {
|
||||
type: "number",
|
||||
default: {
|
||||
kind: "number",
|
||||
value: 0,
|
||||
},
|
||||
minimum: -1000,
|
||||
maximum: 1000,
|
||||
},
|
||||
showValue: true,
|
||||
},
|
||||
factor: {
|
||||
title: "Factor",
|
||||
direction: "output",
|
||||
type: "float",
|
||||
maxIncomingLinks: 0,
|
||||
visible: true,
|
||||
value: null,
|
||||
showValue: false,
|
||||
},
|
||||
color: {
|
||||
title: "Color",
|
||||
direction: "output",
|
||||
type: "color",
|
||||
maxIncomingLinks: 0,
|
||||
visible: true,
|
||||
value: null,
|
||||
showValue: false,
|
||||
},
|
||||
},
|
||||
ui: [
|
||||
{
|
||||
kind: "parameter",
|
||||
parameter: "dimensions",
|
||||
title: "Dimensions",
|
||||
},
|
||||
{
|
||||
kind: "parameter",
|
||||
parameter: "noiseType",
|
||||
title: "Type",
|
||||
},
|
||||
{
|
||||
kind: "parameter",
|
||||
parameter: "normalize",
|
||||
title: "Normalize",
|
||||
visibleWhen: {
|
||||
parameter: "noiseType",
|
||||
equals: "fbm",
|
||||
},
|
||||
},
|
||||
{
|
||||
kind: "socket",
|
||||
socket: "vector",
|
||||
visibleWhen: {
|
||||
parameter: "dimensions",
|
||||
in: ["2d", "3d", "4d"],
|
||||
},
|
||||
},
|
||||
{
|
||||
kind: "socket",
|
||||
socket: "w",
|
||||
visibleWhen: {
|
||||
parameter: "dimensions",
|
||||
in: ["1d", "4d"],
|
||||
},
|
||||
},
|
||||
{
|
||||
kind: "socket",
|
||||
socket: "scale",
|
||||
},
|
||||
{
|
||||
kind: "socket",
|
||||
socket: "detail",
|
||||
},
|
||||
{
|
||||
kind: "socket",
|
||||
socket: "roughness",
|
||||
},
|
||||
{
|
||||
kind: "socket",
|
||||
socket: "lacunarity",
|
||||
},
|
||||
{
|
||||
kind: "socket",
|
||||
socket: "offset",
|
||||
visibleWhen: {
|
||||
parameter: "noiseType",
|
||||
in: ["hybrid-multifractal", "ridged-multifractal", "hetero-terrain"],
|
||||
},
|
||||
},
|
||||
{
|
||||
kind: "socket",
|
||||
socket: "gain",
|
||||
visibleWhen: {
|
||||
parameter: "noiseType",
|
||||
in: ["hybrid-multifractal", "ridged-multifractal"],
|
||||
},
|
||||
},
|
||||
{
|
||||
kind: "socket",
|
||||
socket: "distortion",
|
||||
},
|
||||
{
|
||||
kind: "socket",
|
||||
socket: "factor",
|
||||
},
|
||||
{
|
||||
kind: "socket",
|
||||
socket: "color",
|
||||
},
|
||||
],
|
||||
muteBypass: [],
|
||||
migrations: [
|
||||
{
|
||||
fromVersion: 1,
|
||||
toVersion: 2,
|
||||
steps: [
|
||||
{
|
||||
kind: "materialize-missing",
|
||||
target: "parameter",
|
||||
key: "dimensions",
|
||||
},
|
||||
{
|
||||
kind: "materialize-missing",
|
||||
target: "parameter",
|
||||
key: "noiseType",
|
||||
},
|
||||
{
|
||||
kind: "materialize-missing",
|
||||
target: "parameter",
|
||||
key: "normalize",
|
||||
},
|
||||
{
|
||||
kind: "materialize-missing",
|
||||
target: "socket",
|
||||
key: "vector",
|
||||
},
|
||||
{
|
||||
kind: "materialize-missing",
|
||||
target: "socket",
|
||||
key: "w",
|
||||
},
|
||||
{
|
||||
kind: "materialize-missing",
|
||||
target: "socket",
|
||||
key: "scale",
|
||||
},
|
||||
{
|
||||
kind: "materialize-missing",
|
||||
target: "socket",
|
||||
key: "detail",
|
||||
},
|
||||
{
|
||||
kind: "materialize-missing",
|
||||
target: "socket",
|
||||
key: "roughness",
|
||||
},
|
||||
{
|
||||
kind: "materialize-missing",
|
||||
target: "socket",
|
||||
key: "lacunarity",
|
||||
},
|
||||
{
|
||||
kind: "materialize-missing",
|
||||
target: "socket",
|
||||
key: "offset",
|
||||
},
|
||||
{
|
||||
kind: "materialize-missing",
|
||||
target: "socket",
|
||||
key: "gain",
|
||||
},
|
||||
{
|
||||
kind: "materialize-missing",
|
||||
target: "socket",
|
||||
key: "distortion",
|
||||
},
|
||||
{
|
||||
kind: "materialize-missing",
|
||||
target: "socket",
|
||||
key: "factor",
|
||||
},
|
||||
{
|
||||
kind: "materialize-missing",
|
||||
target: "socket",
|
||||
key: "color",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
] as const satisfies readonly [string, FxNodeDefinition];
|
||||
@@ -0,0 +1,154 @@
|
||||
import type { FxNodeDefinition } from "@lib/composition/index.js";
|
||||
export const principledBsdfNode = [
|
||||
"fxnode.shader.principled-bsdf",
|
||||
{
|
||||
version: 1,
|
||||
title: "Principled BSDF",
|
||||
behavior: "standard",
|
||||
style: "shader",
|
||||
parameters: {},
|
||||
sockets: {
|
||||
"base-color": {
|
||||
title: "Base Color",
|
||||
direction: "input",
|
||||
type: "color",
|
||||
maxIncomingLinks: 1,
|
||||
visible: true,
|
||||
value: {
|
||||
type: "color",
|
||||
default: {
|
||||
kind: "color",
|
||||
value: [0.8, 0.8, 0.8, 1],
|
||||
},
|
||||
minimum: 0,
|
||||
maximum: 1,
|
||||
},
|
||||
showValue: true,
|
||||
},
|
||||
metallic: {
|
||||
title: "Metallic",
|
||||
direction: "input",
|
||||
type: "float",
|
||||
maxIncomingLinks: 1,
|
||||
visible: true,
|
||||
value: {
|
||||
type: "number",
|
||||
default: {
|
||||
kind: "number",
|
||||
value: 0,
|
||||
},
|
||||
minimum: 0,
|
||||
maximum: 1,
|
||||
},
|
||||
showValue: true,
|
||||
},
|
||||
roughness: {
|
||||
title: "Roughness",
|
||||
direction: "input",
|
||||
type: "float",
|
||||
maxIncomingLinks: 1,
|
||||
visible: true,
|
||||
value: {
|
||||
type: "number",
|
||||
default: {
|
||||
kind: "number",
|
||||
value: 0.5,
|
||||
},
|
||||
minimum: 0,
|
||||
maximum: 1,
|
||||
},
|
||||
showValue: true,
|
||||
},
|
||||
ior: {
|
||||
title: "IOR",
|
||||
direction: "input",
|
||||
type: "float",
|
||||
maxIncomingLinks: 1,
|
||||
visible: true,
|
||||
value: {
|
||||
type: "number",
|
||||
default: {
|
||||
kind: "number",
|
||||
value: 1.5,
|
||||
},
|
||||
minimum: 1,
|
||||
maximum: 1000,
|
||||
},
|
||||
showValue: true,
|
||||
},
|
||||
alpha: {
|
||||
title: "Alpha",
|
||||
direction: "input",
|
||||
type: "float",
|
||||
maxIncomingLinks: 1,
|
||||
visible: true,
|
||||
value: {
|
||||
type: "number",
|
||||
default: {
|
||||
kind: "number",
|
||||
value: 1,
|
||||
},
|
||||
minimum: 0,
|
||||
maximum: 1,
|
||||
},
|
||||
showValue: true,
|
||||
},
|
||||
normal: {
|
||||
title: "Normal",
|
||||
direction: "input",
|
||||
type: "vector",
|
||||
maxIncomingLinks: 1,
|
||||
visible: true,
|
||||
value: {
|
||||
type: "vector",
|
||||
default: {
|
||||
kind: "vector",
|
||||
value: [0, 0, 0],
|
||||
},
|
||||
},
|
||||
showValue: false,
|
||||
},
|
||||
bsdf: {
|
||||
title: "BSDF",
|
||||
direction: "output",
|
||||
type: "shader",
|
||||
maxIncomingLinks: 0,
|
||||
visible: true,
|
||||
value: null,
|
||||
showValue: false,
|
||||
},
|
||||
},
|
||||
ui: [
|
||||
{
|
||||
kind: "socket",
|
||||
socket: "base-color",
|
||||
},
|
||||
{
|
||||
kind: "socket",
|
||||
socket: "metallic",
|
||||
},
|
||||
{
|
||||
kind: "socket",
|
||||
socket: "roughness",
|
||||
},
|
||||
{
|
||||
kind: "socket",
|
||||
socket: "ior",
|
||||
},
|
||||
{
|
||||
kind: "socket",
|
||||
socket: "alpha",
|
||||
},
|
||||
{
|
||||
kind: "socket",
|
||||
socket: "normal",
|
||||
},
|
||||
{
|
||||
kind: "socket",
|
||||
socket: "bsdf",
|
||||
},
|
||||
],
|
||||
muteBypass: [],
|
||||
migrations: [],
|
||||
},
|
||||
] as const satisfies readonly [string, FxNodeDefinition];
|
||||
@@ -0,0 +1,69 @@
|
||||
import type { FxNodeDefinition } from "@lib/composition/index.js";
|
||||
export const textureCoordinateNode = [
|
||||
"fxnode.shader.texture-coordinate",
|
||||
{
|
||||
version: 1,
|
||||
title: "Texture Coordinate",
|
||||
behavior: "standard",
|
||||
style: "shader",
|
||||
parameters: {},
|
||||
sockets: {
|
||||
generated: {
|
||||
title: "Generated",
|
||||
direction: "output",
|
||||
type: "vector",
|
||||
maxIncomingLinks: 0,
|
||||
visible: true,
|
||||
value: null,
|
||||
showValue: false,
|
||||
},
|
||||
normal: {
|
||||
title: "Normal",
|
||||
direction: "output",
|
||||
type: "vector",
|
||||
maxIncomingLinks: 0,
|
||||
visible: true,
|
||||
value: null,
|
||||
showValue: false,
|
||||
},
|
||||
uv: {
|
||||
title: "UV",
|
||||
direction: "output",
|
||||
type: "vector",
|
||||
maxIncomingLinks: 0,
|
||||
visible: true,
|
||||
value: null,
|
||||
showValue: false,
|
||||
},
|
||||
object: {
|
||||
title: "Object",
|
||||
direction: "output",
|
||||
type: "vector",
|
||||
maxIncomingLinks: 0,
|
||||
visible: true,
|
||||
value: null,
|
||||
showValue: false,
|
||||
},
|
||||
},
|
||||
ui: [
|
||||
{
|
||||
kind: "socket",
|
||||
socket: "generated",
|
||||
},
|
||||
{
|
||||
kind: "socket",
|
||||
socket: "normal",
|
||||
},
|
||||
{
|
||||
kind: "socket",
|
||||
socket: "uv",
|
||||
},
|
||||
{
|
||||
kind: "socket",
|
||||
socket: "object",
|
||||
},
|
||||
],
|
||||
muteBypass: [],
|
||||
migrations: [],
|
||||
},
|
||||
] as const satisfies readonly [string, FxNodeDefinition];
|
||||
@@ -0,0 +1,43 @@
|
||||
import type { FxNodeDefinition } from "@lib/composition/index.js";
|
||||
export const valueNode = [
|
||||
"fxnode.shader.value",
|
||||
{
|
||||
version: 1,
|
||||
title: "Value",
|
||||
behavior: "standard",
|
||||
style: "shader",
|
||||
parameters: {
|
||||
value: {
|
||||
type: "number",
|
||||
default: {
|
||||
kind: "number",
|
||||
value: 0,
|
||||
},
|
||||
step: 1,
|
||||
},
|
||||
},
|
||||
sockets: {
|
||||
value: {
|
||||
title: "Value",
|
||||
direction: "output",
|
||||
type: "float",
|
||||
maxIncomingLinks: 0,
|
||||
visible: true,
|
||||
value: null,
|
||||
showValue: false,
|
||||
},
|
||||
},
|
||||
ui: [
|
||||
{
|
||||
kind: "parameter",
|
||||
parameter: "value",
|
||||
},
|
||||
{
|
||||
kind: "socket",
|
||||
socket: "value",
|
||||
},
|
||||
],
|
||||
muteBypass: [],
|
||||
migrations: [],
|
||||
},
|
||||
] as const satisfies readonly [string, FxNodeDefinition];
|
||||
@@ -0,0 +1,98 @@
|
||||
import type { FxNodeDefinition } from "@lib/composition/index.js";
|
||||
export const vectorMathNode = [
|
||||
"fxnode.shader.vector-math",
|
||||
{
|
||||
version: 1,
|
||||
title: "Vector Math",
|
||||
behavior: "standard",
|
||||
style: "converter",
|
||||
parameters: {
|
||||
operation: {
|
||||
type: "string",
|
||||
default: {
|
||||
kind: "string",
|
||||
value: "add",
|
||||
},
|
||||
enum: ["add", "subtract", "multiply", "dot-product", "length", "normalize"],
|
||||
},
|
||||
},
|
||||
sockets: {
|
||||
a: {
|
||||
title: "A",
|
||||
direction: "input",
|
||||
type: "vector",
|
||||
maxIncomingLinks: 1,
|
||||
visible: true,
|
||||
value: {
|
||||
type: "vector",
|
||||
default: {
|
||||
kind: "vector",
|
||||
value: [0, 0, 0],
|
||||
},
|
||||
},
|
||||
showValue: true,
|
||||
},
|
||||
b: {
|
||||
title: "B",
|
||||
direction: "input",
|
||||
type: "vector",
|
||||
maxIncomingLinks: 1,
|
||||
visible: true,
|
||||
value: {
|
||||
type: "vector",
|
||||
default: {
|
||||
kind: "vector",
|
||||
value: [0, 0, 0],
|
||||
},
|
||||
},
|
||||
showValue: true,
|
||||
},
|
||||
vector: {
|
||||
title: "Vector",
|
||||
direction: "output",
|
||||
type: "vector",
|
||||
maxIncomingLinks: 0,
|
||||
visible: true,
|
||||
value: null,
|
||||
showValue: false,
|
||||
},
|
||||
value: {
|
||||
title: "Value",
|
||||
direction: "output",
|
||||
type: "float",
|
||||
maxIncomingLinks: 0,
|
||||
visible: true,
|
||||
value: null,
|
||||
showValue: false,
|
||||
},
|
||||
},
|
||||
ui: [
|
||||
{
|
||||
kind: "parameter",
|
||||
parameter: "operation",
|
||||
},
|
||||
{
|
||||
kind: "socket",
|
||||
socket: "a",
|
||||
},
|
||||
{
|
||||
kind: "socket",
|
||||
socket: "b",
|
||||
visibleWhen: {
|
||||
parameter: "operation",
|
||||
equals: "add",
|
||||
},
|
||||
},
|
||||
{
|
||||
kind: "socket",
|
||||
socket: "vector",
|
||||
},
|
||||
{
|
||||
kind: "socket",
|
||||
socket: "value",
|
||||
},
|
||||
],
|
||||
muteBypass: [["a", "vector"]],
|
||||
migrations: [],
|
||||
},
|
||||
] as const satisfies readonly [string, FxNodeDefinition];
|
||||
@@ -0,0 +1,25 @@
|
||||
import type { FxNodeSocketTypeDefinition } from "@lib/composition/index.js";
|
||||
export const anySocket = ["any", { title: "any", color: "#999999", acceptsFrom: ["any"] }] as const satisfies readonly [
|
||||
string,
|
||||
FxNodeSocketTypeDefinition,
|
||||
];
|
||||
export const floatSocket = [
|
||||
"float",
|
||||
{ title: "float", color: "#a8a8a8", acceptsFrom: ["float", "any"] },
|
||||
] as const satisfies readonly [string, FxNodeSocketTypeDefinition];
|
||||
export const vectorSocket = [
|
||||
"vector",
|
||||
{ title: "vector", color: "#6476dc", acceptsFrom: ["vector", "any"] },
|
||||
] as const satisfies readonly [string, FxNodeSocketTypeDefinition];
|
||||
export const colorSocket = [
|
||||
"color",
|
||||
{ title: "color", color: "#d7ca63", acceptsFrom: ["color", "any"] },
|
||||
] as const satisfies readonly [string, FxNodeSocketTypeDefinition];
|
||||
export const shaderSocket = [
|
||||
"shader",
|
||||
{ title: "shader", color: "#62b34f", acceptsFrom: ["shader", "any"] },
|
||||
] as const satisfies readonly [string, FxNodeSocketTypeDefinition];
|
||||
export const geometrySocket = [
|
||||
"geometry",
|
||||
{ title: "geometry", color: "#00bfa5", acceptsFrom: ["geometry", "any"] },
|
||||
] as const satisfies readonly [string, FxNodeSocketTypeDefinition];
|
||||
@@ -0,0 +1,12 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>fxnode image and grading parity</title>
|
||||
<link rel="stylesheet" href="./style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="graph"></canvas>
|
||||
<script type="module" src="./main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,754 @@
|
||||
{
|
||||
"graphId": "parity",
|
||||
"catalogVersion": 4,
|
||||
"nodes": [
|
||||
{
|
||||
"id": "color-ramp",
|
||||
"typeId": "fxnode.shader.color-ramp",
|
||||
"typeVersion": 2,
|
||||
"position": {
|
||||
"x": 350,
|
||||
"y": 180
|
||||
},
|
||||
"size": {
|
||||
"x": 320,
|
||||
"y": 292
|
||||
},
|
||||
"label": "Color Ramp",
|
||||
"parameters": {
|
||||
"ramp": {
|
||||
"kind": "json",
|
||||
"value": {
|
||||
"colorMode": "rgb",
|
||||
"interpolation": "linear",
|
||||
"hueInterpolation": "near",
|
||||
"stops": [
|
||||
{
|
||||
"id": "stop-0",
|
||||
"position": 0,
|
||||
"color": [0, 0, 0, 1]
|
||||
},
|
||||
{
|
||||
"id": "stop-1",
|
||||
"position": 1,
|
||||
"color": [1, 1, 1, 1]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"sockets": [
|
||||
{
|
||||
"id": "color-ramp:factor",
|
||||
"key": "factor",
|
||||
"label": "Factor",
|
||||
"direction": "input",
|
||||
"dataType": "float",
|
||||
"accepts": ["float", "any"],
|
||||
"maxIncomingLinks": 1,
|
||||
"visible": true,
|
||||
"defaultValue": {
|
||||
"kind": "number",
|
||||
"value": 0.5
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "color-ramp:color",
|
||||
"key": "color",
|
||||
"label": "Color",
|
||||
"direction": "output",
|
||||
"dataType": "color",
|
||||
"accepts": [],
|
||||
"maxIncomingLinks": 0,
|
||||
"visible": true
|
||||
},
|
||||
{
|
||||
"id": "color-ramp:alpha",
|
||||
"key": "alpha",
|
||||
"label": "Alpha",
|
||||
"direction": "output",
|
||||
"dataType": "float",
|
||||
"accepts": [],
|
||||
"maxIncomingLinks": 0,
|
||||
"visible": true
|
||||
}
|
||||
],
|
||||
"muted": false,
|
||||
"collapsed": false,
|
||||
"extensions": {},
|
||||
"known": true
|
||||
},
|
||||
{
|
||||
"id": "compositor-image",
|
||||
"typeId": "fxnode.compositor.image",
|
||||
"typeVersion": 1,
|
||||
"position": {
|
||||
"x": -340,
|
||||
"y": -260
|
||||
},
|
||||
"size": {
|
||||
"x": 176,
|
||||
"y": 220
|
||||
},
|
||||
"label": "Image",
|
||||
"parameters": {
|
||||
"image": {
|
||||
"kind": "string",
|
||||
"value": ""
|
||||
},
|
||||
"source": {
|
||||
"kind": "string",
|
||||
"value": "File"
|
||||
},
|
||||
"frames": {
|
||||
"kind": "number",
|
||||
"value": 1
|
||||
},
|
||||
"startFrame": {
|
||||
"kind": "number",
|
||||
"value": 1
|
||||
},
|
||||
"offset": {
|
||||
"kind": "number",
|
||||
"value": 0
|
||||
},
|
||||
"cyclic": {
|
||||
"kind": "boolean",
|
||||
"value": false
|
||||
},
|
||||
"autoRefresh": {
|
||||
"kind": "boolean",
|
||||
"value": false
|
||||
}
|
||||
},
|
||||
"sockets": [
|
||||
{
|
||||
"id": "compositor-image:image",
|
||||
"key": "image",
|
||||
"label": "Image",
|
||||
"direction": "output",
|
||||
"dataType": "color",
|
||||
"accepts": [],
|
||||
"maxIncomingLinks": 0,
|
||||
"visible": true
|
||||
},
|
||||
{
|
||||
"id": "compositor-image:alpha",
|
||||
"key": "alpha",
|
||||
"label": "Alpha",
|
||||
"direction": "output",
|
||||
"dataType": "float",
|
||||
"accepts": [],
|
||||
"maxIncomingLinks": 0,
|
||||
"visible": true
|
||||
},
|
||||
{
|
||||
"id": "compositor-image:z",
|
||||
"key": "z",
|
||||
"label": "Z",
|
||||
"direction": "output",
|
||||
"dataType": "float",
|
||||
"accepts": [],
|
||||
"maxIncomingLinks": 0,
|
||||
"visible": true
|
||||
}
|
||||
],
|
||||
"muted": false,
|
||||
"collapsed": false,
|
||||
"extensions": {},
|
||||
"known": true
|
||||
},
|
||||
{
|
||||
"id": "image-texture",
|
||||
"typeId": "fxnode.shader.image-texture",
|
||||
"typeVersion": 1,
|
||||
"position": {
|
||||
"x": -520,
|
||||
"y": 180
|
||||
},
|
||||
"size": {
|
||||
"x": 257,
|
||||
"y": 316
|
||||
},
|
||||
"label": "Image Texture",
|
||||
"parameters": {
|
||||
"image": {
|
||||
"kind": "string",
|
||||
"value": ""
|
||||
},
|
||||
"interpolation": {
|
||||
"kind": "string",
|
||||
"value": "Linear"
|
||||
},
|
||||
"projection": {
|
||||
"kind": "string",
|
||||
"value": "Flat"
|
||||
},
|
||||
"blend": {
|
||||
"kind": "number",
|
||||
"value": 0
|
||||
},
|
||||
"extension": {
|
||||
"kind": "string",
|
||||
"value": "Repeat"
|
||||
},
|
||||
"colorSpace": {
|
||||
"kind": "string",
|
||||
"value": "sRGB"
|
||||
},
|
||||
"alphaMode": {
|
||||
"kind": "string",
|
||||
"value": "Straight"
|
||||
}
|
||||
},
|
||||
"sockets": [
|
||||
{
|
||||
"id": "image-texture:vector",
|
||||
"key": "vector",
|
||||
"label": "Vector",
|
||||
"direction": "input",
|
||||
"dataType": "vector",
|
||||
"accepts": ["vector", "any"],
|
||||
"maxIncomingLinks": 1,
|
||||
"visible": true,
|
||||
"defaultValue": {
|
||||
"kind": "vector",
|
||||
"value": [0, 0, 0]
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "image-texture:color",
|
||||
"key": "color",
|
||||
"label": "Color",
|
||||
"direction": "output",
|
||||
"dataType": "color",
|
||||
"accepts": [],
|
||||
"maxIncomingLinks": 0,
|
||||
"visible": true
|
||||
},
|
||||
{
|
||||
"id": "image-texture:alpha",
|
||||
"key": "alpha",
|
||||
"label": "Alpha",
|
||||
"direction": "output",
|
||||
"dataType": "float",
|
||||
"accepts": [],
|
||||
"maxIncomingLinks": 0,
|
||||
"visible": true
|
||||
}
|
||||
],
|
||||
"muted": false,
|
||||
"collapsed": false,
|
||||
"extensions": {},
|
||||
"known": true
|
||||
},
|
||||
{
|
||||
"id": "master",
|
||||
"typeId": "fxnode.compositor.color-balance",
|
||||
"typeVersion": 1,
|
||||
"position": {
|
||||
"x": 20,
|
||||
"y": -260
|
||||
},
|
||||
"size": {
|
||||
"x": 400,
|
||||
"y": 292
|
||||
},
|
||||
"label": "Master Color Grading",
|
||||
"parameters": {
|
||||
"mode": {
|
||||
"kind": "string",
|
||||
"value": "Lift/Gamma/Gain"
|
||||
},
|
||||
"lift": {
|
||||
"kind": "number",
|
||||
"value": 0
|
||||
},
|
||||
"liftColor": {
|
||||
"kind": "color",
|
||||
"value": [1, 1, 1, 1]
|
||||
},
|
||||
"gamma": {
|
||||
"kind": "number",
|
||||
"value": 1
|
||||
},
|
||||
"gammaColor": {
|
||||
"kind": "color",
|
||||
"value": [1, 1, 1, 1]
|
||||
},
|
||||
"gain": {
|
||||
"kind": "number",
|
||||
"value": 1
|
||||
},
|
||||
"gainColor": {
|
||||
"kind": "color",
|
||||
"value": [1, 1, 1, 1]
|
||||
},
|
||||
"offset": {
|
||||
"kind": "number",
|
||||
"value": 0
|
||||
},
|
||||
"offsetColor": {
|
||||
"kind": "color",
|
||||
"value": [1, 1, 1, 1]
|
||||
},
|
||||
"power": {
|
||||
"kind": "number",
|
||||
"value": 1
|
||||
},
|
||||
"powerColor": {
|
||||
"kind": "color",
|
||||
"value": [1, 1, 1, 1]
|
||||
},
|
||||
"slope": {
|
||||
"kind": "number",
|
||||
"value": 1
|
||||
},
|
||||
"slopeColor": {
|
||||
"kind": "color",
|
||||
"value": [1, 1, 1, 1]
|
||||
},
|
||||
"inputTemperature": {
|
||||
"kind": "number",
|
||||
"value": 6500
|
||||
},
|
||||
"inputTint": {
|
||||
"kind": "number",
|
||||
"value": 0
|
||||
},
|
||||
"inputColor": {
|
||||
"kind": "color",
|
||||
"value": [1, 1, 1, 1]
|
||||
},
|
||||
"outputTemperature": {
|
||||
"kind": "number",
|
||||
"value": 6500
|
||||
},
|
||||
"outputTint": {
|
||||
"kind": "number",
|
||||
"value": 0
|
||||
},
|
||||
"outputColor": {
|
||||
"kind": "color",
|
||||
"value": [1, 1, 1, 1]
|
||||
}
|
||||
},
|
||||
"sockets": [
|
||||
{
|
||||
"id": "master:image",
|
||||
"key": "image",
|
||||
"label": "Image",
|
||||
"direction": "input",
|
||||
"dataType": "color",
|
||||
"accepts": ["color", "any"],
|
||||
"maxIncomingLinks": 1,
|
||||
"visible": true,
|
||||
"defaultValue": {
|
||||
"kind": "color",
|
||||
"value": [0.8, 0.8, 0.8, 1]
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "master:factor",
|
||||
"key": "factor",
|
||||
"label": "Factor",
|
||||
"direction": "input",
|
||||
"dataType": "float",
|
||||
"accepts": ["float", "any"],
|
||||
"maxIncomingLinks": 1,
|
||||
"visible": true,
|
||||
"defaultValue": {
|
||||
"kind": "number",
|
||||
"value": 1
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "master:result",
|
||||
"key": "result",
|
||||
"label": "Image",
|
||||
"direction": "output",
|
||||
"dataType": "color",
|
||||
"accepts": [],
|
||||
"maxIncomingLinks": 0,
|
||||
"visible": true
|
||||
}
|
||||
],
|
||||
"muted": false,
|
||||
"collapsed": false,
|
||||
"extensions": {},
|
||||
"known": true
|
||||
},
|
||||
{
|
||||
"id": "noise-3d",
|
||||
"typeId": "fxnode.shader.noise-texture",
|
||||
"typeVersion": 2,
|
||||
"position": {
|
||||
"x": -220,
|
||||
"y": 180
|
||||
},
|
||||
"size": {
|
||||
"x": 286,
|
||||
"y": 292
|
||||
},
|
||||
"label": "Noise Texture",
|
||||
"parameters": {
|
||||
"dimensions": {
|
||||
"kind": "string",
|
||||
"value": "3d"
|
||||
},
|
||||
"noiseType": {
|
||||
"kind": "string",
|
||||
"value": "fbm"
|
||||
},
|
||||
"normalize": {
|
||||
"kind": "boolean",
|
||||
"value": false
|
||||
}
|
||||
},
|
||||
"sockets": [
|
||||
{
|
||||
"id": "noise-3d:vector",
|
||||
"key": "vector",
|
||||
"label": "Vector",
|
||||
"direction": "input",
|
||||
"dataType": "vector",
|
||||
"accepts": ["vector", "any"],
|
||||
"maxIncomingLinks": 1,
|
||||
"visible": true,
|
||||
"defaultValue": {
|
||||
"kind": "vector",
|
||||
"value": [0, 0, 0]
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "noise-3d:w",
|
||||
"key": "w",
|
||||
"label": "W",
|
||||
"direction": "input",
|
||||
"dataType": "float",
|
||||
"accepts": ["float", "any"],
|
||||
"maxIncomingLinks": 1,
|
||||
"visible": true,
|
||||
"defaultValue": {
|
||||
"kind": "number",
|
||||
"value": 0
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "noise-3d:scale",
|
||||
"key": "scale",
|
||||
"label": "Scale",
|
||||
"direction": "input",
|
||||
"dataType": "float",
|
||||
"accepts": ["float", "any"],
|
||||
"maxIncomingLinks": 1,
|
||||
"visible": true,
|
||||
"defaultValue": {
|
||||
"kind": "number",
|
||||
"value": 5
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "noise-3d:detail",
|
||||
"key": "detail",
|
||||
"label": "Detail",
|
||||
"direction": "input",
|
||||
"dataType": "float",
|
||||
"accepts": ["float", "any"],
|
||||
"maxIncomingLinks": 1,
|
||||
"visible": true,
|
||||
"defaultValue": {
|
||||
"kind": "number",
|
||||
"value": 2
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "noise-3d:roughness",
|
||||
"key": "roughness",
|
||||
"label": "Roughness",
|
||||
"direction": "input",
|
||||
"dataType": "float",
|
||||
"accepts": ["float", "any"],
|
||||
"maxIncomingLinks": 1,
|
||||
"visible": true,
|
||||
"defaultValue": {
|
||||
"kind": "number",
|
||||
"value": 0.5
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "noise-3d:lacunarity",
|
||||
"key": "lacunarity",
|
||||
"label": "Lacunarity",
|
||||
"direction": "input",
|
||||
"dataType": "float",
|
||||
"accepts": ["float", "any"],
|
||||
"maxIncomingLinks": 1,
|
||||
"visible": true,
|
||||
"defaultValue": {
|
||||
"kind": "number",
|
||||
"value": 2
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "noise-3d:offset",
|
||||
"key": "offset",
|
||||
"label": "Offset",
|
||||
"direction": "input",
|
||||
"dataType": "float",
|
||||
"accepts": ["float", "any"],
|
||||
"maxIncomingLinks": 1,
|
||||
"visible": true,
|
||||
"defaultValue": {
|
||||
"kind": "number",
|
||||
"value": 0
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "noise-3d:gain",
|
||||
"key": "gain",
|
||||
"label": "Gain",
|
||||
"direction": "input",
|
||||
"dataType": "float",
|
||||
"accepts": ["float", "any"],
|
||||
"maxIncomingLinks": 1,
|
||||
"visible": true,
|
||||
"defaultValue": {
|
||||
"kind": "number",
|
||||
"value": 1
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "noise-3d:distortion",
|
||||
"key": "distortion",
|
||||
"label": "Distortion",
|
||||
"direction": "input",
|
||||
"dataType": "float",
|
||||
"accepts": ["float", "any"],
|
||||
"maxIncomingLinks": 1,
|
||||
"visible": true,
|
||||
"defaultValue": {
|
||||
"kind": "number",
|
||||
"value": 0
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "noise-3d:factor",
|
||||
"key": "factor",
|
||||
"label": "Factor",
|
||||
"direction": "output",
|
||||
"dataType": "float",
|
||||
"accepts": [],
|
||||
"maxIncomingLinks": 0,
|
||||
"visible": true
|
||||
},
|
||||
{
|
||||
"id": "noise-3d:color",
|
||||
"key": "color",
|
||||
"label": "Color",
|
||||
"direction": "output",
|
||||
"dataType": "color",
|
||||
"accepts": [],
|
||||
"maxIncomingLinks": 0,
|
||||
"visible": true
|
||||
}
|
||||
],
|
||||
"muted": false,
|
||||
"collapsed": false,
|
||||
"extensions": {},
|
||||
"known": true
|
||||
},
|
||||
{
|
||||
"id": "noise-4d",
|
||||
"typeId": "fxnode.shader.noise-texture",
|
||||
"typeVersion": 2,
|
||||
"position": {
|
||||
"x": 60,
|
||||
"y": 180
|
||||
},
|
||||
"size": {
|
||||
"x": 286,
|
||||
"y": 292
|
||||
},
|
||||
"label": "Noise Texture",
|
||||
"parameters": {
|
||||
"dimensions": {
|
||||
"kind": "string",
|
||||
"value": "4d"
|
||||
},
|
||||
"noiseType": {
|
||||
"kind": "string",
|
||||
"value": "fbm"
|
||||
},
|
||||
"normalize": {
|
||||
"kind": "boolean",
|
||||
"value": false
|
||||
}
|
||||
},
|
||||
"sockets": [
|
||||
{
|
||||
"id": "noise-4d:vector",
|
||||
"key": "vector",
|
||||
"label": "Vector",
|
||||
"direction": "input",
|
||||
"dataType": "vector",
|
||||
"accepts": ["vector", "any"],
|
||||
"maxIncomingLinks": 1,
|
||||
"visible": true,
|
||||
"defaultValue": {
|
||||
"kind": "vector",
|
||||
"value": [0, 0, 0]
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "noise-4d:w",
|
||||
"key": "w",
|
||||
"label": "W",
|
||||
"direction": "input",
|
||||
"dataType": "float",
|
||||
"accepts": ["float", "any"],
|
||||
"maxIncomingLinks": 1,
|
||||
"visible": true,
|
||||
"defaultValue": {
|
||||
"kind": "number",
|
||||
"value": 0
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "noise-4d:scale",
|
||||
"key": "scale",
|
||||
"label": "Scale",
|
||||
"direction": "input",
|
||||
"dataType": "float",
|
||||
"accepts": ["float", "any"],
|
||||
"maxIncomingLinks": 1,
|
||||
"visible": true,
|
||||
"defaultValue": {
|
||||
"kind": "number",
|
||||
"value": 5
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "noise-4d:detail",
|
||||
"key": "detail",
|
||||
"label": "Detail",
|
||||
"direction": "input",
|
||||
"dataType": "float",
|
||||
"accepts": ["float", "any"],
|
||||
"maxIncomingLinks": 1,
|
||||
"visible": true,
|
||||
"defaultValue": {
|
||||
"kind": "number",
|
||||
"value": 2
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "noise-4d:roughness",
|
||||
"key": "roughness",
|
||||
"label": "Roughness",
|
||||
"direction": "input",
|
||||
"dataType": "float",
|
||||
"accepts": ["float", "any"],
|
||||
"maxIncomingLinks": 1,
|
||||
"visible": true,
|
||||
"defaultValue": {
|
||||
"kind": "number",
|
||||
"value": 0.5
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "noise-4d:lacunarity",
|
||||
"key": "lacunarity",
|
||||
"label": "Lacunarity",
|
||||
"direction": "input",
|
||||
"dataType": "float",
|
||||
"accepts": ["float", "any"],
|
||||
"maxIncomingLinks": 1,
|
||||
"visible": true,
|
||||
"defaultValue": {
|
||||
"kind": "number",
|
||||
"value": 2
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "noise-4d:offset",
|
||||
"key": "offset",
|
||||
"label": "Offset",
|
||||
"direction": "input",
|
||||
"dataType": "float",
|
||||
"accepts": ["float", "any"],
|
||||
"maxIncomingLinks": 1,
|
||||
"visible": true,
|
||||
"defaultValue": {
|
||||
"kind": "number",
|
||||
"value": 0
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "noise-4d:gain",
|
||||
"key": "gain",
|
||||
"label": "Gain",
|
||||
"direction": "input",
|
||||
"dataType": "float",
|
||||
"accepts": ["float", "any"],
|
||||
"maxIncomingLinks": 1,
|
||||
"visible": true,
|
||||
"defaultValue": {
|
||||
"kind": "number",
|
||||
"value": 1
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "noise-4d:distortion",
|
||||
"key": "distortion",
|
||||
"label": "Distortion",
|
||||
"direction": "input",
|
||||
"dataType": "float",
|
||||
"accepts": ["float", "any"],
|
||||
"maxIncomingLinks": 1,
|
||||
"visible": true,
|
||||
"defaultValue": {
|
||||
"kind": "number",
|
||||
"value": 0
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "noise-4d:factor",
|
||||
"key": "factor",
|
||||
"label": "Factor",
|
||||
"direction": "output",
|
||||
"dataType": "float",
|
||||
"accepts": [],
|
||||
"maxIncomingLinks": 0,
|
||||
"visible": true
|
||||
},
|
||||
{
|
||||
"id": "noise-4d:color",
|
||||
"key": "color",
|
||||
"label": "Color",
|
||||
"direction": "output",
|
||||
"dataType": "color",
|
||||
"accepts": [],
|
||||
"maxIncomingLinks": 0,
|
||||
"visible": true
|
||||
}
|
||||
],
|
||||
"muted": false,
|
||||
"collapsed": false,
|
||||
"extensions": {},
|
||||
"known": true
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
"id": "compositor-grade",
|
||||
"fromNodeId": "compositor-image",
|
||||
"fromSocketId": "compositor-image:image",
|
||||
"toNodeId": "master",
|
||||
"toSocketId": "master:image",
|
||||
"muted": false,
|
||||
"extensions": {}
|
||||
}
|
||||
],
|
||||
"metadata": {}
|
||||
}
|
||||
+20
@@ -0,0 +1,20 @@
|
||||
import { createApplicationFxNode } from "../application-browser.js";
|
||||
import { prepareFxNodeBrowserHost } from "../../shared/browser-host.js";
|
||||
import initialLayout from "./initialLayout.json" with { type: "json" };
|
||||
const canvas = document.querySelector("canvas")!;
|
||||
const host = prepareFxNodeBrowserHost({ canvas });
|
||||
let root: Awaited<ReturnType<typeof createApplicationFxNode>> | undefined,
|
||||
view: Awaited<ReturnType<NonNullable<typeof root>["attachView"]>> | undefined;
|
||||
try {
|
||||
root = await createApplicationFxNode();
|
||||
await root.setState(initialLayout);
|
||||
view = await root.attachView({ canvas, viewport: host.initialViewport });
|
||||
host.attach(root, view);
|
||||
await view.whenRendered();
|
||||
window.parityExample = { root, view };
|
||||
} catch (error) {
|
||||
host.destroy();
|
||||
await view?.detach();
|
||||
root?.destroy();
|
||||
throw error;
|
||||
}
|
||||
+13
@@ -0,0 +1,13 @@
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background: #202124;
|
||||
}
|
||||
canvas {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>FxNode ramp test</title>
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
background: #111;
|
||||
}
|
||||
canvas {
|
||||
display: block;
|
||||
width: 1200px;
|
||||
height: 640px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="ramp"></canvas>
|
||||
<script type="module" src="./main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,128 @@
|
||||
{
|
||||
"graphId": "ramp-test",
|
||||
"catalogVersion": 4,
|
||||
"nodes": [
|
||||
{
|
||||
"id": "frame",
|
||||
"typeId": "fxnode.common.frame",
|
||||
"typeVersion": 1,
|
||||
"known": true,
|
||||
"position": {
|
||||
"x": -300,
|
||||
"y": 250
|
||||
},
|
||||
"size": {
|
||||
"x": 380,
|
||||
"y": 310
|
||||
},
|
||||
"label": "Frame",
|
||||
"parameters": {},
|
||||
"sockets": [],
|
||||
"muted": false,
|
||||
"collapsed": false,
|
||||
"extensions": {}
|
||||
},
|
||||
{
|
||||
"id": "ramp",
|
||||
"typeId": "fxnode.shader.color-ramp",
|
||||
"typeVersion": 2,
|
||||
"known": true,
|
||||
"position": {
|
||||
"x": 40,
|
||||
"y": -40
|
||||
},
|
||||
"size": {
|
||||
"x": 320,
|
||||
"y": 292
|
||||
},
|
||||
"label": "Color Ramp",
|
||||
"parameters": {
|
||||
"ramp": {
|
||||
"kind": "json",
|
||||
"value": {
|
||||
"colorMode": "rgb",
|
||||
"interpolation": "linear",
|
||||
"hueInterpolation": "near",
|
||||
"stops": [
|
||||
{
|
||||
"id": "red",
|
||||
"position": 0.1,
|
||||
"color": [
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
1
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "green",
|
||||
"position": 0.35,
|
||||
"color": [
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0.8
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "blue",
|
||||
"position": 0.9,
|
||||
"color": [
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0.6
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"sockets": [
|
||||
{
|
||||
"id": "ramp:factor",
|
||||
"key": "factor",
|
||||
"label": "Factor",
|
||||
"direction": "input",
|
||||
"dataType": "float",
|
||||
"accepts": [
|
||||
"float",
|
||||
"any"
|
||||
],
|
||||
"maxIncomingLinks": 1,
|
||||
"visible": true,
|
||||
"defaultValue": {
|
||||
"kind": "number",
|
||||
"value": 0.5
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "ramp:color",
|
||||
"key": "color",
|
||||
"label": "Color",
|
||||
"direction": "output",
|
||||
"dataType": "color",
|
||||
"accepts": [],
|
||||
"maxIncomingLinks": 0,
|
||||
"visible": true
|
||||
},
|
||||
{
|
||||
"id": "ramp:alpha",
|
||||
"key": "alpha",
|
||||
"label": "Alpha",
|
||||
"direction": "output",
|
||||
"dataType": "float",
|
||||
"accepts": [],
|
||||
"maxIncomingLinks": 0,
|
||||
"visible": true
|
||||
}
|
||||
],
|
||||
"muted": false,
|
||||
"collapsed": false,
|
||||
"extensions": {},
|
||||
"parentId": "frame"
|
||||
}
|
||||
],
|
||||
"links": [],
|
||||
"metadata": {}
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
import { createApplicationFxNode, type ApplicationFxNode } from "../application-browser.js";
|
||||
import type { FxNodeView } from "@lib/index.js";
|
||||
import { prepareFxNodeBrowserHost } from "../../shared/browser-host.js";
|
||||
import initialLayout from "./initialLayout.json" with { type: "json" };
|
||||
const canvas = document.querySelector<HTMLCanvasElement>("#ramp");
|
||||
if (!canvas) throw new Error("Ramp test canvas missing");
|
||||
const host = prepareFxNodeBrowserHost({ canvas });
|
||||
const handle: { root: ApplicationFxNode | null; view: FxNodeView | null; ready: Promise<void> } = {
|
||||
root: null,
|
||||
view: null,
|
||||
ready: Promise.resolve(),
|
||||
};
|
||||
(window as typeof window & { rampTest: typeof handle }).rampTest = handle;
|
||||
handle.ready = (async () => {
|
||||
let root: ApplicationFxNode | undefined, view: FxNodeView | undefined;
|
||||
try {
|
||||
root = await createApplicationFxNode();
|
||||
await root.setState(initialLayout);
|
||||
view = await root.attachView({ canvas, viewport: host.initialViewport });
|
||||
handle.root = root;
|
||||
handle.view = view;
|
||||
host.attach(root, view);
|
||||
await view.whenRendered();
|
||||
} catch (error) {
|
||||
host.destroy();
|
||||
await view?.detach();
|
||||
root?.destroy();
|
||||
throw error;
|
||||
}
|
||||
})();
|
||||
+30
@@ -0,0 +1,30 @@
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
font-family: system-ui, sans-serif;
|
||||
background: #111318;
|
||||
color: #e5e5e5;
|
||||
}
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
main {
|
||||
width: 1200px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
h1 {
|
||||
margin: 0 0 4px;
|
||||
font-size: 22px;
|
||||
}
|
||||
p {
|
||||
margin: 0 0 12px;
|
||||
color: #aeb2ba;
|
||||
font-size: 14px;
|
||||
}
|
||||
canvas {
|
||||
display: block;
|
||||
width: 1200px;
|
||||
height: 640px;
|
||||
}
|
||||
Reference in New Issue
Block a user