Introduction

The Formant 3D Viewer is a powerful module you can add to your views that let you merge spatial data emitted by your fleet of devices into a useful visualization.

Examples of types of visualizations you make make are:

• localization interfaces to navigate a robot
• visualize fleet of devices on GPS world map
• environment data merged with robot URDF to get ambient information while realtime operating.

Formant's 3D module supports many ROS types ingested into Formant but is not ROS specific, and can be used to view live or historical data of individual devices or fleet data. 3D Viewer can also be extended to have completely custom layers for your own interaction requirements.

Concepts

Layers - The core concept of 3D Viewer is the data visualization layer. The visualized world can be thought of a set of layers of 3D mapped over each other, driven by data, and positioned accordingly.

Examples: Ground layer, point cloud layer, URDF layer.

Layer Context - In order to know where the data to drive a layer by comes from, we specify a device to represent the context of all layers within it.

Examples: your currently viewing device, a set of devices specified by group/tags, a specific device by name

Data Source - Layers may or may not be driven by data, but layers that do depend on data will have a data source specified for them. This data source will specify what streams in the device context should be used for the visualization.

Examples: GPS location stream named 'gps.sensor', a point cloud data from stream named 'lidar'.

Positioning - Positioning of visuals is incredibly important in the world of robotics. Formant offers a variety of positioning for your creative needs:

• odometry
• GPS
• transform tree
• fixed positioning

Layers can be positioned relative to each other by defining positioning relative to their parents to create complex scenes.

Supported Layers

Position Indicator

World Map

Ground

Geometry

Develop your own Layer

Developing your own layers in a forked version of 3D Viewer is easy, our code is MIT licensed and available on Github with more information on how to code your own layers as well as how to make configuration UI. Our technologies used are:

• Typescript
• React
• React Three Fiber
• ThreeJS

https://github.com/FormantIO/3d-viewer-module

How to navigate

Navigating right now is primarily done using the mouse.

click+drag - will move your camera parallel to the ground plane
shift+click+drag - will allow you to rotate the world
mouse scroll or pinch - will allow you to zoom in

There are controls on the top right that will allow you to zoom in or out and reset your camera.