https://github.com/playcanvas/supersplat-viewer
A user-friendly viewer for 3D Gaussian splats
https://github.com/playcanvas/supersplat-viewer
3d-gaussian-splatting gaussian-splatting playcanvas webgl webxr
Last synced: 8 days ago
JSON representation
A user-friendly viewer for 3D Gaussian splats
- Host: GitHub
- URL: https://github.com/playcanvas/supersplat-viewer
- Owner: playcanvas
- License: mit
- Created: 2025-03-25T10:34:41.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2026-03-06T14:10:56.000Z (11 days ago)
- Last Synced: 2026-03-06T15:43:12.123Z (11 days ago)
- Topics: 3d-gaussian-splatting, gaussian-splatting, playcanvas, webgl, webxr
- Language: TypeScript
- Homepage: https://superspl.at
- Size: 534 KB
- Stars: 268
- Watchers: 9
- Forks: 77
- Open Issues: 25
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-3D-gaussian-splatting - SuperSplat Viewer
README
# SuperSplat Viewer
[](https://www.npmjs.com/package/@playcanvas/supersplat-viewer)
[](https://npmtrends.com/@playcanvas/supersplat-viewer)
[](https://github.com/playcanvas/supersplat-viewer/blob/main/LICENSE)
[](https://discord.gg/RSaMRzg)
[](https://www.reddit.com/r/PlayCanvas)
[](https://x.com/intent/follow?screen_name=playcanvas)
| [User Manual](https://developer.playcanvas.com/user-manual/gaussian-splatting/editing/supersplat/import-export/#html-viewer-htmlzip) | [Blog](https://blog.playcanvas.com) | [Forum](https://forum.playcanvas.com) |
This is the official viewer for [SuperSplat](https://superspl.at).
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:
```ts
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](https://nodejs.org/) 18 or later installed. Follow these steps:
1. Clone the repository:
```sh
git clone https://github.com/playcanvas/supersplat-viewer.git
cd supersplat-viewer
```
2. Install dependencies:
```sh
npm install
```
3. Start the development build and local web server:
```sh
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):
```typescript
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
```json
{
"background": {"color": [0,0,0,0]},
"camera": {
"fov": 1.0,
"position": [0,1,-1],
"target": [0,0,0],
"startAnim": "orbit"
},
"animTracks": []
}
```