SuperSplat Viewer

| User Manual | Blog | Forum |

This is the official viewer for SuperSplat.

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

The app supports a few useful URL parameters (though please note these are subject to change):

Parameter	Description	Default
settings	URL of the settings.json file	./settings.json
content	URL of the scene file (.ply, .sog, .meta.json, .lod-meta.json)	./scene.compressed.ply
skybox	URL of an equirectangular skybox image
poster	URL of an image to show while loading
noui	Hide UI
noanim	Start with animation paused
ministats	Show runtime CPU/GPU performance graphs
unified	Force unified rendering mode
aa	Enable antialiasing (not supported in unified mode)

The web app source files are available as strings for templating when you import the package from npm:

import { html, css, js } from '@playcanvas/supersplat-viewer';

// logs the source of index.html
console.log(html);

// logs the source of index.css
console.log(css);

// logs the source of index.js
console.log(js);

Local Development

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

1. Clone the repository:

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

2. Install dependencies:

   npm install

3. Start the development build and local web server:

   npm run develop

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

Settings Schema

The settings.json file has the following schema (defined in TypeScript and taken from the SuperSplat editor):

type AnimTrack = {
    name: string,
    duration: number,
    frameRate: number,
    target: 'camera',
    loopMode: 'none' | 'repeat' | 'pingpong',
    interpolation: 'step' | 'spline',
    smoothness: number,
    keyframes: {
        times: number[],
        values: {
            position: number[],
            target: number[],
        }
    }
};

type ExperienceSettings = {
    camera: {
        fov?: number,
        position?: number[],
        target?: number[],
        startAnim: 'none' | 'orbit' | 'animTrack',
        animTrack: string
    },
    background: {
        color?: number[]
    },
    animTracks: AnimTrack[]
};

Example settings.json

{
  "background": {"color": [0,0,0,0]},
  "camera": {
    "fov": 1.0,
    "position": [0,1,-1],
    "target": [0,0,0],
    "startAnim": "orbit"
  },
  "animTracks": []
}