ROS/ROS2 生态里 Web 端 3D 可视化已经有一批开源项目可以参考从零开发直接用到源码级参考自己写都有分三层推荐。一、零开发直接用Foxglove Studio如果你现阶段只想看到 3D 轨迹不想写代码Foxglove Studio 是首选。开源的机器人数据可视化调试工具浏览器版打开studio.foxglove.dev就能用也提供桌面版通过foxglove_bridge连接 ROS2原生支持3D 面板可显示可视化标记箭头、球体等基元形状以及更复杂的可视化占据栅格、点云等支持实时 WebSocket 连接也支持直接拖入.db3文件回放面板化布局3D 视图 Plot Image Log 自由组合前端 TypeScript WebGLURDF 三维渲染、点云、激光雷达都支持 一个时间点要注意2024 年 3 月 Foxglove 2.0 发布后取消了独立开源版 Studio 的发行Studio 和数据平台合并为统一产品。但 Studio 仍可通过浏览器免费使用且核心协议和 MCAP 格式完全开源。对你来说开箱即用完全没问题只是不能再像以前那样自由 fork 整个 Studio 代码库做深度改造。适合先验证 3D 可视化效果、做演示、做调试。不适合深度定制 UI、嵌入到你自己的产品里。二、源码级参考自己写 Web 前端的首选如果你想自己做一个 Web 应用把 3D 轨迹展示嵌进去下面这几个项目是直接的代码参考1. RVIZ-RQT-VISUAL最推荐最贴近你的场景古月居开源的 ROS2 Web 可视化方案架构就是你想要的那个标准答案Web 前端 FastAPI 服务层 ROS2 生态 ┌────────────────────┐ ┌────────────────────┐ ┌─────────────────┐ │ Vue.js 3 │ │ WebSocket 通信管理 │ │ 机器人节点 │ │ Three.js (3D 渲染) │ ←WS→ │ Rosbridge 协议实现 │ ←DDS→ │ 传感器数据 │ │ Pinia 状态管理 │ │ 消息转换 │ │ 导航系统 │ └────────────────────┘ └────────────────────┘ └─────────────────┘项目已经实现的功能 激光雷达 2D/3D 类型及主题选择/scan或点云主题地图、里程计主题选择/odom轨迹显示长度滑块 10-100 可调默认 203D 场景内拖拽旋转/缩放/平移2D 目标点发布/goal_pose、2D 位置估计发布/initialpose用 QoS TRANSIENT_LOCAL 支持先发后订ROS 通信拓扑图可视化仓库地址github.com/lovelyyoshino/RVIZ-RQT-VISUAL 这是目前最能对应你前面需求的开源参考——Vue 3 Three.js FastAPI WebSocket ROS2 桥接轨迹显示、3D 交互、导航发布全齐。代码后续会开源是目前 ROS2 Web 3D 可视化最系统的工程参考。2. Web3D Learning机械臂场景首选参考如果你的机器人是机械臂或需要遥操作这个项目更对口 基于React Three FiberThree.js 的 React 封装支持URDF 加载、逆运动学、轨迹录制回放通过Foxglove WebSocket 协议非 rosbridge v2与 ROS2 通信轨迹存储在浏览器 IndexedDB可导出为 LeRobot v1 格式 JSON界面布局关节控制滑块 3D 视口 ROS PanelTransport 面板支持 Record/Stop/Playback仓库地址github.com/zhanglun/web3d-learning 这个项目的最大价值它演示了机械臂关节角实时驱动 3D 模型 轨迹录制回放的完整前端实现用的是现代 React 技术栈代码可读性高。3. ROS2Visualizer无人机轨迹可视化参考如果是无人机/飞行轨迹场景这个项目的思路值得借鉴 Three.js 驱动的 3D 渲染引擎针对 ROS2 Humble 飞行轨迹数据动态飞机模型沿飞行路径移动并带姿态多种视角模式俯视、侧视、跟随、自由大数据集分块处理优化 GB 级飞行数据后端 Flask 前端 Three.js仓库地址github.com/Trustworthy-Engineered-Autonomy-Lab/ROS2Visualizer 它的核心参考点是大规模轨迹数据GB 级如何在前端做分块加载和高效渲染。如果你的机器人轨迹要回放几小时的数据这个项目的 chunked processing 思路很有价值。三、传统桌面方案作对照不是 WebRViz2ROS2 原生的 3D 可视化工具BSD-3-Clause-Clear 协议C Ogre3D/OpenGL 渲染功能最完整但必须装 ROS2 环境RQt2D 调试监控工具箱配合 RViz2 使用这两个是桌面端标杆不是 Web 方案但它们的 Display 类型LaserScan、PointCloud、Marker、MarkerArray、TF、Odometry、Map就是你 Web 3D 里要实现的渲染对象清单——参考 RViz 支持哪些 Display你就知道自己的 Web 3D 面板要做到什么程度 。四、怎么选按你的实际阶段你的状态推荐路径想马上看到 3D 轨迹效果Foxglove Studio浏览器版连foxglove_bridge要自己写 Web 应用机器人是移动机器人/无人车以RVIZ-RQT-VISUAL为架构蓝本Vue 3 Three.js FastAPI WebSocket要自己写 Web 应用机器人是机械臂参考Web3D LearningReact Three Fiber URDF Foxglove WS要自己写 Web 应用是无人机/飞行轨迹参考ROS2Visualizer的 Three.js 分块加载思路要深度定制且需要 RViz 完整 Display 类型对照研究RViz2的 Display 清单逐个在 Web 端实现五、一个工程实践建议不要从零开始造轮子。最务实的路径是第一步部署 Foxglove Studio foxglove_bridge1 小时内看到你机器人真实的 3D 轨迹和传感器数据验证数据管道第二步Clone RVIZ-RQT-VISUAL本地跑起来看 Vue 3 Three.js 是怎么订阅/odom画轨迹、怎么加载 URDF、怎么做 3D 交互的第三步基于 RVIZ-RQT-VISUAL 的架构做二次开发把你需要的业务功能多机器人、轨迹回放、报警叠加、业务数据联动叠加上去第四步性能优化参考 ROS2Visualizer 的分块加载思路应对大规模轨迹数据这样你既有一个现成工具立刻用又有一套开源代码可做蓝本比纯自研省 2-3 个月。⚠️ 几个注意点RVIZ-RQT-VISUAL 代码后续开源目前古月居文章里给的仓库地址可关注更新Foxglove 2.0 之后 Studio 独立开源发行取消但浏览器版免费可用核心协议开源Web3D Learning 和 ROS2Visualizer 是社区项目生产环境使用前建议做代码审计所以有开源项目参考吗的答案是肯定的——而且选择很丰富。最快上手是 Foxglove Studio最深定制参考 RVIZ-RQT-VISUAL。以你前面直接上 3D的决策我建议这两步走这周用 Foxglove 把数据管道打通看到效果下周基于 RVIZ-RQT-VISUAL 的架构开始自己的 Web 应用开发。
机器人3D可视化方案
ROS/ROS2 生态里 Web 端 3D 可视化已经有一批开源项目可以参考从零开发直接用到源码级参考自己写都有分三层推荐。一、零开发直接用Foxglove Studio如果你现阶段只想看到 3D 轨迹不想写代码Foxglove Studio 是首选。开源的机器人数据可视化调试工具浏览器版打开studio.foxglove.dev就能用也提供桌面版通过foxglove_bridge连接 ROS2原生支持3D 面板可显示可视化标记箭头、球体等基元形状以及更复杂的可视化占据栅格、点云等支持实时 WebSocket 连接也支持直接拖入.db3文件回放面板化布局3D 视图 Plot Image Log 自由组合前端 TypeScript WebGLURDF 三维渲染、点云、激光雷达都支持 一个时间点要注意2024 年 3 月 Foxglove 2.0 发布后取消了独立开源版 Studio 的发行Studio 和数据平台合并为统一产品。但 Studio 仍可通过浏览器免费使用且核心协议和 MCAP 格式完全开源。对你来说开箱即用完全没问题只是不能再像以前那样自由 fork 整个 Studio 代码库做深度改造。适合先验证 3D 可视化效果、做演示、做调试。不适合深度定制 UI、嵌入到你自己的产品里。二、源码级参考自己写 Web 前端的首选如果你想自己做一个 Web 应用把 3D 轨迹展示嵌进去下面这几个项目是直接的代码参考1. RVIZ-RQT-VISUAL最推荐最贴近你的场景古月居开源的 ROS2 Web 可视化方案架构就是你想要的那个标准答案Web 前端 FastAPI 服务层 ROS2 生态 ┌────────────────────┐ ┌────────────────────┐ ┌─────────────────┐ │ Vue.js 3 │ │ WebSocket 通信管理 │ │ 机器人节点 │ │ Three.js (3D 渲染) │ ←WS→ │ Rosbridge 协议实现 │ ←DDS→ │ 传感器数据 │ │ Pinia 状态管理 │ │ 消息转换 │ │ 导航系统 │ └────────────────────┘ └────────────────────┘ └─────────────────┘项目已经实现的功能 激光雷达 2D/3D 类型及主题选择/scan或点云主题地图、里程计主题选择/odom轨迹显示长度滑块 10-100 可调默认 203D 场景内拖拽旋转/缩放/平移2D 目标点发布/goal_pose、2D 位置估计发布/initialpose用 QoS TRANSIENT_LOCAL 支持先发后订ROS 通信拓扑图可视化仓库地址github.com/lovelyyoshino/RVIZ-RQT-VISUAL 这是目前最能对应你前面需求的开源参考——Vue 3 Three.js FastAPI WebSocket ROS2 桥接轨迹显示、3D 交互、导航发布全齐。代码后续会开源是目前 ROS2 Web 3D 可视化最系统的工程参考。2. Web3D Learning机械臂场景首选参考如果你的机器人是机械臂或需要遥操作这个项目更对口 基于React Three FiberThree.js 的 React 封装支持URDF 加载、逆运动学、轨迹录制回放通过Foxglove WebSocket 协议非 rosbridge v2与 ROS2 通信轨迹存储在浏览器 IndexedDB可导出为 LeRobot v1 格式 JSON界面布局关节控制滑块 3D 视口 ROS PanelTransport 面板支持 Record/Stop/Playback仓库地址github.com/zhanglun/web3d-learning 这个项目的最大价值它演示了机械臂关节角实时驱动 3D 模型 轨迹录制回放的完整前端实现用的是现代 React 技术栈代码可读性高。3. ROS2Visualizer无人机轨迹可视化参考如果是无人机/飞行轨迹场景这个项目的思路值得借鉴 Three.js 驱动的 3D 渲染引擎针对 ROS2 Humble 飞行轨迹数据动态飞机模型沿飞行路径移动并带姿态多种视角模式俯视、侧视、跟随、自由大数据集分块处理优化 GB 级飞行数据后端 Flask 前端 Three.js仓库地址github.com/Trustworthy-Engineered-Autonomy-Lab/ROS2Visualizer 它的核心参考点是大规模轨迹数据GB 级如何在前端做分块加载和高效渲染。如果你的机器人轨迹要回放几小时的数据这个项目的 chunked processing 思路很有价值。三、传统桌面方案作对照不是 WebRViz2ROS2 原生的 3D 可视化工具BSD-3-Clause-Clear 协议C Ogre3D/OpenGL 渲染功能最完整但必须装 ROS2 环境RQt2D 调试监控工具箱配合 RViz2 使用这两个是桌面端标杆不是 Web 方案但它们的 Display 类型LaserScan、PointCloud、Marker、MarkerArray、TF、Odometry、Map就是你 Web 3D 里要实现的渲染对象清单——参考 RViz 支持哪些 Display你就知道自己的 Web 3D 面板要做到什么程度 。四、怎么选按你的实际阶段你的状态推荐路径想马上看到 3D 轨迹效果Foxglove Studio浏览器版连foxglove_bridge要自己写 Web 应用机器人是移动机器人/无人车以RVIZ-RQT-VISUAL为架构蓝本Vue 3 Three.js FastAPI WebSocket要自己写 Web 应用机器人是机械臂参考Web3D LearningReact Three Fiber URDF Foxglove WS要自己写 Web 应用是无人机/飞行轨迹参考ROS2Visualizer的 Three.js 分块加载思路要深度定制且需要 RViz 完整 Display 类型对照研究RViz2的 Display 清单逐个在 Web 端实现五、一个工程实践建议不要从零开始造轮子。最务实的路径是第一步部署 Foxglove Studio foxglove_bridge1 小时内看到你机器人真实的 3D 轨迹和传感器数据验证数据管道第二步Clone RVIZ-RQT-VISUAL本地跑起来看 Vue 3 Three.js 是怎么订阅/odom画轨迹、怎么加载 URDF、怎么做 3D 交互的第三步基于 RVIZ-RQT-VISUAL 的架构做二次开发把你需要的业务功能多机器人、轨迹回放、报警叠加、业务数据联动叠加上去第四步性能优化参考 ROS2Visualizer 的分块加载思路应对大规模轨迹数据这样你既有一个现成工具立刻用又有一套开源代码可做蓝本比纯自研省 2-3 个月。⚠️ 几个注意点RVIZ-RQT-VISUAL 代码后续开源目前古月居文章里给的仓库地址可关注更新Foxglove 2.0 之后 Studio 独立开源发行取消但浏览器版免费可用核心协议开源Web3D Learning 和 ROS2Visualizer 是社区项目生产环境使用前建议做代码审计所以有开源项目参考吗的答案是肯定的——而且选择很丰富。最快上手是 Foxglove Studio最深定制参考 RVIZ-RQT-VISUAL。以你前面直接上 3D的决策我建议这两步走这周用 Foxglove 把数据管道打通看到效果下周基于 RVIZ-RQT-VISUAL 的架构开始自己的 Web 应用开发。
