mycelia.blog/content/posts/gsplat.md

+++
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 scenes in a way that is akin to "archiving" your surroundings. 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 >}}
gsplat 2024-02-26 06:52:46 -05:00			`+++`
			`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?`

Update content/posts/gsplat.md 2024-09-18 17:13:00 +00:00			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 scenes in a way that is akin to "archiving" your surroundings. 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.
gsplat 2024-02-26 06:52:46 -05:00
Update content/posts/gsplat.md 2024-09-18 17:13:00 +00:00			`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).`
gsplat 2024-02-26 06:52:46 -05:00
			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 >}}`