Web Scene Composer

浏览器端的 Isaac Sim / ROS 2 联调与可视化工具，面向 Nova Carter、工业 AMR（iw_hub）等工作流。

仿真联调：连接 Foxglove Bridge，同步底盘位姿与 TF，支持 Nav2 发目标、取货/卸货作业、Xbox /cmd_vel、相机 / LiDAR / 代价地图
场景组装：导入 glTF、编辑 prim 层级与变换，在 WebGPU 视口中预览
MCAP 可视化：加载本地 .mcap，按话题回放点云与多路相机

在线预览随 main 分支自动部署至 Vercel。

功能演示

工业 AMR · UR10 机械臂 · 传送带

Isaac Sim 工业场景：iw_hub AMR 取货/卸货、UR10 机械臂与传送带联动。Web 端 取货 / 卸货 面板支持 Location ID 或地图点选（绿/红 Approach 箭头）→ /job/start；作业进度与失败原因来自 /job/status。

📺 开发日志：工业 AMR，UR10 机械臂与传送带

仿真与作业节点在独立 ROS workspace 中运行，见 IsaacSim-ros_workspaces（iw-hub-shelf-amr）。

Nav2 导航联调

Waypoint Gizmo → 桥接 Service → /navigate_to_pose；视口叠加 /plan、/local_plan。

📺 开发日志：Nav2 导航演示

Xbox 差速轮控制

手柄 → advertise / publish /cmd_vel，与 Simulate 下底盘位姿、TF 轮子同步配合使用。

📺 开发日志：Xbox 手柄控制演示

Nav2 代价地图叠加

右侧 Topics 面板对 /local_costmap/costmap、/global_costmap/costmap（nav_msgs/OccupancyGrid）点眼睛订阅 → 视口地面半透明叠加；展开话题可调不透明度与膨胀层。配合大纲可见性开关隐藏遮挡几何，即可看清完整代价地图。

📺 开发日志：代价地图

材质节点预览（辅）

WebGPU TSL Shader Graph，便于视口内快速试材质；完整 shading 仍建议在 Blender 等 DCC 中完成。

📺 开发日志：材质预览演示

MCAP 离线可视化

标题栏切换到 数据回放 → 打开 MCAP，加载本地 .mcap（如 nuScenes）做传感器可视化：左侧 Topics 默认隐藏，点眼睛启用话题；点云在 3D 视口叠加，摄像头在底部多画面网格；时间轴支持播放 / 暂停 / 重播与变速。支持 foxglove.PointCloud / CompressedImage（protobuf）及 lz4 压缩。

📺 开发日志：MCAP 离线回放

功能概览

层级	能力	说明
核心	取货 / 卸货作业	Location ID 或地图点选 → `/job/start`、`/job/cancel`；`/job/status` 驱动作业状态与进度
核心	Simulate	Foxglove Bridge：`/chassis/odom`（底盘）、`/tf`（轮子 / 脚轮）
核心	Nav2 导航目标	Waypoint → Service 桥 → `/navigate_to_pose`；视口绘制全局 / 局部路径
核心	代价地图可视化	`/local_costmap`、`/global_costmap`（OccupancyGrid）→ Topics 眼睛订阅，视口叠加
核心	差速驱动	Xbox 手柄 → `/cmd_vel`
核心	传感器面板	摄像头（CompressedImage / H.264）、LiDAR（PointCloud2，视口叠加）
核心	MCAP 离线可视化	本地 `.mcap` 传感器回放：Topics 显隐、时间轴、点云 / 多路相机（仿真联调 / 数据回放双模式）
基础	场景组装	glTF 导入、prim 树、Transform Gizmo、视口着色（Shaded / Solid / Wireframe / Normals）、大纲可见性开关、导出选中物体 `.glb`
辅助	材质节点	TSL Shader Graph（探索用）；glTF 材质导出仍不完善（见下方）
—	检视器 / 项目浏览器	Transform、灯光、Asset / Prim；资源列表

界面支持 中文 / English（标题栏语言按钮）。

本地开发

npm install
npm run dev

浏览器打开 http://localhost:3000。

pnpm install && pnpm dev

Vercel 部署：仓库使用 pnpm-lock.yaml，请与 package.json 保持同步（pnpm install 后提交 lockfile）。

与 Isaac Sim 联调

完整 Windows 六终端启动顺序（Zenoh → Isaac Sim → Foxglove → Nav2 → 本桥接 → npm run dev）见：

ros/carter_web_nav_bridge/README.md

工业 AMR 取货/卸货（iw_hub + UR10 + 传送带）的仿真场景、shelf_mission 作业节点与 jazzy_ws 启动说明见：

IsaacSim-ros_workspaces（iw-hub-shelf-amr 分支）

快速检查清单

终端	命令（`jazzy_ws` 目录）
1	`pixi run zenoh`
2	`ros2 launch isaacsim_bringup run_isaacsim.launch.py install_path:=C:/isaacsim-6.0.1` → Play
3	`pixi run ros2 run foxglove_bridge foxglove_bridge --ros-args -p include_hidden:=true`
4	`ros2 launch carter_navigation carter_navigation.launch.py use_rviz:=False`
5	`ros2 launch carter_web_nav_bridge web_nav_bridge.launch.py`
6	`cd Web-Scene-Composer` → `npm run dev` → 浏览器 Simulate

1. 启动仿真并确认 ROS 2 话题

在 Isaac Sim 的 ROS 2 workspace（示例：jazzy_ws）中确认话题已发布：

ros2 topic list

当前 Nova Carter / Isaac Sim 输出话题如下：

话题	类型 / 用途	Web Scene Composer
`/front_stereo_camera/left/image_raw`	相机图像	摄像头面板（需手动添加话题）
`/front_stereo_camera/left/camera_info`	相机内参	—
`/back_stereo_camera/left/image_raw`	后视相机	摄像头面板
`/back_stereo_camera/left/camera_info`	相机内参	—
`/front_3d_lidar/lidar_points`	PointCloud2	雷达面板 / 3D 视口点云（默认）
`/chassis/odom`	Odometry	Simulate 订阅，驱动底盘位姿
`/cmd_vel`	geometry_msgs/Twist	差速驱动面板 publish
`/chassis/imu`	IMU	—
`/front_stereo_imu/imu`	IMU	—
`/back_stereo_imu/imu`	IMU	—
`/left_stereo_imu/imu`	IMU	—
`/right_stereo_imu/imu`	IMU	—
`/tf`	TF 树	Simulate 订阅，驱动轮子 / 万向轮关节
`/plan` / `/plan_smoothed`	`nav_msgs/Path`	Nav Goal 全局路径（视口）
`/local_plan`	`nav_msgs/Path`	Nav Goal 局部路径（视口）
`/local_costmap/costmap`	`nav_msgs/OccupancyGrid`	Topics 局部代价地图（视口叠加）
`/global_costmap/costmap`	`nav_msgs/OccupancyGrid`	Topics 全局代价地图（视口叠加）
`/job/start`	`shelf_mission_interfaces/srv/StartJob`	取货 / 卸货启动作业
`/job/cancel`	service	取货 / 卸货急停
`/job/status`	`shelf_mission_interfaces/msg/JobStatus`	取货 / 卸货作业状态与进度
`/navigate_to_pose/_action/feedback`	action feedback	Nav Goal 剩余距离（hidden）
`/navigate_to_pose/_action/status`	action status	Nav Goal 导航状态（hidden）
`/parameter_events`	参数事件	—

若相机话题为 image_raw（非 compressed），请在底部 摄像头画面 面板中添加对应话题；代码内默认示例为 image_raw/compressed，与当前 Isaac Sim 输出可能不一致。

2. Foxglove Bridge 与导航桥接

须与 Zenoh、Nav2、本桥接节点一并启动，详见 ros/carter_web_nav_bridge/README.md。

Foxglove（终端 3）：

pixi run ros2 run foxglove_bridge foxglove_bridge --ros-args -p include_hidden:=true

导航 Service 桥接（终端 5）：

ros2 launch carter_web_nav_bridge web_nav_bridge.launch.py

Web 端连接地址（见 lib/ros/foxglove-config.ts）：

ws://127.0.0.1:8765

Windows 上优先使用 127.0.0.1，避免 localhost 解析到 IPv6 导致握手失败。

3. 在 Web 端连接

点击标题栏 Simulate，连接 Foxglove Bridge。
连接成功后订阅 /chassis/odom（底盘）与 /tf（轮子），场景中的机器人会跟随仿真更新。
底部 + 添加 取货 / 卸货、差速驱动控制器、摄像头画面、雷达点云、Nav2 导航目标 等面板按需使用。
LiDAR：默认话题 /front_3d_lidar/lidar_points，可在 3D 视口叠加显示（WebGPU TSL 点云）。
代价地图：在右侧 Topics 对 /local_costmap/costmap、/global_costmap/costmap 点眼睛启用。

项目结构（简要）

app/                    Next.js App Router
components/
  viewport/             R3F 渲染、LiDAR、材质同步、路径可视化
  panels/               底部面板（取货/卸货、相机、雷达、材质图、差速驱动、Nav Goal）
  playback/             MCAP 可视化：Topics 树、时间轴、帧检视
  scene-hierarchy.tsx   场景大纲（含选中物体 .glb 导出）
  inspector.tsx         右侧检视器
lib/
  scene/                场景图、glTF 导入 / 选中导出
  ros/                  Foxglove WebSocket、话题与仿真状态
  mcap/                 MCAP 加载、解压、protobuf 解码、回放控制器
  playback/             回放状态（模式、时间轴、话题显隐）
  material-graph/       TSL 节点图编译（辅助）
  viewport/             渲染与 WebGPU 功能开关
ros/carter_web_nav_bridge/   Nav2 Service 桥接说明与源码镜像

WebGPU 功能开关见 lib/viewport/visual-config.ts 中的 VIEWPORT_WEBGPU_FEATURES。

技术栈

Next.js 16 · React 19
React Three Fiber · drei · Three.js（WebGPU）
@xyflow/react — 材质节点图（辅助）
Jotai — 状态管理
@foxglove/ws-protocol — Foxglove Bridge 客户端
@mcap/core · @mcap/browser — MCAP 离线可视化

当前存在问题

1. 复杂场景 glb 导入崩溃

症状	原因
简单场景正常	内存压力小，WebGPU 不易崩
复杂场景崩	纹理 / 几何体过多，WebGPU 上下文被系统回收
重启后更崩	浏览器 GPU 进程处于脏状态，需要硬刷新或强制 WebGL
`getSupportedExtensions` null	R3F 的 `Canvas` 在创建渲染器前组件已卸载 / 报错

2. glTF 导出不完善（几何与材质分离）

当前导出是两条路径，不能一次导出「带材质节点图修改的完整物体」：

入口	产物	局限
场景层级 → 下载选中物体	`.glb` 几何子树	常规 Standard/Physical 尽量保留；TSL NodeMaterial 降为灰色
材质节点 →「导出 glTF」	预览平面 + 烘焙 PBR	仅为材质快照，不含选中物体几何

后续若要「选中 mesh + 图内材质」一体导出，需要把几何导出与材质烘焙打通。

3. 3D 包围框标注微调未就绪

MCAP 传感器可视化（点云 / 相机 / 时间轴）已可用；3D 包围框标注的交互微调仍有问题，暂未作为正式能力写入功能概览与演示。

Name		Name	Last commit message	Last commit date
.cursor		.cursor
app		app
components		components
hooks		hooks
lib		lib
public		public
ros/carter_web_nav_bridge		ros/carter_web_nav_bridge
.gitignore		.gitignore
.mcp.json		.mcp.json
README.md		README.md
components.json		components.json
next-env.d.ts		next-env.d.ts
next.config.mjs		next.config.mjs
package-lock.json		package-lock.json
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
postcss.config.mjs		postcss.config.mjs
tsconfig.json		tsconfig.json
tsconfig.tsbuildinfo		tsconfig.tsbuildinfo

Navigation Menu

Repository navigation

About

Repository files navigation

Web Scene Composer

功能演示

工业 AMR · UR10 机械臂 · 传送带

Nav2 导航联调

Xbox 差速轮控制

Nav2 代价地图叠加

材质节点预览（辅）

MCAP 离线可视化

功能概览

本地开发

与 Isaac Sim 联调

快速检查清单

1. 启动仿真并确认 ROS 2 话题

2. Foxglove Bridge 与导航桥接

3. 在 Web 端连接

项目结构（简要）

技术栈

相关链接

当前存在问题

1. 复杂场景 glb 导入崩溃

2. glTF 导出不完善（几何与材质分离）

3. 3D 包围框标注微调未就绪

About

Releases

Packages

Contributors

Languages

Latest commit

History

Folders and files

Repository files navigation

Web Scene Composer

功能演示

工业 AMR · UR10 机械臂 · 传送带

Nav2 导航联调

Xbox 差速轮控制

Nav2 代价地图叠加

材质节点预览（辅）

MCAP 离线可视化

功能概览

本地开发

与 Isaac Sim 联调

快速检查清单

1. 启动仿真并确认 ROS 2 话题

2. Foxglove Bridge 与导航桥接

3. 在 Web 端连接

项目结构（简要）

技术栈

相关链接

当前存在问题

1. 复杂场景 glb 导入崩溃

2. glTF 导出不完善（几何与材质分离）

3. 3D 包围框标注微调未就绪

About

Topics

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages