> ## Documentation Index
> Fetch the complete documentation index at: https://avala.ai/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Visualization

> GPU-accelerated multi-sensor data visualization

Avala includes a dedicated visualization workspace for exploring multi-sensor recordings directly in your browser. Play back MCAP/ROS data with synchronized camera, LiDAR, radar, and IMU streams across configurable panel layouts — then annotate the same data without switching tools.

The viewer runs on WebGPU (with WebGL fallback), using GPU compute shaders for point cloud rendering, frustum culling, and level-of-detail selection. No plugins, no desktop app, no data downloads.

## Capabilities

* **Multi-sensor MCAP/ROS playback with 8 panel types** — Image, 3D / Point Cloud, Plot, Raw Messages, Log, Map, Gauge, and State Transitions. The viewer auto-detects topics from your recording and assigns each to the appropriate panel type.

* **GPU-accelerated 3D point cloud rendering with 6 visualization modes** — Neutral, Intensity, Rainbow, Label, Panoptic, and Image Projection. Switch between modes to inspect raw intensity values, semantic labels, panoptic instance segmentation, or LiDAR-to-camera color projection.

* **Gaussian Splat scene viewer with WebGPU rendering** — Load 3D Gaussian Splat reconstructions into a dedicated viewer with scene hierarchy panel, properties inspector, tool bar, mode toggle, undo/redo, and real-time statistics. GPU-based radix sorting and render bundle caching keep frame rates smooth on large scenes.

* **Multi-camera synchronized playback with LiDAR-to-camera projection** — View multiple camera streams in sync. Point cloud data projects onto camera images using calibrated transforms, with support for both pinhole (fx/fy/cx/cy + distortion k1-k4/p1-p2) and double-sphere (xi/alpha) camera models.

* **Configurable multi-window layouts with drag-and-drop panels** — The default layout arranges a topics sidebar (left), dynamic content panels (center), and a file info panel (right) in a horizontal root. Resize, rearrange, add, or remove panels to build the view you need.

* **Timeline-based navigation with frame stepping and timestamp seeking** — Scrub through recordings, step frame-by-frame, adjust playback speed, and jump to specific timestamps. All panels stay synchronized.

* **Automatic topic detection and smart panel type assignment** — When you open an MCAP file, the viewer reads the topic schema and message types, then creates the right panel for each: Image panels for camera topics, 3D panels for point clouds, Map panels for GPS, and so on.

* **Pinhole and double-sphere (fisheye) camera model support** — Pinhole projection (fx/fy/cx/cy) and double-sphere projection (xi/alpha) for LiDAR-to-camera overlay. Distortion parameters are stored; radial/tangential distortion correction for pinhole cameras is planned for a future update.

## Supported Message Types

The viewer handles the following ROS and Foxglove message types:

| Category          | Messages                                                                                            |
| ----------------- | --------------------------------------------------------------------------------------------------- |
| **Camera**        | `sensor_msgs/Image`, `sensor_msgs/CompressedImage`, `foxglove.CompressedImage`, `foxglove.RawImage` |
| **LiDAR**         | `sensor_msgs/PointCloud2`, `foxglove.PointCloud`                                                    |
| **Radar / Laser** | `sensor_msgs/LaserScan`, `radar_msgs/RadarScan` (routed via topic name keywords)                    |
| **Transforms**    | `tf2_msgs/TFMessage`, `foxglove.FrameTransform`                                                     |
| **Position**      | `sensor_msgs/NavSatFix`                                                                             |
| **IMU**           | `sensor_msgs/Imu`                                                                                   |

<Tip>
  Avala reads MCAP files natively. ROS 1 bags and ROS 2 bags should be converted to MCAP format before upload. See the [MCAP & ROS integration guide](/docs/integrations/mcap-ros) for conversion instructions.
</Tip>

## If You Need...

| If you need...                | Avala provides...                                                                                                                                          |
| ----------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Play back MCAP recordings     | Multi-sensor viewer with 8 panel types and synchronized timelines                                                                                          |
| Visualize point clouds        | 6 rendering modes (Neutral, Intensity, Rainbow, Label, Panoptic, Image Projection) with WebGPU acceleration                                                |
| View 3D scene reconstructions | Gaussian Splat viewer with scene hierarchy, properties inspector, and GPU-based rendering                                                                  |
| Inspect raw sensor data       | Raw Messages, Plot, Log, Gauge, and State Transition panels for every topic in your recording                                                              |
| Project LiDAR onto cameras    | Automatic projection using pinhole and double-sphere camera calibrations                                                                                   |
| Then annotate the same data   | Full annotation toolkit (bounding boxes, polygons, 3D cuboids, segmentation, polylines, keypoints, classification) without switching tools or re-uploading |

## How Avala Compares

<div className="comparison-table">
  | Capability                     |                        Avala                       |                      Foxglove                      |                        Rerun                       |
  | ------------------------------ | :------------------------------------------------: | :------------------------------------------------: | :------------------------------------------------: |
  | Browser-based MCAP playback    | <span className="yes"><Icon icon="check" /></span> | <span className="yes"><Icon icon="check" /></span> | <span className="yes"><Icon icon="check" /></span> |
  | GPU-accelerated point clouds   |         <span className="yes">WebGPU</span>        |       <span className="partial">WebGL</span>       |         <span className="yes">WebGPU</span>        |
  | Gaussian Splat viewer          | <span className="yes"><Icon icon="check" /></span> |  <span className="no"><Icon icon="xmark" /></span> |  <span className="no"><Icon icon="xmark" /></span> |
  | Multi-camera sync + projection | <span className="yes"><Icon icon="check" /></span> | <span className="yes"><Icon icon="check" /></span> | <span className="yes"><Icon icon="check" /></span> |
  | Annotation tools on same data  |       <span className="yes">Full suite</span>      |  <span className="no"><Icon icon="xmark" /></span> |  <span className="no"><Icon icon="xmark" /></span> |
  | Quality control workflows      | <span className="yes"><Icon icon="check" /></span> |  <span className="no"><Icon icon="xmark" /></span> |  <span className="no"><Icon icon="xmark" /></span> |
  | Managed labeling services      | <span className="yes"><Icon icon="check" /></span> |  <span className="no"><Icon icon="xmark" /></span> |  <span className="no"><Icon icon="xmark" /></span> |
  | Python & TypeScript SDKs       | <span className="yes"><Icon icon="check" /></span> | <span className="yes"><Icon icon="check" /></span> | <span className="yes"><Icon icon="check" /></span> |
  | MCP server for AI assistants   | <span className="yes"><Icon icon="check" /></span> |  <span className="no"><Icon icon="xmark" /></span> |  <span className="no"><Icon icon="xmark" /></span> |
</div>

<Tip>
  For teams currently using Foxglove or Rerun for visualization, Avala provides the same playback and rendering capabilities — plus annotation tools, quality control, and export pipelines so you can go from raw data to labeled training sets in one platform.
</Tip>

## Viewers

<CardGroup cols={3}>
  <Card title="" icon="display" href="/docs/visualization/multi-sensor-viewer">
    <p style={{fontWeight: 600, fontSize: '18px', marginBottom: '4px', marginTop: '8px', color: 'inherit'}}>Multi-Sensor Viewer</p>
    <p style={{fontSize: '14px', marginTop: '0px', opacity: 0.6}}>MCAP/ROS playback with 8 panel types, automatic topic detection, and configurable layouts for camera, LiDAR, radar, and IMU data.</p>
  </Card>

  <Card title="" icon="cube" href="/docs/visualization/3d-point-cloud-viewer">
    <p style={{fontWeight: 600, fontSize: '18px', marginBottom: '4px', marginTop: '8px', color: 'inherit'}}>3D Point Cloud Viewer</p>
    <p style={{fontSize: '14px', marginTop: '0px', opacity: 0.6}}>GPU-accelerated point cloud rendering with 6 visualization modes, frustum culling, LOD, and LiDAR-to-camera projection.</p>
  </Card>

  <Card title="" icon="circle-nodes" href="/docs/visualization/gaussian-splat-viewer">
    <p style={{fontWeight: 600, fontSize: '18px', marginBottom: '4px', marginTop: '8px', color: 'inherit'}}>Gaussian Splat Viewer</p>
    <p style={{fontSize: '14px', marginTop: '0px', opacity: 0.6}}>WebGPU-rendered 3D Gaussian Splat scenes with scene hierarchy, properties panel, and real-time statistics.</p>
  </Card>
</CardGroup>

## Next Steps

<CardGroup cols={2}>
  <Card title="" icon="file" href="/docs/visualization/mcap-ros/overview">
    <p style={{fontWeight: 600, fontSize: '18px', marginBottom: '4px', marginTop: '8px', color: 'inherit'}}>MCAP & ROS</p>
    <p style={{fontSize: '14px', marginTop: '0px', opacity: 0.6}}>Supported message types, topic schemas, and how to prepare your recordings.</p>
  </Card>

  <Card title="" icon="table-columns" href="/docs/visualization/panels/image-panel">
    <p style={{fontWeight: 600, fontSize: '18px', marginBottom: '4px', marginTop: '8px', color: 'inherit'}}>Panel Reference</p>
    <p style={{fontSize: '14px', marginTop: '0px', opacity: 0.6}}>Detailed documentation for each panel type: Image, Point Cloud, Plot, Map, Log, and Raw Messages.</p>
  </Card>

  <Card title="" icon="palette" href="/docs/visualization/rendering/visualization-modes">
    <p style={{fontWeight: 600, fontSize: '18px', marginBottom: '4px', marginTop: '8px', color: 'inherit'}}>Rendering Modes</p>
    <p style={{fontSize: '14px', marginTop: '0px', opacity: 0.6}}>Deep dive into the 6 point cloud visualization modes and when to use each one.</p>
  </Card>

  <Card title="" icon="pen-to-square" href="/docs/annotation/guides/annotation-tools">
    <p style={{fontWeight: 600, fontSize: '18px', marginBottom: '4px', marginTop: '8px', color: 'inherit'}}>Annotation Tools</p>
    <p style={{fontSize: '14px', marginTop: '0px', opacity: 0.6}}>After exploring your data, start annotating with 7 professional labeling tools.</p>
  </Card>
</CardGroup>