Three.js Merges a Native Gaussian Splat Renderer for WebGPU in r186

three.js has merged its first native gaussian splatting renderer, a WebGPU and TSL implementation landing in r186.

Splat rendering in three.js has historically run on third party code until now, including World Labs' Spark and GaussianSplats3D, which later added spherical harmonics.

Written by Ben Houston of Threekit and Land of Assets, was merged into the dev branch by Mugen87. What's fascinating about the implementation is how compact it is. The total size is 7KB in addition to base ThreeJS for SPZLoader + Renderer. To use it also only requires three lines of code.

const splatData = await new SPZLoader().loadAsync('lion.spz');
const splats = new GaussianSplatMesh(splatData);

scene.add(splats);

const splatData = await new SPZLoader().loadAsync('lion.spz');
const splats = new GaussianSplatMesh(splatData);

scene.add(splats);

const splatData = await new SPZLoader().loadAsync('lion.spz');
const splats = new GaussianSplatMesh(splatData);

scene.add(splats);

const splatData = await new SPZLoader().loadAsync('lion.spz');
const splats = new GaussianSplatMesh(splatData);

scene.add(splats);

The implementation has three layers. A plain BufferGeometry holds position, a six float covariance attribute carrying the upper triangle of a symmetric 3x3 matrix, and an rgba8 color attribute. The loaders all target that same geometry shape. GaussianSplatMesh, a WebGPU and TSL NodeMaterial, renders it, and a scene loads in three statements, an SPZLoader loadAsync call, a GaussianSplatMesh constructor, and scene.add.

Depth ordering lives in a reusable CountingSort class. CountingSort quantizes splat depth into bins, 4096 by default, and dispatches four TSL compute passes from compute(renderer), a reset, a histogram, a prefix sum and a scatter. The histogram and scatter passes use atomicAdd, and the prefix sum is a single invocation Loop. The sort moves an index array only, one uint per splat, and GaussianSplatMesh re-sorts only when the camera has moved past a threshold. A plain JavaScript fallback covers the WebGL backend of WebGPURenderer.

Format coverage runs to ply through the existing PLYLoader and a createGaussianSplatGeometryFromPLYGeometry helper that reads scale*, rot, fdc and opacity, splat through SPLATLoader, spz through SPZLoader, ksplat through KSPLATLoader, and glTF KHR_gaussian_splatting through GLTFGaussianSplatLoaderExtension. The glTF extension is registered by hand through loader.register, which keeps TSL out of GLTFLoader.

Color is SH0 only, one flat color and opacity per splat, with no SH1 through SH3, no level of detail, no streaming, no WASM and no web workers. Spark 2.0 carries LoD splat trees, virtual paging and the .RAD format. glTF export and an editor integration were removed before merge.

r185 is the current three.js release. The code is on the dev branch, but represents an exciting step forward for the proliferation of gaussian splatting on the web. Learn more here.