I developed a viewer that allows browsing 3D Gaussian Splatting (3DGS) files in the browser. This article explains an overview of 3DGS, why a regular PLY Viewer cannot display it, and the implementation of a dedicated viewer.
Demo:
Why a Regular PLY Viewer Cannot Display 3DGS
Since 3DGS files have the .ply extension, they appear to be handled the same way as regular PLY files. However, they are not displayed correctly when loaded with Three.js’s PLYLoader.
Differences Between Regular PLY Files and 3DGS PLY Files
Regular PLY (Mesh/Point Cloud):
3DGS PLY:
What Happens When Loaded with PLYLoader
Three.js’s PLYLoader cannot understand 3DGS-specific properties. Loading results in the following problems:
- Missing color information:
f_dc_0,f_dc_1,f_dc_2are spherical harmonic function coefficients, not RGB colors, so correct colors are not displayed - Displayed as simple point cloud: The shape of each Gaussian (scale/rotation) is ignored and displayed as mere points
- Reduced rendering quality: The smooth interpolation characteristic of Gaussian splatting is not performed
Why a Dedicated Renderer Is Needed
To correctly display 3DGS, the following processing is required:
- Depth sorting: Sort all Gaussians by distance from the viewpoint (every frame)
- 2D projection: Project 3D Gaussians to 2D ellipses
- Alpha blending: Composite from back to front
These need to be efficiently processed in GPU shaders and cannot be handled by regular point cloud/mesh renderers. Therefore, the dedicated library Spark.js was used.
What is 3D Gaussian Splatting?
3D Gaussian Splatting (3DGS) is an innovative 3D representation technique presented at SIGGRAPH in 2023. Compared to conventional NeRF (Neural Radiance Fields), it enables real-time rendering and efficiently represents high-quality 3D scenes.
Comparison with Conventional Technologies
| Technology | Rendering Speed | Quality | Editability |
|---|---|---|---|
| Mesh | Very fast | Medium | High |
| Point Cloud | Fast | Low-Medium | High |
| NeRF | Slow (seconds) | High | Low |
| 3DGS | Real-time | High | Medium |
How 3DGS Works
3DGS represents a 3D scene as a collection of many “3D Gaussians” (ellipsoid-shaped points).
Each Gaussian has the following parameters:
- Position: Center coordinates in 3D space
- Covariance: Shape and orientation of the ellipsoid
- Opacity: Transparency
- SH coefficients (Spherical Harmonic coefficients): View-dependent color information
During rendering, these Gaussians are projected (splatted) onto the 2D screen and composited with alpha blending.
Supported File Formats
PLY Format (.ply)
The most common 3DGS format. Both standard PLY and compressed PLY (compressed.ply) are supported.
SPLAT Format (.splat)
A lightweight binary format suitable for web delivery.
KSPLAT Format (.ksplat)
An efficient format developed by Kevin Kwok.
SPZ Format (.spz)
A compressed format proposed by Niantic that can significantly reduce file size.
Implementation Details
Libraries Used
| Library | Version | Purpose |
|---|---|---|
| Three.js | 0.170.0 | 3D rendering foundation |
| OrbitControls | Bundled with Three.js | Camera controls |
| Spark.js | 0.1.10 | 3DGS rendering |
About Spark.js
Spark.js is a library for handling 3D Gaussian Splatting with Three.js. It uses WebGL shaders to efficiently sort and splat Gaussians.
Using Import Maps
ES Modules are used to load libraries via CDN.
This enables the use of the latest JavaScript module system without build tools.
Automatic Camera Adjustment
After model loading, the camera position is automatically adjusted based on the bounding sphere.
Model Rotation Feature
3DGS files may have different orientations depending on the coordinate system used during creation. Sliders and preset buttons are provided for adjustment.
Drag & Drop Implementation
An overlay UI is implemented to allow loading new files via drag and drop even while a file is being loaded.
IIIF Support
The viewer supports IIIF Presentation API 3.0 manifests. It extracts and loads 3DGS file URLs from manifests.
Performance Considerations
Pixel Ratio Limitation
GPU load on high-resolution displays is reduced.
Memory Management
When loading a new model, the previous model is properly disposed of.
0
Limitations
| Limitation | Description |
|---|---|
| File size | Depends on browser memory limits (roughly up to several hundred MB) |
| Number of Gaussians | Up to several million (depends on GPU performance) |
| Mobile | Works but large files are not recommended |
Future Improvements
- LOD support: Switching detail levels based on viewpoint distance
- Multiple model support: Displaying multiple 3DGS files simultaneously
- Animation: 4D Gaussian Splatting support
- Export: Conversion to other formats
References
- 3D Gaussian Splatting for Real-Time Radiance Field Rendering - Original paper
- Spark.js - 3DGS rendering library
- Three.js - WebGL 3D library
- Luma AI - 3DGS capture service
- Polycam - 3D scanning app (3DGS output supported)