资讯动态

Babylon.js MCP Tools 全景解析:用 Model Context Protocol 打通 Babylon.js 全套创作工作流

发布时间:2026/10/1 2:37:17 来源:尧图企业网站定制
图形学游戏开发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目录下维护了一套基于 Model Context ProtocolMCP的工具包将 Node Material、Flow Graph、GUI、Node Geometry、Node Render Graph、Node Particle 与 Smart Filters 等创作子系统逐一封装为可被 MCP 兼容客户端AI 助手、编辑器、自动化管线直接调用的服务器。本文以仓库内的 packages/tools/README.md 为主线结合各子包 README 与源码系统讲解这套 MCP 工具族的架构分工、通用工作流、共享约定、构建方式与已知边界读完后你将清楚掌握如何把 Babylon.js 的图形化创作能力接入任何 MCP 生态。一、目录定位MCP 工具族在仓库中的位置packages/tools是 Babylon.js 官方开发工具集散地包含编辑器nodeEditor、guiEditor、flowGraphEditor、playground 等、解码器ktx2Decoder、测试工具与若干 MCP 服务器。其中MCPModel Context Protocol工具族专门负责把 Babylon.js 的创作工作流暴露给 MCP 兼容客户端This directory contains the Babylon.js Model Context Protocol tooling packages used to expose Babylon.js authoring workflows to MCP-compatible clients.这意味着 AI 助手可以绕过 GUI通过标准化的工具调用tool call来创建、编辑、校验和导出各类 Babylon.js 图结构。这是将「可视化节点编辑器」能力转化为「程序化可调用的 API 面」的核心工程。二、包族谱8 个包的职责分工MCP 工具族目前由 8 个包组成职责如下引自 packages/tools/README.md 的 Packages 表格包名用途mcp-server-core共享内部助手MCP 响应塑形、schema 片段、校验与文件交接行为nme-mcp-serverNode Material 图创作与导入/导出工作流flow-graph-mcp-serverFlow Graph 创作与协调器coordinatorJSON 导出/导入工作流gui-mcp-serverBabylon.js GUI 创作、布局、导出/导入与 snippet 流程nge-mcp-serverNode Geometry 图创作与导出/导入工作流nrge-mcp-serverNode Render Graph 创作与渲染管线导出/导入工作流npe-mcp-serverNode Particle 图创作与导出/导入工作流smart-filters-mcp-serverSmart Filters 图创作与导出/导入工作流1. mcp-server-core所有服务器的公共底座mcp-server-core不是独立的 MCP 服务器而是被其余服务器入口共同消费的基础设施见 packages/tools/mcp-server-core/README.md。其核心能力包括文本交接助手内联 JSON 与文件型 JSON 输入的统一解析textHandoff.ts共享 JSON 解析与输入校验助手jsonValidation.ts、inputValidation.ts通用 MCP 文本响应构造器response.ts共享的 JSON 导入/导出/snippet 响应助手jsonToolResponses.ts供多个工具复用的 Zod 字段级 schema 片段toolSchemas.tsScene 专属的 schema 分组与附件校验sceneToolSchemas.ts、sceneAttachmentValidation.ts浏览器安全的 WebMCP 注册、生命周期与写者仲裁助手webMcp.ts服务器包通过入口从该包复用 MCP 样板代码典型用法如下import { CreateJsonExportResponse, CreateJsonImportResponse, CreateOutputFileSchema, CreateJsonFileSchema } from ../../mcp-server-core/dist/index.js;这样既能集中维护重复的处理器逻辑又能保留各包本地的工具定义。其单元测试位于 packages/tools/mcp-server-core/test/unit覆盖输入校验、JSON 工具响应、场景附件校验等关键行为。2. nme-mcp-serverNode Material 图创作该服务器面向 AI 驱动的 Node Material 创作README提供创建、检查、删除内存中的 Node Material 图添加 block、连接端口、更新 block 属性导入/导出 NME JSON从 Babylon.js snippet 导入、保存到 snippet可选的 Node Material Editor 实时会话桥接其二进制入口为babylonjs-node-material。相关源码结构src/index.tsMCP 工具注册、src/materialGraph.ts内存图管理器、src/sessionServer.ts可选会话桥。3. flow-graph-mcp-serverFlow Graph 创作面向 Flow Graph行为/逻辑图创作README提供创建、检查、校验、删除 flow graph添加 block连接数据端口data与信号端口signal更新 block 属性与上下文变量导出协调器 JSON 或纯图 JSON导入此前导出的 flow graph JSON二进制入口为babylonjs-flow-graph。源码结构src/index.ts工具注册、src/flowGraphManager.ts图管理与导入导出、src/blockRegistry.tsblock 目录。4. gui-mcp-serverGUI 布局创作面向 Babylon.js GUI 布局创作README提供在内存中创建和管理 GUI 与控件添加控件、重设父级、更新控件属性管理 Grid 的行与列检查 GUI/控件结构导出/导入 Babylon.js GUI JSON从 snippet 导入、保存到 snippet二进制入口为babylonjs-gui。源码结构src/index.ts工具注册、src/guiManager.tsGUI 状态与序列化、src/catalog.ts控件目录与共享属性元数据。5. nge-mcp-serverNode Geometry 图创作面向 Node Geometry 创作README提供创建和管理内存中的 Node Geometry 图添加 block、连接端口、设置 block 属性检查图结构并校验几何图导出/导入 NGE JSON从 snippet 导入、保存到 snippet二进制入口为babylonjs-node-geometry。值得注意的是该服务器的图管理器与 block 目录被抽到了跨包共享的ngeMcpCommon中浏览器安全复用包括 geometryGraph.ts共享图管理器与序列化逻辑、blockRegistry.ts共享 block 目录、referenceData.ts枚举与概念参考数据。6. nrge-mcp-serverNode Render Graph 创作面向 Node Render Graph 创作README提供创建和管理自定义渲染图添加渲染图 block、连接端口、设置属性检查图结构并校验输出管线导出/导入 NRGE 兼容 JSON从 snippet 导入、保存到 snippet二进制入口为babylonjs-node-render-graph。实践中一个可用渲染图通常包含输入 block、渲染或后处理 block以及输出 block。源码结构src/index.ts工具注册、src/renderGraph.ts图管理与导入导出、src/blockRegistry.tsblock 目录。7. npe-mcp-serverNode Particle 创作面向 Node Particle粒子系统图创作README提供创建和管理内存中的粒子图组添加 block、连接端口、更新 block 属性检查并校验粒子系统导出/导入 NPE 兼容 JSON从 snippet 导入、保存到 snippet二进制入口为babylonjs-node-particle。大多数粒子图以SystemBlock结尾导出前必须连接其强制输入。源码结构src/index.ts工具注册、src/particleGraph.ts图管理与校验、src/blockRegistry.tsblock 目录。8. smart-filters-mcp-serverSmart Filters 后处理链创作Smart Filters 服务器是包族中最「标准」的 MCP 服务器README可让 MCP 客户端完全通过工具调用构建 Smart Filter 后处理链无需 GUI。其二进制入口为babylonjs-smart-filters。它提供了完整的工具分类分类工具生命周期create_filter_graph、list_filter_graphs、delete_filter_graph、clone_filter_graph、clear_all发现list_block_types、get_block_type_info、list_categories、describe_graph、describe_blockBlock 编辑add_block、add_blocks_batch、remove_block、set_block_properties、get_block_properties连接connect_blocks、connect_blocks_batch、disconnect_input、list_connections校验validate_graph、list_issues导入/导出export_filter_graph_json、import_filter_graph_json搜索find_blocks、find_block_types它还暴露了 MCP 资源Resource与提示词Prompt资源smart-filters://block-catalog完整 block 类型目录、smart-filters://enumsConnectionPointType 枚举参考、smart-filters://concepts核心概念提示词create-basic-filter单效果滤镜链、create-blur-filter可配置尺寸的模糊滤镜、create-tinted-desaturate去饱和 色调合成可用 block 类型覆盖 EffectsBlackAndWhiteBlock、BlurBlock、DirectionalBlurBlock、PosterizeBlock、DesaturateBlock、ContrastBlock、PixelateBlock 等、TransitionsCompositionBlock、TintBlock、WipeBlock、InputsFloat、Color3、Color4、Texture、Vector2、Boolean以及自动随新图创建的 OutputBlock。三、架构设计这些包如何协同按 packages/tools/README.md 的说明MCP 包被组织为专门的图或创作服务器每个服务器在内存中管理 Babylon.js 的一个子系统并且都能独立完成创建、编辑、校验与导出自己的图格式每个服务器维护一份内存中的图/文档状态不依赖持久化存储各服务器之间通过JSON 格式解耦导出方产出标准 JSON消费方未来的 Scene MCP读取 JSON未来的 Scene MCP 服务器将扮演编排者orchestrator消费这些服务器导出的 JSON把它们组装成可运行的场景。各子包 README 也印证了这一点NME JSON 通过add_material交给 Scene MCP内联或经nmeJsonFileFlow Graph 的协调器 JSON 通过attach_flow_graph附加内联或经coordinatorJsonFileGUI JSON 经attach_gui附加内联或guiJsonFileNGE JSON 经add_node_geometry_mesh生成网格内联或ngeJsonFileNRGE JSON 经attach_node_render_graph附加内联或nrgJsonFile。这种「生产-导出-装配」的分层设计让 AI 助手可以先分域构建各子系统再汇聚成完整场景。四、典型工作流五步通用模式所有服务器遵循相同的通用模式引自 packages/tools/README.md1. Create a graph/document in memory 2. Add blocks/controls/nodes and configure them 3. Connect ports or set properties 4. Validate the graph 5. Export to JSON (inline or to a file via outputFile)各子系统的具体调用链如下NMEcreate_material - add_block - connect_blocks - set_block_properties - validate_material - export_material_jsonFlow Graphcreate_graph - add_block - connect_data/connect_signal - set_block_properties - validate_graph - export_graph_jsonGUIcreate_gui - add_control - set_properties - describe_gui - export_gui_jsonGrid 布局通常在添加子控件前先做行列管理NGEcreate_geometry - add_block - connect_blocks - set_block_properties - validate_geometry - export_geometry_jsonNRGEcreate_render_graph - add_block - connect_blocks - set_block_properties - validate_graph - export_graph_jsonNPEcreate_particle_system - add_block - connect_blocks - set_block_properties - validate_particle_system - export_particle_system_json带参数的完整示例Smart FiltersSmart Filters 服务器给出了最详尽的带参数示例README展示如何构建「纹理输入 → 黑白 → 合成 → 输出」的完整滤镜链1. create_filter_graph namemyFilter 2. add_block graphIdmyFilter blockTypeTexture namesource 3. add_block graphIdmyFilter blockTypeBlackAndWhiteBlock namebw 4. connect_blocks graphIdmyFilter outputBlockIdsource.id outputNameoutput inputBlockIdbw.id inputNameinput 5. connect_blocks graphIdmyFilter outputBlockIdbw.id outputNameoutput inputBlockId1 inputNameinput 6. validate_graph graphIdmyFilter 7. export_filter_graph_json graphIdmyFilter outputFilemyFilter.json该服务器导出的 JSON 遵循Smart Filter V1 序列化格式{ format: smartFilter, formatVersion: 1, name: myFilter, blocks: [ ... ], connections: [ ... ] }五、共享约定跨服务器的参数一致性为保证 MCP 客户端能用同一套心智模型操作不同子系统packages/tools/README.md 明确列出了共享约定JSON 导出工具普遍支持outputFile把结果写到文件JSON 导入工具普遍支持json内联 JSON 字符串与jsonFile指向本地 JSON 文件启用 snippet 的服务器普遍支持snippetId从 Babylon.js snippet 服务器读取或保存共享的 schema、校验与响应助手集中在mcp-server-core中。这套约定保证了「内联 vs 文件交接」两种输入方式在各服务器间的行为一致也解释了为什么textHandoff.ts内联/文件输入解析与文件写出会被抽为公共模块。六、构建与运行开发工作流绝大多数 MCP 服务器支持相同的开发命令packages/tools/README.mdnpm run build -w tools/package-name npm run start -w tools/package-name以 nme 服务器为例包名为tools/nme-mcp-servernpm run build -w tools/nme-mcp-server npm run start -w tools/nme-mcp-server对应的二进制babylonjs-node-material babylonjs-flow-graph babylonjs-gui babylonjs-node-geometry babylonjs-node-render-graph babylonjs-node-particle babylonjs-smart-filtersRollup 打包实现MCP 服务器统一使用 Rollup 构建并消费tools/mcp-server-core的共享助手packages/tools/README.md。共享的 Rollup 配置位于 packages/tools/rollup.config.mcp.mjs每个服务器调用createConfig(./src/index.ts)产出单文件、自包含、经 esbuild 压缩的 ESM 包dist/index.js除 Node 内置模块外无外部依赖。配置细节包括保留#!/usr/bin/env nodeshebang保证npx/ bin 直接调用可用剥离源码内多余 shebang避免与 banner 冲突用zodV3CompatAlias将zod/v3兼容导入别名到已安装的 zod 包对node_modules内 zod 相关的循环依赖警告做白名单过滤monaco-editor保持 externalsnippet-loader 对 playground 转译的懒加载路径在 MCP 服务器中不会被触发因为服务器只加载数据型 snippet。以 nme-mcp-server/package.json 为例服务器依赖modelcontextprotocol/sdk、tools/mcp-server-core、tools/snippet-loader与zod脚本含cleanrimraf dist、buildrollup -c、startnode dist/index.js、devtsc --watch。Workspace 级 MCP 配置packages/tools/README.md 说明workspace 级别的 MCP 服务器命令映射位于仓库根目录的.vscode/mcp.json在本地从 VS Code 或其他 MCP 客户端测试服务器时非常有用。需要留意的是在当前这份只读检出中并未包含该文件因此若要在本地实验需要按你的客户端约定自行创建该配置文件将上述二进制命令映射到对应工具/服务器。七、测试与质量保障公共底座mcp-server-core提供了覆盖全面的单元测试packages/tools/mcp-server-core/test/unit运行方式npx jest packages/tools/mcp-server-core/test/unit --runInBand测试覆盖editorSessionServer、inputValidation、jsonToolResponses、jsonValidation、response、sceneAttachmentValidation、sceneToolSchemas、textHandoff、toolSchemas与webMcp等模块从输入校验到响应塑形再到场景附件契约均有自动化验证。八、已知限制与演进方向作为对 README 的补充当前 MCP 工具族存在明确的边界以 smart-filters-mcp-server/README.md 为例无 snippet 集成Smart Filters 服务器暂不支持从 Babylon.js snippet 服务器存取无运行时钩子export_runtime_descriptor与validate_against_runtime被推迟需要 Babylon.js 引擎依赖无实时预览服务器基于内存模型工作实时预览需要运行中的 Babylon.js 场景。在更大的演进方向上mcp-server-core的 WEBMCP_MIGRATION_PLAN.md 描述了为 Babylon.js 浏览器编辑器增加WebMCP的分阶段架构与推广计划即在保留现有 MCP 服务器与编辑器会话的前提下把 MCP 能力下沉到浏览器端webMcp.ts模块通过tools/mcp-server-core/webMcp浏览器入口导出已经提供浏览器安全的 WebMCP 类型、注册、特性检测与写者仲裁。而 README 中预告的Scene MCP 服务器作为编排者角色将把这些服务器产出的 JSON 最终组装为可运行场景——这构成了整套工具族「分域创作 → JSON 交换 → 统一装配」的完整闭环。小结Babylon.js MCP Tools 是一套分工清晰、约定统一的创作型 MCP 服务器族mcp-server-core沉淀公共能力7 个专业服务器各自负责一个图/布局子系统统一遵循「创建 → 添加 → 连接/配置 → 校验 → 导出」的五步模型并通过outputFile、json/jsonFile、snippetId等共享约定保持参数面一致。配合 Rollup 单文件打包、jest 单元测试与未来的 WebMCP / Scene MCP 演进这套基础设施为 AI 驱动的 Babylon.js 全栈创作提供了可直接接入的标准化入口。赞分享图形学游戏开发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点击查看免费下载相关推荐voltagent/mcp-server 全解析用 Model Context Protocol 暴露 VoltAgent Agent、工作流与工具voltagent/mcp server 全解析用 Model Context Protocol 暴露 VoltAgent Agent、工作流与工具 导读人工智能AI AgentAgent 框架后端多智能体RAG工具调用Agent 记忆Agent 工作流AI 评测MCP 服务MCP Clients语音drawio-skill 的 MCP Server 模式用 Model Context Protocol 驱动 draw.io 架构语义工作流drawio skill 的 MCP Server 模式用 Model Context Protocol 驱动 draw.io 架构语义工作流 导读 本文讲解AI 技能数据可视化思源宋体TTF深度解析从免费字体到专业设计方案的完整指南思源宋体TTF深度解析从免费字体到专业设计方案的完整指南 还在为寻找既专业又完全免费的中文字体而烦恼吗思源宋体TTF格式为你提供了完美的解决方案。作为Ado图形学游戏开发3D渲染上一篇ComfyUI-WanVideoWrapper 快速上手指南10 分钟跑通 Wan 文生视频附高频翻车点避坑清单下一篇3个Mac鼠标优化技巧让你的普通鼠标比苹果触控板更强大创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考

读完文章,也想定制专属网站?

尧图设计师 24 小时内与您沟通定制方案

免费获取报价 →
↑