Lightgraph.js是一个 Javascript 节点图引擎库，可以实现类似虚幻引擎的蓝图编程，包括一个编辑器来构建和测试节点图，支持浏览器和Node.js，可以轻松集成到任何现有的 Web 应用程序中，并且无需编辑器即可运行节点图。
在线工具推荐： Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器
1、Lightgraph.js演示
演示包括一些lieghtgraph.js节点图示例。 为了尝试它们，可以访问 演示站点或将其安装在本地计算机上，为此需要 先安装git、node 和 npm，然后运行以下命令进行尝试：
$ git clone https://github.com/jagenjo/litegraph.js.git
$ cd litegraph.js
$ npm install
$ node utils/server.js
Example app listening on port 80!
打开浏览器并将其指向 http://localhost:8000/ ， 就可以从页面顶部的下拉列表中选择一个演示。
2、Lightgraph.js主要特性
- 在Canvas2D上渲染。放大/缩小和平移，易于渲染复杂界面，可在WebGLTexture内部使用
- 易于使用的编辑器。搜索框、键盘快捷键、多项选择、上下文菜单…
- 优化以支持每个节点图数百个节点。在编辑器上以及在执行时
- 可定制的主题。颜色、形状、背景
- 用于个性化节点的每个动作/绘图/事件的回调
- 支持子图，包含图本身的节点
- 实时模式系统。隐藏节点图，但调用节点来渲染它们想要的任何内容，对于创建 UI 很有用
- 节点图可以在 NodeJS 中执行
- 高度可定制的节点。颜色、形状、垂直或水平插槽、小部件、自定义渲染
- 易于集成到任何 JS 应用程序中。单个文件，无依赖项
- 支持TypeScript
3、Lightgraph.js提供的节点
尽管创建新的节点类型很容易，但 LiteGraph 附带了一些在许多情况下可能有用的默认节点：
- 界面（小部件）
- 数学（三角学、数学运算）
- 音频（AudioAPI 和 MIDI）
- 3D 图形（WebGL 中的后处理）
- 输入（读取游戏手柄）
4、Lightgraph.js快速上手
可以使用 npm 安装：
npm install litegraph.js
或者从 此存储库 下载 build/litegraph.js 和 css/litegraph.css 版本。
下面的代码就是lightgraph.js版的hello world：
<html>
<head>
<link rel="stylesheet" type="text/css" href="litegraph.css">
<script type="text/javascript" src="litegraph.js"></script>
</head>
<body style='width:100%; height:100%'>
<canvas id='mycanvas' width='1024' height='720' style='border: 1px solid'></canvas>
<script>
var graph = new LGraph();
var canvas = new LGraphCanvas("#mycanvas", graph);
var node_const = LiteGraph.createNode("basic/const");
node_const.pos = [200,200];
graph.add(node_const);
node_const.setValue(4.5);
var node_watch = LiteGraph.createNode("basic/watch");
node_watch.pos = [700,200];
graph.add(node_watch);
node_const.connect(0, node_watch, 0 );
graph.start()
</script>
</body>
</html>
5、创建自定义lightgraph.js节点
非常简单！定义一个类，实现约定的接口，然后用 registerNodeType 方法注册节点即可！
以下是如何构建对两个输入求和的节点的示例：
//node constructor class
function MyAddNode()
{
this.addInput("A","number");
this.addInput("B","number");
this.addOutput("A+B","number");
this.properties = { precision: 1 };
}
//name to show
MyAddNode.title = "Sum";
//function to call when the node is executed
MyAddNode.prototype.onExecute = function()
{
var A = this.getInputData(0);
if( A === undefined )
A = 0;
var B = this.getInputData(1);
if( B === undefined )
B = 0;
this.setOutputData( 0, A + B );
}
//register in the system
LiteGraph.registerNodeType("basic/sum", MyAddNode );
或者你也可以使用 wrapFunctionAsNode包装已有的函数：
function sum(a,b)
{
return a+b;
}
LiteGraph.wrapFunctionAsNode("math/sum",sum, ["Number","Number"],"Number");
6、在服务端使用lightgraph.js
Lightgraph.js也可以使用 NodeJS 在服务器端工作，尽管某些节点不能在服务器中工作（音频、图形、输入等）。
var LiteGraph = require("./litegraph.js").LiteGraph;
var graph = new LiteGraph.LGraph();
var node_time = LiteGraph.createNode("basic/time");
graph.add(node_time);
var node_console = LiteGraph.createNode("basic/console");
node_console.mode = LiteGraph.ALWAYS;
graph.add(node_console);
node_time.connect( 0, node_console, 1 );
graph.start()
原文链接：Lightgraph.js节点图引擎 — BimAnt
