Git Product home page Git Product logo

gsplat.js's Introduction

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 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.
  • Editor Demo: Try new real-time updates and editing features in the gsplat.js editor.
  • 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.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 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:

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

gsplat.js's People

Contributors

dylanebert avatar jeyemwey avatar xenova avatar ruslanjabari avatar spark323 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.