gsplat.js (with AR example)

This fork has an added AR example

The example should work with the base library with standard gaussian splats. Gaussian splats from dream gaussian they often have a lot of black/white gaussian so you may want to filter those out. I've added some of these filters to the library so you may want to rebuilt and route the built package package.json .

in the package.json,

"dependencies": {
    "gsplat": "file:../gsplat.js",
    "three": "^0.158.0"
}

xr also requires service on ssl for local setups self signed certificates work fine!

JavaScript Gaussian Splatting library

gsplat.js is an easy-to-use, general-purpose, open-source 3D Gaussian Splatting library, providing functionality similar to three.js but for Gaussian Splatting.

Quick Start

• Live Viewer Demo: Explore this library in action in the 🤗 Hugging Face demo. Note: May not work on all devices; use Bonsai for the lowest memory requirements.
• Code Example: Start coding immediately with this jsfiddle example.

Installation

Prerequisites: Ensure your development environment supports ES6 modules.

1. Set Up a Project: (If not already set up)

   Install Node.js and NPM, then initialize a new project using a module bundler like Vite:

   npm create vite@latest gsplat -- --template vanilla-ts

2. Test Your Environment:

   cd gsplat
   npm install
   npm run dev

3. Install gsplat.js:

   npm install --save gsplat

Usage

Creating a Scene

• Import gsplat.js components and set up a basic scene.
• Load Gaussian Splatting data and start a rendering loop.

(in src/main.ts if you followed the Vite setup)

import * as SPLAT from "gsplat";

const scene = new SPLAT.Scene();
const camera = new SPLAT.Camera();
const renderer = new SPLAT.WebGLRenderer();
const controls = new SPLAT.OrbitControls(camera, renderer.domElement);

async function main() {
    const url = "https://huggingface.co/datasets/dylanebert/3dgs/resolve/main/bonsai/bonsai-7k.splat";

    await SPLAT.Loader.LoadAsync(url, scene, () => {});

    const frame = () => {
        controls.update();
        renderer.render(scene, camera);

        requestAnimationFrame(frame);
    };

    requestAnimationFrame(frame);
}

main();

This script sets up a basic scene with Gaussian Splatting data loaded from URL and starts a rendering loop.

FAQ

Q: Can I use .ply files?

A: Yes, gsplat.js supports .ply files. See the ply-converter example for details on how to convert .ply to .splat. Alternatively, convert PLY files from URL in this jsfiddle example.

Q: What are .splat files?

A: .splat files are a compact form of the splat data, offering quicker loading times than .ply files. They consist of a raw Uint8Array buffer.

License

This project is released under the MIT license. It is built upon several other open-source projects:

• three.js, MIT License (c) 2010-2023 three.js authors
• antimatter15/splat, MIT License (c) 2023 Kevin Kwok
• UnityGaussianSplatting, MIT License (c) 2023 Aras Pranckevičius

Please note that the license of the original 3D Gaussian Splatting research project is non-commercial. While this library provides an open-source rendering implementation, users should consider the source of the splat data separately.

Contact

Feel free to open issues, join the Hugging Face Discord, or email me directly at [email protected].