How to View and Edit 3D Gaussian Splats with SuperSplat in Browser 2025

How-To Guide·Jun 20, 2026·15 min read

Prerequisites and What You Need Before Starting

[ ] Chrome 113+ or Edge 113+ — WebGPU is required for the full-performance rendering path. Firefox does not support WebGPU as of mid-2025; attempting to open SuperSplat in Firefox silently falls back to a slower WebGL path or fails to render entirely.
[ ] GPU with at least 4 GB VRAM — 8 GB recommended for splats over 1 million Gaussians. Integrated Intel graphics can technically run WebGL fallback but expect single-digit framerates on anything non-trivial.
[ ] A captured Gaussian Splat file — SuperSplat accepts .ply (standard and compressed), .splat (binary), and SuperSplat's own .compressed format. Capture sources include Nerfstudio (ns-train gaussian-splatting), COLMAP + Gaussian Splatting original repo, or a mobile-captured Luma AI export.
[ ] A PlayCanvas account (free) — SuperSplat is published by PlayCanvas. Sign-up is free and unlocks publishing, sharing, and scene persistence.
[ ] File under 2 GB locally — SuperSplat streams large files progressively in 2025, but the practical sweet spot for browser uploads without hiccups is under 200 MB. Files above that benefit from the new streaming loader.

| Requirement | Minimum | Recommended | |---|---|---| | Browser | Chrome 113 / Edge 113 | Chrome 120+ | | GPU VRAM | 4 GB | 8 GB | | Operating System | Windows 10, macOS 12, Ubuntu 22.04 | Windows 11 / macOS 14 | | Splat File Size | Any | Under 200 MB for instant load |

Gotcha: Firefox 125 still has WebGPU behind a flag and it is not stable for SuperSplat. If a colleague says "it doesn't work," check their browser first.

Before you open SuperSplat, verify your WebGPU support in the Chrome DevTools console:

// Paste into Chrome DevTools console at https://superspl.at
(async () => {
  if (!navigator.gpu) {
    console.error('WebGPU not available. Check chrome://flags/#enable-unsafe-webgpu');
    return;
  }
  const adapter = await navigator.gpu.requestAdapter();
  if (!adapter) {
    console.error('No WebGPU adapter found — driver or hardware issue.');
    return;
  }
  const info = await adapter.requestAdapterInfo();
  console.log('WebGPU Adapter:', info);
  // Prints vendor, architecture, device, and description
})();

If navigator.gpu is undefined, navigate to chrome://flags/#enable-unsafe-webgpu, enable it, and relaunch Chrome. On Windows, also ensure your GPU driver is from the last 12 months.

Estimated time: 25–40 minutes (depending on splat file size and familiarity with 3D tools).

Step 1: Upload Your Gaussian Splat File to SuperSplat

Getting your file into SuperSplat is the entry point to everything else — editing, sharing, and embedding all depend on a successfully loaded scene. SuperSplat's 2025 update introduced progressive streaming, so even large files begin rendering while still uploading.

Creating a Free SuperSplat Account via PlayCanvas

Navigate to superspl.at and click Sign Up in the top-right corner. Authentication goes through PlayCanvas's standard OAuth flow — you can sign up with a GitHub or Google account, or a plain email. Once authenticated, you land on the SuperSplat dashboard showing your scenes (empty on first visit).

Drag-and-Drop Upload vs URL Import

Click Editor from the top navigation to open a blank scene. You have two import options:

Drag and drop — drag a .ply, .splat, or .compressed file from your file manager directly onto the editor viewport. A blue overlay confirms the drop target is active.
URL import — useful when your splat lives on a remote server or CDN. Click File → Import from URL, paste the direct file URL, and SuperSplat fetches and streams it.

Understanding the Scene Dashboard and File Size Limits

Once uploaded, the scene appears in your dashboard with a thumbnail rendered from the default camera angle. Each scene has a shareable slug (e.g., superspl.at/s/abc123). The practical browser-streaming limit sits around 200 MB — above this, initial load can stall on slower connections. SuperSplat's streaming feature (announced late 2024) loads Gaussians in spatial chunks, so you can start editing while the rest loads. Files exported from Nerfstudio often land between 150–600 MB depending on the number of Gaussians and compression applied.

Note: SuperSplat does not enforce a hard file size cap on upload, but browser memory limits mean files above 1 GB may crash the tab on 8 GB VRAM systems. Use the Convert tool (Step 5) to recompress before uploading.

Step 2: Navigating the SuperSplat Editor Interface

Understanding the editor layout before you start editing saves significant frustration. The interface follows conventions familiar to anyone who has used Blender or Unity, but with WebGPU-accelerated Gaussian rendering instead of polygon rasterization.

Camera Controls: Orbit, Pan, and Zoom Shortcuts

The viewport uses an orbit camera centered on the splat's bounding box centroid:

Left mouse drag — orbit around the focus point
Right mouse drag — pan the camera laterally
Scroll wheel — zoom in/out (exponential, not linear)
Middle mouse drag — alternative pan
Double-click on splat — re-center the orbit focus on that point

The Sidebar: Scene Tree, Splat Properties, and Transform Tools

The left sidebar contains the Scene Tree listing all splat objects in the scene. Click a splat entry to select it and reveal its properties panel: position (X/Y/Z), rotation (Euler or quaternion), scale, and opacity multiplier. The right panel shows render statistics — Gaussian count, memory usage, and current FPS.

Keyboard shortcut reference:

| Key | Action | |---|---| | G | Grab / Translate the selected splat | | R | Rotate the selected splat | | S | Scale the selected splat | | F | Frame selection (zoom to fit) | | Delete | Delete selected Gaussians | | Ctrl+Z | Undo last edit | | Ctrl+Shift+Z | Redo | | B | Box select mode | | L | Lasso select mode |

Toggling WebGPU vs WebGL Rendering Mode

In Settings → Renderer, you can force WebGL fallback if you're debugging on a machine where WebGPU behaves unexpectedly. WebGPU renders Gaussians via compute shaders, achieving 2–4x higher frame rates on equivalent hardware compared to the WebGL path. The WebGL path uses instanced draw calls and is noticeably slower for splats above 500k Gaussians — you'll see the FPS counter drop from 60+ to sub-20 on a 2 million Gaussian scene.

Step 3: Cleaning and Editing Your Splat (Crop, Select, Delete Gaussians)

Raw Gaussian Splats captured from real scenes almost always contain artifacts: floating blobs in mid-air ("floaters"), sky bleed where the sky bleeds semi-transparent Gaussians into the scene, and background clutter you don't want in your final asset. Cleaning is the most time-consuming part of the workflow but SuperSplat's selection tools make it tractable.

Using the Box Select Tool to Remove Floating Artifacts

Press B to activate Box Select. Click and drag a rectangle in the viewport to select all Gaussians whose center falls within that 2D screen-space region. Selected Gaussians highlight in orange. Press Delete to remove them. For floaters high above the main subject, orbit the camera to view from the side, then box-select the floating cluster.

Floaters typically appear as small, semi-opaque blobs that cast no coherent shadow and have low opacity (you can see through them). They form when the structure-from-motion reconstruction has sparse coverage — common at object edges and reflective surfaces.

Masking Background Gaussians with the Lasso Select

Press L for Lasso Select, which lets you draw a freehand polygon around irregularly shaped regions. This is essential for cutting out complex background shapes — tree canopies, irregular walls — that a rectangle can't cleanly bound. Hold Shift while drawing additional lasso regions to add to the current selection. Hold Alt to subtract from the selection.

Applying Transforms: Position, Rotation, and Scale of the Splat Cloud

After editing, you often need to re-orient the splat so its "up" axis is correct (Nerfstudio and COLMAP sometimes export with Y-up vs Z-up differences). Select the splat in the Scene Tree, press R for rotate, and drag to align. The resulting transform is stored in the scene config:

{
  "version": "1.0",
  "scenes": [
    {
      "id": "scene_001",
      "splats": [
        {
          "name": "my_captured_scene",
          "url": "https://superspl.at/assets/my_captured_scene.compressed",
          "transform": {
            "position": [0.0, -1.25, 0.0],
            "rotation": [0.0, 0.0, 0.0, 1.0],
            "scale": [1.5, 1.5, 1.5]
          },
          "opacity": 1.0
        }
      ],
      "camera": {
        "position": [0.0, 1.5, 5.0],
        "target": [0.0, 0.0, 0.0]
      }
    }
  ]
}

The rotation field is a quaternion [x, y, z, w]. A value of [0,0,0,1] is identity (no rotation). To rotate 90° around the Y axis you'd use approximately [0, 0.707, 0, 0.707].

Note: Sky bleed — semi-transparent Gaussians leaked from overexposed sky regions — often appears as a translucent haze above the main subject. Lasso-select from a top-down orbit view and delete in passes rather than trying to catch it in one sweep.

Step 4: Publishing and Sharing Your Gaussian Splat Scene

Once your splat is cleaned and oriented, publishing makes it accessible via a public URL and gives you an embed snippet for dropping it into any website.

Publishing to a superspl.at Public URL

Click File → Publish Scene. SuperSplat processes the scene (compressing if needed) and assigns a permanent URL like https://superspl.at/s/your-scene-slug. Publishing typically takes 10–30 seconds for sub-200 MB files. The scene page shows a full-screen interactive viewer anyone can access without an account.

Embedding a Splat Viewer in Your Own Website with the iframe Snippet

From the published scene page, click Share → Embed. SuperSplat generates this iframe snippet:

<!-- SuperSplat Gaussian Splat Embed -->
<iframe
  src="https://superspl.at/e/your-scene-slug"
  width="100%"
  height="600"
  frameborder="0"
  allow="fullscreen; xr-spatial-tracking"
  allowfullscreen
  style="border-radius: 8px; display: block;"
  title="3D Gaussian Splat Viewer"
></iframe>

The /e/ path serves a stripped-down embed viewer without the SuperSplat UI chrome. Replace your-scene-slug with your actual scene identifier. The viewer is fully interactive — orbit, pan, zoom — within the iframe. WebGPU is passed through to the parent page's GPU context where browser security policy allows.

Configuring Privacy: Public vs Unlisted Scenes

In scene settings, you can set visibility to Public (appears in SuperSplat Explore feed), Unlisted (accessible via direct link only, not indexed), or Private (requires login to view). Use Unlisted for client previews before a project is ready to go live.

Loading a Splat Programmatically with PlayCanvas GSplatComponent

If you're building a PlayCanvas application rather than using the iframe, load the splat directly into your scene graph:

// PlayCanvas engine: programmatically load a Gaussian Splat
// Requires PlayCanvas engine v1.70+ with GSplatComponent support

const app = new pc.Application(canvas, {
  graphicsDeviceOptions: { preferWebGpu: true }
});

app.start();

// Create an entity to hold the splat
const splatEntity = new pc.Entity('gaussian-splat');
app.root.addChild(splatEntity);

// Add the GSplatComponent
splatEntity.addComponent('gsplat', {
  asset: null // will assign after load
});

// Load the .splat or .compressed file from SuperSplat CDN
app.assets.loadFromUrl(
  'https://superspl.at/assets/your-scene-slug.compressed',
  'gsplat',
  (err, asset) => {
    if (err) {
      console.error('Failed to load splat:', err);
      return;
    }
    splatEntity.gsplat.asset = asset;
    console.log('Splat loaded, Gaussian count:', asset.resource.numSplats);
  }
);

// Position the camera
const camera = new pc.Entity('camera');
camera.addComponent('camera', { clearColor: new pc.Color(0.1, 0.1, 0.1) });
camera.setPosition(0, 1.5, 5);
camera.lookAt(pc.Vec3.ZERO);
app.root.addChild(camera);

Note: preferWebGpu: true in the graphics device options enables the WebGPU rendering path in PlayCanvas. Fall back gracefully by catching the adapter initialization error if WebGPU is unavailable on the client.

Step 5: Converting and Exporting Splats for Use in Other Engines

SuperSplat is not just a viewer — its Convert tool (accessible from the top nav) lets you recompress and reformat splat files for use in Three.js, Babylon.js, Unity, and Unreal without re-uploading to the editor.

Using the SuperSplat Convert Tool to Recompress .ply Files

Navigate to superspl.at/convert. Drop your source .ply file. The Convert tool offers:

Compressed .splat — SuperSplat's binary format, 4–8x smaller than raw .ply. A 400 MB Nerfstudio export commonly compresses to 60–90 MB.
Standard .ply — re-exported with a clean, standards-compliant header (fixes the Nerfstudio non-standard header problem described in the troubleshooting section).
Half-precision float — drops float32 position/color data to float16, halving the storage with minimal visual quality loss.

Exporting Compressed Splats for Three.js and Babylon.js

After converting, download the .splat file and host it on your CDN or a storage bucket. Load it in Three.js using the community THREE.GaussianSplatLoader (available via the three-gaussian-splat npm package, maintained by antimatter15 and others):

// Three.js Gaussian Splat loading with GaussianSplatLoader
// npm install three @zappar/three-gaussian-splat (or community equivalent)
import * as THREE from 'three';
import { GaussianSplatLoader } from '@zappar/three-gaussian-splat';

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.01, 1000);
camera.position.set(0, 1.5, 5);

// Load the compressed .splat exported from SuperSplat Convert
const loader = new GaussianSplatLoader(renderer);
loader.load(
  'https://your-cdn.example.com/scene-exported.splat',
  (splatMesh) => {
    scene.add(splatMesh);
    console.log('Splat mesh added to scene');
  },
  (progress) => {
    console.log(`Loading: ${(progress.loaded / progress.total * 100).toFixed(1)}%`);
  },
  (error) => {
    console.error('Splat load error:', error);
  }
);

function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
animate();

Note: Three.js Gaussian Splat support is community-maintained, not part of the core Three.js repo. Check the loader's GitHub issues for version compatibility with your Three.js release before integrating.

Downloading the Edited .ply for Use in Unity or Unreal Gaussian Splat Plugins

From the SuperSplat Editor, go to File → Export → Download .ply. This exports your cleaned, transformed splat as a standard PLY file. In Unity, import it with the Unity Gaussian Splatting plugin (aras-p/UnityGaussianSplatting on GitHub). In Unreal, use the Gaussian Splatting Plugin from the Unreal Marketplace. Both expect a standard-header .ply — which is exactly what SuperSplat's export produces, solving the Nerfstudio header compatibility issue.

Common Issues & Fixes

Error: Splat Renders Black or Invisible (WebGPU Not Enabled)

Cause: The browser is running in WebGL fallback mode and the specific splat format requires WebGPU compute shaders to decompress on the fly.

Fix: Go to chrome://flags/#enable-unsafe-webgpu, set to Enabled, relaunch Chrome. Then verify in the console:

// Quick WebGPU diagnostic in Chrome DevTools
console.log('WebGPU supported:', !!navigator.gpu);

If still black after enabling WebGPU, check Settings → Renderer in SuperSplat and force WebGPU explicitly.

Error: Upload Fails with 'Invalid PLY Header' Error

Cause: Nerfstudio versions prior to 0.3.4 export .ply files with non-standard property ordering or missing end_header newline. SuperSplat's parser rejects these.

Fix: Run the file through SuperSplat Convert first (drag to superspl.at/convert, export as Standard .ply), then re-upload the cleaned output. Alternatively, use plyconvert or a Python script:

# Fix non-standard PLY header using plyfile Python library
pip install plyfile
python3 - <<'EOF'
from plyfile import PlyData
# Read the problematic file (plyfile normalizes headers on read)
data = PlyData.read('nerfstudio_export.ply')
# Write a clean, standards-compliant PLY
data.write('cleaned_export.ply')
print(f"Gaussians: {len(data['vertex'])}")
EOF

Error: Scene Loads But Gaussians Appear Scrambled or Inverted

Cause: Coordinate system mismatch. COLMAP exports in a right-handed Y-up system; Nerfstudio uses Z-up; Luma AI uses yet another convention. The splat data itself is fine but the default orientation is wrong.

Fix: In the SuperSplat Editor, select the splat, press R, and rotate 90° on the X axis to flip Y/Z. Alternatively, edit the scene config JSON directly (accessible via File → Edit Config) and set the rotation quaternion to [0.707, 0, 0, 0.707] for a 90° X rotation.

Error: Slow Performance Even on Discrete GPU

Cause: Chrome may be running on the integrated GPU rather than the discrete one, especially on laptops with dual-GPU configurations (Nvidia Optimus, AMD MUX).

Fix: Right-click chrome.exe → Run with graphics processor → High-performance NVIDIA/AMD. On Windows 11, go to Settings → Display → Graphics → Add Chrome → set to High Performance. Also verify in chrome://gpu that the GPU listed under "GL Renderer" is your discrete card.

| Error Symptom | Cause | Fix | |---|---|---| | Black viewport | WebGPU disabled | Enable flag at chrome://flags/#enable-unsafe-webgpu | | Invalid PLY Header | Nerfstudio non-standard export | Run through SuperSplat Convert or plyfile Python | | Gaussians scrambled | Coordinate axis mismatch | Rotate 90° on X in editor | | <10 FPS on good GPU | Running on integrated GPU | Force discrete GPU in OS graphics settings |

FAQ: SuperSplat Gaussian Splat Editing in 2025

Q: Is SuperSplat free to use and is the source code open?

Yes on both counts. SuperSplat is free to use at superspl.at with a PlayCanvas account. The editor source code is open-source under the MIT license and lives at github.com/playcanvas/supersplat. You can self-host the editor or contribute features via pull request. The PlayCanvas Discord (discord.gg/RSaMRzg) has a dedicated #gaussian-splats channel where the maintainers are active.

Q: Can I use SuperSplat scenes in a commercial product?

The SuperSplat editor and its output files are yours to use commercially. There is no royalty or license fee on published scenes or exported assets. If you embed via iframe, the viewer JavaScript is served from PlayCanvas's CDN, which is permissible under their terms for commercial use at the free tier up to reasonable traffic limits. For high-traffic commercial deployments, self-hosting the open-source viewer is the safest route.

Q: How does SuperSplat compare to Luma AI's web viewer for sharing splats?

Luma AI's web viewer is polished and mobile-friendly but is a closed platform — you can't export the viewer code or self-host it, and Luma controls the data. SuperSplat is open-source, engine-agnostic, and gives you direct .ply export with no vendor lock-in. Luma AI's capture pipeline (iOS app + cloud processing) is easier for non-technical users. SuperSplat wins on developer control, embeddability, and integration with the PlayCanvas engine ecosystem. For pure sharing with non-technical audiences, Luma AI's generated links have a slight polish edge; for anything that goes into a production app, SuperSplat is the better foundation.