SuperSplat Viewer

| User Manual | Blog | Forum |

This is the official viewer for SuperSplat.

The web app compiles to a simple, self-contained static website.

URL Parameters

The app supports a number of URL parameters (these are subject to change):

Content

| Parameter | Description | Default | | ----------- | ----------------------------------------------------------------------------------------- | ------------------------ | | settings | URL of the settings.json file | ./settings.json | | content | URL of the scene file (.ply, .sog, .compressed.ply, .meta.json, .lod-meta.json) | ./scene.compressed.ply | | skybox | URL of an equirectangular skybox image | | | poster | URL of an image to show while loading | | | collision | URL of a collision asset (.glb mesh, or voxel data). voxel is accepted as an alias. | |

UI

| Parameter | Description | | ----------- | ------------------------------------------------------------------------------------------------------------------- | | noui | Hide the UI overlay (the programmatic form is ui: false, which skips building it) | | reticle | Show the centre reticle in captured desktop fly/walk mode (off by default; programmatic form: reticle: true) | | noanim | Start with animation paused | | ministats | Show runtime CPU/GPU performance graphs | | lang | Override the UI language (de, en, es, fr, ja, ko, pt-BR, ru, zh-CN; default: detect from browser) |

Renderer

By default the viewer uses WebGPU when available (falling back automatically when not). The flag below forces the WebGL renderer (also required for WebXR / AR / VR):

| Parameter | Description | | ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | webgl | Force the WebGL renderer (required for AR/VR) | | aa | Enable antialiasing (WebGL only) | | stochastic | Experimental unsorted, depth-tested splat renderer: stochastic for per-pixel quality, stochastic=mobile for phones and headsets. WebGPU only, its XR included | | splatSource | Developer knob for the stochastic renderer: the data path feeding it (direct, the default, reads the resident files in place; workbuffer reads the engine's work buffer) | | variant | Developer knob for the stochastic renderer: comma-separated key:value experiment switches over the mode's, e.g. taaSharp:8 | | nofx | Disable post effects | | hpr | Override highPrecisionRendering from settings (?hpr, ?hpr=1, ?hpr=true, ?hpr=enable to enable) | | budget | Override the splat budget, in millions of splats | | colorize | Render with LOD colorization | | fullload | Load all streaming LOD data before the first frame | | heatmap | Use heatmap mode for the voxel collision debug overlay. Requires WebGPU and voxel collision data; press V or use Show Collision in the settings panel to show the overlay. | | debug | Open the developer debug panel on load (Ctrl+Shift+D to toggle) |

NPM Package

See the API reference for embedding, runtime control, UI customization and settings.

Local Development

To initialize a local development environment for SuperSplat Viewer, ensure you have Node.js 20 or later installed. Follow these steps:

1. Clone the repository:

git clone https://github.com/playcanvas/supersplat-viewer.git
    cd supersplat-viewer

1. Install dependencies:

npm install

1. Start the development build and local web server:

npm run develop

1. Open your browser at http://localhost:3000.

Debug engine build

By default the viewer links against the release build of the PlayCanvas engine. Set ENGINE=debug to link against the engine's debug build instead, which includes runtime assertions and unminified, readable source for easier debugging:

ENGINE=debug npm run develop

This also works with npm run build and npm run watch.