Skip to content

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

License

Notifications You must be signed in to change notification settings

akbartus/Gaussian-Splatting-WebViewers

Repository files navigation

Gaussian-Splatting-WebViewers

screenshot.mp4

Description / Rationale

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.

Instructions

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/[email protected]/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".

Converting .ply to .splat and compression

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.

Updates

  • 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.

Tech Stack

The project is powered by AFrame and Three.js. Truck.splat file was taken from Mark Kellog's repository.

Demo

To see web viewers at work, visit the following pages:

About

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

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published