机器人实践开发⑤：Foxglove 可视化机器人的 3D 显示

3D 可视化是 Foxglove 最强大的特性之一。本篇将介绍如何加载 URDF 模型、显示坐标系、关节状态、路径与障碍物，并解析 Foxglove 的三维渲染引擎原理，让你的机器人模型在浏览器中动起来。

Foxglove 数据可视化的核心数据结构

在底层通信中，我们需要定义基础几何体来构建场景。以立方体为例，CubePrimitive 定义了位置、尺寸和颜色等属性。

/// @brief A primitive representing a cube or rectangular prism
struct CubePrimitive {
    /// @brief Position of the center of the cube and orientation of the cube
    std::optional<Pose> pose;
    /// @brief Size of the cube along each axis
    std::optional<Vector3> size;
    /// @brief Color of the cube
    std::optional<Color> color;
    // ... encoding methods omitted for brevity
};

定义数据更新通道

为了将场景变化推送到客户端，需要初始化对应的 Schema 通道。

std::unique_ptr<foxglove::schemas::SceneUpdateChannel> visualization_scene_update_channel;

填充结构数据

接下来准备具体的实体信息。这里我们创建一个红色的立方体，并绑定到指定的坐标帧。

foxglove::schemas::CubePrimitive cube;
cube.size = foxglove::schemas::Vector3{size, size, size};
cube.color = foxglove::schemas::Color{1, 0, 0, 1}; // 红色

foxglove::schemas::SceneEntity entity;
entity.frame_id = visualization_frame_id;
entity.id = "box";
entity.cubes.push_back(cube);
entity.timestamp = timestamp;

发送到 Foxglove 客户端

构造好场景更新消息后，通过通道日志发送出去。注意这里复用之前的逻辑，确保时间戳和 ID 一致。

foxglove::schemas::SceneUpdate scene_update;
scene_update.entities.push_back(entity);
visualization_scene_update_channel->log(scene_update);

3D 可视化效果

运行代码后，可以在 Foxglove 界面看到生成的 3D 物体。