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

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

《机器人实践开发》系列文章，请读者前往阅读 👀

《机器人实践开发①：Foxglove 开发环境完整搭建指南（含常见坑位）》

《机器人实践开发②：Foxglove 嵌入式移植 + CMake 集成》

《机器人实践开发③：Foxglove可视化机器人的眼睛-视频》

《机器人实践开发④：Foxglove可视化机器人的耳朵-声音》

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

《机器人实践开发⑥：Foxglove可视化机器人传感器数据》

《机器人实践开发⑦：Foxglove可视化机器人的日志显示》

《机器人实践开发⑧：Foxglove可视化机器人的地图显示》

《机器人实践开发⑨：Foxglove可视化机器人的MyBag 数据回放》

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;

  /// @brief Encoded the CubePrimitive as protobuf to the provided buffer.
  ///
  /// On success, writes the serialized length to *encoded_len.
  /// If the provided buffer has insufficient capacity, writes the required capacity to *encoded_len
  /// and returns FoxgloveError::BufferTooShort.
  /// If the message cannot be encoded, writes the reason to stderr and returns
  /// FoxgloveError::EncodeError.
  ///
  /// @param ptr the destination buffer. must point to at least len valid bytes.
  /// @param len the length of the destination buffer.
  /// @param encoded_len where the serialized length or required capacity will be written to.
  FoxgloveError encode(uint8_t* ptr, size_t len, size_t* encoded_len);

  /// @brief Get the CubePrimitive schema.
  ///
  /// The schema data returned is statically allocated.
  static Schema schema();
};

定义数据更新通道SceneUpdateChannel

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

填充结构数据cube和entity

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 客户端

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

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

3D可视化显示数据

可以定义不同的数据结构显示在图标，只需要正确的填充对应的结构数据即可

注意
model可以填充机器人的模型文件 比如 URDF
texts 可以在 3d 显示文字
arrows可以显示箭头

entity.cubes.push_back(cube);
entity.spheres.push_back(sphere);
entity.arrows.push_back(arrowPrimitive);
entity.cylinders.push_back(cylinderPrimitive);
entity.lines.push_back(linePrimitive);
entity.texts.push_back(textPrimitive);
entity.models.push_back(modelPrimitive);
entity.triangles.push_back(triangleListPrimitive);

截图如下

友情提示🔔

🙏 感谢你的阅读！
如果这篇文章对你有所启发，欢迎关注我 ⭐，欢迎点击 “打赏支持作者” 支持一下我，你的支持是我持续创作的最大动力！
我会持续分享更多关于 智能摄像头 📷、机器人项目、 🤖音视频 RTC 🎧、App 开发 📱、嵌入式开发 🔧 等方向的实战经验，让你更快落地、更少踩坑。
欢迎浏览我其他文章 📚，或许能解决你当前的难题。
如果你正好在做相关项目产品，也欢迎随时私信我，一起技术交流、一起搞事情！ 🤝💬📞 联系微信/电话：13826173658