Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/huggingface/gsplat.js

JavaScript Gaussian Splatting library.
https://github.com/huggingface/gsplat.js

Last synced: about 1 month ago
JSON representation

JavaScript Gaussian Splatting library.

Lists

README

        

# gsplat.js

#### 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](https://github.com/mrdoob/three.js) but for Gaussian Splatting.

### Quick Start

- **Live Viewer Demo:** Explore this library in action in the 🤗 [Hugging Face demo](https://huggingface.co/spaces/dylanebert/igf). Note: May not work on all devices; use `Bonsai` for the lowest memory requirements.
- **Editor Demo:** Try new real-time updates and editing features in the [gsplat.js editor](https://huggingface.co/spaces/dylanebert/gsplat-editor).
- **Code Example:** Start coding immediately with this [jsfiddle example](https://jsfiddle.net/wdn6vasc/).

### Installation

**Prerequisites**: Ensure your development environment supports ES6 modules.

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

Install [Node.js](https://nodejs.org/en/download/) and [NPM](https://www.npmjs.com/get-npm), then initialize a new project using a module bundler like [Vite](https://vitejs.dev/):

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

2. **Test Your Environment:**

```bash
cd gsplat
npm install
npm run dev
```

3. **Install gsplat.js:**

```bash
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)

```js
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.canvas);

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](https://github.com/dylanebert/gsplat.js/blob/main/examples/ply-converter/src/main.ts) for details on how to convert `.ply` to `.splat`. Alternatively, convert PLY files from URL in this [jsfiddle example](https://jsfiddle.net/2sq3pvdt/1/).

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

> ⚠️ The `.splat` format does not contain SH coefficients, so colors are not view-dependent.

**Q: Can I convert .splat files to .ply?**

A: Yes, see the commented code in the [ply-converter example](https://github.com/dylanebert/gsplat.js/blob/main/examples/ply-converter/src/main.ts). Alternatively, convert `.splat` to `.ply` from URL in this [jsfiddle example](https://jsfiddle.net/aL81ds3e/).

> ⚠️ When converting `.ply` -> `.splat` -> `.ply`, SH coefficients will be lost.

### License

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

- [three.js](https://github.com/mrdoob/three.js), MIT License (c) 2010-2023 three.js authors
- [antimatter15/splat](https://github.com/antimatter15/splat), MIT License (c) 2023 Kevin Kwok
- [UnityGaussianSplatting](https://github.com/aras-p/UnityGaussianSplatting), MIT License (c) 2023 Aras PranckeviÄŤius

Please note that the license of the original [3D Gaussian Splatting](https://github.com/graphdeco-inria/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](https://hf.co/join/discord), or email me directly at [[email protected]](mailto:[email protected]).