Skip to content

Add 3D gaussian splats support #5658

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
dmarcos wants to merge 2 commits into
base: master
Choose a base branch
from
+952 −0
Open

Add 3D gaussian splats support #5658

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9b0d05d
Add 3D gaussian splats support
dmarcos Jan 29, 2025
a12a286
Address comments
dmarcos Feb 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions .eslintrc.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,13 @@
"ecmaVersion": 6
}
},
{
/* This module uses ES8 async / await due to WebXR Anchor Module integration */
Copy link
Contributor

@mrxz mrxz Feb 9, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Comment incorrectly refers to WebXR Anchor Module. That being said, I don't believe async/await is a hard requirement for splat.js and it can be rewritten in the A-Frame code style for consistency, avoiding this exception altogether.

"files": ["./src/components/splat.js"],
"parserOptions": {
"ecmaVersion": 8
}
},
{
/* This code is external, and the ES5 restrictions do not apply to it. */
"files": ["./src/lib/**/*.js"],
Expand Down
26 changes: 26 additions & 0 deletions docs/components/splat.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
---
title: splat
type: components
layout: docs
parent_section: components
source_code: src/components/splat.js
examples: []
---

A loader for 3D Gaussian Splats files.

## Example
```html
<a-scene>
<a-entity splat="src: https://url.to/scene.splat;" ></a-entity>
</a-scene>
```

## Properties

| Property | Description | Default Value |
|---------------|---------------------------------------------------|---------------|
| src | URL to the splat file | |
| cutoutEntity | entity to define a cutout area (splats outside won't render) | |
| pixelRatio | To downscale resolution for better performance | 1 |
| xrPixelRatio | Downscale resolution in VR for better performance | 0.5 |
1 change: 1 addition & 0 deletions examples/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -139,6 +139,7 @@ <h2>Examples</h2>
<li><a href="showcase/composite/">Composite</a></li>
<li><a href="showcase/curved-mockups/">Curved Mockups</a></li>
<li><a href="showcase/dynamic-lights/">Dynamic Lights</a></li>
<li><a href="showcase/gaussian-splats/">Gaussian Splats</a></li>
<li><a href="showcase/hand-tracking/">Hand Tracking</a></li>
<li><a href="showcase/hand-tracking-grab-controls/">Hand Tracking Grab Controls</a></li>
<li><a href="showcase/ui/">User Interface</a></li>
Expand Down
22 changes: 22 additions & 0 deletions examples/showcase/gaussian-splats/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>3D Gaussian Splatting</title>
<meta name="description" content="3D Gaussian Splatting — A-Frame">
<script src="../../../dist/aframe-master.js"></script>
</head>
<body>
<a-scene renderer="antialias: false">
<a-entity rotation="10 0 0">
<a-entity position="1.2 1.2 -2.7" animation="property: rotation; to: 0 360 0; dur: 10000; easing: linear; loop: true">
<a-sphere position="0 0 0.5" radius="0.2" color="#EF2D5E"></a-sphere>
<a-box position="0.5 0 0" rotation="0 45 0" height="0.4" width="0.4" depth="0.4" color="#4CC3D9" shadow></a-box>
<a-cylinder position="0 0 -0.5" radius="0.25" height="0.4" color="#FFC65D" shadow></a-cylinder>
</a-entity>
</a-entity>
<a-entity splat="src: https://huggingface.co/cakewalk/splat-data/resolve/main/truck.splat;" rotation="0 0 0" position="0 1.5 -2"></a-entity>
<a-sky color="#000"></a-sky>
</a-scene>
</body>
</html>
1 change: 1 addition & 0 deletions src/components/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ import './rotation.js';
import './scale.js';
import './shadow.js';
import './sound.js';
import './splat.js';
import './text.js';
import './tracked-controls.js';
import './visible.js';
Expand Down
Loading
Loading