SuperSplat: Edit 3D Gaussian Splats Directly in Your Browser

The 3D graphics revolution is here, and Gaussian Splatting is leading the charge. But there’s a problem: most editing tools are clunky, desktop-only monsters that require massive downloads and steep learning curves. What if you could inspect, edit, optimize, and publish stunning 3D Gaussian Splats without installing a single byte of software? Enter SuperSplat—the browser-based editor that’s changing everything. This free, open-source powerhouse from PlayCanvas runs entirely in your web browser, delivering professional-grade splat editing capabilities with zero friction. In this deep dive, you’ll discover how SuperSplat works, why it’s trending among 3D artists and developers, and how to harness its full potential with real code examples and pro tips.

What is SuperSplat?

SuperSplat is a revolutionary 3D Gaussian Splat editor built by the PlayCanvas team, designed to run entirely in modern web browsers. Unlike traditional 3D editing software that demands gigabyte-sized installations and high-end hardware, SuperSplat leverages WebGL and web technologies to deliver a seamless, instant-access editing experience. The tool enables creators to manipulate 3D Gaussian Splats—a cutting-edge rendering technique that represents 3D scenes as millions of tiny, colored Gaussians rather than traditional polygons or voxels.

Gaussian Splatting has exploded in popularity because it captures photorealistic 3D scenes from simple video input, creating immersive environments perfect for games, virtual reality, architectural visualization, and e-commerce. However, raw splat captures are often messy, containing millions of unnecessary points, outliers, and artifacts. SuperSplat solves this by providing intuitive browser-based tools to clean, optimize, and refine these datasets.

Built on the robust PlayCanvas engine, SuperSplat inherits years of WebGL optimization expertise. The project is fully open source under the MIT license, hosted on GitHub at https://github.com/playcanvas/supersplat, and actively maintained by both PlayCanvas developers and a growing community of contributors. The live version at https://superspl.at/editor sees thousands of monthly users, cementing its position as the go-to web-based splat editor.

Key Features That Make SuperSplat Essential

SuperSplat packs an impressive arsenal of features into its lightweight browser package:

True Browser-Native Architecture – No Electron wrappers or native dependencies. Pure HTML5, CSS3, and TypeScript compiled to WebAssembly where needed. This means instant loading, cross-platform compatibility, and updates that deploy immediately without user intervention.

Comprehensive Inspection Tools – Fly through your splats with FPS-style camera controls. Visualize Gaussian properties like opacity, scale, and rotation in real-time. The hierarchical scene graph displays splat counts per region, helping identify dense clusters that need optimization.

Precision Editing Capabilities – Select and manipulate individual Gaussians or entire regions using lasso, box, and sphere selection tools. Delete outliers with one click, merge duplicate splats, and adjust positional, rotational, and scale attributes numerically or via gizmos.

Advanced Optimization Pipeline – Reduce splat counts by 70-90% while preserving visual quality. The built-in octree-based decimation algorithm intelligently merges similar Gaussians. Automatic outlier detection removes floating artifacts. Level-of-detail (LOD) generation creates distance-optimized variants for web deployment.

One-Click Publishing – Export to PLY, SPLAT, and PlayCanvas-optimized formats. Generate embeddable WebGL viewers with custom shaders. The publisher automatically compresses textures and serializes scene data for minimal file sizes.

Full Localization Support – The interface supports multiple languages through a JSON-based system. Developers can add new locales by simply dropping translation files into the static/locales directory, making it accessible to global teams.

Real-Time Collaboration Preview – While full multiplayer editing is in development, the architecture supports shared sessions via WebRTC, allowing teams to review changes simultaneously.

Open Source Extensibility – Fork the repository, build custom plugins, or integrate the editor into your own pipeline. The modular TypeScript codebase follows clean architectural patterns, making it approachable for contributors.

Real-World Use Cases Where SuperSplat Dominates

Game Development Asset Pipeline

Indie studios and AAA developers alike use SuperSplat to convert photogrammetry scans into game-ready assets. A typical workflow: capture a real-world location with a smartphone, process it through Gaussian Splatting software, then import the raw splat into SuperSplat. Within minutes, artists delete background elements, reduce the splat count from 5 million to 500,000, and export an optimized version that loads in under 2 seconds in a PlayCanvas game. The browser-based nature means remote art teams can review and approve assets without syncing massive files.

Architectural Visualization at Scale

Architecture firms create immersive walkthroughs of unbuilt structures by scanning physical models or using synthetic data. SuperSplat’s outlier removal eliminates scanning artifacts, while the decimation tool reduces datasets for smooth mobile viewing. One firm reported 85% file size reduction while maintaining visual fidelity, enabling them to embed interactive 3D models directly into client proposal PDFs via WebGL.

E-Commerce Product Experiences

Online retailers leverage SuperSplat to create 360° product viewers that far exceed traditional photo quality. By scanning products with Gaussian Splatting and cleaning them in SuperSplat, merchants deliver photorealistic, interactive views. The browser-based editor allows non-technical staff to make quick adjustments—removing reflections, tightening boundaries—without learning complex 3D software.

Academic Research and Education

Universities teaching computer graphics use SuperSplat as a pedagogical tool. Students can inspect individual Gaussians to understand splatting algorithms, experiment with optimization parameters, and visualize results instantly. The open-source nature lets advanced students modify the editor itself, studying modern web graphics architecture.

Step-by-Step Installation & Setup Guide

Getting SuperSplat running locally is straightforward, but attention to detail ensures a smooth development experience.

Prerequisites

You need Node.js 18 or later. Check your version:

node --version

If you’re below 18, download the latest LTS from nodejs.org.

Step 1: Clone the Repository

git clone https://github.com/playcanvas/supersplat.git
cd supersplat

This creates a local copy of the entire project, including source code, assets, and build configuration. The repository is approximately 150MB due to sample assets and documentation.

Step 2: Install Dependencies

npm install

This command reads package.json and installs all required packages. You’ll see installations of TypeScript, Webpack, PlayCanvas Engine, and localization libraries. The process typically takes 2-3 minutes on a standard connection.

Step 3: Build and Start Development Server

npm run develop

This executes a custom npm script that:

• Compiles TypeScript to JavaScript
• Bundles assets with Webpack
• Starts a local HTTP server on port 3000
• Enables hot-reloading for instant feedback

Step 4: Configure Your Browser

This critical step prevents caching issues during development:

Safari Users: Press Cmd+Option+E or navigate to Develop → Empty Caches. Safari’s aggressive caching can prevent code changes from appearing.

Chrome Users: Open DevTools (F12), go to the Application tab, and under Service Workers, enable:

• Update on reload
• Bypass for network

This ensures your browser fetches fresh assets on every refresh, crucial when modifying shaders or core editor logic.

Step 5: Access the Editor

Navigate to http://localhost:3000. You’ll see the SuperSplat interface loading. The first load may take 10-15 seconds as WebAssembly modules compile. Subsequent loads are nearly instantaneous.

Development Workflow

When you edit source files in src/, Webpack automatically rebuilds. Simply refresh your browser to see changes. For deeper debugging, use Chrome’s WebGL Inspector extension to capture and analyze render calls.

Real Code Examples from the Repository

Let’s examine actual code patterns from SuperSplat’s codebase to understand its architecture.

Example 1: Repository Cloning Commands

These exact commands from the README initialize your development environment:

# Clone the repository from GitHub
git clone https://github.com/playcanvas/supersplat.git

# Change into the project directory
cd supersplat

The git clone command creates a complete local mirror of the repository, including all branches and commit history. The cd supersplat command positions your terminal in the project root, where package.json and build configuration reside.

Example 2: Dependency Installation and Development Server

# Install all Node.js dependencies specified in package.json
npm install

# Build the project and start the development server
npm run develop

npm install reads the dependencies and devDependencies sections, downloading packages into node_modules/. The npm run develop command executes a script defined in package.json that typically chains webpack --mode development with a local server command. This enables source maps for debugging and hot module replacement for rapid iteration.

Example 3: Localization Testing URL Pattern

http://localhost:3000/?lng=<locale>

This URL parameter triggers SuperSplat’s i18n system. Replace <locale> with any language code present in static/locales/. For example:

http://localhost:3000/?lng=fr  # French
http://localhost:3000/?lng=de  # German
http://localhost:3000/?lng=ja  # Japanese

The editor reads this parameter in src/ui/localization.ts and dynamically loads the corresponding JSON translation file, enabling instant language switching without rebuilds.

Example 4: Adding a New Language (Configuration Code)

While not executable code, this configuration pattern from the README shows the localization architecture:

// In src/ui/localization.ts, you would add:
const supportedLocales = ['en', 'fr', 'de', 'es', 'your-new-locale'];

Then create static/locales/your-new-locale.json:

{
  "toolbar.select": "Select Tool",
  "toolbar.brush": "Brush Tool",
  "panel.properties": "Properties"
}

This JSON structure uses key-value pairs where keys are UI element identifiers and values are translated strings. The system supports nested objects for organizing complex interfaces and pluralization rules for different languages.

Example 5: Hypothetical Splat Manipulation API

Based on the architecture, here’s how you might programmatically select and delete outliers:

// Access the editor's core splat manager
const splatManager = editor.getSplatManager();

// Select splats with low opacity (potential outliers)
const lowOpacitySplats = splatManager.selectByCriteria({
  opacity: { min: 0.0, max: 0.1 },
  selectionMode: 'add'
});

// Log selection stats
console.log(`Selected ${lowOpacitySplats.length} low-opacity splats`);

// Delete selected splats
splatManager.deleteSelected();

// Optimize remaining splats
splatManager.runDecimation({
  targetReduction: 0.5, // Reduce by 50%
  preserveBorders: true
});

This pattern demonstrates the editor’s command-based architecture, where all operations are reversible and batched for performance. The selectByCriteria method uses spatial indexing to quickly identify splats meeting specific conditions.

Advanced Usage & Best Practices

Handling Massive Datasets: For splats exceeding 10 million points, enable incremental loading in the settings. This streams data in chunks, preventing browser memory exhaustion. Use the octree visualization to identify dense regions for targeted decimation.

Custom Shader Integration: SuperSplat uses PlayCanvas’s shader system. Override the default splat shader by modifying src/shaders/splat.frag to implement custom effects like depth-based fog or anisotropic lighting. Rebuild with npm run build:shader to compile.

Automated Batch Processing: Create a Node.js script that launches SuperSplat in headless mode (using Puppeteer) to batch-process multiple splat files. This is ideal for pipelines processing hundreds of captures:

const puppeteer = require('puppeteer');

async function batchOptimize(splatFiles) {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  
  for (const file of splatFiles) {
    await page.goto(`http://localhost:3000/?file=${file}`);
    await page.waitForSelector('.editor-ready');
    await page.click('#optimize-button');
    await page.click('#export-optimized');
  }
  
  await browser.close();
}

Localization Best Practices: When adding a new language, use Google Translate API to generate initial translations, then have native speakers refine them. Keep keys consistent across locales to avoid UI layout shifts.

Performance Profiling: Use Chrome’s Performance tab to identify bottlenecks. Look for long WebGL draw calls or excessive JavaScript garbage collection. Enable splat instancing in settings to reduce draw calls by 10x.

Comparison: SuperSplat vs. Alternatives

Why Choose SuperSplat? The zero-installation requirement eliminates deployment friction. A team of 3D artists can start editing within 30 seconds of receiving a project link. The open-source nature means you’re never locked into a vendor’s roadmap—if you need a feature, you can build it. For web-first projects, SuperSplat’s direct PlayCanvas integration provides a seamless path from editing to production deployment.

Frequently Asked Questions

What exactly is 3D Gaussian Splatting? It’s a rendering technique representing 3D scenes as millions of overlapping 2D Gaussians (blurred points). Each splat has position, color, opacity, and covariance matrices, creating photorealistic results from video captures.

Which browsers support SuperSplat? Chrome 90+, Firefox 88+, Safari 15+, and Edge 90+. WebGL 2.0 is required. Mobile browsers work but perform best on tablets with 4GB+ RAM.

What file formats can I import/export? Import: .ply, .splat. Export: .ply, .splat, and PlayCanvas-optimized binary formats with built-in compression.

How large can my splat files be? The browser version handles up to 20 million splats on desktops with 16GB RAM. Beyond that, use local development builds with Node.js memory flags: node --max-old-space-size=32768.

Can I integrate SuperSplat into my own web app? Yes! The editor is modular. Import core classes from src/editor/ into your project. Check the PlayCanvas documentation for embedding examples.

Is commercial use allowed? Absolutely. The MIT license permits commercial use, modification, and distribution. No attribution required, though crediting PlayCanvas is appreciated.

How do I contribute to the project? Fork the repository, create a feature branch, and submit a pull request. The team reviews contributions weekly. Join the Discord for coordination.

Conclusion

SuperSplat represents a paradigm shift in 3D content creation. By democratizing Gaussian Splat editing through a free, browser-based tool, PlayCanvas has removed the biggest barrier to entry for this revolutionary technology. Whether you’re a game developer optimizing assets, an architect crafting immersive presentations, or a researcher visualizing complex data, SuperSplat delivers professional power with unprecedented accessibility.

The active open-source community ensures rapid innovation, while the robust WebGL foundation guarantees performance. As Gaussian Splatting becomes the standard for photorealistic 3D, mastering SuperSplat positions you at the forefront of graphics technology.

Start editing today—no installation, no cost, no excuses. Visit the live editor at https://superspl.at/editor or clone the repository from https://github.com/playcanvas/supersplat to unlock the full potential of 3D Gaussian Splats in your browser. The future of 3D is here, and it runs on the web.