KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#dsh #dsh-plugin #ai-agents #developer-tools #ai-agent #claude-code #mcp #typescript #codex #cli #rust #deepseek-harness

web-render-engine

★ 76 Open GitHub ↗

🧊 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 ✨

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 🧊 Web Render Engine
#### Created w/ `React + TypeScript + Vite` using Libraries - `React Three Fiber + Three.js + drei`

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

For Blog post (link) - https://radiancefields.com/understanding-3d-gaussian-splatting-via-render-engines/

### Demo
Hosted at https://webrenderengine.vercel.app/

https://github.com/user-attachments/assets/6ad047ff-cadd-4057-9ad0-a687cf1e0013

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

#### 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

### Features we are looking to build 🚀
- glTF loading (Local or URL)
- Dynamic Skybox (Day/Night/Indoor UI selector) 
- SPLAT loading (Local)
- USD loading (Local)
- Sample assets
- Snapshot feature
- Object selection & metadata panel (name, TRS etc.)
- Scene editor
- View dependent loading
- Add Lights

### Render Engine - First Principles 🧊

### 3D Gaussian Splatting through Render Engine - First Principles ✨
<img width="855" alt="Screenshot 2024-02-01 at 12 16 41 PM" src="https://github.com/mikejernil/web-render-engine/assets/43872457/8c19c7dd-9253-43c9-a45d-0a3fc80a2c2d">

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 👥

- **What The Graphics!** Blog for Simple resources on Computer Graphics ⭐️
  - LinkedIn (https://www.linkedin.com/company/98858074/)
- **Radiance Fields** Blog for anything new on Radiance Fields (NeRFs & Gaussian Splatting!).
  - LinkedIn (https://www.linkedin.com/company/radiancefields/) & Website (www.radiancefields.com)
- LinkedIn - https://www.linkedin.com/in/michael-jernil/
- Twitter/X - https://twitter.com/jernil_dev

web-render-engine

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README