+++
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 >}}