3D / WebGL / Brand Publishing
Create Gaussian Splatting Website: Integrating 3DGS into the Browser
Gaussian Splatting Website: This is how companies can deliver photorealistic 3DGS scenes effectively to the browser — without a plugin, without an app, on smartphones and desktops.
CLARENCE DADSON · JUNE 12, 2026 · 9 MIN. READ TIME
01
What exactly is 3D Gaussian Splatting?
Those encountering the term for the first time stumble over the somewhat unwieldy name. Behind it lies a rendering method that was presented by researchers around Bernhard Kerbl in 2023 and has since been turning the 3D industry on its head.
The principle: A real scene – a racetrack, a venue, a product – is photographed or filmed from many angles using cameras. Millions of small, semi-transparent 3D ellipsoids, called Gaussians. Each of these ellipsoids carries information about position, shape, color, and transparency. In real-time, they are assembled on the screen - the result is a photorealistic image that behaves correctly when the camera moves.
The key difference from classic 3D models: there's no mesh, no UV maps, no rigging. The scene is literally built from points of light. This makes it photorealistic on the one hand – reflections, light, and fine surfaces are exactly recreated from the original photos – and also renderable in real-time for WebGL.
MILLIONS OF SEMI-TRANSPARENT ELLIPSOIDS FORM A PHOTOREALISTIC IMAGE IN REAL TIME.
02
The real problem: The path from scan to browser
Anyone who believes you can just take a 3DGS file and upload it to a website is greatly underestimating the effort involved. The raw material from training — a
.ply—file — is typically between 500 megabytes and 2 gigabytes in size. Upload it directly to the web? Not an option.
Added to that are the demanding requirements of a brand website:
- Fast charging time and earlier visible image build-up also on mobile devices
- Full browser compatibility, including Mobile Safari
- No plugins, no app installation
- Integration with existing CMS systems such as Contentful or WordPress
- Possibility for interactivity: hot spots, camera control, storytelling elements
- Static fallback image for older devices
03
Step 1: Compression with SuperSplat
The first step after your workout is compression. The free, browser-based tool SuperSplat PlayCanvas takes on exactly this task.
SuperSplat opens the raw
.ply-file, which allows the scene to be visually cleaned up: remove floats — which are Gaussians that float in empty space and do not contribute to the image — trim scenes, define the cut, and reduce the total number of Gaussians. For desktop browsers, a single SOG file is considered the standard for smaller scenes; starting at 1 million Gaussians, SuperSplat automatically generates LOD levels for streamed SOGs when publishing; for mobile devices, streamed LODs and a reduced render load are particularly important.
The result will be displayed as
.sog-File exported — to the native format of the PlayCanvas ecosystem. .sog stands for Spatially Ordered Gaussians and brings two crucial features: it is highly compressed (typically about 15- to 20-fold smaller than the original.ply file) and supports streaming over multiple LOD levels — the browser starts rendering while the file is still loading.
For comparison: the widespread
.splatThe format is uncompressed and does not support streaming. .ksplatThe format is compressed, but not natively integrated. .sog is an efficient choice for web deployment in the PlayCanvas stack. 04
Step 2: The Right Viewer — and Why PlayCanvas Has the Edge
There are several ways to render a 3DGS scene in the browser:
Luma AI It offers a hosted embed code—iframe or JavaScript—that requires no infrastructure of your own and works well on mobile devices. It’s a quick solution for simple display without interactivity. However, it’s not enough for a branded experience with a custom look, hotspots, and storytelling.
Polycam offers similar features: easy embedding, CMS-friendly, but with little control over the appearance or flow of the experience.
mkkellogg/GaussianSplats3D is an open-source package based on Three.js that can be integrated into React or Next.js projects as an npm module. Full developer control—but you have to build every interactive feature from scratch yourself. No editor, no user interface for non-developers.
PlayCanvas plays in a different league. The open-source WebGL engine was **added native 3DGS support in 2024**. What sets PlayCanvas apart from everything else: The scene and all interactive elements — hotspots, animations, UI, audio — run in a single WebGL context. There is no need to stitch together a splat viewer with a separate UI layer. The entity-component system allows you to attach JavaScript scripts directly to splat objects in the scene.
In addition: PlayCanvas and SuperSplat share the same format. The
.sogPlayCanvas loads the file exported by SuperSplat directly—no conversion step, no intermediate stage. Frequently asked questions about the Gaussian Splatting website
A rendering method that translates a real scene from many photos into millions of semi-transparent 3D ellipsoids that store position, shape, color, and transparency. The result looks photorealistic and can be viewed in real time from any angle. The method was introduced in 2023 by the research group led by Bernhard Kerbl.
Because the raw data is too large: An unprocessed .ply file typically ranges from 500 MB to 2 GB. For the browser, the data must be compressed, reduced to a sensible number of Gaussians, and converted into a streaming-compatible format.
There is no rigid upper limit for mobile devices today. Moreover, performance depends on Gaussian number, resolution, overdraw, and LOD strategy. On the desktop, significantly higher values are possible.
Using SuperSplat, which cleans up the scene and exports it in the .sog format. This format is about 15-20 times smaller than the original and supports streaming over multiple LOD levels – the scene becomes visible before all data is loaded.
PlayCanvas is a strong option, since the engine received native support for Gaussian Splatting in 2024. The advantage: Splats, classic 3D objects, UI, and interaction run in a single WebGL context, instead of having multiple renderers running side by side.
Yes. StorySplat is a low-code tool that allows you to create hotspots, set up camera tours, and build guided experiences that can then be exported and integrated into a CMS. Together with SuperSplat, the .sog format, and PlayCanvas, this creates a seamless chain without conversion breaks.
TOOL playcanvas.com
05
Step 3: StorySplat or your own viewer — Interactive experiences without code
A possible authoring level for editorial brand websites: StorySplat.
StorySplat is a low-code authoring tool built on the PlayCanvas engine. It's not primarily aimed at developers, but at producers and creative technologists—people who want to tell a story without delving into engine code.
What StorySplat Can Do:
- .Import .sog files directly
- Place hotspots visually at 3D positions and enrich them with text, media, or links
- Define camera moves and orbit sequences in a visual editor.
- Configure scroll or click-controlled transitions between scene states
- Viewers can be integrated via a WordPress plugin, Webflow integration, npm package, or embed — compatible with any CMS
The result is a PlayCanvas runtime bundle. This means: what StorySplat generates is not an external system — it is the same PlayCanvas core that a developer can extend with their own scripts at any time once the no-code limits are reached. No stack switching, no re-exports, no friction.
TOOL storysplat.com
This model works in two stages: Producers and Creative Technologists work in StorySplat and can build and publish experiences independently. Developers extend with PlayCanvas scripts as needed — without switching stacks, without format conversion.
06
Conclusion
3D Gaussian Splatting has arrived on the web. The toolchain of the
.ply is perfected, documented, and ready for use in creating a finished interactive experience. Brands that invest in this workflow now will build a lead that will be difficult to catch up to in the coming years.
The PlayCanvas Ecosystem — SuperSplat for compression,
.sog — is the most coherent and best integrated stack currently available. Interested in a 3DGS web experience for your brand?
We accompany you from 3D scan all the way to the finished, high-performance web experience — photorealistic, interactive, CMS-integrated.
DESIGN4REAL · XR & METAVERSE AGENCY MUNICH
