The Problem
3D Gaussian Splatting is a recent rendering technique for photorealistic 3D scenes, but there are few mature tools for editing the splat data itself. Most workflows require round-tripping through external tools or writing custom scripts. SuperSplat addresses this with a browser-based editor, eliminating installation and platform lock-in.
What This Does
SuperSplat is a web-based editor for 3D Gaussian Splats. It handles the full lifecycle: import, inspect, edit, optimize, and publish. The core editing operations live in src/edit-ops.ts (40 functions, 20 classes), which implements undoable operations like do, undo, and apply. Serialization is handled by src/splat-serialize.ts (39 functions, 17 classes), the largest file at 1044 lines.
The UI is a custom React-like setup with SCSS styling, not a standard React app. The editor is split into tools (src/tools/), panels (src/ui/), and a rendering layer (src/shaders/, src/camera.ts). Localization is centralized in src/ui/localization.ts with localize called from 13 places.
How It Is Wired
Execution starts at main in src/main.ts:76, which reaches 35 functions. The main function registers editor events and initializes the app. The src/events.ts module is the hub: 56 modules depend on it, making it the highest-blast-radius module in the codebase. It defines the invoke function, called from 44 places, which is the event dispatch mechanism.
The app runs entirely in the browser—no server component. The src/io/ directory handles file I/O with browser file system APIs, and src/data-processor/index.ts handles splat data processing. The call graph shows constructor -> localize is the most frequent edge (158 times), meaning UI construction is the heaviest initialization path.
Import cycles exist in src/splat.ts, src/element.ts, and src/scene.ts (20 modules in cycles total). This makes changes to those files risky—modifying one can break initialization order in ways that are hard to trace.
How To Use It
Setup (from README, requires Node.js 18+):
git clone https://github.com/moses-y/supersplat.git
cd supersplat
npm install
npm run develop
Then open http://localhost:3000. The development server rebuilds on source changes automatically.
Configuration: No environment variables required. Localization files live in static/locales/; add a locale JSON there and register it in src/ui/localization.ts.
Running a production build: The repo has rollup.config.mjs and package.json scripts, but the README only documents the development flow.
Real-World Use
A typical workflow: open a .ply or .splat file, use the selection tools (src/tools/—brush, lasso, flood, box) to isolate unwanted splats, delete them via edit-ops.ts, then publish the cleaned splat to a hosting service using src/publish.ts. The editor supports undo/redo through src/edit-history.ts, making destructive edits safe to explore.
Code Health & Issues
Static analysis found 63 issues (30 high, 33 medium) across 5 kinds:
- High - Import cycle members (20 files):
src/splat.ts,src/element.ts,src/scene.tsparticipate in circular imports. Fix: extract shared types or defer imports. - High - Deep nesting (33 files):
src/scene.tshas max indentation depth 9. Fix: extract inner blocks or use guard clauses. - High - Hub modules (5 files):
src/events.tshas 56 dependents. Fix: keep it stable and small. - High - Duplicated code (43 files): 193 repeated 6-line blocks. Fix: extract shared helpers.
- Medium - Oversized file:
src/splat-serialize.tsat 1044 lines. Fix: split by responsibility.
SDLC observations: no test suite exists (125 source files, zero test files), and the CI workflow at .github/workflows/ci.yml lacks least-privilege token permissions and a dependency vulnerability scan.
The Bottom Line
This is a serious, production-quality tool for a niche workflow, forked from PlayCanvas's well-maintained project. The architecture is sound but has accumulated technical debt—especially the import cycles and the oversized serializer. Anyone planning to extend it should budget time for refactoring the hot modules before adding features.