gsplat

2024-02-26 06:52:46 -05:00 · 2024-02-26 06:52:46 -05:00 · 14b14f09e3
commit 14b14f09e3
parent 7bb499656f
3 changed files with 143 additions and 0 deletions
--- a/content/posts/gsplat.md
+++ b/content/posts/gsplat.md
@ -0,0 +1,39 @@
+++
+title = "GSplat Demo"
+date = "2024-02-24"
+author = "Brooke"
+description = "Messing around with gsplat.js from huggingface.co"
+TOC = false
+++
+
+# What is all of this?
+
+I've been interested in [photogrammetry](https://en.wikipedia.org/wiki/Photogrammetry) and projection scanning for quite a while, but I've never really had a good way of capturing things a bit more artistically. GSplatting, or [3D Gaussian Splatting](https://repo-sam.inria.fr/fungraph/3d-gaussian-splatting/), is a form of capturing scenes in a way that preserves the visual quality but doesn't provide an actual [polygonal](https://en.wikipedia.org/wiki/Polygonal_modeling) model. 
+
+Unlike photogrammetry, GSplatting provides a fairly realistic gaussian of the captured scene that can be viewed using very little computational resources, this is a big reason why Nvidia is investing time into NeRF (actually something completely different but they're similar in output).
+
+Anyways, here's a quick demo that allows you to view models in a browser, I may add a few different gaussians that I've been working on, but currently I'm borrowing `bonsai-7k-mini.splat`. You can check out the code [here](https://git.myco.systems/mycosystems/coop.myco.systems/src/branch/main/content/posts/gsplat.md), and [here](https://git.myco.systems/mycosystems/coop.myco.systems/src/branch/main/static/posts/gsplat).
+
+{{< rawhtml >}}
+<head>
+    <link rel="stylesheet" href="style.css" />
+</head>
+
+<body>
+    <div id="container">
+      <div id="progress-container">
+          <dialog open id="progress-dialog">
+              <p>
+                  <label for="progress-indicator">Waiting</label>
+              </p>
+              <progress max="100" id="progress-indicator"></progress>
+          </dialog>
+      </div>
+      <canvas id="canvas"></canvas>
+      <script type="module" src="index.js"></script>
+    </div>
+    <button id="load-button">Load Scene</button>
+    <a class="gsplat-js" href="https://github.com/huggingface/gsplat.js/">gsplat.js</a><a class="gsplat-js"> left click <strong>rotate</strong>, right click <strong>pan</strong></a>
+</body>
+{{< /rawhtml >}}
+
--- a/static/posts/gsplat/index.js
+++ b/static/posts/gsplat/index.js
@ -0,0 +1,39 @@
+import * as SPLAT from "https://cdn.jsdelivr.net/npm/gsplat@latest";
+
+const canvas = document.getElementById("canvas");
+const progressDialog = document.getElementById("progress-dialog");
+const progressIndicator = document.getElementById("progress-indicator");
+const loadButton = document.querySelector("#load-button");
+const loadingLabel = document.querySelector('#progress-dialog label');
+
+const renderer = new SPLAT.WebGLRenderer(canvas);
+const scene = new SPLAT.Scene();
+const camera = new SPLAT.Camera();
+const controls = new SPLAT.OrbitControls(camera, canvas);
+
+loadButton.addEventListener('click', () => {
+  loadingLabel.textContent = 'Loading...';
+  main();
+});
+
+async function main() {
+    const url = "https://huggingface.co/datasets/dylanebert/3dgs/resolve/main/bonsai/bonsai-7k-mini.splat";
+    await SPLAT.Loader.LoadAsync(url, scene, (progress) => (progressIndicator.value = progress * 100));
+    progressDialog.close();
+
+    const handleResize = () => {
+        renderer.setSize(canvas.clientWidth, canvas.clientHeight);
+    };
+
+    const frame = () => {
+        controls.update();
+        renderer.render(scene, camera);
+
+        requestAnimationFrame(frame);
+    };
+
+    handleResize();
+    window.addEventListener("resize", handleResize);
+
+    requestAnimationFrame(frame);
+}
--- a/static/posts/gsplat/style.css
+++ b/static/posts/gsplat/style.css
@ -0,0 +1,65 @@
+#container {
+    margin: 0;
+    padding: 0;
+    gap: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.gsplat-js {
+    font-size: 12px !important;
+    margin: 0;
+}
+
+#canvas {
+    width: 100%;
+    overflow: hidden;
+    border: 1px solid #EE72F1;
+    padding: 10px;
+}
+
+#load-button {
+    width: 100%;
+    margin-top: 10px;
+}
+
+
+dialog {
+    width: 100%;
+    text-align: center;
+    max-width: 20em;
+    color: white;
+    background-color: #000;
+    border: none;
+    position: relative;
+    padding-bottom: 50px;
+    /* transform: translate(-50%, -50%); */
+}
+
+#progress-container {
+    position: absolute;
+    /* top: 50%;
+    left: 50%; */
+} 
+
+progress {
+    width: 100%;
+    height: 1em;
+    border: none;
+    background-color: #fff;
+    color: #eee;
+}
+
+progress::-webkit-progress-bar {
+    background-color: #333;
+}
+
+progress::-webkit-progress-value {
+    background-color: #eee;
+}
+
+progress::-moz-progress-bar {
+    background-color: #eee;
+}