3D Gaussian Splatting for Browser
Three.js + 3DGS
threejsのシーンと3DGS Viewerを統合することで、glbとsplatを同時に描画できる。
レンダラー、カメラなどはthree.jsを使用するので、基本的にはglbのアニメやカメラワークなども通常のthree.jsのシーンと同じ。
3DGSのライブラリは下記を使用。npmもある。OSSなので、ディレクトリごとローカルに保存すれば、カスタムもできる。
https://github.com/mkkellogg/GaussianSplats3D
問題
splatと3d rendererの回転が合わない。GaussianSplats3D.Viewer()にthreejsのカメラを渡すとこうなる。
splatの読み込み時に回転角を手動で直しています。
3DGSのファイルフォーマット
（3DGSオリジナルはply）。ウェブでは.splatか.ksplat？
その他 → Compressed PLY, SPZ
ksplat
https://projects.markkellogg.org/threejs/demo_gaussian_splats_3d.php
このページの下にConvert a .ply or .splat to .ksplatがある。またはローカルでKSplatLoaderで変換できる。
SPZ
https://github.com/nianticlabs/spz
scaniverse(niantic)が3DGSのファイル形式として.spzをオープンソース化。plyに比べ90%圧縮。
8thwall Niantic StudioはSPZだけをサポート。https://www.8thwall.com/docs/ja/studio/guides/gaussian-splats/
Babylon向けのspz loader packageは開発がある。threejsはなさそう。https://zenn.dev/drumath2237/articles/release-spz-loader
3DGS Viewer
- pmdrsの出しているdrei splatコンポーネント。vanilla版もある。（.splat のみ対応）
https://github.com/antimatter15/splat をコンポーネント化したもの。
https://drei.docs.pmnd.rs/abstractions/splat
-
three.js向けOSS / ksplatサポート →上記のプロトタイプで使用
https://github.com/antimatter15/splatよりパフォーマンス改善。
https://github.com/mkkellogg/GaussianSplats3D -
LumaAI
threejs / r3f support
3DGSからcube mapを生成してenv mapとして使用可能 (ex: Scene Lighting)。
splatをLumaにアップしておく前提かと。
Luma WebGL Library -
Babylon.jsもsplatをサポート
https://github.com/BabylonJS/Babylon.js -
WebGL（ぜんぶmain.jsにまとめられているので読みづらい）
https://drei.docs.pmnd.rs/abstractions/splat これと同じ。
https://github.com/antimatter15/splat -
WebGPU based
GitHub - cvlab-epfl/gaussian-splatting-web
コード事例
ライブラリなしの最小限。threejs sceneとGSの重なり順もちゃんとしてそう。
jolly-water-immus4
GS編集エディター
- SuperSplat
OSS
https://playcanvas.com/supersplat/editor
ローカルで動かすなら
https://github.com/playcanvas/supersplat
git clone git@github.com:playcanvas/super-splat.git
git submodule update --init --recursive
npm install
npm run build
npm run serve
.ply to .splat converter
https://github.com/antimatter15/splat/blob/main/convert.py
未検証
複数のsplatを同時にシーンに追加できないかも？ 重なりがおかしくなる？
これは浮いているシューズも.splat。
Threlte – Rapidly build interactive 3D apps for the web
Tips
SortWorker.jsにてuseSharedMemoryを使うらしい。astroでは下記の設定が必要。
// astro config
export default defineConfig({
server: {
headers: {
"Cross-Origin-Opener-Policy": "same-origin",
"Cross-Origin-Embedder-Policy": "require-corp"
}
}
});