40 lines
2.1 KiB
Markdown
40 lines
2.1 KiB
Markdown
|
+++
|
||
|
|
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 >}}
|
||
|
|
|