> ## 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.

# Gaussian Splat Viewer

> Explore and annotate 3D Gaussian Splat scene reconstructions

The Gaussian Splat viewer renders 3D scene reconstructions using WebGPU-accelerated Gaussian splatting. Navigate photorealistic 3D environments and place annotations directly in the scene -- no separate 3D modeling tools required.

## Overview

Gaussian splatting is a 3D scene reconstruction technique that represents environments as collections of 3D Gaussians. Each Gaussian stores position, covariance, color, and opacity, and the renderer composites them into photorealistic views from any camera angle. Unlike mesh-based representations, Gaussian splats capture fine details like foliage, reflections, and semi-transparent surfaces.

In Avala, you can upload Gaussian Splat files to a dataset and annotate them directly in the viewer -- placing 3D cuboids, assigning classification labels, and organizing annotations in a scene hierarchy.

## Viewer Layout

The viewer is organized into five regions:

| Region              | Position      | Width / Height        | Content                                                                                 |
| ------------------- | ------------- | --------------------- | --------------------------------------------------------------------------------------- |
| **3D Canvas**       | Center        | Fills remaining space | Interactive Gaussian Splat rendering with camera controls                               |
| **Scene Hierarchy** | Left panel    | 280px                 | Tree view of all objects and annotations in the scene                                   |
| **Properties**      | Right panel   | 300px                 | Editable properties for the selected annotation (position, dimensions, rotation, label) |
| **Toolbar**         | Bottom center | 56px height           | Annotation tools and mode selection                                                     |
| **Mode Toggle**     | Top center    | --                    | Switch between navigation and annotation modes, plus undo/redo controls                 |
| **Statistics**      | Bottom right  | --                    | Real-time render statistics (frame rate, splat count, GPU memory)                       |

## Navigation

Explore the reconstructed scene using standard 3D camera controls:

| Control                 | Action                                            |
| ----------------------- | ------------------------------------------------- |
| **Left-click + drag**   | Orbit the camera around the focal point           |
| **Right-click + drag**  | Pan the camera laterally                          |
| **Scroll wheel**        | Zoom in and out                                   |
| **Middle-click + drag** | Fly-through navigation for moving the focal point |

<Tip>
  When annotating, the viewer switches between navigation mode and annotation mode. In navigation mode, mouse inputs control the camera. In annotation mode, mouse inputs interact with annotations. Toggle between modes using the control at the top center of the viewer.
</Tip>

## WebGPU Rendering

The viewer uses a WebGPU-accelerated rendering pipeline optimized for real-time Gaussian splatting.

### Pipeline Architecture

| Component                   | Purpose                                                                       |
| --------------------------- | ----------------------------------------------------------------------------- |
| **GPU radix sort**          | Sorts splats by depth on the GPU for correct back-to-front compositing        |
| **Buffer pooling**          | Reuses GPU buffer allocations to reduce memory allocation overhead            |
| **Render bundle caching**   | Pre-records GPU command sequences that do not change between frames           |
| **Pipeline precompilation** | Compiles WGSL shaders asynchronously during loading to avoid rendering stalls |

### Browser Support

| Browser | Version            | Status                             |
| ------- | ------------------ | ---------------------------------- |
| Chrome  | 113+               | Enabled by default                 |
| Edge    | 113+               | Enabled by default                 |
| Firefox | Nightly            | Requires `dom.webgpu.enabled` flag |
| Safari  | Technology Preview | Requires feature flag              |

<Warning>
  The Gaussian Splat viewer requires WebGPU. Unlike the point cloud viewer, there is no WebGL fallback for Gaussian splatting -- the GPU compute pipeline is essential for real-time splat sorting and compositing. Use Chrome or Edge 113+ for the best experience. WebGPU features are under active development and may not be available in all environments.
</Warning>

## Annotation

Place annotations directly in the 3D Gaussian Splat scene using the toolbar at the bottom of the viewer.

### 3D Cuboids

Draw three-dimensional bounding boxes around objects in the scene:

1. Select the **Cuboid tool** from the toolbar
2. Click in the scene to place the cuboid center
3. Adjust position, dimensions, and rotation using the gizmo handles
4. Assign a label from your project's label taxonomy

Cuboid placement is depth-aware -- the viewer uses the Gaussian Splat depth buffer to position annotations at the correct 3D location in the scene.

### Classification Labels

Apply scene-level or object-level classification labels:

* **Scene classification** -- Label the entire scene (e.g., indoor, outdoor, parking lot)
* **Object classification** -- Label individual cuboid annotations with object classes and attributes

### Scene Hierarchy

The left panel displays a tree view of all annotations, organized by label class. Use the hierarchy to:

* Select annotations by clicking their name
* Toggle annotation visibility
* Reorder and group annotations
* Inspect annotation properties without navigating to them in the 3D view

### Edit History

Full undo/redo support is available via the top-center controls or keyboard shortcuts:

| Shortcut                       | Action |
| ------------------------------ | ------ |
| `Ctrl+Z` / `Cmd+Z`             | Undo   |
| `Ctrl+Shift+Z` / `Cmd+Shift+Z` | Redo   |

Every annotation action -- creation, deletion, move, resize, label change -- is recorded in the edit history.

## Use Cases

<CardGroup cols={2}>
  <Card title="" icon="building">
    <p style={{fontWeight: 600, fontSize: '18px', marginBottom: '4px', marginTop: '8px', color: 'inherit'}}>3D Scene Understanding</p>
    <p style={{fontSize: '14px', marginTop: '0px', opacity: 0.6}}>Annotate objects in reconstructed indoor and outdoor environments for 3D object detection and scene graph generation.</p>
  </Card>

  <Card title="" icon="camera">
    <p style={{fontWeight: 600, fontSize: '18px', marginBottom: '4px', marginTop: '8px', color: 'inherit'}}>Novel View Synthesis</p>
    <p style={{fontSize: '14px', marginTop: '0px', opacity: 0.6}}>Label objects in Gaussian Splat scenes to create training data for view synthesis models that need semantic awareness.</p>
  </Card>

  <Card title="" icon="robot">
    <p style={{fontWeight: 600, fontSize: '18px', marginBottom: '4px', marginTop: '8px', color: 'inherit'}}>Spatial AI Training Data</p>
    <p style={{fontSize: '14px', marginTop: '0px', opacity: 0.6}}>Build labeled datasets for embodied AI agents that need to understand and navigate 3D environments.</p>
  </Card>

  <Card title="" icon="city">
    <p style={{fontWeight: 600, fontSize: '18px', marginBottom: '4px', marginTop: '8px', color: 'inherit'}}>Digital Twin Annotation</p>
    <p style={{fontSize: '14px', marginTop: '0px', opacity: 0.6}}>Annotate reconstructed real-world environments for digital twin applications, facility management, and simulation.</p>
  </Card>
</CardGroup>

## Next Steps

<CardGroup cols={2}>
  <Card title="" icon="cube" href="/docs/annotation/guides/tools/cuboid-3d">
    <p style={{fontWeight: 600, fontSize: '18px', marginBottom: '4px', marginTop: '8px', color: 'inherit'}}>3D Cuboid Tool</p>
    <p style={{fontSize: '14px', marginTop: '0px', opacity: 0.6}}>Detailed guide for placing and adjusting 3D bounding boxes.</p>
  </Card>

  <Card title="" icon="braille" 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 visualization with six rendering modes.</p>
  </Card>

  <Card title="" icon="database" href="/docs/getting-started/data-types">
    <p style={{fontWeight: 600, fontSize: '18px', marginBottom: '4px', marginTop: '8px', color: 'inherit'}}>Data Types</p>
    <p style={{fontSize: '14px', marginTop: '0px', opacity: 0.6}}>Overview of all supported data modalities and their capabilities.</p>
  </Card>

  <Card title="" icon="layer-group" 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}}>Synchronized playback of camera, LiDAR, radar, and IMU data.</p>
  </Card>
</CardGroup>