Three.js - 3D Gaussian Splattting Examples

3D Gaussian Splatting with Three.js
This is a Three.js-based implemetation of a renderer for 3D Gaussian Splatting for Real-Time Radiance Field Rendering, a technique for generating 3D scenes from 2D images. Their project is CUDA-based and needs to run natively on your machine, but I wanted to build a viewer that was accessible via the web.

The 3D scenes are stored in a format similar to point clouds and can be viewed, navigated, and interacted with in real-time. This renderer will work with the original .ply files generated by the INRIA project. It also accepts both my own custom .ksplat files or the standard .splat files, which are both trimmed-down versions of the original .ply.


Demo scenes
Garden
Low
High
Truck
Low
High
Stump
Low
High
Bonsai
Low
High
Dynamic scenes
Open
AR/VR
Open


View a .ply, .ksplat, or .splat file

(No file chosen)
Minimum alpha:  (1 - 255)
Anti-aliased
2D scene
Camera up: 
Camera position: 
Camera look-at: 
SH level: (0, 1, or 2)

View    Reset


Convert a .ply or .splat to .ksplat

(No file chosen)
Minimum alpha:  (1 - 255)
Scene center: 
Compression level: (0, 1, or 2)
SH level: (0, 1, or 2)
Advanced compression options
Block size:  ( >= 0.1 )
Bucket size  (2 - 65536)

Convert


Mouse input
  • Left click to set the focal point
  • Left click and drag to orbit
  • Right click and drag to pan
Keyboard input
I
Display debug info panel
C
Toggle mesh cursor
U
Toggle controls orientation marker
Rotate camera-up counter-clockwise
Rotate camera-up clockwise
P
Toggle point-cloud mode
O
Toggle orthographic mode
=
Increase splat scale
-
Decrease splat scale