/*@jsxRuntime automatic @jsxImportSource react*/ const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function MDXContent(props = {}) { const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components); return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, { children: _jsx(_createMdxContent, {}) })) : _createMdxContent(); function _createMdxContent() { const _components = Object.assign({ nav: "nav", ol: "ol", li: "li", a: "a", blockquote: "blockquote", p: "p", h2: "h2", span: "span", em: "em", img: "img", h3: "h3", strong: "strong", table: "table", thead: "thead", tr: "tr", th: "th", tbody: "tbody", td: "td", code: "code", ul: "ul", h5: "h5", h4: "h4" }, _provideComponents(), props.components); return _jsxs(_Fragment, { children: [_jsx(_components.nav, { className: "toc-outline", children: _jsxs(_components.ol, { className: "toc-level toc-level-1", children: [_jsx(_components.li, { className: "toc-item toc-item-h2", children: _jsx(_components.a, { className: "toc-link toc-link-h2", href: "#introduction", children: "Introduction" }) }), _jsxs(_components.li, { className: "toc-item toc-item-h2", children: [_jsx(_components.a, { className: "toc-link toc-link-h2", href: "#concepts", children: "Concepts" }), _jsxs(_components.ol, { className: "toc-level toc-level-2", children: [_jsx(_components.li, { className: "toc-item toc-item-h3", children: _jsx(_components.a, { className: "toc-link toc-link-h3", href: "#transforms", children: "Transforms" }) }), _jsx(_components.li, { className: "toc-item toc-item-h3", children: _jsx(_components.a, { className: "toc-link toc-link-h3", href: "#topics", children: "Topics" }) })] })] }), _jsxs(_components.li, { className: "toc-item toc-item-h2", children: [_jsx(_components.a, { className: "toc-link toc-link-h2", href: "#supported-messages", children: "Supported Messages" }), _jsxs(_components.ol, { className: "toc-level toc-level-2", children: [_jsx(_components.li, { className: "toc-item toc-item-h3", children: _jsx(_components.a, { className: "toc-link toc-link-h3", href: "#transforms-1", children: "Transforms" }) }), _jsx(_components.li, { className: "toc-item toc-item-h3", children: _jsx(_components.a, { className: "toc-link toc-link-h3", href: "#scene-entity", children: "Scene Entity" }) }), _jsx(_components.li, { className: "toc-item toc-item-h3", children: _jsx(_components.a, { className: "toc-link toc-link-h3", href: "#ros-markers", children: "ROS Markers" }) }), _jsx(_components.li, { className: "toc-item toc-item-h3", children: _jsx(_components.a, { className: "toc-link toc-link-h3", href: "#ros-geometry-msgs", children: "ROS Geometry Msgs" }) }), _jsx(_components.li, { className: "toc-item toc-item-h3", children: _jsx(_components.a, { className: "toc-link toc-link-h3", href: "#path", children: "Path" }) }), _jsx(_components.li, { className: "toc-item toc-item-h3", children: _jsx(_components.a, { className: "toc-link toc-link-h3", href: "#point-cloud", children: "Point Cloud" }) }), _jsx(_components.li, { className: "toc-item toc-item-h3", children: _jsx(_components.a, { className: "toc-link toc-link-h3", href: "#grid", children: "Grid" }) }), _jsx(_components.li, { className: "toc-item toc-item-h3", children: _jsx(_components.a, { className: "toc-link toc-link-h3", href: "#image", children: "Image" }) }), _jsx(_components.li, { className: "toc-item toc-item-h3", children: _jsx(_components.a, { className: "toc-link toc-link-h3", href: "#camera-field-of-view", children: "Camera Field-of-view" }) }), _jsx(_components.li, { className: "toc-item toc-item-h3", children: _jsx(_components.a, { className: "toc-link toc-link-h3", href: "#laser-scan", children: "Laser Scan" }) }), _jsx(_components.li, { className: "toc-item toc-item-h3", children: _jsx(_components.a, { className: "toc-link toc-link-h3", href: "#pose", children: "Pose" }) }), _jsx(_components.li, { className: "toc-item toc-item-h3", children: _jsx(_components.a, { className: "toc-link toc-link-h3", href: "#velodyne-scan", children: "Velodyne Scan" }) })] })] }), _jsxs(_components.li, { className: "toc-item toc-item-h2", children: [_jsx(_components.a, { className: "toc-link toc-link-h2", href: "#settings-1", children: "Settings" }), _jsxs(_components.ol, { className: "toc-level toc-level-2", children: [_jsx(_components.li, { className: "toc-item toc-item-h3", children: _jsx(_components.a, { className: "toc-link toc-link-h3", href: "#frame", children: "Frame" }) }), _jsx(_components.li, { className: "toc-item toc-item-h3", children: _jsx(_components.a, { className: "toc-link toc-link-h3", href: "#scene", children: "Scene" }) }), _jsx(_components.li, { className: "toc-item toc-item-h3", children: _jsx(_components.a, { className: "toc-link toc-link-h3", href: "#transforms-2", children: "Transforms" }) }), _jsx(_components.li, { className: "toc-item toc-item-h3", children: _jsx(_components.a, { className: "toc-link toc-link-h3", href: "#topics-1", children: "Topics" }) }), _jsx(_components.li, { className: "toc-item toc-item-h3", children: _jsx(_components.a, { className: "toc-link toc-link-h3", href: "#custom-layers", children: "Custom Layers" }) }), _jsx(_components.li, { className: "toc-item toc-item-h3", children: _jsx(_components.a, { className: "toc-link toc-link-h3", href: "#publish", children: "Publish" }) })] })] }), _jsx(_components.li, { className: "toc-item toc-item-h2", children: _jsx(_components.a, { className: "toc-link toc-link-h2", href: "#user-interactions", children: "User interactions" }) }), _jsx(_components.li, { className: "toc-item toc-item-h2", children: _jsx(_components.a, { className: "toc-link toc-link-h2", href: "#shortcuts", children: "Shortcuts" }) })] }) }), _jsxs(_components.blockquote, { children: ["\n", _jsx(_components.p, { children: "Display markers, entities, camera images, meshes, URDF models, and more in a 3D scene." }), "\n"] }), "\n", _jsxs(_components.h2, { id: "introduction", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#introduction", children: _jsx(_components.span, { className: "icon icon-link" }) }), "Introduction"] }), "\n", _jsx(_components.p, { children: "By publishing specifically formatted messages to topics, you can create complex 3D scenes from primitive shapes, grids, point clouds, and other renderables." }), "\n", _jsxs(_components.p, { children: ["Open the ", _jsx(_components.em, { children: "Panel settings" }), " tab in the app sidebar or click the settings icon (⚙) in the panel toolbar to configure the panel."] }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "/images/docs/studio/panels/3d/panel.png", alt: "3d panel", width: "2912", height: "1508" }) }), "\n", _jsxs(_components.h2, { id: "concepts", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#concepts", children: _jsx(_components.span, { className: "icon icon-link" }) }), "Concepts"] }), "\n", _jsx(_components.p, { children: "The 3D panel renders different types of visualizations into a common scene. There are a few general concepts to understand to correctly visualize your robot data." }), "\n", _jsxs(_components.h3, { id: "transforms", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#transforms", children: _jsx(_components.span, { className: "icon icon-link" }) }), "Transforms"] }), "\n", _jsx(_components.p, { children: "A robotics system produces many messages describing its observations of the world around it. These messages may exist in one or more coordinate frames. For example a lidar sensor might report readings relative to its frame of reference while an IMU will produce readings relative to another. Both of these might exist on different parts of the robot." }), "\n", _jsx(_components.p, { children: "Transforms define the spacial relationships between two coordinate frames at some time. Transforms define this relationship between two frames often refering to one as the child and the other as a parent." }), "\n", _jsxs(_components.p, { children: ["In the 3D panel, the ", _jsx(_components.strong, { children: "Display frame" }), " identifies the viewport coordinate frame. To render objects into the scene, there must exist a transform path from the object's coordinate frame to the display frame."] }), "\n", _jsxs(_components.h3, { id: "topics", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#topics", children: _jsx(_components.span, { className: "icon icon-link" }) }), "Topics"] }), "\n", _jsxs(_components.p, { children: ["Each topic matching a supported ", _jsx(_components.a, { href: "#visualizations", children: "visualization" }), " is displayable in the scene. Under each topic is a set of settings depending on the type of visualization. These configure additional aspects of how the visualization appears in the scene. You can toggle individual topics."] }), "\n", _jsxs(_components.h2, { id: "supported-messages", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#supported-messages", children: _jsx(_components.span, { className: "icon icon-link" }) }), "Supported Messages"] }), "\n", _jsx(_components.p, { children: "The 3D panel can visualize an assortment of different messages." }), "\n", _jsx(_components.p, { children: "To visualize a topic, the messages on that topic must conform to one of the known message schemas listed below." }), "\n", _jsxs(_components.h3, { id: "transforms-1", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#transforms-1", children: _jsx(_components.span, { className: "icon icon-link" }) }), "Transforms"] }), "\n", _jsxs(_components.table, { children: [_jsx(_components.thead, { children: _jsxs(_components.tr, { children: [_jsx(_components.th, { children: "framework" }), _jsx(_components.th, { children: "schema" })] }) }), _jsxs(_components.tbody, { children: [_jsxs(_components.tr, { children: [_jsx(_components.td, { children: "ROS 1" }), _jsx(_components.td, { children: _jsx(_components.a, { href: "https://docs.ros.org/en/noetic/api/tf/html/msg/tfMessage.html", children: _jsx(_components.code, { children: "tf/tfMessage" }) }) })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "ROS 1" }), _jsx(_components.td, { children: _jsx(_components.a, { href: "https://docs.ros.org/en/noetic/api/tf2_msgs/html/msg/TFMessage.html", children: _jsx(_components.code, { children: "tf2_msgs/TFMessage" }) }) })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "ROS 2" }), _jsx(_components.td, { children: _jsx(_components.a, { href: "https://github.com/ros2/geometry2/blob/ros2/tf2_msgs/msg/TFMessage.msg", children: _jsx(_components.code, { children: "tf2_msgs/msg/TFMessage" }) }) })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "Custom" }), _jsx(_components.td, { children: _jsx(_components.a, { href: "/docs/studio/messages/frame-transform", children: _jsx(_components.code, { children: "foxglove.FrameTransform" }) }) })] })] })] }), "\n", _jsxs(_components.h3, { id: "scene-entity", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#scene-entity", children: _jsx(_components.span, { className: "icon icon-link" }) }), "Scene Entity"] }), "\n", _jsx(_components.p, { children: "A scene entity is a collection of primitive shapes (cubes, spheres, text, meshes, lines, etc). Use scene entities to display anything from a basic bounding box to a complex 3d decision tree or a road network." }), "\n", _jsxs(_components.p, { children: ["You can add multiple scene entities using a ", _jsx(_components.code, { children: "SceneUpdate" }), " message."] }), "\n", _jsxs(_components.table, { children: [_jsx(_components.thead, { children: _jsxs(_components.tr, { children: [_jsx(_components.th, { children: "framework" }), _jsx(_components.th, { children: "schema" })] }) }), _jsxs(_components.tbody, { children: [_jsxs(_components.tr, { children: [_jsx(_components.td, { children: "Custom" }), _jsx(_components.td, { children: _jsx(_components.a, { href: "/docs/studio/messages/scene-update", children: _jsx(_components.code, { children: "foxglove.SceneUpdate" }) }) })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "Custom" }), _jsx(_components.td, { children: _jsx(_components.a, { href: "/docs/studio/messages/scene-entity", children: _jsx(_components.code, { children: "foxglove.SceneEntity" }) }) })] })] })] }), "\n", _jsxs(_components.h3, { id: "ros-markers", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#ros-markers", children: _jsx(_components.span, { className: "icon icon-link" }) }), "ROS Markers"] }), "\n", _jsxs(_components.p, { children: ["The 3D panel supports ROS Markers. Similar to ", _jsx(_components.code, { children: "SceneEntities" }), ", these ", _jsx(_components.code, { children: "Marker" }), " messages describe primitive shapes or meshes. ROS users with existing ", _jsx(_components.code, { children: "Marker" }), " messages can visualize them in the 3D scene with no changes to their data."] }), "\n", _jsxs(_components.table, { children: [_jsx(_components.thead, { children: _jsxs(_components.tr, { children: [_jsx(_components.th, { children: "framework" }), _jsx(_components.th, { children: "schema" })] }) }), _jsxs(_components.tbody, { children: [_jsxs(_components.tr, { children: [_jsx(_components.td, { children: "ROS 1" }), _jsx(_components.td, { children: _jsx(_components.a, { href: "https://docs.ros.org/en/noetic/api/visualization_msgs/html/msg/Marker.html", children: _jsx(_components.code, { children: "visualization_msgs/Marker" }) }) })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "ROS 2" }), _jsx(_components.td, { children: _jsx(_components.a, { href: "https://github.com/ros2/common_interfaces/blob/master/visualization_msgs/msg/Marker.msg", children: _jsx(_components.code, { children: "visualization_msgs/msg/Marker" }) }) })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "ROS 1" }), _jsx(_components.td, { children: _jsx(_components.a, { href: "https://docs.ros.org/en/noetic/api/visualization_msgs/html/msg/MarkerArray.html", children: _jsx(_components.code, { children: "visualization_msgs/MarkerArray" }) }) })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "ROS 2" }), _jsx(_components.td, { children: _jsx(_components.a, { href: "https://github.com/ros2/common_interfaces/blob/master/visualization_msgs/msg/MarkerArray.msg", children: _jsx(_components.code, { children: "visualization_msgs/msg/MarkerArray" }) }) })] })] })] }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Mesh Markers" }) }), "\n", _jsxs(_components.p, { children: ["For markers with a ", _jsx(_components.code, { children: "mesh_resource" }), " field, following URL schemes are supported:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: _jsx(_components.code, { children: "http(s)://" }) }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "package://" }), " (Desktop app only)"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "file://" }), " (Desktop app only)"] }), "\n"] }), "\n", _jsx(_components.p, { children: "And the following file formats:" }), "\n", _jsxs(_components.h5, { id: "gltf-glb", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#gltf-glb", children: _jsx(_components.span, { className: "icon icon-link" }) }), "glTF (", _jsx(_components.code, { children: ".glb" }), ")"] }), "\n", _jsx(_components.p, { children: "This is the preferred format, as it enjoys the best performance of all supported file types." }), "\n", _jsx(_components.p, { children: "Binary glTF files bundle all required assets into a single file, with support for embedded meshes, compression, and the same physically-based material system used in Studio. As a result, your model should appear in Studio similarly to how it appears in other 3D programs." }), "\n", _jsxs(_components.h5, { id: "stl-stl", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#stl-stl", children: _jsx(_components.span, { className: "icon icon-link" }) }), "STL (", _jsx(_components.code, { children: ".stl" }), ")"] }), "\n", _jsx(_components.p, { children: "STL files are well supported in Studio, but lack some of glTF's visualization features. The main advantage to STL is the ability to share the same files between your hardware manufacturing process and robot visualization tooling." }), "\n", _jsx(_components.p, { children: "STL was designed for 3D printing and CAD applications, and does not include materials or hierarchies of meshes. While they can be represented in a binary encoding, STL files are commonly represented with ASCII characters, which leads to larger files." }), "\n", _jsxs(_components.h5, { id: "collada-dae", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#collada-dae", children: _jsx(_components.span, { className: "icon icon-link" }) }), "COLLADA (", _jsx(_components.code, { children: ".dae" }), ")"] }), "\n", _jsx(_components.p, { children: "As a predecessor to glTF, COLLADA has a similar feature set. With that said, it does have larger XML-based files, no compression, and additional processing overhead." }), "\n", _jsxs(_components.p, { children: ["There is a ", _jsx(_components.a, { href: "https://github.com/ros-visualization/rviz/issues/1045", children: "bug in RViz" }), " where the up-axis metadata is ignored, resulting in incorrect orientations for many ", _jsx(_components.code, { children: ".dae" }), " files in ROS environments. To work around this, the 3D panel has a ", _jsx(_components.code, { children: "Ignore COLLADA " }), " setting to toggle between observing the ", _jsx(_components.code, { children: "" }), " tag or ignoring it like RViz."] }), "\n", _jsxs(_components.h5, { id: "wavefront-obj-obj", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#wavefront-obj-obj", children: _jsx(_components.span, { className: "icon icon-link" }) }), "Wavefront OBJ (", _jsx(_components.code, { children: ".obj" }), ")"] }), "\n", _jsx(_components.p, { children: "OBJ is a simple ASCII format predating all other supported formats. It has large file sizes, no material support, no mesh hierarchies, no compression, and additional processing overhead." }), "\n", _jsxs(_components.p, { children: ["Material support was added to the OBJ format as separate ", _jsx(_components.code, { children: ".mtl" }), " files, which Studio does not read."] }), "\n", _jsxs(_components.h3, { id: "ros-geometry-msgs", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#ros-geometry-msgs", children: _jsx(_components.span, { className: "icon icon-link" }) }), "ROS Geometry Msgs"] }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "PolygonStamped" }) }), "\n", _jsx(_components.p, { children: "PolygonStamped messages are displayed as a line between all the points." }), "\n", _jsxs(_components.table, { children: [_jsx(_components.thead, { children: _jsxs(_components.tr, { children: [_jsx(_components.th, { children: "framework" }), _jsx(_components.th, { children: "schema" })] }) }), _jsxs(_components.tbody, { children: [_jsxs(_components.tr, { children: [_jsx(_components.td, { children: "ROS 1" }), _jsx(_components.td, { children: _jsx(_components.a, { href: "https://docs.ros.org/en/noetic/api/geometry_msgs/html/msg/PolygonStamped.html", children: _jsx(_components.code, { children: "geometry_msgs/PolygonStamped" }) }) })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "ROS 2" }), _jsx(_components.td, { children: _jsx(_components.a, { href: "https://github.com/ros2/common_interfaces/blob/master/geometry_msgs/msg/PolygonStamped.msg", children: _jsx(_components.code, { children: "geometry_msgs/msg/PolygonStamped" }) }) })] })] })] }), "\n", _jsxs(_components.h3, { id: "path", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#path", children: _jsx(_components.span, { className: "icon icon-link" }) }), "Path"] }), "\n", _jsx(_components.p, { children: "An array of timestamped poses in a named coordinate frame, denoting an object's path through space." }), "\n", _jsxs(_components.table, { children: [_jsx(_components.thead, { children: _jsxs(_components.tr, { children: [_jsx(_components.th, { children: "framework" }), _jsx(_components.th, { children: "schema" })] }) }), _jsxs(_components.tbody, { children: [_jsxs(_components.tr, { children: [_jsx(_components.td, { children: "ROS 1" }), _jsx(_components.td, { children: _jsx(_components.a, { href: "https://docs.ros.org/en/noetic/api/nav_msgs/html/msg/Path.html", children: _jsx(_components.code, { children: "nav_msgs/Path" }) }) })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "ROS 2" }), _jsx(_components.td, { children: _jsx(_components.a, { href: "https://github.com/ros2/common_interfaces/blob/master/nav_msgs/msg/Path.msg", children: _jsx(_components.code, { children: "nav_msgs/msg/Path" }) }) })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "Custom" }), _jsx(_components.td, { children: _jsx(_components.a, { href: "/docs/studio/messages/poses-in-frame", children: _jsx(_components.code, { children: "foxglove.PosesInFrame" }) }) })] })] })] }), "\n", _jsxs(_components.h3, { id: "point-cloud", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#point-cloud", children: _jsx(_components.span, { className: "icon icon-link" }) }), "Point Cloud"] }), "\n", _jsx(_components.p, { children: "A collection of N-dimensional points, which may contain additional fields with information like normals, intensity, etc." }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "/images/docs/studio/panels/3d/pointcloud.png", alt: "pointcloud", width: "1314", height: "888" }) }), "\n", _jsxs(_components.table, { children: [_jsx(_components.thead, { children: _jsxs(_components.tr, { children: [_jsx(_components.th, { children: "framework" }), _jsx(_components.th, { children: "schema" })] }) }), _jsxs(_components.tbody, { children: [_jsxs(_components.tr, { children: [_jsx(_components.td, { children: "ROS 1" }), _jsx(_components.td, { children: _jsx(_components.a, { href: "https://docs.ros.org/en/noetic/api/sensor_msgs/html/msg/PointCloud2.html", children: _jsx(_components.code, { children: "sensor_msgs/PointCloud2" }) }) })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "ROS 2" }), _jsx(_components.td, { children: _jsx(_components.a, { href: "https://github.com/ros2/common_interfaces/blob/master/sensor_msgs/msg/PointCloud2.msg", children: _jsx(_components.code, { children: "sensor_msgs/msg/PointCloud2" }) }) })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "Custom" }), _jsx(_components.td, { children: _jsx(_components.a, { href: "/docs/studio/messages/point-cloud", children: _jsx(_components.code, { children: "foxglove.PointCloud" }) }) })] })] })] }), "\n", _jsxs(_components.h4, { id: "settings", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#settings", children: _jsx(_components.span, { className: "icon icon-link" }) }), "Settings"] }), "\n", _jsxs(_components.table, { children: [_jsx(_components.thead, { children: _jsxs(_components.tr, { children: [_jsx(_components.th, { children: "field" }), _jsx(_components.th, { children: "description" })] }) }), _jsxs(_components.tbody, { children: [_jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx("b", { style: { whiteSpace: "nowrap" }, children: "Point size" }) }), _jsx(_components.td, { children: "Size of each rendered point" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx("b", { style: { whiteSpace: "nowrap" }, children: "Point shape" }) }), _jsx(_components.td, { children: "Shape of each rendered point" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx("b", { style: { whiteSpace: "nowrap" }, children: "Decay time" }) }), _jsx(_components.td, { children: "Duration of time (in sec) that each point stays rendered" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx("b", { style: { whiteSpace: "nowrap" }, children: "Color mode" }) }), _jsxs(_components.td, { children: ["One of: ", _jsx("br", {}), _jsx("b", { children: "Flat" }), ": solid color", _jsx("br", {}), _jsx("b", { children: "Color map" }), ": pre-defined color palette", _jsx("br", {}), _jsx("b", { children: "Gradient" }), ": smooth transition between two custom colors", _jsx("br", {}), _jsx("b", { children: "BGR (packed)" }), ": ", _jsx(_components.code, { children: "sensor_msgs/PointCloud2" }), " only; use embedded color from each point's ", _jsx(_components.code, { children: "rgb" }), " field (", _jsx("a", { href: "#rgba-color-modes", children: "see below" }), ")", _jsx("br", {}), _jsx("b", { children: "BGRA (packed)" }), ": ", _jsx(_components.code, { children: "sensor_msgs/PointCloud2" }), " only; use embedded color from each point's ", _jsx(_components.code, { children: "rgba" }), " field (", _jsx("a", { href: "#rgba-color-modes", children: "see below" }), ")", _jsx("br", {}), _jsx("b", { children: "RGBA (separate fields)" }), ": ", _jsx(_components.code, { children: "foxglove.PointCloud" }), " only; use embedded color from each point's ", _jsx(_components.code, { children: "red" }), ", ", _jsx(_components.code, { children: "green" }), ", ", _jsx(_components.code, { children: "blue" }), ", and ", _jsx(_components.code, { children: "alpha" }), " fields (", _jsx("a", { href: "#rgba-color-modes", children: "see below" }), ")"] })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx("b", { style: { whiteSpace: "nowrap" }, children: "Flat color" }) }), _jsx(_components.td, { children: "Only shown if \"Color mode\" is set to \"Flat\"; hex code for color of each point" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx("b", { style: { whiteSpace: "nowrap" }, children: "Color by" }) }), _jsx(_components.td, { children: "Only shown if \"Color mode\" is set to any value but \"Flat\"; numeric field in message used for coloring logic" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx("b", { style: { whiteSpace: "nowrap" }, children: "Color map" }) }), _jsx(_components.td, { children: "Only shown if \"Color mode\" is set to \"Color map\"; \"Turbo\" (Google) or \"Rainbow\" (RViz); for mapping \"Color by\" field values to colors" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx("b", { style: { whiteSpace: "nowrap" }, children: "Opacity" }) }), _jsx(_components.td, { children: "Only shown if \"Color mode\" is set to \"Color map\" or \"BGR (packed)\"; sets alpha value for all points" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx("b", { style: { whiteSpace: "nowrap" }, children: "Value min" }) }), _jsx(_components.td, { children: "Only shown if \"Color mode\" is set to any value but \"Flat\"; minimum value used to normalize incoming points' \"Color by\" field values" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx("b", { style: { whiteSpace: "nowrap" }, children: "Value max" }) }), _jsx(_components.td, { children: "Only shown if \"Color mode\" is set to any value but \"Flat\"; maximum value used to normalize incoming points' \"Color by\" field values" })] })] })] }), "\n", _jsxs(_components.h4, { id: "rgba-color-modes", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#rgba-color-modes", children: _jsx(_components.span, { className: "icon icon-link" }) }), "RGBA color modes"] }), "\n", _jsx(_components.p, { children: "When using the \"BGR (packed)\", \"BGRA (packed)\", and \"RGBA (separate fields)\" color modes, your point cloud message must contain certain fields to display color information for each point." }), "\n", _jsxs(_components.h5, { id: "rgba-separate-fields", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#rgba-separate-fields", children: _jsx(_components.span, { className: "icon icon-link" }) }), "RGBA (separate fields)"] }), "\n", _jsxs(_components.p, { children: ["For ", _jsx(_components.code, { children: "foxglove.PointCloud" }), " messages, each point can contain color information in four separate fields, named ", _jsx(_components.code, { children: "red" }), ", ", _jsx(_components.code, { children: "green" }), ", ", _jsx(_components.code, { children: "blue" }), ", and ", _jsx(_components.code, { children: "alpha" }), ", of any numeric type:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Floating-point values" }), " — 0–1 range"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Unsigned integer values" }), " — Maximum possible range (e.g. 0–255 for a ", _jsx(_components.code, { children: "UINT8" }), " field)"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Signed integer values" }), " — ", _jsx(_components.code, { children: "-max" }), " to ", _jsx(_components.code, { children: "max" }), " (e.g. −127 to 127 for an ", _jsx(_components.code, { children: "INT8" }), " field; a value of −128 is treated as identical to −127)"] }), "\n"] }), "\n", _jsxs(_components.h5, { id: "bgr-packed-and-bgra-packed", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#bgr-packed-and-bgra-packed", children: _jsx(_components.span, { className: "icon icon-link" }) }), "BGR (packed) and BGRA (packed)"] }), "\n", _jsxs(_components.p, { children: ["For ", _jsx(_components.code, { children: "sensor_msgs/PointCloud2" }), " messages, each point can contain color information in a single field named ", _jsx(_components.code, { children: "rgb" }), " or ", _jsx(_components.code, { children: "rgba" }), ":"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["Must use a 4-byte type from ", _jsx(_components.a, { href: "http://docs.ros.org/en/melodic/api/sensor_msgs/html/msg/PointField.html", children: "sensor_msgs/PointField" }), " (", _jsx(_components.code, { children: "UINT32" }), ", value 6, is recommended)"] }), "\n", _jsx(_components.li, { children: "Each red, green, blue, and alpha value is represented by one byte in the 0–255 range" }), "\n", _jsxs(_components.li, { children: ["Bytes must be packed in ", _jsx(_components.code, { children: "[0xBB, 0xGG, 0xRR, 0xAA]" }), " order (i.e. ", _jsx(_components.code, { children: "(0xAA << 24) | (0xRR << 16) | (0xGG << 8) | 0xBB" }), " in little-endian order). This order is compatible with RViz."] }), "\n"] }), "\n", _jsx(_components.p, { children: "If using the \"BGR\" mode, the alpha value must still be present, but is ignored." }), "\n", _jsxs(_components.h3, { id: "grid", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#grid", children: _jsx(_components.span, { className: "icon icon-link" }) }), "Grid"] }), "\n", _jsx(_components.p, { children: "A way to represent 2D grid of data in color." }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "/images/docs/studio/panels/3d/occupancygrid.png", alt: "grid", width: "1134", height: "634" }) }), "\n", _jsxs(_components.table, { children: [_jsx(_components.thead, { children: _jsxs(_components.tr, { children: [_jsx(_components.th, { children: "framework" }), _jsx(_components.th, { children: "schema" })] }) }), _jsxs(_components.tbody, { children: [_jsxs(_components.tr, { children: [_jsx(_components.td, { children: "ROS 1" }), _jsx(_components.td, { children: _jsx(_components.a, { href: "https://docs.ros.org/en/noetic/api/nav_msgs/html/msg/OccupancyGrid.html", children: _jsx(_components.code, { children: "nav_msgs/OccupancyGrid" }) }) })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "ROS 2" }), _jsx(_components.td, { children: _jsx(_components.a, { href: "https://github.com/ros2/common_interfaces/blob/master/nav_msgs/msg/OccupancyGrid.msg", children: _jsx(_components.code, { children: "nav_msgs/msg/OccupancyGrid" }) }) })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "Custom" }), _jsx(_components.td, { children: _jsx(_components.a, { href: "/docs/studio/messages/grid", children: _jsx(_components.code, { children: "foxglove.Grid" }) }) })] })] })] }), "\n", _jsxs(_components.h4, { id: "foxglovegrid-settings", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#foxglovegrid-settings", children: _jsx(_components.span, { className: "icon icon-link" }) }), _jsx(_components.code, { children: "foxglove.Grid" }), " settings"] }), "\n", _jsxs(_components.table, { children: [_jsx(_components.thead, { children: _jsxs(_components.tr, { children: [_jsx(_components.th, { children: "field" }), _jsx(_components.th, { children: "description" })] }) }), _jsxs(_components.tbody, { children: [_jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx("b", { style: { whiteSpace: "nowrap" }, children: "Color mode" }) }), _jsxs(_components.td, { children: ["One of: ", _jsx("br", {}), _jsx("b", { children: "Flat" }), ": solid color", _jsx("br", {}), _jsx("b", { children: "Color map" }), ": pre-defined color palette", _jsx("br", {}), _jsx("b", { children: "Gradient" }), ": smooth transition between two custom colors", _jsx("br", {}), _jsx("b", { children: "RGBA (separate fields)" }), ": use embedded color from each cell's ", _jsx(_components.code, { children: "red" }), ", ", _jsx(_components.code, { children: "green" }), ", ", _jsx(_components.code, { children: "blue" }), ", and ", _jsx(_components.code, { children: "alpha" }), " fields (", _jsx("a", { href: "#rgba-separate-fields-color-mode", children: "see below" }), ")"] })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx("b", { style: { whiteSpace: "nowrap" }, children: "Flat color" }) }), _jsx(_components.td, { children: "Only shown if \"Color mode\" is set to \"Flat\"; hex code for color of each cell" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx("b", { style: { whiteSpace: "nowrap" }, children: "Color by" }) }), _jsx(_components.td, { children: "Only shown if \"Color mode\" is set to any value but \"Flat\"; numeric field in message used for coloring logic" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx("b", { style: { whiteSpace: "nowrap" }, children: "Color map" }) }), _jsx(_components.td, { children: "Only shown if \"Color mode\" is set to \"Color map\"; \"Turbo\" (Google) or \"Rainbow\" (RViz); for mapping \"Color by\" field values to colors" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx("b", { style: { whiteSpace: "nowrap" }, children: "Opacity" }) }), _jsx(_components.td, { children: "Only shown if \"Color mode\" is set to \"Color map\" or \"BGR (packed)\"; sets alpha value for all cells" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx("b", { style: { whiteSpace: "nowrap" }, children: "Value min" }) }), _jsx(_components.td, { children: "Only shown if \"Color mode\" is set to any value but \"Flat\"; minimum value used to normalize incoming grid's \"Color by\" field values" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx("b", { style: { whiteSpace: "nowrap" }, children: "Value max" }) }), _jsx(_components.td, { children: "Only shown if \"Color mode\" is set to any value but \"Flat\"; maximum value used to normalize incoming grid's \"Color by\" field values" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx("b", { style: { whiteSpace: "nowrap" }, children: "Frame lock" }) }), _jsxs(_components.td, { children: ["\"On\" means the grid is locked to the frame specified by its ", _jsx(_components.code, { children: "frame_id" }), ", and will move as that frame's transforms change. \"Off\" means the grid is relative to the fixed frame and will not move after it is first displayed."] })] })] })] }), "\n", _jsxs(_components.h5, { id: "rgba-separate-fields-color-mode", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#rgba-separate-fields-color-mode", children: _jsx(_components.span, { className: "icon icon-link" }) }), "RGBA (separate fields) color mode"] }), "\n", _jsxs(_components.p, { children: ["Each cell can contain color information in four separate fields, named ", _jsx(_components.code, { children: "red" }), ", ", _jsx(_components.code, { children: "green" }), ", ", _jsx(_components.code, { children: "blue" }), ", and ", _jsx(_components.code, { children: "alpha" }), ", of any numeric type:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Floating-point values" }), " — 0–1 range"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Unsigned integer values" }), " — Maximum possible range (e.g. 0–255 for a ", _jsx(_components.code, { children: "UINT8" }), " field)"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Signed integer values" }), " — ", _jsx(_components.code, { children: "-max" }), " to ", _jsx(_components.code, { children: "max" }), " (e.g. −127 to 127 for an ", _jsx(_components.code, { children: "INT8" }), " field; a value of −128 is treated as identical to −127)"] }), "\n"] }), "\n", _jsxs(_components.h4, { id: "nav_msgsoccupancygrid-settings", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#nav_msgsoccupancygrid-settings", children: _jsx(_components.span, { className: "icon icon-link" }) }), _jsx(_components.code, { children: "nav_msgs/OccupancyGrid" }), " settings"] }), "\n", _jsxs(_components.table, { children: [_jsx(_components.thead, { children: _jsxs(_components.tr, { children: [_jsx(_components.th, { children: "field" }), _jsx(_components.th, { children: "description" })] }) }), _jsxs(_components.tbody, { children: [_jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.strong, { children: "Min color" }) }), _jsx(_components.td, { children: "Color corresponding to minimum cell value (0)" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.strong, { children: "Max color" }) }), _jsx(_components.td, { children: "Color corresponding to maximum cell value (100). Note that cells with value exactly 100 are displayed as fully transparent." })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.strong, { children: "Unknown color" }) }), _jsx(_components.td, { children: "Color corresponding to unknown cell value (−1)" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.strong, { children: "Fallback color" }) }), _jsx(_components.td, { children: "Color corresponding to cell values that fall outside the range from −1 to 100" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.strong, { children: "Frame lock" }) }), _jsxs(_components.td, { children: ["\"On\" means the grid is locked to the frame specified by its ", _jsx(_components.code, { children: "frame_id" }), ", and will move as that frame's transforms change. \"Off\" means the grid is relative to the fixed frame and will not move after it is first displayed."] })] })] })] }), "\n", _jsxs(_components.h3, { id: "image", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#image", children: _jsx(_components.span, { className: "icon icon-link" }) }), "Image"] }), "\n", _jsx(_components.p, { children: "The 3D panel can display image data in the 3D scene. The image is displayed using the corresponding CameraCalibration or CameraInfo messages." }), "\n", _jsxs(_components.table, { children: [_jsx(_components.thead, { children: _jsxs(_components.tr, { children: [_jsx(_components.th, { children: "framework" }), _jsx(_components.th, { children: "schema" })] }) }), _jsxs(_components.tbody, { children: [_jsxs(_components.tr, { children: [_jsx(_components.td, { children: "ROS 1" }), _jsx(_components.td, { children: _jsx(_components.a, { href: "https://docs.ros.org/en/noetic/api/sensor_msgs/html/msg/Image.html", children: _jsx(_components.code, { children: "sensor_msgs/Image" }) }) })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "ROS 2" }), _jsx(_components.td, { children: _jsx(_components.a, { href: "https://github.com/ros2/common_interfaces/blob/master/sensor_msgs/msg/Image.msg", children: _jsx(_components.code, { children: "sensor_msgs/msg/Image" }) }) })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "ROS 1" }), _jsx(_components.td, { children: _jsx(_components.a, { href: "https://docs.ros.org/en/api/sensor_msgs/html/msg/CompressedImage.html", children: _jsx(_components.code, { children: "sensor_msgs/CompressedImage" }) }) })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "ROS 2" }), _jsx(_components.td, { children: _jsx(_components.a, { href: "https://github.com/ros2/common_interfaces/blob/master/sensor_msgs/msg/CompressedImage.msg", children: _jsx(_components.code, { children: "sensor_msgs/msg/CompressedImage" }) }) })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "Custom" }), _jsx(_components.td, { children: _jsx(_components.a, { href: "/docs/studio/messages/raw-image", children: _jsx(_components.code, { children: "foxglove.RawImage" }) }) })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "Custom" }), _jsx(_components.td, { children: _jsx(_components.a, { href: "/docs/studio/messages/compressed-image", children: _jsx(_components.code, { children: "foxglove.CompressedImage" }) }) })] })] })] }), "\n", _jsxs(_components.h3, { id: "camera-field-of-view", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#camera-field-of-view", children: _jsx(_components.span, { className: "icon icon-link" }) }), "Camera Field-of-view"] }), "\n", _jsxs(_components.table, { children: [_jsx(_components.thead, { children: _jsxs(_components.tr, { children: [_jsx(_components.th, { children: "framework" }), _jsx(_components.th, { children: "schema" })] }) }), _jsxs(_components.tbody, { children: [_jsxs(_components.tr, { children: [_jsx(_components.td, { children: "ROS 1" }), _jsx(_components.td, { children: _jsx(_components.a, { href: "https://docs.ros.org/en/noetic/api/sensor_msgs/html/msg/CameraInfo.html", children: _jsx(_components.code, { children: "sensor_msgs/CameraInfo" }) }) })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "ROS 2" }), _jsx(_components.td, { children: _jsx(_components.a, { href: "https://github.com/ros2/common_interfaces/blob/master/sensor_msgs/msg/CameraInfo.msg", children: _jsx(_components.code, { children: "sensor_msgs/msg/CameraInfo" }) }) })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "Custom" }), _jsx(_components.td, { children: _jsx(_components.a, { href: "/docs/studio/messages/camera-calibration", children: _jsx(_components.code, { children: "foxglove.CameraCalibration" }) }) })] })] })] }), "\n", _jsxs(_components.h3, { id: "laser-scan", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#laser-scan", children: _jsx(_components.span, { className: "icon icon-link" }) }), "Laser Scan"] }), "\n", _jsx(_components.p, { children: "A single scan from a planar laser range-finder." }), "\n", _jsxs(_components.table, { children: [_jsx(_components.thead, { children: _jsxs(_components.tr, { children: [_jsx(_components.th, { children: "framework" }), _jsx(_components.th, { children: "schema" })] }) }), _jsxs(_components.tbody, { children: [_jsxs(_components.tr, { children: [_jsx(_components.td, { children: "ROS 1" }), _jsx(_components.td, { children: _jsx(_components.a, { href: "https://docs.ros.org/en/noetic/api/sensor_msgs/html/msg/LaserScan.html", children: _jsx(_components.code, { children: "sensor_msgs/LaserScan" }) }) })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "ROS 2" }), _jsx(_components.td, { children: _jsx(_components.a, { href: "https://github.com/ros2/common_interfaces/blob/master/sensor_msgs/msg/LaserScan.msg", children: _jsx(_components.code, { children: "sensor_msgs/msg/LaserScan" }) }) })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "Custom" }), _jsx(_components.td, { children: _jsx(_components.a, { href: "/docs/studio/messages/laser-scan", children: _jsx(_components.code, { children: "foxglove.LaserScan" }) }) })] })] })] }), "\n", _jsxs(_components.h3, { id: "pose", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#pose", children: _jsx(_components.span, { className: "icon icon-link" }) }), "Pose"] }), "\n", _jsx(_components.p, { children: "Poses in a named coordinate frame." }), "\n", _jsxs(_components.table, { children: [_jsx(_components.thead, { children: _jsxs(_components.tr, { children: [_jsx(_components.th, { children: "framework" }), _jsx(_components.th, { children: "schema" })] }) }), _jsxs(_components.tbody, { children: [_jsxs(_components.tr, { children: [_jsx(_components.td, { children: "ROS 1" }), _jsx(_components.td, { children: _jsx(_components.a, { href: "https://docs.ros.org/en/noetic/api/geometry_msgs/html/msg/PoseArray.html", children: _jsx(_components.code, { children: "geometry_msgs/PoseArray" }) }) })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "ROS 2" }), _jsx(_components.td, { children: _jsx(_components.a, { href: "https://github.com/ros2/common_interfaces/blob/master/geometry_msgs/msg/PoseArray.msg", children: _jsx(_components.code, { children: "geometry_msgs/msg/PoseArray" }) }) })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "ROS 1" }), _jsx(_components.td, { children: _jsx(_components.a, { href: "https://docs.ros.org/en/noetic/api/geometry_msgs/html/msg/PoseStamped.html", children: _jsx(_components.code, { children: "geometry_msgs/PoseStamped" }) }) })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "ROS 2" }), _jsx(_components.td, { children: _jsx(_components.a, { href: "https://github.com/ros2/common_interfaces/blob/master/geometry_msgs/msg/PoseStamped.msg", children: _jsx(_components.code, { children: "geometry_msgs/msg/PoseStamped" }) }) })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "Custom" }), _jsx(_components.td, { children: _jsx(_components.a, { href: "/docs/studio/messages/poses-in-frame", children: _jsx(_components.code, { children: "foxglove.PosesInFrame" }) }) })] })] })] }), "\n", _jsxs(_components.h3, { id: "velodyne-scan", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#velodyne-scan", children: _jsx(_components.span, { className: "icon icon-link" }) }), "Velodyne Scan"] }), "\n", _jsx(_components.p, { children: "Velodyne LIDAR scan packets. These messages come from the velodyne ROS driver or the Velodyne connector built into Studio (desktop app)." }), "\n", _jsxs(_components.table, { children: [_jsx(_components.thead, { children: _jsxs(_components.tr, { children: [_jsx(_components.th, { children: "framework" }), _jsx(_components.th, { children: "schema" })] }) }), _jsxs(_components.tbody, { children: [_jsxs(_components.tr, { children: [_jsx(_components.td, { children: "ROS 1" }), _jsx(_components.td, { children: _jsx(_components.a, { href: "https://docs.ros.org/en/noetic/api/velodyne_msgs/html/msg/VelodyneScan.html", children: _jsx(_components.code, { children: "velodyne_msgs/VelodyneScan" }) }) })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "ROS 2" }), _jsx(_components.td, { children: _jsx(_components.a, { href: "https://github.com/ros-drivers/velodyne/blob/ros2/velodyne_msgs/msg/VelodyneScan.msg", children: _jsx(_components.code, { children: "velodyne_msgs/msg/VelodyneScan" }) }) })] })] })] }), "\n", _jsxs(_components.h2, { id: "settings-1", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#settings-1", children: _jsx(_components.span, { className: "icon icon-link" }) }), "Settings"] }), "\n", _jsxs(_components.h3, { id: "frame", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#frame", children: _jsx(_components.span, { className: "icon icon-link" }) }), "Frame"] }), "\n", _jsx(_components.p, { children: "Select your 3D scene's display frame and follow mode." }), "\n", _jsxs(_components.table, { children: [_jsx(_components.thead, { children: _jsxs(_components.tr, { children: [_jsx(_components.th, { children: "field" }), _jsx(_components.th, { children: "description" })] }) }), _jsxs(_components.tbody, { children: [_jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.strong, { children: "Display frame" }) }), _jsxs(_components.td, { children: ["Configures the coordinate frame for rendering the scene.", _jsx("br", {}), _jsx("br", {}), "To render a scene element, you need a ", _jsx(_components.a, { href: "#transforms-1", children: "transform" }), " from its frame to the selected display frame. If its frame is the display frame, no additional transform is needed."] })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.strong, { children: "Follow mode" }) }), _jsxs(_components.td, { children: ["Configures the viewport following behavior. ", _jsxs("ul", { children: [_jsxs("li", { children: [_jsx(_components.strong, { children: "\"Pose\"" }), " - Follows the display frame's position and orientation"] }), _jsxs("li", { children: [_jsx(_components.strong, { children: "\"Position\"" }), " - Follows the display frame's position only"] }), _jsxs("li", { children: [_jsx(_components.strong, { children: "\"Fixed\"" }), " - Does not update viewport"] })] })] })] })] })] }), "\n", _jsxs(_components.h3, { id: "scene", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#scene", children: _jsx(_components.span, { className: "icon icon-link" }) }), "Scene"] }), "\n", _jsx(_components.p, { children: "Configure generic rendering properties and viewport properties." }), "\n", _jsxs(_components.table, { children: [_jsx(_components.thead, { children: _jsxs(_components.tr, { children: [_jsx(_components.th, { children: "field" }), _jsx(_components.th, { children: "description" })] }) }), _jsxs(_components.tbody, { children: [_jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.strong, { children: "Render stats" }) }), _jsx(_components.td, { children: "Display rendering performance statistics in panel corner." })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.strong, { children: "Background" }) }), _jsx(_components.td, { children: "Scene's background color" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.strong, { children: "Label scale" }) }), _jsx(_components.td, { children: "Scale of rendered labels" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsxs(_components.strong, { children: ["Ignore COLLADA ", _jsx(_components.code, { children: "" })] }) }), _jsxs(_components.td, { children: ["Ignore the ", _jsx(_components.code, { children: "" }), " tag in COLLADA files."] })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.strong, { children: "Mesh up axis" }) }), _jsx(_components.td, { children: "Direction of “up” when loading meshes (STL, OBJ) without orientation info (\"Y-up\", \"Z-up\")." })] })] })] }), "\n", _jsxs(_components.h4, { id: "view", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#view", children: _jsx(_components.span, { className: "icon icon-link" }) }), "View"] }), "\n", _jsx(_components.p, { children: "Configure the camera settings." }), "\n", _jsxs(_components.table, { children: [_jsx(_components.thead, { children: _jsxs(_components.tr, { children: [_jsx(_components.th, { children: "field" }), _jsx(_components.th, { children: "description" })] }) }), _jsxs(_components.tbody, { children: [_jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.strong, { children: "Distance" }) }), _jsx(_components.td, { children: "Distance of camera from viewport center (i.e. zoom level)" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.strong, { children: "Perspective" }) }), _jsx(_components.td, { children: "Toggles between 3D (\"on\") and 2D (\"off\") view of the scene. The 2D view orients the camera towards z-down." })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.strong, { children: "Target X" }) }), _jsx(_components.td, { children: "x-coordinate of viewport center" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.strong, { children: "Y" }) }), _jsx(_components.td, { children: "y-coordinate of viewport center" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.strong, { children: "Z" }) }), _jsx(_components.td, { children: "z-coordinate of viewport center" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.strong, { children: "Theta" }) }), _jsx(_components.td, { children: "Camera's theta" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.strong, { children: "Phi" }) }), _jsx(_components.td, { children: "Camera's phi" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.strong, { children: "Y-Axis FOV" }) }), _jsx(_components.td, { children: "Camera's field of vision on y-axis" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.strong, { children: "Near" }) }), _jsx(_components.td, { children: "Camera frustum near plane" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.strong, { children: "Far" }) }), _jsx(_components.td, { children: "Camera frustum far plane" })] })] })] }), "\n", _jsxs(_components.h3, { id: "transforms-2", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#transforms-2", children: _jsx(_components.span, { className: "icon icon-link" }) }), "Transforms"] }), "\n", _jsxs(_components.p, { children: ["Configure how to visualize ", _jsx(_components.a, { href: "#transforms-1", children: "transform frames" }), " and which transforms to show. Visualizing a transform tree can help debug why elements are not rendering where expected."] }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "/images/docs/studio/panels/3d/transforms.png", alt: "transforms", width: "1374", height: "1138" }) }), "\n", _jsx(_components.p, { children: "Use the top-level menu to toggle all transform visualizations." }), "\n", _jsxs(_components.h4, { id: "settings-2", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#settings-2", children: _jsx(_components.span, { className: "icon icon-link" }) }), "Settings"] }), "\n", _jsxs(_components.table, { children: [_jsx(_components.thead, { children: _jsxs(_components.tr, { children: [_jsx(_components.th, { children: "field" }), _jsx(_components.th, { children: "description" })] }) }), _jsxs(_components.tbody, { children: [_jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.strong, { children: "Editable" }) }), _jsxs(_components.td, { children: ["Toggles in-app editing of transform frames. When \"on\", you can update the ", _jsx(_components.strong, { children: "Translation" }), " and ", _jsx(_components.strong, { children: "Rotation" }), " values to tweak transform frames, see the impact on the scene, and debug how you may want to adjust the frames on your robot. When turned \"Off\", will revert to original translation and rotation values."] })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.strong, { children: "Labels" }) }), _jsx(_components.td, { children: "Toggle the display of transform labels." })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.strong, { children: "Axis scale" }) }), _jsx(_components.td, { children: "Scale of transform axis (displayed as an arrow marker)" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.strong, { children: "Line width" }) }), _jsx(_components.td, { children: "Width of transform (displayed as a line marker)" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.strong, { children: "Line color" }) }), _jsx(_components.td, { children: "Color of transform (displayed as a line marker)" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.strong, { children: "Enable preloading" }) }), _jsx(_components.td, { children: "Preload transform messages from the data source." })] })] })] }), "\n", _jsxs(_components.h3, { id: "topics-1", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#topics-1", children: _jsx(_components.span, { className: "icon icon-link" }) }), "Topics"] }), "\n", _jsx(_components.p, { children: "The Topics section configures the topics displayed in the scene." }), "\n", _jsxs(_components.p, { children: ["Any topic with messages matching one of the ", _jsx(_components.a, { href: "#visualizations", children: "visualization" }), " formats will show up in the topics list. Each supported format has format specific visualization settings. These settings will show up under the topic."] }), "\n", _jsx(_components.p, { children: "Use the top-level menu to toggle all topics. You can toggle any individual topic by click the eye icon next to the topic name." }), "\n", _jsxs(_components.h3, { id: "custom-layers", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#custom-layers", children: _jsx(_components.span, { className: "icon icon-link" }) }), "Custom Layers"] }), "\n", _jsx(_components.p, { children: "Custom layers allow you to add additional visual elements not from your data source." }), "\n", _jsx(_components.p, { children: "Use the top-level menu to add additional custom layers." }), "\n", _jsxs(_components.h4, { id: "add-grid", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#add-grid", children: _jsx(_components.span, { className: "icon icon-link" }) }), "Add Grid"] }), "\n", _jsx(_components.p, { children: "A grid is 2D square with a fixed size and number of divisions. You can create any numbers of grids. Grids can be rendered relative to the display frame or any other transform frame." }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "/images/docs/studio/panels/3d/grid.png", alt: "grid", width: "1402", height: "1134" }) }), "\n", _jsx(_components.p, { children: "Use the grid layer settings to change the frame, size, color, divisions, and other properties of the grid." }), "\n", _jsxs(_components.h4, { id: "add-unified-robot-description-format-urdf", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#add-unified-robot-description-format-urdf", children: _jsx(_components.span, { className: "icon icon-link" }) }), "Add Unified Robot Description Format (URDF)"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://wiki.ros.org/urdf", children: "URDF" }), " robot models are loaded automatically if your data source supports parameters (i.e. a native ROS 1 or ROS 2 connection) and the ", _jsx(_components.code, { children: "/robot_description" }), " parameter is set to valid URDF XML."] }), "\n", _jsxs(_components.p, { children: ["You can add additional URDF models with a custom layer. Use the layer ", _jsx(_components.code, { children: "URL" }), " setting to configure the source of the model."] }), "\n", _jsxs(_components.p, { children: ["Valid urls start with: ", _jsx(_components.code, { children: "http(s)://" }), ", ", _jsx(_components.code, { children: "package://" }), " (desktop app only), or ", _jsx(_components.code, { children: "file://" }), " (desktop app only)."] }), "\n", _jsxs(_components.h3, { id: "publish", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#publish", children: _jsx(_components.span, { className: "icon icon-link" }) }), "Publish"] }), "\n", _jsx(_components.p, { children: "Configure click-to-publish behavior for the 3D panel." }), "\n", _jsxs(_components.table, { children: [_jsx(_components.thead, { children: _jsxs(_components.tr, { children: [_jsx(_components.th, { children: "field" }), _jsx(_components.th, { children: "description" })] }) }), _jsxs(_components.tbody, { children: [_jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.strong, { children: "Type" }) }), _jsxs(_components.td, { children: ["Type of message to publish. ", _jsxs("ul", { children: [_jsx("li", { children: _jsx(_components.a, { href: "https://docs.ros.org/en/noetic/api/geometry_msgs/html/msg/Point.html", children: "Point" }) }), _jsx("li", { children: _jsx(_components.a, { href: "https://docs.ros.org/en/noetic/api/geometry_msgs/html/msg/Pose.html", children: "Pose" }) }), _jsx("li", { children: _jsx(_components.a, { href: "https://docs.ros.org/en/noetic/api/geometry_msgs/html/msg/PoseWithCovariance.html", children: "Pose estimates" }) })] })] })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.strong, { children: "Topic" }) }), _jsxs(_components.td, { children: ["Topic to publish message to – only possible with a ", _jsx(_components.a, { href: "/docs/studio/connection/data-sources#by-live-connection", children: "ROS data source with publish support" }), "."] })] })] })] }), "\n", _jsxs(_components.h2, { id: "user-interactions", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#user-interactions", children: _jsx(_components.span, { className: "icon icon-link" }) }), "User interactions"] }), "\n", _jsx(_components.p, { children: "Click any object in the scene to display its relevant details in the selected object popup." }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "/images/docs/studio/panels/3d/clicked-marker.webp", alt: "3d panel clicked marker", width: "1056", height: "738" }) }), "\n", _jsxs(_components.p, { children: ["Selecting an object will set a ", _jsx(_components.code, { children: "$selected_id" }), " variable to the clicked objects ", _jsx(_components.code, { children: "id" }), " value if it has one."] }), "\n", _jsx(_components.p, { children: "The panel controls on the right can be used to do the following:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Select" }), " toggle object select mode"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "3D" }), " Toggle between 3D and 2D views of the scene"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Measure" }), " measure the distance between two points"] }), "\n"] }), "\n", _jsxs(_components.h2, { id: "shortcuts", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#shortcuts", children: _jsx(_components.span, { className: "icon icon-link" }) }), "Shortcuts"] }), "\n", _jsx(_components.p, { children: "To move the camera:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "w" }), " – Forward"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "a" }), " – Left"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "s" }), " – Backward"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "d" }), " – Right"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "z" }), ", or ", _jsx(_components.code, { children: "Scroll" }), " up – Zoom in"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "x" }), ", or ", _jsx(_components.code, { children: "Scroll" }), " down – Zoom out"] }), "\n", _jsx(_components.li, { children: "Drag – Parallel to the ground. Will disengage “follow” mode, if enabled." }), "\n", _jsx(_components.li, { children: "Right-click + drag – Pan and rotate. Dragging horizontally rotates around the world's z-axis; dragging vertically pans around the x and y axes" }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "Shift" }), " + other action – Adjusts all values to be 1/10 of baseline values; allows for more precise movements and adjustments"] }), "\n"] })] }); } } return { default: MDXContent };

Studio

Data Platform

Upgrade version