Gaussian Splatting

This is a simple demo to provide some brief technical explanations and creative jumping off points for exploring Gaussian Splatting in your Three.js project.

Live Demo

Video recording of my accompanying presentation from Creative Coding Toronto, Jan 25th 2024

Resources

• Labs.Monks Report - Gaussian Splatting: Accessible High-End 3D

  a great overview of the past, present, future of this technique

• MrNeRF's "Awesome" 3D Gaussian Splatting Resources

  a curated list of resources for 3D Gaussian Splatting

• Luma AI

  Online platform to create a Gaussian Splatting model from a video or set of images

• Polycam 3D Gaussian Splatting

  alternative to Luma

• Nerfstudio's Splatfacto

  compute a Gaussian Splatting model from a set of images locally

• Alex Evan's Suggestions for Gaussian Splatting

  Alex Evans was one of the tech leads on the Media Molecule game "Dreams" which uses a similar technique to render 3D scenes to great effect. Check out his Umbra Ignite talk about the rendering tech in Dreams

Development

Requirements

• Node.js
• Pnpm

Development

# Install dependencies
pnpm install

# Start dev server
pnpm dev

Important Files

• src/App.tsx - Main application entry point. Contains React Three Fiber scene and text dialog.
• src/Splat.tsx - Clone of @react-three/drei's Splat component with some modifications to add custom materials.
• src/materials/ - Custom materials to demo interesting effects to use Gaussian Splatting. Any customizations from the base material are commented with // CUSTOM + // END CUSTOM.

splat

splat

splatter-three.js