screenshot.mp4
This is an experimental project demonstrating various implementations of Gaussian Splatting (a real-time renderer for 3D Gaussian Splatting for Real-Time Radiance Field Rendering) viewers for the web, which are powered by Three.js and A-Frame. First gaussian splatting viewer (Three.js version) was written based on example created by Quadr as A-Frame component (MIT Licence, Copyright (c) 2023 Kevin Kwok, Junya Kuwada). The second web viewer (Three.js and A-Frame versions) is the simplified and adapted version of Mark Kellog's GaussianSplats3D Three.js example (MIT License, Copyright (c) 2023 Mark Kellogg).
All these repositories, originally, are based on Kevin Kwok's WebGL implementation of Gaussian Splatting(MIT License, Copyright (c) 2023 Kevin Kwok). For further details, please refer to respective repositories.
To use a web viewer locally copy Three.js or A-Frame version of the web viewer to your local server. For using A-Frame component, copy the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Gaussian Splatting: A-Frame Demo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src='https://aframe.io/releases/1.4.2/aframe.min.js'></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.147.0/examples/js/controls/OrbitControls.js"></script>
<script src="gaussian-splatting.js"></script>
</head>
<body>
<a-scene>
<a-entity gaussian-splatting="splatUrl: https://cdn.glitch.me/7eb34fc5-dc2f-4b3b-afc1-8eb4a88210ba/truck.splat; initialPosition: -3 -2 -3; downsampleFactor: 1; vertexCount: 1200000; splatPixelDiscard: 2.0; slider: true"></a-entity>
</a-scene>
</body>
</html>
A-Frame component has the following schemas, which could be changed:
- splatUrl: { type: "string", default: "https://cdn.glitch.me/7eb34fc5-dc2f-4b3b-afc1-8eb4a88210ba/truck.splat" } - url/link to splat file. Accepts original .ply file generated or .splat file, which is converted and compressed (link to converter will be provided soon)
- initialPosition: { type: "string", default: "0 0 0" } - initial position of camera.
- downsampleFactor: { type: "int", default: 1 } - downsampling factor. 1 is original view. Value higher than 1 does downsampling.
- vertexCount: { type: "int", default: 1000000 } - the count of vertexes, which will be displayed on first load and used as max value in a slider.
- splatSize: { type: "number", default: 1159.5880733038064 } - the value represents camera Fx and Fy and used as max value in a slider.
- splatPixelDiscard: { type: "float", default: 2.0 } - value for discarding pixels.
- slider: { type: "boolean", default: true } - enable or disable sliders (vertexCount and splatSize).
- splatColor: { type: "string", default: "grayscale" } - splat color scheme/palette. Can be "color", "blackAndWhite", "grayscale", "green".
In order to convert .ply file, which is created after following 3D Gaussian Splatting for Real-Time Radiance Field Rendering tutorial, you can use the following tool, which is simplified and reduced version of Kevin Kwok's WebGL implementation of Gaussian Splatting (MIT License, Copyright (c) 2023 Kevin Kwok).
Open this link, select compression value (basically reducing the number of vertexes) from 1 (original) to 10 (max), select format to convert to, confirm and then drag your [name].ply file on window, and wait for it to do the conversion and download the file. This resulting file (.ply or .splat), then, can be used with first web viewer (https://gaussian-splatting2.glitch.me/) and with this (https://github.com/antimatter15/splat).
Please note: Kevin Kwok's work already contains this converter.
The possibility of changing the size of a splat file in splat converter.- Making web viewer 1 work faster.
Adding new features to A-Frame component.- Adding converter for the second web viewer.
The project is powered by AFrame and Three.js. Truck.splat file was taken from Mark Kellog's repository.
To see web viewers at work, visit the following pages: