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": []
}