This repository contains the working changes for the Gaussian Splat Annotations and Viewer
that was a Master Project in Media Technology M.Sc. in Winter Term 2023/2024 at TH Köln.
There is a working 🚀 live version of current main branch 🚀 which is deployed to GitHub Pages.
To run the application yourself, you need NodeJS on your Computer and available in your PATH
environment.
In the root folder (the one with this Readme), run npm install
to get the dependencies that were defined in package.json
. This will also install the devDependencies
which are needed to compile the project.
Now, you can download the splat files which contain the scene data.
Download the splat models to the respective folders in public/scenes
and rename them to scene.splat
each:
You can also use the following curl commands in a terminal:
curl -o public/scenes/bicycle/scene.splat "https://photos.volkland.de/gsplats/bicycle-7k.splat"
curl -o public/scenes/bonsai/scene.splat "https://photos.volkland.de/gsplats/bonsai-7k-raw.splat"
curl -o public/scenes/garden/scene.splat "https://photos.volkland.de/gsplats/garden-7k.splat"
curl -o public/scenes/wohnzimmerAntimatter15/scene.splat "https://photos.volkland.de/gsplats/wohnzimmerAntimatter15-converted.splat"
curl -o public/scenes/wohnzimmerPolycam/scene.splat "https://photos.volkland.de/gsplats/wohnzimmerPolycam-converted.splat"
With limited space or bandwidth, you can also just download a subset of the scenes and expect a broken page when opening the other scenes.
Now that everything is ready, you can run a webserver and open the provided link. It will respond to code changes by reloading (parts of) the page:
npm run dev
You can also create a static build of the application to include in your website. The build will use a base url from which it will derive all subpaths, so you probably want to change it in vite.config.js
. To create a static build, run npm run build
and copy the files in the dist
folder to their place on the web server.
src/comments/annotations-storage.ts
:
type AvailableScenes
with the new slug.const sceneNames
.const annotationStorage
. This can also be an empty array, but it can not be undefined..splat
file of your scene to public/scenes/$slug/scene.splat
.
.splat
files are ignored by git since they are too large and in a binary format. Save the file on some web space and update the readme section and your deployment script (i.e. .github/workflows/vite-deploy.yml
).public/scenes/$slug/cover.png
. It should have sufficient resolution to look good in the catalogue view.src/GSplatPrograms/prepare-scene.ts
:
const scenePreparations
. This can be empty in the beginning or a reference to identity
.const splatPositionModification
. This can be a reference to identity
. This is important to translate the position of a splat to its world coordinates, i.e. when attaching an annotation to it. It is not necessary to scale the vector.helpfulArrow
for this and fill it with your own data.After extending the type
definition, the application will not build until you extend the rest of the items. This is expected and here to help you.
There is a debug mode which you can activate in the Scene-Detail-Page by clicking the link on the top right of the canvas. It comes with the following features:
gsplat
renderer creates a red grid, the three.js
renderer creates a green grid. The green grid is moved a little bit down so its easier to see both grids.Masterprojekt im Studiengang Medientechnologie M.Sc. an der TH Köln. Contact: jvolklan@th-koeln.de.