cutoutEntity and workflow documentation (#18)

* experiments with scanning * Create static.yml * add cutoutEntity selector property * add cutout box example * update initial camera position to show both splats * Delete .github/workflows/static.yml * clean up readme * restore original index.html * remove splats You can use the following URLs to access the model: https://huggingface.co/quadjr/aframe-gaussian-splatting/resolve/main/luma-seal.splat https://huggingface.co/quadjr/aframe-gaussian-splatting/resolve/main/polycam-seal.splat * migrate entity cutout demo to separate file * simpler readme, put splat credits in cutout-demo.html * fix line feed
quadjr · Oct 20, 2023 · 6778176 · 6778176
1 parent 993656a
commit 6778176
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -3,17 +3,24 @@
 This component is an A-Frame implementation of real-time rendering for [3D Gaussian Splatting for Real-Time Radiance Field Rendering](https://repo-sam.inria.fr/fungraph/3d-gaussian-splatting/).  
 This code is derived from the WebGL implementation developed by [antimatter15](https://github.com/antimatter15/splat).
 
-### Demo page
+### Demo pages
 
-Needs few seconds to load sploats.  
-https://quadjr.github.io/aframe-gaussian-splatting/
+Needs few seconds to load splats.  
+* Demo: https://quadjr.github.io/aframe-gaussian-splatting/
+* Cutout demo: https://quadjr.github.io/aframe-gaussian-splatting/cutout-demo.html
 
 ### Properties
 
 | Property  | Description                 | Default Value |
 | --------  | -----------                 | ------------- |
 | src       | url of splat or ply file    | train.splat   |
+| cutoutEntity | selector to a box primitive that uses scale and position to define the bounds of splat points to render    |     |
 
+### Example custom scan to gaussian splat workflow
+* Use a service such as https://lumalabs.ai/ to process a scan into splat (an alternative is https://poly.cam/)
+* Go to download dialog and choose Gaussian > Splat (which will download a .zip file with .ply file inside)
+* Convert the .ply to .splat in the browser using this site: https://splat-converter.glitch.me/ by @akbartus (repo https://github.com/akbartus/Gaussian-Splatting-WebViewers/tree/main/splat_converter)
+* Use resultant .splat in the A-Frame scene with this component
 
 ### Usage
 

diff --git a/cutout-demo.html b/cutout-demo.html
@@ -0,0 +1,29 @@
+<!-- splat sources
+
+# Seal Splat - SF Giant's Lou Seal statue
+* https://huggingface.co/quadjr/aframe-gaussian-splatting/resolve/main/luma-seal.splat
+ - generated by [LumaLabsAI](https://lumalabs.ai/) from a video taken by @kfarr and downloaded from Luma (see workflow notes below). Capture here: https://lumalabs.ai/capture/87c3e8bc-374c-4ebe-9a04-7b00fc110514
+* https://huggingface.co/quadjr/aframe-gaussian-splatting/resolve/main/polycam-seal.splat - generated by Polycam from still photos and downloaded from Polycam: https://poly.cam/capture/a7dd5e33-05ec-43a1-a5b9-abc655ad5885
+
+-->
+
+<!DOCTYPE html>
+<html>
+  <head>
+    <script src="https://aframe.io/releases/1.4.2/aframe.min.js"></script>
+    <script src="./index.js"></script>
+  </head>
+  <body>
+    <a-scene renderer="antialias: false" stats>
+      <a-entity position="0 1.6 -2.0" animation="property: rotation; to: 0 360 0; dur: 10000; easing: linear; loop: true">
+        <a-sphere position="0 0 0.5" radius="0.5" color="#EF2D5E"></a-sphere>
+        <a-sphere position="0 0 -0.5" radius="0.5" color="#EF2D5E"></a-sphere>
+      </a-entity>
+      <a-entity camera position="5.132 1.6 7.237" wasd-controls look-controls ></a-entity>
+      <a-box id="cutout-box" visible="false" scale="4.17 2.95 3.89" position="0.8145 1.73322 -2.35981"></a-box>
+      <a-entity gaussian_splatting="src: https://huggingface.co/quadjr/aframe-gaussian-splatting/resolve/main/luma-seal.splat; cutoutEntity: #cutout-box" scale="2 2 2" rotation="0 0 0" position="0 0.8 -2"></a-entity>
+      <a-entity gaussian_splatting="src: https://huggingface.co/quadjr/aframe-gaussian-splatting/resolve/main/luma-seal.splat;" scale="2 2 2" rotation="0 0 0" position="10 0.8 -2"></a-entity>
+      <a-sky color="#000"></a-sky>
+    </a-scene>
+  </body>
+</html>
diff --git a/index.js b/index.js
@@ -1,12 +1,16 @@
 AFRAME.registerComponent("gaussian_splatting", {
 	schema: {
 		src: {type: 'string', default: "train.splat"},
+		cutoutEntity: {type: 'selector'}
 	},
 	init: function () {
 		// aframe-specific data
 		this.el.sceneEl.renderer.setPixelRatio(1);
 		this.el.sceneEl.renderer.xr.setFramebufferScaleFactor(0.5);
 		this.loadData(this.el.sceneEl.camera.el.components.camera.camera, this.el.object3D, this.el.sceneEl.renderer, this.data.src);
+		if (!!this.data.cutoutEntity) {
+		  this.cutout = this.data.cutoutEntity.object3D;
+		}
 	},
 	// also works from vanilla three.js
 	initGL: async function(numVertexes){