npm install gaussian-splat-lite three

Requires Three.js >=0.186.0.

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

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);
});

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.

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

splatRenderer.stochastic = true;

This mode produces visible noise. Smooth it with temporal anti-aliasing, or use the experimental neural denoiser to help reduce trails behind moving objects. Both support WebGPU and WebGL2. See Stochastic rendering for setup and requirements.

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

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

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

const streaming = new RadStreamScheduler({
  url: "/assets/scene.rad",
  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.
await streaming.initialized;

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, use this constructor. Register the camera with setCamera(camera) and call streaming.update() before rendering each frame; SOG detail follows distance, so it needs no resolution. The group and readiness lifecycle are the same:

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

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

Rendering

• GaussianSplatRenderer — Rendering options, sorting, and on-demand rendering.
• Stochastic rendering — The optional transparency mode and how to smooth its noise.
• TAAPass and TAANode — Temporal anti-aliasing for WebGLRenderer and WebGPURenderer.
• NeuralDenoiseNode and NeuralDenoisePass (Experimental) — Neural denoising on WebGPU and WebGL2, for scenes with moving objects.
• 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

• RadStreamScheduler — Large RAD scenes with adaptive detail.
• SogStreamScheduler — Large SOG scenes with adaptive detail.

Requires Node.js 20.19+ or 22.12+, 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 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/.

The overall architecture of Gaussian Splat Lite draws on Spark and SuperSplat.

Example model adapted from shehabmekky (CC BY 4.0).

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