ZSplat

WebGPU renderer for Gaussian splats with optimized GPU radix sorting (portable and subgroup-optimized paths), plus a React component, loaders, and an interactive playground.

• Playground demo
• GPU radix sort visualizer

pnpm add zsplat

import { ZSplat } from "zsplat";

export function Viewer() {
  return (
    <ZSplat
      src="/models/scene.ply"
      className="w-full h-screen"
      sortMethod="gpu-subgroup"
      turntable
    />
  );
}

src accepts either:

• a URL string
• a File object

Supported load formats in the package:

• standard/compressed PLY
• SPZ
• SOG (meta.json URL)

import { loadSplat } from "zsplat";

const data = await loadSplat("/models/scene.spz");
console.log(data.count);

ZSplat supports:

• gpu-subgroup (default): stable, subgroup-optimized path when supported
• gpu: stable portable path
• gpu-unstable: unstable GPU path
• cpu: CPU fallback

• src/ - library source (renderer, camera, shaders, loaders, React component)
• playground/ - interactive viewer app for local files and URL loading
• radix-sort-visualized/ - educational app explaining GPU radix sort
• docs/ - static build outputs:
  • docs/playground/
  • docs/radix-sort-visualized/

From repo root:

pnpm install
pnpm dev

This runs the playground dev server.

Run the radix visualizer locally:

pnpm --dir radix-sort-visualized dev

From repo root:

pnpm build

Builds the zsplat package to dist/.

pnpm build:docs

Builds both apps as static sites:

• playground -> docs/playground/
• radix visualizer -> docs/radix-sort-visualized/

pnpm preview

Previews the playground build.

The playground top bar currently includes:

• open local .ply / .spz
• load by URL (and ?src=... query param auto-load)
• sort mode selector
• camera mode/turntable controls
• link to radix sort learning page
• link to this GitHub repository