Skip to content

🧊 A Web Render Engine for rendering Interactive scenes with any 3D Asset from GLB, Huge-scale Point clouds, 3D Textured Meshes to 3D Gaussian Splats ✨

License

Notifications You must be signed in to change notification settings

reyanshsolis/web-render-engine

 
 

Repository files navigation

🧊 Web Render Engine for 3D Assets - 3D Gaussian Splats & more! ✨

Created by: Michael Jernil, 3D Graphics Engineer & Enthusiast (https://www.linkedin.com/in/michael-jernil/)

For Blog Post "Understanding 3D Gaussian Splatting ✨ via Render Engines"

Demo

showcase.mp4

Example Hosted Splat Url - https://huggingface.co/cakewalk/splat-data/resolve/main/nike.splat

Created w/ React + TypeScript + Vite using Libraries - React Three Fiber + Three.js + luma-web

DISCLAIMER: This Repo is currently a Work-In-Progess (at it's initial stages). More updates will be Coming soon!

Features ⭐️

  • View any 3D Gaussian Splat(.splat) with URL
  • View glTF Assets
  • Gizmo transform controls & Base grid
  • Gizmo for Easy Navigation
  • Deployed Vercel App

Work in Progress 🚀

  • View Huge-scale 3D Textured Meshes (3D Tiles) streamed from cloud (or) local storage
  • View Huge-scale Point Clouds (Potree) streamed from cloud (or) local storage
  • Enable Viewing of local/hosted glTF files
  • Support for setting up interactive 3D scenes with SPLAT, glTF & other types of 3D assets in the same space!
  • More Sample assets! 🏗️
  • UI Enhancements 😇

Render Engine - First Principles 🧊

Screenshot 2024-02-01 at 12 07 41 PM

3D Gaussian Splatting through Render Engine - First Principles ✨

Screenshot 2024-02-01 at 12 16 41 PM

With the latest advancements in Computer Graphics, there is a new Pandora's box that has been opened called - '3D Gaussian Splatting'. It works on the concept that real world scenes could be efficiently represented as 3D Gaussian Splats (3DGS) - as an alternative to Traditional Mesh representation which involves - Mesh, Textures, Lighting etc.

This 3DGS representation has the primary advantage that huge real-world scenes which are otherwise generated by classic photogrammetry & complex to render using traditional computer graphics techniques can now be represented as 3D Gaussian Splats, which you can imagine as 3D paint strokes with a centered color and transparency values around the center, which also takes into account from where/how the scene is being viewed (aka the Camera). When multiple of these strokes are rendered with proper blending of alpha transparency from each splat, it can form a near realistic 3D image that can be viewed from any angle. 🔮

Get Started 📺

Clone Repo

Use git clone <repo-link> to clone the repo to your PC

Install the Packages

Use npm i to install the necessary packages

Run the 3D Viewer

Use npm run dev to run the viewer in development mode

Viewer

Now you can see the Render Engine running on http://localhost:5173. You can navigate, interact & play around with the 3D Assets!

Follow 👥

About

🧊 A Web Render Engine for rendering Interactive scenes with any 3D Asset from GLB, Huge-scale Point clouds, 3D Textured Meshes to 3D Gaussian Splats ✨

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 80.2%
  • CSS 11.9%
  • JavaScript 4.3%
  • HTML 3.6%