尧图网页设计 
图形学游戏开发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 官方提供的Node Render Graph Editor节点渲染图编辑器扩展介绍如何将其嵌入自己的 HTML 页面既可以采用在线方式通过BABYLON.NodeRenderGraphEditor.Show()一行代码动态加载编辑器也可以在无网络环境下手动引入构建产物离线使用。同时结合当前仓库源码深入拆解Show()方法的执行流程、INodeEditorOptions全部配置项的含义以及编辑器的底层架构帮助你从“会用”进阶到“会配”。编辑器是什么Node Render Graph Editor 是 Babylon.js 官方为NodeRenderGraph节点渲染图打造的图形化编辑扩展。官方 README 中的定义只有一句话“An extension to easily create or update any NodeRenderGraph”——即一个用于轻松创建或更新任意节点渲染图的扩展。这里的NodeRenderGraph是 Babylon.js 核心渲染框架FrameGraph体系中的一个节点化对象位于 packages/dev/core/src/FrameGraph/Node/ 目录它把渲染流程拆解为可拖拽、可连接的节点块Block例如输入块InputBlock、执行块ExecuteBlock与输出块OutputBlock。编辑器的核心价值在于可视化编辑无需手写大量 JavaScript 构建渲染图直接在图编辑画布上拖拽节点、连线端口实时预览内置预览管理器PreviewManager可实时查看图构建结果序列化与反序列化将节点图导出为 JSON或从 JSON 恢复图结构便于保存、加载与分享。快速开始两种集成方式官方 README 给出了两种集成方式二者唯一的区别在于编辑器 JS 库的加载时机与来源。在线方式动态加载调用NodeRenderGraphEditor类的Show方法并传入一个包含hostElement的配置对象BABYLON.NodeRenderGraphEditor.Show({hostElement: document.getElementById(host)});该调用会动态检索babylon.nodeRenderGraphEditor.js这个库将其下载并自动添加到 HTML 页面中随后在指定的hostElement容器内渲染编辑器界面。这种方式适合正常联网环境无需在 HTML 中手动维护 script 标签代码最为简洁。离线方式手动导入在没有互联网访问的环境下需要手动将编辑器库引入 HTML 页面script srcbabylon.nodeRenderGraphEditor.js /引入后同样调用BABYLON.NodeRenderGraphEditor.Show(...)即可。注意离线方式要求你提前将babylon.nodeRenderGraphEditor.js构建产物放置到可访问的路径下例如同目录或 CDN 离线镜像。配置项详解INodeEditorOptions虽然 README 只展示了hostElement一个参数但从源码看Show方法接受的是一个完整的选项对象。该接口定义在 packages/tools/nodeRenderGraphEditor/src/nodeRenderGraphEditor.ts配置项类型是否必填含义nodeRenderGraphNodeRenderGraph是编辑器要操作的目标节点渲染图直接决定图的内容与场景绑定hostElementHTMLElement否编辑器挂载的 DOM 容器不传时自动创建弹出窗口hostSceneScene否宿主场景用于预览与资源管理customSave{ label: string; action: (data: string) Promisevoid }否自定义保存按钮的标签与回调data为序列化后的 JSON 字符串customLoadObservableObservableany否自定义加载事件触发后反序列化数据并刷新编辑器customBlockDescriptionsINodeRenderGraphCustomBlockDescription[]否自定义节点块的描述列表用于扩展节点面板其中只有nodeRenderGraph是真正必需的hostElement可以省略。省略时Show()内部会调用CreatePopup创建一个名为 “BABYLON.JS NODE RENDER GRAPH EDITOR”、默认尺寸 1000×800 的弹出窗口来承载编辑器见 nodeRenderGraphEditor.ts。一个完整的实战示例// 先构建一个 NodeRenderGraph以核心 FrameGraph 对象为基础 const nodeRenderGraph new BABYLON.NodeRenderGraph(renderGraph, scene, { autoFillExternalInputs: true }); BABYLON.NodeRenderGraphEditor.Show({ nodeRenderGraph: nodeRenderGraph, hostScene: scene, hostElement: document.getElementById(host), customSave: { label: Save My Graph, action: async (data) { await fetch(/api/graphs, { method: POST, body: data }); } } });Show 方法内部做了什么结合 nodeRenderGraphEditor.ts 的实现Show()的完整执行链路如下注册三类管理器调用RegisterToDisplayManagers()、RegisterToPropertyTabManagers()、RegisterTypeLedger()分别注册端口/节点显示、属性面板以及节点类型账本这是编辑器能正确渲染各类 Block 的前提确认宿主容器若未提供hostElement则创建弹出窗口并保存窗口引用_PopupWindow以便页面刷新或场景销毁时自动关闭初始化全局状态构建GlobalState实例绑定nodeRenderGraph、hostElement、hostScene、customSave、customBlockDescriptions等数据并依据nodeRenderGraph.options.autoFillExternalInputs判断是否自动填充外部输入渲染 React 界面通过React.createElement(GraphEditor, { globalState })创建编辑器根组件再调用createRoot(hostElement).render(graphEditor)挂载到宿主容器接入自定义加载流程若传入了customLoadObservable则订阅其事件事件触发时调用SerializationTools.Deserialize反序列化图数据并通知刷新与重建生命周期清理监听beforeunload若编辑器位于弹出窗口中且提供了hostScene还会在场景onDisposeObservable时关闭弹出窗口防止资源泄漏。这里的GlobalState定义于 packages/tools/nodeRenderGraphEditor/src/globalState.ts它通过一系列Observable如onBuiltObservable、onResetRequiredObservable、onLogRequiredObservable在编辑器各组件间通信并把图构建成功/失败事件桥接为日志输出——这解释了为何编辑器内置日志面板能看到 “Node render graph build successful” 之类的提示。序列化与加载编辑器的数据交换编辑器与外部程序交换图数据的核心是SerializationToolspackages/tools/nodeRenderGraphEditor/src/serializationTools.tsSerialize(renderGraph, globalState, frame?)先调用UpdateLocations记录每个节点块在画布上的坐标x、y、isCollapsed到renderGraph.editorData再调用renderGraph.serialize()生成 JSON 字符串Deserialize(serializationObject, globalState)调用renderGraph.parseSerializedObject()从 JSON 恢复图并通知加载完成AddFrameToRenderGraph支持将序列化的 Frame子图合并进当前渲染图。因此即使离线使用你依然可以通过nodeRenderGraph.serialize()/parseSerializedObject()与编辑器进行数据互通自定义保存逻辑只需对接customSave.action(data)中的 JSON 字符串即可。全局暴露与浏览器集成细节仓库把编辑器封装为可在浏览器全局命名空间BABYLON下访问的类。两处典型实现packages/tools/nodeRenderGraphEditor/src/legacy/legacy.ts 中将NodeRenderGraphEditor挂载到globalThis.BABYLONpackages/tools/babylonServer/src/nodeRenderGraphEditor/index.ts 在开发服务器场景下同时暴露BABYLON.NodeRenderGraphEditor与顶层NODERENDERGRAPHEDITOR.NodeRenderGraphEditor两种入口。这意味着在浏览器里你既可以写BABYLON.NodeRenderGraphEditor.Show(...)也可以写NODERENDERGRAPHEDITOR.NodeRenderGraphEditor.Show(...)二者等价。构建与开发进阶该工具的构建配置位于 packages/tools/nodeRenderGraphEditor/package.json常用脚本包括npm run build清理并编译 TypeScriptnpm run build:deployment使用 Vite 打包部署产物babylon.nodeRenderGraphEditor.jsnpm run serve启动 Vite 开发服务器。它依赖dev/core、dev/shared-ui-components、React 18 以及图布局库dagre其 UI 构建在共享的节点图系统shared-ui-components/nodeGraphSystem之上与 Node Material Editor 等编辑器共用同一套画布、端口与属性面板基础设施。如果希望在本地调试可运行npm run serve打开 packages/tools/nodeRenderGraphEditor/index.html 对应的开发入口。小结Babylon.js Node Render Graph Editor 的集成成本极低联网场景下只需一行BABYLON.NodeRenderGraphEditor.Show({...})离线场景下补充一个script标签即可。而一旦需要深度定制INodeEditorOptions提供的nodeRenderGraph、hostElement、customSave、customLoadObservable与customBlockDescriptions足以覆盖大多数宿主集成需求——配合serialize()/parseSerializedObject()的 JSON 数据交换你可以在任意 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点击查看免费下载相关推荐OpenMed GDPR 伪匿名化实战用可逆映射与分离密钥库实现 Art. 4(5) 合规的数据脱敏OpenMed GDPR 伪匿名化实战用可逆映射与分离密钥库实现 Art. 4 5 合规的数据脱敏 导读 本文基于 OpenMed 官方技能文档 skills图形学游戏开发3D渲染LangChain for Go 文本摘要链实战基于 Vertex AI 的 LLM 摘要示例全解析LangChain for Go 文本摘要链实战基于 Vertex AI 的 LLM 摘要示例全解析 本篇技术指南以 examples/llmsummariz图形学游戏开发3D渲染Babylon.js Node Geometry Editor 完全指南节点化程序化几何编辑器的安装、调用与 WebMCP 集成Babylon.js Node Geometry Editor 完全指南节点化程序化几何编辑器的安装、调用与 WebMCP 集成 本文以 Babylon.js图形学游戏开发3D渲染上一篇Hugo-PaperMod主题深度解析从零开始打造你的专属博客下一篇Wan-Dancer-14B两阶段生成原理全局规划与局部细化的协同工作创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Babylon.js Node Render Graph Editor：在线与离线方式快速集成节点渲染图编辑器
图形学游戏开发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 官方提供的Node Render Graph Editor节点渲染图编辑器扩展介绍如何将其嵌入自己的 HTML 页面既可以采用在线方式通过BABYLON.NodeRenderGraphEditor.Show()一行代码动态加载编辑器也可以在无网络环境下手动引入构建产物离线使用。同时结合当前仓库源码深入拆解Show()方法的执行流程、INodeEditorOptions全部配置项的含义以及编辑器的底层架构帮助你从“会用”进阶到“会配”。编辑器是什么Node Render Graph Editor 是 Babylon.js 官方为NodeRenderGraph节点渲染图打造的图形化编辑扩展。官方 README 中的定义只有一句话“An extension to easily create or update any NodeRenderGraph”——即一个用于轻松创建或更新任意节点渲染图的扩展。这里的NodeRenderGraph是 Babylon.js 核心渲染框架FrameGraph体系中的一个节点化对象位于 packages/dev/core/src/FrameGraph/Node/ 目录它把渲染流程拆解为可拖拽、可连接的节点块Block例如输入块InputBlock、执行块ExecuteBlock与输出块OutputBlock。编辑器的核心价值在于可视化编辑无需手写大量 JavaScript 构建渲染图直接在图编辑画布上拖拽节点、连线端口实时预览内置预览管理器PreviewManager可实时查看图构建结果序列化与反序列化将节点图导出为 JSON或从 JSON 恢复图结构便于保存、加载与分享。快速开始两种集成方式官方 README 给出了两种集成方式二者唯一的区别在于编辑器 JS 库的加载时机与来源。在线方式动态加载调用NodeRenderGraphEditor类的Show方法并传入一个包含hostElement的配置对象BABYLON.NodeRenderGraphEditor.Show({hostElement: document.getElementById(host)});该调用会动态检索babylon.nodeRenderGraphEditor.js这个库将其下载并自动添加到 HTML 页面中随后在指定的hostElement容器内渲染编辑器界面。这种方式适合正常联网环境无需在 HTML 中手动维护 script 标签代码最为简洁。离线方式手动导入在没有互联网访问的环境下需要手动将编辑器库引入 HTML 页面script srcbabylon.nodeRenderGraphEditor.js /引入后同样调用BABYLON.NodeRenderGraphEditor.Show(...)即可。注意离线方式要求你提前将babylon.nodeRenderGraphEditor.js构建产物放置到可访问的路径下例如同目录或 CDN 离线镜像。配置项详解INodeEditorOptions虽然 README 只展示了hostElement一个参数但从源码看Show方法接受的是一个完整的选项对象。该接口定义在 packages/tools/nodeRenderGraphEditor/src/nodeRenderGraphEditor.ts配置项类型是否必填含义nodeRenderGraphNodeRenderGraph是编辑器要操作的目标节点渲染图直接决定图的内容与场景绑定hostElementHTMLElement否编辑器挂载的 DOM 容器不传时自动创建弹出窗口hostSceneScene否宿主场景用于预览与资源管理customSave{ label: string; action: (data: string) Promisevoid }否自定义保存按钮的标签与回调data为序列化后的 JSON 字符串customLoadObservableObservableany否自定义加载事件触发后反序列化数据并刷新编辑器customBlockDescriptionsINodeRenderGraphCustomBlockDescription[]否自定义节点块的描述列表用于扩展节点面板其中只有nodeRenderGraph是真正必需的hostElement可以省略。省略时Show()内部会调用CreatePopup创建一个名为 “BABYLON.JS NODE RENDER GRAPH EDITOR”、默认尺寸 1000×800 的弹出窗口来承载编辑器见 nodeRenderGraphEditor.ts。一个完整的实战示例// 先构建一个 NodeRenderGraph以核心 FrameGraph 对象为基础 const nodeRenderGraph new BABYLON.NodeRenderGraph(renderGraph, scene, { autoFillExternalInputs: true }); BABYLON.NodeRenderGraphEditor.Show({ nodeRenderGraph: nodeRenderGraph, hostScene: scene, hostElement: document.getElementById(host), customSave: { label: Save My Graph, action: async (data) { await fetch(/api/graphs, { method: POST, body: data }); } } });Show 方法内部做了什么结合 nodeRenderGraphEditor.ts 的实现Show()的完整执行链路如下注册三类管理器调用RegisterToDisplayManagers()、RegisterToPropertyTabManagers()、RegisterTypeLedger()分别注册端口/节点显示、属性面板以及节点类型账本这是编辑器能正确渲染各类 Block 的前提确认宿主容器若未提供hostElement则创建弹出窗口并保存窗口引用_PopupWindow以便页面刷新或场景销毁时自动关闭初始化全局状态构建GlobalState实例绑定nodeRenderGraph、hostElement、hostScene、customSave、customBlockDescriptions等数据并依据nodeRenderGraph.options.autoFillExternalInputs判断是否自动填充外部输入渲染 React 界面通过React.createElement(GraphEditor, { globalState })创建编辑器根组件再调用createRoot(hostElement).render(graphEditor)挂载到宿主容器接入自定义加载流程若传入了customLoadObservable则订阅其事件事件触发时调用SerializationTools.Deserialize反序列化图数据并通知刷新与重建生命周期清理监听beforeunload若编辑器位于弹出窗口中且提供了hostScene还会在场景onDisposeObservable时关闭弹出窗口防止资源泄漏。这里的GlobalState定义于 packages/tools/nodeRenderGraphEditor/src/globalState.ts它通过一系列Observable如onBuiltObservable、onResetRequiredObservable、onLogRequiredObservable在编辑器各组件间通信并把图构建成功/失败事件桥接为日志输出——这解释了为何编辑器内置日志面板能看到 “Node render graph build successful” 之类的提示。序列化与加载编辑器的数据交换编辑器与外部程序交换图数据的核心是SerializationToolspackages/tools/nodeRenderGraphEditor/src/serializationTools.tsSerialize(renderGraph, globalState, frame?)先调用UpdateLocations记录每个节点块在画布上的坐标x、y、isCollapsed到renderGraph.editorData再调用renderGraph.serialize()生成 JSON 字符串Deserialize(serializationObject, globalState)调用renderGraph.parseSerializedObject()从 JSON 恢复图并通知加载完成AddFrameToRenderGraph支持将序列化的 Frame子图合并进当前渲染图。因此即使离线使用你依然可以通过nodeRenderGraph.serialize()/parseSerializedObject()与编辑器进行数据互通自定义保存逻辑只需对接customSave.action(data)中的 JSON 字符串即可。全局暴露与浏览器集成细节仓库把编辑器封装为可在浏览器全局命名空间BABYLON下访问的类。两处典型实现packages/tools/nodeRenderGraphEditor/src/legacy/legacy.ts 中将NodeRenderGraphEditor挂载到globalThis.BABYLONpackages/tools/babylonServer/src/nodeRenderGraphEditor/index.ts 在开发服务器场景下同时暴露BABYLON.NodeRenderGraphEditor与顶层NODERENDERGRAPHEDITOR.NodeRenderGraphEditor两种入口。这意味着在浏览器里你既可以写BABYLON.NodeRenderGraphEditor.Show(...)也可以写NODERENDERGRAPHEDITOR.NodeRenderGraphEditor.Show(...)二者等价。构建与开发进阶该工具的构建配置位于 packages/tools/nodeRenderGraphEditor/package.json常用脚本包括npm run build清理并编译 TypeScriptnpm run build:deployment使用 Vite 打包部署产物babylon.nodeRenderGraphEditor.jsnpm run serve启动 Vite 开发服务器。它依赖dev/core、dev/shared-ui-components、React 18 以及图布局库dagre其 UI 构建在共享的节点图系统shared-ui-components/nodeGraphSystem之上与 Node Material Editor 等编辑器共用同一套画布、端口与属性面板基础设施。如果希望在本地调试可运行npm run serve打开 packages/tools/nodeRenderGraphEditor/index.html 对应的开发入口。小结Babylon.js Node Render Graph Editor 的集成成本极低联网场景下只需一行BABYLON.NodeRenderGraphEditor.Show({...})离线场景下补充一个script标签即可。而一旦需要深度定制INodeEditorOptions提供的nodeRenderGraph、hostElement、customSave、customLoadObservable与customBlockDescriptions足以覆盖大多数宿主集成需求——配合serialize()/parseSerializedObject()的 JSON 数据交换你可以在任意 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点击查看免费下载相关推荐OpenMed GDPR 伪匿名化实战用可逆映射与分离密钥库实现 Art. 4(5) 合规的数据脱敏OpenMed GDPR 伪匿名化实战用可逆映射与分离密钥库实现 Art. 4 5 合规的数据脱敏 导读 本文基于 OpenMed 官方技能文档 skills图形学游戏开发3D渲染LangChain for Go 文本摘要链实战基于 Vertex AI 的 LLM 摘要示例全解析LangChain for Go 文本摘要链实战基于 Vertex AI 的 LLM 摘要示例全解析 本篇技术指南以 examples/llmsummariz图形学游戏开发3D渲染Babylon.js Node Geometry Editor 完全指南节点化程序化几何编辑器的安装、调用与 WebMCP 集成Babylon.js Node Geometry Editor 完全指南节点化程序化几何编辑器的安装、调用与 WebMCP 集成 本文以 Babylon.js图形学游戏开发3D渲染上一篇Hugo-PaperMod主题深度解析从零开始打造你的专属博客下一篇Wan-Dancer-14B两阶段生成原理全局规划与局部细化的协同工作创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考