使用 flow-graph-mcp-server 以 AI 驱动方式构建 Babylon.js Flow Graph

图形学游戏开发3D渲染【免费下载链接】Babylon.jsBabylon.js is a powerful, beautiful, simple, and open game and rendering engine packed into a friendly JavaScript framework.项目地址https://gitcode.com/gh_mirrors/ba/Babylon.js点击查看免费下载本文围绕 Babylon.js 仓库中的packages/tools/flow-graph-mcp-server展开系统讲解这个为 AI 智能体设计的 MCPModel Context Protocol服务器它如何让 LLM 通过标准工具调用创建、编辑、校验并导出 Flow Graph可视化脚本图以及导出的 JSON 如何被 Babylon.js 运行时与 Scene MCP 服务器消费。读完本文你将掌握该服务器提供的全部 MCP 工具、资源与 Prompt理解信号连接与数据连接、事件块out/done输出语义、丰富类型序列化格式等关键概念并能复现创建点击处理、可见性切换、点击移动其他网格等典型交互图的完整构建流程。一、Flow Graph MCP Server 是什么Flow Graph 是 Babylon.js 中的可视化脚本系统开发者以事件块 执行块 数据块组成有向图来描述场景交互逻辑。flow-graph-mcp-server把这套系统的建图能力包装成一组 MCP 工具使 AI 智能体或任何 MCP 客户端能够创建create、查看inspect、校验validate、删除deleteFlow Graph添加块block并连接数据端口data port或信号端口signal port更新块的属性property与上下文变量context variable导出 coordinator 级 JSON 或纯图级graph-onlyJSON导入此前导出的 Flow Graph JSON 继续编辑。据 src/index.ts 的头部注释该服务器从 Flow Graph 完整块目录中提供约 165 种块类型传输层采用 MCP 标准的 stdio 传输本地工具服务器的标准做法。服务器名称与二进制名均为babylonjs-flow-graph见 src/index.ts 中new McpServer({ name: babylonjs-flow-graph, version: 1.0.0 })。与 Scene MCP 的分工README 明确给出了集成分工Flow Graph MCP 负责建图并导出 JSONScene MCP 负责把图挂到场景里。导出的 coordinator JSON 可以交给 Scene MCP 服务器通过attach_flow_graph工具内联 JSON 或coordinatorJsonFile文件路径两种方式附加到场景。这条链路正是 AI 驱动 Babylon.js 场景编排的关键一环。二、设计原理零运行时依赖的序列化数据模型理解该服务器前先看它的设计目标。在 flowGraphManager.ts 的文件头注释中明确写了两条无 Babylon.js 运行时依赖MCP 服务器必须保持为轻量、独立的进程它只操作一个镜像FlowGraphCoordinator.serialize()输出的 JSON 数据模型不加载 Babylon.js 引擎。有状态且可增量编辑manager 在内存中保存当前图AI 智能体可以反复 add/connect/set最后一次性导出多个图可以按名字共存Mapstring, InMemoryGraph。这意味着整个建图过程发生在纯 JSON 世界不触碰引擎天然适合需要逐步决策的 LLM 会话。序列化格式与引擎侧的对应Manager 中定义了与引擎序列化格式一一对应的接口见 flowGraphManager.tsISerializedConnection连接点含uniqueId、name、_connectionType0输入1输出、connectedPointIds、richType类型名与默认值、optional、defaultValue等字段ISerializedBlock单个块的序列化形式含className如FlowGraphAddBlock、config、uniqueId、四组连接点dataInputs / dataOutputs / signalInputs / signalOutputs、metadataISerializedContext执行上下文含_userVariables与_connectionValuesISerializedFlowGraph单张图含allBlocks与executionContextsISerializedCoordinatorcoordinator 顶层结构含_flowGraphs数组与dispatchEventsSynchronously布尔开关。引擎侧对应关系可以在 flowGraphCoordinator.ts 的serialize()方法中验证它输出的正是serializationObject._flowGraphs [...]与serializationObject.dispatchEventsSynchronously与 Manager 的exportJSON()结构完全一致flowGraphManager.ts 中exportJSON构造{ _flowGraphs: [serializedGraph], dispatchEventsSynchronously: false }。这也印证了 README 与工具描述中所说的导出 JSON 可由FlowGraphCoordinator.parse()在运行时加载。丰富类型的默认值flowGraphManager.ts中维护了一张丰富类型默认值表建块时写入每个数据端口的richType.defaultValue类型默认值anyundefinedstringnumber0booleanfalseFlowGraphInteger{ value: 0, className: FlowGraphInteger }Vector2{ value: [0, 0], className: Vector2 }Vector3{ value: [0, 0, 0], className: Vector3 }Vector4{ value: [0, 0, 0, 0], className: Vector4 }Quaternion{ value: [0, 0, 0, 1], className: Quaternion }Matrix4x4 单位矩阵16 个元素的数组className: MatrixColor3{ value: [0, 0, 0], className: Color3 }Color4{ value: [0, 0, 0, 0], className: Color4 }Matrix2D/Matrix3D2x2 / 3x3 单位矩阵三、构建与运行仓库中该包位于 packages/tools/flow-graph-mcp-server包名为tools/flow-graph-mcp-server见 package.json。README 给出的构建与运行命令npm run build -w tools/flow-graph-mcp-server npm run start -w tools/flow-graph-mcp-serverpackage.json还提供了devtsc --watch增量编译与clean清空 dist脚本构建底层走rollup -c配置文件复用 rollup.config.mjs 中从../rollup.config.mcp.mjs引入的通用 MCP 构建配置。服务器启动后通过标准输入输出stdio与 MCP 客户端通信日志输出到 stderrsrc/index.ts 的Main()打印 Babylon.js Flow Graph MCP Server running on stdio。依赖方面它基于modelcontextprotocol/sdk、内部工具库tools/mcp-server-core与zod用于工具输入校验。二进制入口为babylonjs-flow-graph四、三个内置 MCP 资源只读参考数据服务器注册了三个资源供 AI 智能体随时查阅建图所需的元信息src/index.tsflow-graph://block-catalog完整块目录的 Markdown 摘要由GetBlockCatalogSummary()生成对应 blockRegistry.ts 中的静态目录。flow-graph://rich-types数据连接使用的类型参考。除了上一节的类型默认值表还明确给出序列化值格式number42、3.14booleantrue、falsestringhelloVector3{ value: [1, 2, 3], className: Vector3 }Color3{ value: [1, 0, 0], className: Color3 }Quaternion{ value: [0, 0, 0, 1], className: Quaternion }Matrix{ value: [16 个元素], className: Matrix }Mesh 引用{ name: myMesh, className: Mesh, id: mesh-id }。flow-graph://conceptsFlow Graph 概念文档涵盖事件块/执行块/数据块的三角色模型、信号流与数据流的区别、常见交互模式、对象绑定方式与out/done陷阱详见下文。五、核心概念信号连接、数据连接与事件块陷阱信号流 vs 数据流Flow Graph 有两类连接语义完全不同flow-graph://concepts资源信号连接Signal控制何时执行。链路形如Event → Execution Block → Execution Block → …用connect_signal把源块的信号输出接到目标块的信号输入默认名in。它决定执行顺序类似电路中的控制线。数据连接Data控制用什么值。链路是数据块的输出 → 执行块的输入用connect_data连接携带类型化的值message、condition、a、b等输入。事件块的out与done最常见的坑事件块通常有两个语义完全不同的信号输出这也是服务器instructions与concepts资源反复强调的要点out图启动时只触发一次初始化适合做 setup 逻辑done每次事件真正发生都触发每次点击、每帧 tick适合做交互响应。因此MeshPickEvent、PointerOverEvent、PointerOutEvent、SceneTickEvent的响应逻辑必须连done而非out唯独SceneReadyEvent用out是正确的场景就绪只发生一次。例如经典的点击切换可见性模式MeshPickEvent.done → Branch.in ⚠ 用 done不要用 out GetProperty(visible).value → Branch.condition Branch.onTrue → SetProperty(visiblefalse).in Branch.onFalse → SetProperty(visibletrue).in config.targetMesh 必须设置: { type: Mesh, name: myMeshName }服务器对out→done误用做了三层防护connect_signal会对事件块自动把out重映射为doneflowGraphManager.ts 的connectSignal中Gap 32逻辑返回结果附带提示validate_graph会检测out已连接而done未连接并给出警告SceneReadyEvent除外add_block在添加需要网格目标的事件块而缺少targetMesh时直接返回警告。对象/网格绑定显式连接 vs 配置默认值GetProperty.object、SetProperty.object、MeshPickEvent.asset有两种绑定方式显式数据连接推荐用connect_data把网格来源pickedMesh/GetAsset.value/GetVariable.value接到 object/asset 输入在编辑器中可见可编辑配置默认值设置config.object/config.targetGet/SetProperty或config.targetMeshMeshPickEvent为网格引用{ name: myMesh, className: Mesh }仅在不需要连线时使用。底层实现中flowGraphManager.ts的CONFIG_TO_INPUT_DEFAULT_ALIASES表记录了引擎构造器把配置键映射到数据输入的别名关系targetMesh → asset、target → object。propagateConfigToInputDefaults()会把配置值写到对应数据输入的defaultValue上使引擎与编辑器读到的默认值一致这正是 examples/DefaultScene_ClickSphereColor.flowgraph.json 中FlowGraphMeshPickEventBlock的asset输入带有defaultValue: { className: Mesh, name: sphere }的原因。一个进阶场景点击一个网格、移动另一个网格如点击球、把盒子向上移动 0.1。此时被点击的网格与被修改的网格不是同一个不能把pickedMesh接进 GetProperty/SetProperty 的 object 输入而应给它们各自独立的网格来源用GetAsset配置{ type: Mesh, index: TARGET_INDEX }或GetVariable配置{ variable: targetMesh }配合set_variable预置网格引用再把其.value分别连到 GetProperty/SetProperty 的 object 输入。上下文变量变量在图的多次执行之间持续存在并可在块之间共享SetVariable存值、GetVariable取值导出前用set_variable工具初始化值flow-graph://concepts资源。序列化后变量保存在执行上下文的_userVariables中如 examples/ToggleVisibility.flowgraph.json 里的_userVariables: { isVisible: true }。六、完整工具参考服务器注册了二十余个工具src/index.ts按职责分组如下。所有工具的参数均使用 zod schema 描述并校验。图生命周期工具说明create_graph在内存中新建空图总是建图第一步成功后返回 MCP Session URLdelete_graph按名字删除图并关闭对应会话clear_all清空内存中所有图恢复干净状态list_graphs列出内存中所有图名get_session_url/start_session获取/开启某图的实时编辑会话 URL可粘贴到 Flow Graph Editor 的 MCP 会话面板close_session/stop_session_server关闭某图会话 / 停止整个 HTTP/SSE 会话服务器create_graph只要求一个name参数如ClickHandler、AnimationController。会话机制由tools/mcp-server-core的McpEditorSessionController提供默认端口 3001使 Flow Graph Editor 能实时同步 MCP 端对图的每次修改每次增删块、连线后都会调用_notifyIfSession。块操作工具说明add_block添加块返回块的数字id供连线使用blockType来自目录如SceneReadyEvent、Branch、ConsoleLog、Add、SetProperty可选name与configremove_block删除块并级联删除所有关联连接set_block_config更新已有块的配置键由块类型决定可用get_block_type_info查询add_blocks_batch一次添加多个块比反复调用add_block高效返回全部 id支持type作为blockType的别名常用config示例add_block工具描述原文Constant{ value: 42 }或{ value: { value: [1,2,3], className: Vector3 } }GetVariable/SetVariable{ variable: myVar }SetProperty/GetProperty{ propertyName: position }、{ propertyName: isVisible }Sequence{ outputSignalCount: 3 }Switch{ cases: [0, 1, 2] }SendCustomEvent/ReceiveCustomEvent{ eventId: myEvent }FunctionReference{ code: function(params) { ... } }MeshPickEvent{ targetMesh: { type: Mesh, name: meshName } }必需否则点击事件静默失效动态端口是建块时的隐藏行为Sequence/MultiGate类块按outputSignalCount生成out_0、out_1…Switch按cases数组生成case_0、case_1…WaitAll按inputSignalCount生成in_0、in_1…flowGraphManager.ts 的addBlock。连接操作工具说明connect_signal源块信号输出 → 目标块信号输入默认输出名out、输入名in对事件块自动重映射out→done输出/输入名均支持多个别名signalOutputName/outputName/signalOut/outNamedisconnect_signal断开某信号输出的全部目标connect_data源块数据输出 → 目标块数据输入如pickedPoint→messagedisconnect_data断开某数据输入的全部来源connect_signals_batch批量连接多个信号对connect_data_batch批量连接多个数据对数据连接在端口名上做了容错当Constant块实际输出名是output而 LLM 常写value时connectData会按别名表value ↔ output自动匹配flowGraphManager.ts。信号连接的数据结构方向也值得注意信号连接时输出端记录输入端的uniqueId数据连接时输入端记录输出端的uniqueId对应引擎的反序列化约定。变量、查询与校验工具说明set_variable设置图上下文变量复杂类型用序列化格式Vector3等describe_graph返回整张图的 Markdown 描述按分类分组的块、每条数据/信号连接、上下文变量describe_block返回单个块的详细描述类名、分类、配置、四组端口及连接状态list_block_types列出全部块类型可按Event、Execution、ControlFlow、Animation、Data、Math、Vector、Matrix、Combine、Extract、Conversion、Utility分类过滤get_block_type_info查询某块类型的信号输入/输出、数据输入/输出含类型、可选性、config 键说明validate_graph运行校验并返回问题列表存在 ERROR 级问题时工具返回isError导入导出工具说明export_graph_json导出 coordinator 级 JSON可由FlowGraphCoordinator.parse()加载graphOnly: true时只导出图级 JSON适合嵌入 glTF 等格式outputFile可写盘避免超大 JSON 挤占对话上下文import_graph_json导入已有 JSON 到内存继续编辑接受 coordinator 级或图级两种格式支持内联json或jsonFile路径二选一import_graph_json内部走ValidateFlowGraphAttachmentPayload见 sceneAttachmentValidation.ts校验 payload取graphs[0]重建内存图对未知块类型会用_makeUnknownTypeInfo生成 Utility 分类的兜底类型信息保证导入不断链flowGraphManager.ts 的importJSON。七、标准工作流与配置容错机制README 给出的典型工作流create_graph - add_block - connect_data/connect_signal - set_block_properties - validate_graph - export_graph_json服务器指令文本instructions把这一流程补充为更完整的形式create_graph → 添加事件块入口点→ 添加动作/逻辑块 → 连接信号执行流与数据类型化值→ validate_graph → export_graph_json。同时强调每张图至少需要一个事件块作为入口、MeshPickEvent必须配置targetMesh、事件驱动逻辑用done而非out、输出 JSON 可交给 Scene MCP 的attach_flow_graph消费。在配置容错上flowGraphManager.ts提供了两类对 LLM 友好的机制配置键别名规范化_normalizeConfigAliases把 LLM 常写的键名映射到引擎规范名如variableName→variable、variableNames→variables、varName→variable、eventName→eventId并支持大小写不敏感匹配未知配置键警告add_block会对不在该块类型 config schema 中的键返回Unknown config key警告并提示已知键列表帮助 LLM 自纠。八、六个内置 Prompt开箱即用的建图模板服务器注册了六个 Prompt提示词模板每个都给出了可直接执行的建图步骤Prompt用途create-click-handler点击网格时记录拾取点MeshPickEvent.done → ConsoleLog.in数据连接pickedPoint → messagecreate-toggle-visibility点击切换可见性done → Branch.inGetProperty(isVisible).value → Branch.conditiononTrue/onFalse分别驱动两个SetProperty(isVisible)create-click-move-other-mesh点击球移动盒子网格来源用独立GetAsset/GetVariableAdd累加Constant(Vector3 0,0.1,0)后写入SetProperty(position)create-animation-on-ready场景就绪播放动画SceneReadyEvent.out → PlayAnimation.inGetAsset提供动画组两个Constant分别接speed与loopcreate-tick-counter每 60 帧记一次数SceneTickEventGetVariable/SetVariableAddModuloEqualityBranchcreate-state-machine变量驱动开关状态机GetVariable(isActive)分支两条路径分别SetVariable(false/true)并打日志以create-toggle-visibility为例其完整步骤为create_graph ToggleVisibility→ 添加带targetMesh配置的MeshPickEvent→ 添加GetProperty{ propertyName: isVisible }并connect_data pickedMesh → GetProperty.object→ 添加Branchconnect_signal done → Branch.in、connect_data GetProperty.value → Branch.condition→ 添加两个SetPropertyisVisible的 false/true 版本→connect_signal Branch.onTrue/onFalse → SetProperty.in→ 把pickedMesh接到两个SetProperty.object→validate_graph→export_graph_json。九、校验规则validate_graph 会检查什么validate_graphflowGraphManager.ts 的validateGraph按以下规则输出 WARNING/ERROR图为空 →WARNING: Graph is empty缺少事件块 → 警告至少需要一个事件块作为入口必需数据输入非 optional 且无 config 默认值未连接 → 警告执行块有信号输出没有入站信号连接 → 警告可能永远不会执行信号输出 / 数据输入引用了不存在的连接目标 →ERROR悬空引用MeshPickEvent/PointerOverEvent/PointerOutEvent既无targetMesh配置也未连接asset输入 → 警告事件将静默失效事件块out已连接而done未连接SceneReadyEvent除外→ 提示是否想连done。全部通过时输出OK: No issues found。单元测试 flowGraphManager.test.ts 覆盖了图生命周期、默认执行上下文、块添加、未知块类型拒绝、缺图错误、信号/数据连接与out→done重映射、coordinator JSON 结构校验_flowGraphs、allBlocks、executionContexts、dispatchEventsSynchronously等行为可作为行为契约参考。十、导出格式与仓库示例导出结果以_flowGraphs数组包裹顶层带dispatchEventsSynchronously默认false。仓库 examples 目录提供了 9 个完整示例*.flowgraph.json包括DefaultScene_ClickSphereColor.flowgraph.json点击球切换漫反射颜色——MeshPickEventGetProperty(material)FlipFlop 两个Constant(Color3) 两个SetProperty(diffuseColor)ToggleVisibility.flowgraph.json点击盒子切换可见性上下文预置isVisible: trueDefaultScene_ClickBoxJump、DefaultScene_ClickCylinderToggle、SphereClickRotateGround、AnimateOnReady、ClickLogger、SequentialSetup、TickCounter等。这些文件与flowGraphManager.ts的导出结构逐字段对应是最直观的可运行格式参考。十一、与 Scene MCP 集成README 的 Integration 一节给出了落地路径将导出的 coordinator JSON 通过 Scene MCP 服务器的attach_flow_graph附加到场景既支持内联 JSON也支持coordinatorJsonFile文件路径。import_graph_json使用的ValidateFlowGraphAttachmentPayload与 Scene MCP 的附件校验共用同一套tools/mcp-server-core工具库sceneAttachmentValidation.ts保证Flow Graph 导出 → Scene 附加链路中 JSON 格式的一致性。十二、动手建议按仓库构建在仓库根目录执行npm run build -w tools/flow-graph-mcp-server与npm run start -w tools/flow-graph-mcp-server即可启动 stdio 服务器接入你的 MCP 客户端。先读资源再动手让智能体先读取flow-graph://concepts与flow-graph://rich-types能显著减少out/done混用、丰富类型格式错误等问题。以小步验证遵循create_graph → add_block → connect_* → set_block_config → validate_graph → export_graph_json的顺序每次add_block/连线后可用describe_graph复查最后用validate_graph兜底。善用模板与批处理交互场景可从六个内置 Prompt 起步需要建大量块/连线时用add_blocks_batch、connect_signals_batch、connect_data_batch减少往返。与示例对照用import_graph_json载入 examples 中的 JSON再describe_graph是理解合法图长什么样的高效路径。赞分享图形学游戏开发3D渲染【免费下载链接】Babylon.jsBabylon.js is a powerful, beautiful, simple, and open game and rendering engine packed into a friendly JavaScript framework.项目地址https://gitcode.com/gh_mirrors/ba/Babylon.js点击查看免费下载相关推荐perfetto-sdk-protos-gpuPerfetto Rust SDK 的 GPU 事件 Protobuf 绑定 crateperfetto sdk protos gpuPerfetto Rust SDK 的 GPU 事件 Protobuf 绑定 crate 本文基于 Perfet图形学游戏开发3D渲染如何看懂 cwc-workshops 的 runner.ts 验证运行器React 组件验证四步流水线完整指南如何看懂 cwc workshops 的 runner.ts 验证运行器React 组件验证四步流水线完整指南 cwc workshops 是一个开源的 AI图形学游戏开发3D渲染ChatGPT Shortcut 浏览器扩展使用指南侧边栏、显示模式与 AltShiftS 快捷键ChatGPT Shortcut 浏览器扩展使用指南侧边栏、显示模式与 AltShiftS 快捷键 导读 本文基于 ChatGPT ShortcutAAI 应用提示工程人工智能前端上一篇从卡顿到丝滑Redux Thunk如何拯救实时地图的状态管理下一篇3个技巧用Sandboxie打造安全隔离的虚拟工作空间创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考