Nólëbase

切换主题

WebRviz：把 RViz 搬进浏览器的本地可视化工具 ​

字数
3327 字
阅读时间
13 分钟

WebRviz 是一个面向 ROS 生态的浏览器端机器人可视化工具，用于在网页中完成机器人模型显示、坐标变换查看、ROS 信息浏览、轨迹预览与运动数据分析。项目通过对接 ROS、MoveIt、rosbridge 与 rosapi，将传统桌面端调试流程中的核心信息组织到统一的 Web 界面中，适合本地部署、局域网访问以及上层系统集成。

项目仓库：https://github.com/shine-tong/WebRviz

目前仓库按 ROS 版本划分为两条分支：

  • master 分支：ROS1 版本
  • jazzy 分支：ROS2 Jazzy 版本

项目简介 ​

WebRviz 通过连接 ROS、MoveIt、rosbridge 和 rosapi，在浏览器中实现了机器人模型显示、TF 查看、ROS 信息浏览、MoveIt 轨迹预览、运动曲线分析、ROS Graph 显示以及轨迹回放等功能。项目采用面向 ROS 数据流的 Web 可视化方案，而不是远程控制传统桌面端 RViz。当前 master 分支面向 ROS1，jazzy 分支面向 ROS2 Jazzy，适用于需要轻量化访问、统一界面展示以及后续系统集成的机器人应用场景。

1. 项目目标 ​

WebRviz 的目标并不是在网页中复刻一个完整的 RViz，而是围绕机器人调试与展示中的高频需求，构建一套适合浏览器交互的可视化界面。其核心关注点主要包括以下几个方面：

  1. 在网页中直接显示机器人模型和环境数据
  2. 统一展示机器人状态、TF 结构和 ROS 系统信息
  3. 支持 MoveIt 规划结果的可视化预览
  4. 提供轨迹分析、回放和图谱查看等扩展能力
  5. 兼顾本地调试和后续业务系统嵌入场景

因此，WebRviz 更接近一个面向机器人系统的 Web 可视化前端，而不是单纯的 3D 模型查看器。

2. 版本划分 ​

2.1 ROS1 版本 ​

master 分支对应 ROS1 版本，主要面向：

  • Ubuntu 20.04
  • ROS Noetic
  • MoveIt1

这一版本基于 ROS1 的常规接口体系构建，前端通过 rosbridge_server 和 rosapi 获取系统信息，适合现有 Noetic 项目直接接入。

2.2 ROS2 版本 ​

jazzy 分支对应 ROS2 Jazzy 版本，面向 ROS2 技术栈。
这意味着 WebRviz 不局限于 ROS1，也具备向 ROS2 场景迁移和适配的能力。对于正在从 ROS1 向 ROS2 过渡的项目，这种分支划分方式可以更清晰地隔离接口差异和依赖差异，便于独立维护。

3. 整体架构 ​

从系统结构上看，WebRviz 主要由三层组成：

3.1 数据源层 ​

最底层是 ROS / MoveIt 系统本身，提供机器人可视化所需的核心数据，包括：

  • URDF 机器人模型
  • /tf
  • /tf_static
  • /joint_states
  • sensor_msgs/PointCloud2
  • MoveIt 规划结果
  • ROS topic / service / param 信息

这部分仍然由原有机器人系统负责生成，WebRviz 不改变底层控制或规划逻辑，而是作为上层可视化入口使用。

3.2 接口桥接层 ​

中间层主要包括：

  • rosbridge_server
  • rosapi
  • 资源服务（用于处理 package:// 资源访问）

其中：

  • rosbridge_server 负责将 ROS 数据通过 WebSocket 暴露给前端
  • rosapi 负责提供节点、话题、服务、参数等系统信息查询接口
  • 资源服务用于将 ROS 包中的模型、网格与其他静态资源转换为前端可访问的 URL

这一层的作用，是把 ROS 内部接口转化为浏览器能够直接使用的访问方式。

3.3 前端显示层 ​

前端部分负责完成以下工作：

  • 3D 场景渲染
  • 机器人模型与点云显示
  • TF 坐标轴显示与控制
  • 状态面板渲染
  • ROS 信息列表与详情展示
  • 轨迹线、起终点姿态显示
  • 曲线图绘制
  • ROS Graph 可视化
  • 配置管理与本地存储

因此，WebRviz 的本质不是“远程显示 RViz 窗口”，而是直接消费 ROS 数据流，在浏览器端重建可视化逻辑。

4. 核心功能说明 ​

4.1 机器人模型显示 ​

WebRviz 支持加载 URDF 模型，并根据 /tf、/tf_static 与 /joint_states 实时更新机器人姿态。

这一功能的关键在于：

  • 前端需要完成 URDF 解析或相关资源加载
  • 各 link / joint 的层级关系需要映射到 3D 场景对象
  • joint 状态变化要驱动模型位姿更新
  • TF 数据要与模型显示保持一致

相比静态模型展示，这部分更强调和 ROS 实时状态同步。

4.2 TF 显示与管理 ​

TF 是机器人系统中最核心的数据之一。WebRviz 不仅支持显示 TF，还支持：

  • 全部显示
  • 全部隐藏
  • 按指定 Link 显示 TF 坐标轴
  • 重置视角

在实际使用中，TF 过多时容易影响场景可读性，因此对显示粒度进行控制是有必要的。
这一功能使用户可以更灵活地定位某一段机构链或某个关键 link 的空间关系。

4.3 点云显示 ​

WebRviz 支持 sensor_msgs/PointCloud2 数据的可视化，用于显示环境感知信息。

点云显示的价值主要体现在两个方面：

  1. 将机器人本体状态与外部环境放在同一个视图中观察
  2. 为路径规划、感知融合和现场调试提供直观参考

对于需要同时观察机械臂与工件、障碍物或环境信息的应用来说，点云能力是 Web 可视化工具中比较关键的一部分。

4.4 RViz 配置同步 ​

项目支持同步 RViz 中的部分配置内容，例如：

  • 固定坐标系
  • 点云候选话题

这一设计主要解决两个问题：

第一，减少从 RViz 迁移到 WebRviz 时的重复配置工作；
第二，使 WebRviz 能够更自然地复用现有调试流程中的参数设置。

从工程角度看，这一能力提高了 WebRviz 对现有 ROS 项目的接入友好度。

4.5 机器人状态面板 ​

WebRviz 的状态区域主要包括三类信息：

  • 关节角度
  • 笛卡尔位姿
  • TF 树

其中 TF 树并不是简单按 frame 名称平铺显示，而是按 link -> joint -> link 结构组织，并支持查看更详细的信息。

这意味着该面板不仅仅用于“看数值”，还承担了一部分机器人结构分析与调试作用。
在排查 URDF 配置、关节链关系、变换链条时会比较直观。

4.6 ROS 信息查看 ​

WebRviz 集成了对以下 ROS 信息的浏览能力：

  • topic 列表
  • service 列表
  • param 列表
  • 消息详情
  • 服务详情
  • 参数详情

这一部分依赖 rosapi 提供系统信息接口。
从使用体验上看，它让用户不需要频繁切换命令行工具，就能在同一页面中查看 ROS 系统当前暴露出的信息。

对于系统联调场景，这个功能很实用，因为很多问题并不是出在模型显示，而是出在消息接口、参数配置或服务调用层面。

4.7 MoveIt 轨迹预览 ​

在接入 MoveIt 的情况下，WebRviz 可以显示规划结果，包括：

  • 轨迹线
  • TCP 起点姿态
  • TCP 终点姿态

这使前端不只是查看当前机器人状态，还能进一步查看“即将执行”或“规划得到”的运动结果。

从技术上看，这部分通常需要对 MoveIt 输出轨迹进行解析，并将轨迹点映射到场景中的路径可视化对象。
相比单一模型显示，这一步让 WebRviz 具备了更接近规划调试工具的能力。

4.8 运动曲线分析 ​

这是 WebRviz 中相对更偏分析性质的一部分。项目支持基于 /move_group/result 中的 trajectory_msgs/JointTrajectoryPoint[] 绘制多种运动曲线，包括：

  • 关节位置曲线
  • TCP 位置曲线
  • 速度曲线
  • 加速度曲线
  • 力矩曲线

同时支持单位切换和悬停读数。

这部分功能的价值在于，它把“轨迹能不能看见”进一步扩展为“轨迹质量能不能分析”。
对于评估规划结果是否平滑、是否存在突变、是否接近极限，这类曲线展示会比单纯看 3D 路径更直接。

4.9 ROS Graph 显示 ​

WebRviz 支持 ROS 图谱显示，用于可视化节点与话题之间的通信关系。

这部分能力通常用于：

  • 查看当前系统节点拓扑
  • 排查节点之间的消息连接关系
  • 辅助分析系统结构

当机器人系统节点数量较多时，单靠命令行查看 topic 和 node 信息效率较低，图谱形式能提供更直观的全局视图。

4.10 轨迹录制与回放 ​

WebRviz 支持轨迹录制与回放，并提供：

  • 暂停
  • 进度拖动
  • 时间显示
  • 回放预览

这一功能适合以下场景：

  • 复查某段规划或执行结果
  • 对比不同轨迹方案
  • 用于演示与展示

它本质上是在可视化层面补充了“时间维度”的控制能力。

4.11 日志输出 ​

页面左下角日志框用于记录运行过程中的关键事件，包括：

  • 连接状态
  • 配置同步
  • 轨迹操作
  • MoveIt 规划状态
  • 执行状态

日志区域的作用不是替代 ROS 原生日志，而是为 Web 界面使用过程提供必要反馈，帮助用户快速判断当前操作是否生效、系统是否连接正常。

5. 前端交互与配置管理 ​

WebRviz 在前端交互层面提供了以下能力：

  • 中英文切换
  • 亮色 / 暗色主题切换
  • 自适应布局
  • 本地保存运行配置和界面偏好

可配置项主要包括：

  • rosbridge URL
  • RViz config URL
  • URDF fallback URL
  • URDF package root URL
  • PointCloud2 topic

这些设置保存在浏览器 localStorage 中，便于重复使用。

从技术设计上看，这部分功能虽然不直接涉及机器人算法，但对项目实际可用性影响很大。
它决定了 WebRviz 不只是一个 demo 页面，而是更接近可长期使用的工具型前端。

6. 运行环境与依赖 ​

在 ROS1 版本中，项目主要面向以下环境：

  • Ubuntu 20.04
  • ROS Noetic
  • MoveIt1
  • Python 3.8+
  • Node.js 18+（推荐 Node.js 20 LTS）
  • npm

ROS 侧主要依赖：

  • rosbridge_server
  • rosapi
  • rospkg

如果涉及模型资源与 package:// 路径访问，还需要资源服务支持。

这些依赖关系说明 WebRviz 并不是一个脱离 ROS 独立运行的通用 3D 页面，而是一个明确建立在 ROS 生态接口之上的前端工具。

7. 典型部署流程 ​

WebRviz 的典型运行流程可以概括为：

  1. 启动 ROS 与 MoveIt 环境
  2. 启动 rosbridge_server
  3. 启动 rosapi
  4. 启动资源服务
  5. 构建并启动 WebRviz 前端
  6. 在浏览器中访问页面并连接 ROS 系统

在局域网环境下，只要端口开放，前端页面可以部署在不同设备上访问。
这使其在“ROS 跑在 Ubuntu，界面打开在另一台机器浏览器上”的场景下具有较好的适应性。

8. 适用场景 ​

WebRviz 适合以下类型的场景：

  • ROS / MoveIt 项目的浏览器端可视化入口
  • 机器人系统的本地调试辅助界面
  • 局域网下的远程状态查看
  • 作为更大系统中的嵌入式可视化模块
  • 用于轨迹分析、系统结构观察和运行状态监控

结尾说明 ​

如果你正在使用 ROS 或 MoveIt 构建机器人系统，并希望为现有项目增加一个更轻量、更易集成的浏览器端可视化入口，WebRviz 可以作为一个可直接落地的方案参考。后续随着功能持续扩展，它也适合进一步演进为机器人系统中的统一前端可视化模块。

贡献者 ​

The avatar of contributor named as shine-tong shine-tong

文件历史 ​

用 ♥ 撰写

CC BY-SA 4.0 © 2022-PRESENT Nólëbase 的创作者们