How to Turn a 3D Gaussian Splat Into a Browser App with PlayCanvas

⬅️ Back to Tutorials

Gaussian Splatting turns a set of photographs into a photorealistic 3D scene you can orbit around in a browser. You’ve seen the demos of cathedrals and museum pieces. This tutorial shows you how to do it yourself; capture, process, and publish.

TLDR:

Shoot 50-200 photos of a scene from every angle (phone works)
Process them into a splat with a free tool (PostShot, Luma AI)
Edit and compress in SuperSplat, export as SOG
Build a web viewer with PlayCanvas Web Components (one HTML file)

Prerequisites: A phone or camera, a computer with a CUDA GPU (optional for cloud processing), and Node.js 18+.

Step 1: Capture the scene

Shoot 50-200 overlapping photos covering your subject from every angle. Move around the subject, not just in front of it. Each photo should overlap its neighbors by 60-80%. Avoid motion blur, reflections, and moving objects.

Pro tip: Video works too. Walk slowly around your subject, then extract every Nth frame. 30 seconds of slow 4K video at 30fps yields 900 frames; extract every 5-10th frame for a good starting set.

Outdoors with moving shadows or wind is harder. Indoors with stable lighting is easiest.

Step 2: Process into a splat

You need a Gaussian Splatting trainer. The easiest entry points:

PostShot (free desktop app, CUDA GPU required): drag in your images, click train. Outputs a .ply file.
Luma AI (cloud, web-based): upload photos, wait for processing. Download the result as .ply.
Nerfstudio + gsplat (open source, advanced): pip install nerfstudio then ns-train gaussian-splatting --data ./images

Training takes anywhere from a few minutes (small scene on a fast GPU) to a couple hours (large scene on cloud). The output is a .ply file with your splat data.

Step 3: Edit and compress in SuperSplat

Open SuperSplat Editor. Drag in your .ply file.

Crop: remove unwanted regions (background, capture artifacts)
Clean: delete floating floaters and stray splats
Compress: export as .sog (PlayCanvas’s compressed open format, typically 80-90% smaller than raw PLY)

SOG is the format you’ll serve on the web. A clean 10MB compressed splat loads faster than a raw 100MB PLY.

Step 4: Publish as a web app

The fastest path is PlayCanvas Web Components; a single HTML file with no build step.

<!DOCTYPE html>
<html>
  <head>
    <script
      type="module"
      src="https://playcanvas.github.io/web-components/v2.3/pcui.js"></script>
    <link
      rel="stylesheet"
      href="https://playcanvas.github.io/web-components/v2.3/pcui.css" />
  </head>
  <body>
    <pc-app splat-url="https://your-site.com/splat.sog" mouse-control="orbit">
      <pc-gsplat></pc-gsplat>
    </pc-app>
  </body>
</html>

Upload index.html and your .sog file together. Host on any static server (Cloudflare Pages, Netlify, GitHub Pages). Done! You now have an interactive 3D viewer.

For more control (custom UI, animations, multi-scene navigation), use the Engine API; it’s the same approach the Grace Cathedral experience uses, with WebGPU compute shaders for fast splat sorting and on-demand rendering that stops drawing when the camera stops moving.

Cleanup

The .ply file is only needed as an intermediate. Keep the SOG for production. Store your source photos in case you need to retrain.

If it breaks:

Shimmering or ghosting: you didn’t capture enough angles or the lighting changed during capture. Re-shoot with more overlap.
Splat looks flat: the trainer couldn’t recover depth. Make sure you circled the subject fully, not just shot from one side.
Low framerate: reduce the splat count in SuperSplat export settings or enable LOD streaming. 3.5 million splats is a desktop target; mobile should aim for 1-2 million.
SOG doesn’t load: verify the MIME type on your server. .sog should serve as application/octet-stream.