Gaussian-Splat-Lite

Gaussian-Splat-Lite

Three.js Gaussian Splatting · WebGPU · Streaming

High performance 3D Gaussian Splatting (3DGS) renderer for Three.js with WebGPU/WebGL2. Supports PLY, SPZ, SOG, and RAD files, with streaming LOD for RAD, SOG, and LCC2 scenes.

Try Live Demo

Features

Focus	What you get
WebGPU / WebGL2	Use the same Three.js scene API with either renderer
Large-scene streaming	Load RAD, SOG, and LCC2 detail as the camera moves, with smooth transitions
Stochastic rendering	Optional transparency mode, with an experimental neural denoiser to smooth it
Offscreen capture	Render Splats to images, cube maps, and environment maps for reflections
SDF edits	Recolor or hide parts of a model without moving Splats
Data and precision	Load URLs, files, or bytes; place local models in large GIS/ECEF scenes

Installation

npm install gaussian-splat-lite three

Requires Three.js >=0.187.0.

Quick start

SplatMesh is a scene object. Add one GaussianSplatRenderer to display all visible Splat models in the scene.

WebGPU

import * as THREE from "three";
import { WebGPURenderer } from "three/webgpu";
import { GaussianSplatRenderer, SplatMesh } from "gaussian-splat-lite";

const renderer = new WebGPURenderer({ antialias: false });
await renderer.init(); // Initialize before constructing GaussianSplatRenderer.
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
  60, window.innerWidth / window.innerHeight, 0.1, 1000,
);
camera.position.set(0, 0, 3);

const splatRenderer = new GaussianSplatRenderer({
  renderer,
});
scene.add(splatRenderer);

const splat = new SplatMesh({ url: "/assets/scene.spz" });
scene.add(splat);
await splat.initialized;

renderer.setAnimationLoop(() => renderer.render(scene, camera));
window.addEventListener("resize", () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
});

WebGL2

WebGPURenderer automatically falls back to its WebGL2 backend when WebGPU is unavailable. To choose WebGL2 explicitly:

const renderer = new WebGPURenderer({ antialias: false, forceWebGL: true });
await renderer.init();

For the classic WebGL renderer, replace the WebGPU renderer creation and initialization with:

const renderer = new THREE.WebGLRenderer({ antialias: false });

Keep the rest of the example unchanged.

Stochastic rendering

Sorted alpha blending is the default. To enable stochastic rendering:

splatRenderer.stochastic = true;

This mode produces visible noise. Smooth it with the experimental neural denoiser, which supports WebGPU and WebGL2, including WebXR. See Stochastic rendering for setup and requirements.

Streaming large scenes

Use RadStreamScheduler for RAD scenes with levels of detail (LOD), SogStreamScheduler for SOG lod-meta.json scenes, or Lcc2StreamScheduler for .lcc2 scenes. All three load detail as the camera moves and work on WebGPU and WebGL2.

All three schedulers start empty. Add inputs with addSource() and remove them by their stable source ID with removeSource(id). The addition promise waits for metadata, not rendered data.

For RAD, replace the SplatMesh loading and animation loop in the quick start with:

import { RadStreamScheduler } from "gaussian-splat-lite";

const streaming = new RadStreamScheduler({
  splatBudget: 3_000_000,
  fadeDurationMs: 200, // Smooth LOD transitions (default).
});
scene.add(streaming.group);
streaming.setCamera(camera);
streaming.setResolutionFromRenderer(camera, renderer); // CSS pixels; again after resizing.
const sourceId = await streaming.addSource({ url: "/assets/scene.rad" });

renderer.setAnimationLoop(() => {
  streaming.update();
  renderer.render(scene, camera);
});

// The update loop must be running before awaiting the first visible data.
await streaming.firstRenderable;

// When removing the model:
// streaming.dispose();
// streaming.group.removeFromParent();

For streamed SOG, create an empty scheduler and add each input with addSource(). Its promise waits for that input's metadata. Register the camera and update before rendering each frame; SOG detail follows distance, so it needs no resolution:

import { SogStreamScheduler } from "gaussian-splat-lite";

const streaming = new SogStreamScheduler({
  splatBudget: 3_000_000,
  fadeDurationMs: 200, // Smooth LOD transitions (default).
});
scene.add(streaming.group);
streaming.setCamera(camera);
const sourceId = await streaming.addSource({
  url: "/assets/scene/lod-meta.json",
});

renderer.setAnimationLoop(() => {
  streaming.update();
  renderer.render(scene, camera);
});
await streaming.firstRenderable;

// Remove one input without rebuilding the scheduler:
// streaming.removeSource(sourceId);

For LCC2, use Lcc2StreamScheduler and a .lcc2 index URL with the same camera and update loop as SOG:

import { Lcc2StreamScheduler } from "gaussian-splat-lite";

const streaming = new Lcc2StreamScheduler({ splatBudget: 3_000_000 });
scene.add(streaming.group);
streaming.setCamera(camera);
const sourceId = await streaming.addSource({ url: "/assets/scene/meta.lcc2" });

Keep the index and its companion files together. See LCC2 streaming for options, multiple inputs, and supported scene data.

Documentation

Rendering

• GaussianSplatRenderer — Rendering options, sorting, and on-demand rendering.
• Stochastic rendering — The optional transparency mode and how to smooth its noise.
• Neural denoising (Experimental) — Neural denoising on WebGPU and WebGL2, including per-eye WebXR rendering with NeuralDenoiseXR.
• SplatCapture — Offscreen images, pixel readback, cube maps, and environment maps.

Models

• SplatMesh — Loading, transforms, animation, and picking.
• SplatLoader — Three.js-style loading, progress, cancellation, and split files.
• SplatFileType — PLY, SPZ, SOG, and RAD formats.
• postDecode — Change Splats while a model loads.
• SplatEdit and SplatEditSdf — Recolor, fade, or hide parts of a model.
• Splats — Read a loaded model's data.

Large scenes

• Building RAD files — Convert models to streamable RAD with quality LOD.
• RadStreamScheduler — Large RAD scenes with adaptive detail.
• SogStreamScheduler — Large SOG scenes with adaptive detail.
• Lcc2StreamScheduler — LCC2 scenes with adaptive detail.

Development

Requires Node.js 22.12 or later, Rust via rustup, and the wasm32-unknown-unknown target. build:wasm installs wasm-pack through Cargo if needed.

npm ci
npm run build:wasm
npm run dev

Open the URL printed by Vite (normally http://localhost:8080/) and drop a .ply, .spz, .sog, or .rad file into the viewer, choose a local file, or load one from an HTTP(S) URL. For LCC2, select or drop the scene folder containing .lcc2 and its companion files, or load its index URL. For split SOG, select or drop meta.json together with its .webp images; for split RAD, include the header and its .radc pages. Files are decoded locally. Choose WebGPU / WebGL2 / WebGPU · WebGL2 in the viewer to compare backends.

See Contributing for validation commands. npm run build emits ESM, CommonJS, declarations, and source maps in dist/.

Acknowledgements

Gaussian Splat Lite uses Spark and SuperSplat as reference implementations.

License

Licensed under Apache 2.0. See NOTICE and third-party licenses for attribution.