Spark – Real‑time 3D Gaussian Splatting for THREE.js

What it is

Spark is an open‑source renderer that brings Gaussian‑splatting – a modern technique for representing 3‑D scenes as collections of tiny, fuzzy “splats” – into the browser. It plugs directly into the popular THREE.js graphics library, so developers can add high‑quality, view‑dependent point‑cloud rendering to any web‑based 3‑D app.

Why it matters

Traditional mesh pipelines struggle to display extremely dense geometry at interactive frame rates, especially on mobile hardware. Gaussian splats store geometry, color, opacity and even learned features in a compact form that can be rasterised efficiently on the GPU. Spark packages this research‑grade rendering method in a portable, WebGL2‑compatible library, making cutting‑edge visual fidelity accessible to web developers without native code or heavy server‑side processing.

Core features (as described in the README)

THREE.js integration – SparkRenderer and SplatMesh are drop‑in objects that work alongside standard THREE.js scenes, cameras and lights.
Broad device support – targets 98 %+ WebGL2‑capable browsers, including low‑powered mobiles.
Fast, real‑time rendering – splats are sorted and rasterised on‑GPU, enabling smooth animation even on modest hardware.
Multi‑format import – native loaders for PLY (including compressed variants), SPZ, SPLAT, KSPLAT and SOG files.
Multiple viewpoints – can render several camera perspectives at once, useful for VR/AR or multi‑window setups.
Dynamic editing – splats can be transformed, animated, recoloured, displaced or skinned at runtime.
Shader‑graph system – a GPU‑side node editor for creating custom splat shaders without writing GLSL manually.

Getting started (quick‑start code)

The README provides a minimal HTML page that:

Loads THREE.js and Spark via an import‑map pointing at a CDN.
Creates a THREE.js scene, camera and WebGL renderer.
Instantiates SparkRenderer and adds it to the scene.
Loads a sample splat (butterfly.spz) as a SplatMesh and animates it.

<script type="module">
  import * as THREE from "three";
  import { SparkRenderer, SplatMesh } from "@sparkjsdev/spark";
  // …scene setup…
  const spark = new SparkRenderer({renderer});
  const butterfly = new SplatMesh({url: "https://sparkjs.dev/assets/splats/butterfly.spz"});
  // animate rotation
</script>

Running this in a browser displays a rotating, GPU‑accelerated splat model.

Installation options

CDN – import the pre‑built module directly from https://sparkjs.dev/releases/spark/<version>/spark.module.js.
npm – npm install @sparkjsdev/spark for bundlers or Node‑based workflows.
Local build – clone the repo, install Rust (for the WebAssembly core), then run:
```
npm install
npm run build:wasm   # compile Rust → WASM
npm run build        # bundle JS/TS
```
The repo also ships scripts to download example assets and to serve a dev server (npm start).

Development workflow

The README lists useful scripts:

npm run clean – wipe generated files.
npm run assets:download / assets:clean – manage example assets.
npm run docs – build MkDocs‑based documentation.
npm run site:* – build, serve, or deploy the static website (gh‑pages).
npm run assets:compress <file> – compress a PLY splat to the SPZ format.

Who’s behind it?

Spark is developed by World Labs (https://www.worldlabs.ai), a company that focuses on AI‑driven 3‑D content creation. The project is MIT‑licensed and published on npm under the scoped package @sparkjsdev/spark.

Bottom line: Spark is a genuine, production‑ready library that brings the latest Gaussian‑splatting rendering technique to the web via THREE.js. It is relevant to AI‑generated 3‑D assets, real‑time graphics, and any project that needs high‑quality point‑cloud visualisation in a browser.

sparkjsdev/spark