[Web Tool] 3D Gaussian Splatting Viewer — 3DGS を、ブラウザの中だけで見て、切って、測って、VR で見る
概要
3D Gaussian Splatting Viewer は、3D Gaussian Splatting(3DGS)のデータを、ブラウザで見る、ツールです。.splat か、3DGS の .ply を、ドロップするだけで、表示が始まります。
インストールは要りません。ファイルは、お使いのブラウザの中だけで読み込むので、パソコンの外へ出ません。外部のライブラリも、使っていません。
3DGS は、点群に似ていますが、1 つずつの粒が、大きさ、向き、不透明度を持つ、半透明の楕円です。重ねて描くので、面のように見えます。見る角度で色が変わる(SH)ことも、再現します。
見るだけではなく、見たあとに使える機能も、入れました。
- 不要な部分を切る(不透明度、サイズ、クロップ箱)
- 2 点間の距離を測る(実際の長さを入れて、補正)
- 切ったあとのデータを、
.splatか.plyで書き出す - PNG(最大 4 倍、背景の透過も可)と、動画で保存する
- Meta Quest 3 などの VR で、見て回る
見る専用のツールです。3DGS を作る(学習する)ことは、できません。
開く
インストールは不要です。下のリンクから、そのまま開けます。
3D Gaussian Splatting Viewer
3DGS のデータ(.splat / .ply)を、ブラウザの中だけで表示。クロップ、計測、書き出し、PNG と録画、VR に対応。
lain-lab.comスタートメニューから起動
トップページのスタートメニューからも起動できます。
スクリーンショット
全体
左に、読み込み、ファイルの情報、表示とカメラの設定が並びます。真ん中が、3D の表示です。右に、切る、測る、書き出す、VR、統計が並びます。
クロップと計測
クロップ箱で、片側を削っています。2 点間の距離も、測っています。
小さいデータ
116,374 点、3.6 MB の .splat です。読み込みは、0.08 秒でした。
VR(Meta Quest 3)
動画(PC)
動画(WebXR)
CREDIT
撮影したサンプルデータはsteam studio / 3D SCAN STUDIO iris 様からお借りしています。
【ダウンロード可】3Dガウシアン スプラッティング データ(PLY)|steam studio / 3D SCAN STUDIO iris
3Dガウシアン スプラッティング データである3DGS PLYデータをダウンロードできるようにまとめました。検証などにご自由にお使いください! ※CC0で公開いたします これはNikon Z7IIの8k jpegですpostshotで一番重い8k(ダウンスケールなし) jpeg427枚 25kStep スプラット数2百万の3DGSです 重いだけあって写真と遜色無いです。 3Dガウシアン スプラッティング データ(PLY)サンプルダウンロード Box app.box.com サンプルデータ内訳 比較用にメッシュもありますpostshotから書き出した
note.comThree.js公式サイト:
three.js examples
説明なし
threejs.orgアプリの特徴
- インストール不要・外部送信なし: ファイルは、ブラウザの中だけで読み込みます。外部のライブラリも、使いません
.splatと 3DGS の.ply: SH(見る角度で変わる色)は、0〜3 次を、自動で判別します- 大きなファイルも読める: ファイル全体を一度にメモリへ載せず、少しずつ読みます。400 万点、約 1 GB の PLY も、読み込めることを確かめました(確かめた環境は、ソフトウェア描画です。実機の速さは、データによります)
- 3 つの表示モード: Splat(ガウス)、Solid(楕円を塗りつぶす)、Points(中心点だけ)
- 切る道具: 不透明度、サイズ、クロップ箱(箱の内側を消す反転も可)。残った件数を、数字で見られます
- 計測: 2 点間の距離を測れます。実際の長さを入れると、以降の距離が実寸になります
- 書き出し: 切ったあとのデータを、
.splatか.plyで保存します - 保存: PNG(1、2、4 倍、背景の透過も可)と、録画(WebM)
- VR: Meta Quest 3 で、見て回れます。左右の目それぞれに描きます
- 重いときの調整: 描画解像度、動的解像度(操作中だけ下げる)、視錐台カリング、極小の粒の除外
まず試す
このツールには、最初から入っているデータは、ありません。3DGS のデータ(.splat か .ply)を、用意してください。
- ページを開きます。
- 左の「MODEL」に、
.splatか.plyを、ドロップします(クリックして選ぶこともできます)。 - 読み込みが終わると、真ん中に、表示されます。
- 左ドラッグで回して、ホイールでズームします。
- 気に入ったら、右の「EXPORT」の「PNG を保存」で、画像にします。
データが手元にないときは、公開されているものがあります。three.js のサンプル(webgpu_gaussian_splat)や、NOTE の記事で配られているデータなどです。使うときは、それぞれの配布元の、利用条件に従ってください。
URL を入れて読むこともできます(「URL」の欄)。ただし、相手のサーバーが、CORS を許可している必要があります。
使い方
1. データを入れる
| 方法 | 内容 |
|---|---|
| ドロップ | 左の「MODEL」の枠に、ファイルをドロップ |
| 選択 | 同じ枠をクリックして、ファイルを選ぶ |
| URL | 「URL」の欄に入れて、「LOAD」(CORS の許可が必要) |
- 対応しているのは、
.splatと、3DGS の.ply(バイナリ、リトルエンディアン)です - 読み込みの途中でも、読めた分から、表示されます
2. ファイルの情報(FILE INFO)
読み込んだあと、左に、情報が出ます。
| 項目 | 内容 |
|---|---|
| Name | ファイル名 |
| Format | SPLAT か 3DGS PLY |
| Splats | 粒の数 |
| SH | SH の次数(.splat には、SH がないので「なし」) |
| Size | ファイルの大きさ |
| Bounds | データの広がり(横、縦、奥行き) |
| Load | 読み込みにかかった時間 |
3. 見る(DISPLAY / CAMERA)
カメラの操作
| 操作 | 内容 |
|---|---|
| 左ドラッグ | 回転 |
| 右ドラッグ / Shift + ドラッグ | 移動 |
| ホイール | ズーム |
| ダブルクリック | その点へ注目(視点が移ります) |
| W / A / S / D と Q / E | 飛び回る(Shift で加速) |
| F / R | データ全体が入る位置へ戻る |
| G | グリッドの表示と非表示 |
| Space | 自動回転の、入と切 |
| タッチ | 1 本指で回転、2 本指でズームと移動 |
表示の設定
| 項目 | 内容 |
|---|---|
| Mode | Splat(ガウス)、Solid(楕円を塗りつぶす)、Points(中心点だけ) |
| SH degree | SH の次数(0〜3)。下げると、角度による色の変化が、なくなります |
| Splat size | 粒の大きさの倍率 |
| Point size | Points モードでの、点の大きさ |
| AA 補正 | 遠景のちらつきを、抑える |
| FOV | 画角 |
| Near | 手前で、描かない距離 |
| Background | 背景の色 |
| Grid / Axes | グリッドと軸の表示 |
| Up axis | 上の向き。「Y 下(COLMAP / 3DGS 標準)」が既定です。逆さまに見えるときは、ここを切り替えます |
| Rotate | モデルを、水平に回す |
| Auto rotate / Speed | 自動回転と、その速さ |
| Fly speed | 飛び回るときの速さ |
4. 切る(CLEANUP)
右の「CLEANUP」の設定は、表示と、書き出しの両方に、反映されます。
| 項目 | 内容 |
|---|---|
| Min opacity | この値より、薄い粒を消す |
| Max size | 大きい粒(上位)を消す。浮遊物(フローター)を消したいときに使う |
| クロップ箱 | 「クロップ箱を使う」を入れて、X、Y、Z の最小と最大で、範囲を決める |
| 箱の内側を消す(反転) | 箱の外ではなく、中を消す |
| 箱をリセット | 箱を、全体に戻す |
| Kept | 残った粒の数 / 全体の数 |
クロップ箱の座標は、モデル座標です。いまの値は、スライダーの横に出ます。
5. 測る(MEASURE)
- 「2 点間の距離を測る」を押します。
- データ上の 2 か所を、順にクリックします。
- 「Distance」に、距離が出ます。
3DGS は、学習したときの大きさが、決まっていません。そのままの距離は、「モデル単位」です。
実際の長さが、わかる 2 点(たとえば、鉢の直径)を測って、「実際の長さ」に数字を入れ、「SCALE」を押すと、以降の距離が、その単位になります。「クリア」で、測った点を消します。
6. 書き出す・保存する(EXPORT)
| 項目 | 内容 |
|---|---|
| Format | .splat(1 つが 32 バイト)か、.ply(3DGS 標準、SH を保持) |
| 書き出し | 「CLEANUP」の設定を反映した、データを保存します。ファイル名は、(元の名前)-edited.splat か .ply |
| Screenshot | 1×、2×、4× |
| 背景を透明にする | 背景のない PNG にする |
| PNG を保存 | いまの画面を、PNG で保存する |
| 録画開始 | 動画で保存する(WebM)。もう一度押すと、止まって、ファイルが保存されます |
.splatには、SH(角度による色の変化)が入りません。SH を残したいときは、.plyで書き出します- 録画は、いま表示している画面を、そのまま動画にします
7. 重いとき(PERFORMANCE)
| 項目 | 内容 |
|---|---|
| Render scale | 描画の解像度の倍率。下げると、軽くなります |
| 動的解像度 | 操作している間だけ、解像度を下げる |
| 視錐台カリング | 画面の外の粒を、描かない |
| Skip tiny | 画面で小さすぎる粒を、描かない。上げると軽くなります |
右下の「STATS」で、FPS、並べ替えの時間、描いている粒の数、GPU に載せたデータの大きさが、見られます。
8. VR で見る(VR)
VR に対応したブラウザ(WebXR)では、右に「VR (WEBXR)」が出て、「ENTER VR」が使えます。VR に対応していないブラウザでは、出ません。
| 操作 | 内容 |
|---|---|
| 左スティック | 前後左右へ移動 |
| 右スティック | 左右で回転、上下で上昇と下降 |
| 握る(左右) | 縮小(左)と拡大(右) |
| 右の B ボタン | 最初の配置へ戻す |
- 最初は、モデルが、正面 1.6 m、最大辺 1.2 m に、収まって表示されます
- 「VR 解像度」で、0.5〜1.0 倍を選びます(既定は 0.8 倍)。重いときは、下げます
- VR の中では、視錐台カリングを使いません。「Skip tiny」は、効きます
- VR は、HTTPS か localhost のページでだけ、使えます
- Quest 単体のブラウザでも、PCVR でも、動きます。ただし、Quest 単体は、データが重いとコマ落ちします(100 万点を超えるデータは、設定を軽くしても、きびしいことがあります)
対応していないもの
| 内容 | 扱い |
|---|---|
.ksplat、.sog | 読めません |
.spz | 読めません。新しい版は、データを ZSTD で圧縮しているため、対応するには、デコーダが要ります |
| 圧縮された PLY(PlayCanvas 形式) | 読めません |
| テキスト形式の PLY | 読めません(バイナリのみ) |
| 3DGS を作る(学習する) | できません。見るだけです |
| VR の中での編集(計測、クロップ) | できません |
| VR のコントローラの表示 | ありません |
注意事項
- 重さは、データの粒の数と、お使いの GPU で決まります。143 万点の PLY(SH 3 次)は、制作者のパソコンで、FPS 38 でした。粒が多いものは、重くなります
- 400 万点(約 1 GB の PLY)は、読み込めることを、確かめました。ただし、ソフトウェア描画の環境での確認で、実機の速さは測っていません
- 動作は、Chrome 系のブラウザと、Meta Quest 3(PCVR と、単体のブラウザ)で、確認しています。Safari、Firefox は、確認していません
- VR は、握り(拡縮)と B ボタンの動作を、確かめていません
- 録画は、ブラウザの機能(MediaRecorder)を使っています。保存されるのは WebM 形式で、MP4 ではありません
.splatは、SH を持たない形式です。SH のある.plyから.splatへ書き出すと、角度による色の変化は、なくなります- 計測の距離は、実際の長さを入れるまで、モデル単位です
- スマートフォンの画面幅は、想定していません。パソコンか、VR で使ってください
よくある質問 (FAQ)
Q. ファイルは、どこかに送信されますか。
A. 送信しません。読み込みも、表示も、書き出しも、ブラウザの中だけで行います。「URL」の欄に入れたときだけ、そのアドレスへ、読みに行きます。
Q. データが、上下逆さまに見えます。
A. 「CAMERA」の「Up axis」を、切り替えてください。既定は「Y 下(COLMAP / 3DGS 標準)」です。「Y 上」にすると、直ることが多いです。
Q. 色が、ぼんやりしています。角度で色が変わりません。
A. 「SH degree」が、低くなっていないかを、見てください。また、.splatは SH を持たないので、角度で色は変わりません。.plyで、SH が入っているかは、左の「FILE INFO」の「SH」でわかります。
Q. 空中に、もやもやした粒が、浮いています。
A. 「CLEANUP」の「Min opacity」を上げるか、「Max size」を下げてください。範囲が決まっているなら、クロップ箱で、外を消せます。
Q. 距離の単位が、「モデル単位」のままです。
A. 3DGS は、実際の大きさが、決まっていません。長さがわかる 2 点を測って、「実際の長さ」に入れて、「SCALE」を押してください。
Q. 重くて、カクカクします。
A. 「PERFORMANCE」の「Render scale」を下げるか、「Skip tiny」を上げてください。「動的解像度」を入れると、操作している間だけ、解像度が下がります。
Q.
.spzや.ksplatは、読めますか。
A. 読めません。.splatか、3DGS の.plyに、変換してから、使ってください。
Q. 書き出した
.splatで、色が、変わりました。
A..splatは、SH を持たない形式です。角度による色の変化を残したいときは、.plyで書き出してください。
Q. 録画した動画が、MP4 ではありません。
A. 録画は、WebM 形式で保存されます。MP4 が必要なときは、変換ツールなどで、変換してください。
Q. 「ENTER VR」が、出ません。
A. お使いのブラウザが、WebXR の VR に対応していないか、ページが HTTPS(か localhost)ではない可能性があります。Meta Quest のブラウザで、HTTPS のページを開いてください。
Q. VR で、重くて、気持ち悪いです。
A. 「VR 解像度」を、下げてください。「Skip tiny」を上げるのも、効きます。Quest 単体では、100 万点を超えるデータは、重いことがあります。
Q. VR で、モデルが、大きすぎる(小さすぎる)です。
A. 握るボタンで、拡大と縮小ができます。右の B ボタンで、最初の配置へ戻ります。
技術記事
実装の詳細は、技術記事にまとめています。
[Astro] #176 3D Gaussian Splatting Viewer — ブラウザだけで 3DGS を見て、切って、測って、VR でも見る
3DGS の読み込み、EWA 投影、基数ソート、SH、クロップと計測、VR 対応、独自の参照実装で描画を確かめた方法まで。
lain-lab.com更新履歴
| バージョン | 日付 | 内容 |
|---|---|---|
| v1.0 | 2026/10/15 | 初回公開(.splat と 3DGS の .ply の表示、SH 0〜3 次、3 つの表示モード、フィルタとクロップ、計測、書き出し、PNG と録画、VR(WebXR)) |
クレジット
ライブラリ
外部のライブラリは、使っていません。WebGL2、Web Worker、WebXR の、ブラウザの機能だけで、作っています。
参考
- 3D Gaussian Splatting の元の実装: graphdeco-inria/gaussian-splatting
- SPZ 形式の説明: nianticlabs/spz
GitHub - graphdeco-inria/gaussian-splatting
Original reference implementation of 3D Gaussian Splatting
github.com3DGS のデータは、それぞれの作者が、作ったものです。このツールは、個人の制作物で、データの作者や、配布元とは、関係ありません。データを使うときは、それぞれの配布元の、利用条件に従ってください。
撮影サンプルデータ
【ダウンロード可】3Dガウシアン スプラッティング データ(PLY)|steam studio / 3D SCAN STUDIO iris
3Dガウシアン スプラッティング データである3DGS PLYデータをダウンロードできるようにまとめました。検証などにご自由にお使いください! ※CC0で公開いたします これはNikon Z7IIの8k jpegですpostshotで一番重い8k(ダウンスケールなし) jpeg427枚 25kStep スプラット数2百万の3DGSです 重いだけあって写真と遜色無いです。 3Dガウシアン スプラッティング データ(PLY)サンプルダウンロード Box app.box.com サンプルデータ内訳 比較用にメッシュもありますpostshotから書き出した
note.comThree.js公式サイト:
three.js examples
説明なし
threejs.org