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>
2026-07-27 02:53:44 +00:00
parent 8a8369706b
commit d4e8634f67
290 changed files with 48804 additions and 1995 deletions
@@ -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;
+  }
+})();