[Web Tool] 3D Gaussian Splatting Viewer — 3DGS を、ブラウザの中だけで見て、切って、測って、VR で見る

[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 を作る(学習する)ことは、できません。

開く

インストールは不要です。下のリンクから、そのまま開けます。

スタートメニューから起動

トップページのスタートメニューからも起動できます。

3DGS Viewer の全体。左にファイル情報と設定、真ん中にサボテンの 3DGS、右に編集と書き出し

スクリーンショット

全体

左に、読み込み、ファイルの情報、表示とカメラの設定が並びます。真ん中が、3D の表示です。右に、切る、測る、書き出す、VR、統計が並びます。

3DGS Viewer の全体。左にファイル情報と設定、真ん中にサボテンの 3DGS、右に編集と書き出し

クロップと計測

クロップ箱で、片側を削っています。2 点間の距離も、測っています。

クロップ箱で片側を削ったサボテンの 3DGS と、2 点間の距離を測っている画面

小さいデータ

116,374 点、3.6 MB の .splat です。読み込みは、0.08 秒でした。

3DGS Viewer でヤスデの .splat を表示した画面

VR(Meta Quest 3)

Meta Quest 3 の VR で、3DGS を見ている画面

動画(PC)

動画(WebXR)

CREDIT

撮影したサンプルデータはsteam studio / 3D SCAN STUDIO iris 様からお借りしています。

Three.js公式サイト:

アプリの特徴

  • インストール不要・外部送信なし: ファイルは、ブラウザの中だけで読み込みます。外部のライブラリも、使いません
  • .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)を、用意してください。

  1. ページを開きます。
  2. 左の「MODEL」に、.splat か .ply を、ドロップします(クリックして選ぶこともできます)。
  3. 読み込みが終わると、真ん中に、表示されます。
  4. 左ドラッグで回して、ホイールでズームします。
  5. 気に入ったら、右の「EXPORT」の「PNG を保存」で、画像にします。

データが手元にないときは、公開されているものがあります。three.js のサンプル(webgpu_gaussian_splat)や、NOTE の記事で配られているデータなどです。使うときは、それぞれの配布元の、利用条件に従ってください。

URL を入れて読むこともできます(「URL」の欄)。ただし、相手のサーバーが、CORS を許可している必要があります。

使い方

1. データを入れる

方法内容
ドロップ左の「MODEL」の枠に、ファイルをドロップ
選択同じ枠をクリックして、ファイルを選ぶ
URL「URL」の欄に入れて、「LOAD」(CORS の許可が必要)
  • 対応しているのは、.splat と、3DGS の .ply(バイナリ、リトルエンディアン)です
  • 読み込みの途中でも、読めた分から、表示されます

2. ファイルの情報(FILE INFO)

読み込んだあと、左に、情報が出ます。

項目内容
Nameファイル名
FormatSPLAT か 3DGS PLY
Splats粒の数
SHSH の次数(.splat には、SH がないので「なし」)
Sizeファイルの大きさ
Boundsデータの広がり(横、縦、奥行き)
Load読み込みにかかった時間

3. 見る(DISPLAY / CAMERA)

カメラの操作

操作内容
左ドラッグ回転
右ドラッグ / Shift + ドラッグ移動
ホイールズーム
ダブルクリックその点へ注目(視点が移ります)
W / A / S / D と Q / E飛び回る(Shift で加速)
F / Rデータ全体が入る位置へ戻る
Gグリッドの表示と非表示
Space自動回転の、入と切
タッチ1 本指で回転、2 本指でズームと移動

表示の設定

項目内容
ModeSplat(ガウス)、Solid(楕円を塗りつぶす)、Points(中心点だけ)
SH degreeSH の次数(0〜3)。下げると、角度による色の変化が、なくなります
Splat size粒の大きさの倍率
Point sizePoints モードでの、点の大きさ
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)

  1. 「2 点間の距離を測る」を押します。
  2. データ上の 2 か所を、順にクリックします。
  3. 「Distance」に、距離が出ます。

3DGS は、学習したときの大きさが、決まっていません。そのままの距離は、「モデル単位」です。

実際の長さが、わかる 2 点(たとえば、鉢の直径)を測って、「実際の長さ」に数字を入れ、「SCALE」を押すと、以降の距離が、その単位になります。「クリア」で、測った点を消します。

6. 書き出す・保存する(EXPORT)

項目内容
Format.splat(1 つが 32 バイト)か、.ply(3DGS 標準、SH を保持)
書き出し「CLEANUP」の設定を反映した、データを保存します。ファイル名は、(元の名前)-edited.splat か .ply
Screenshot1×、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 ボタンで、最初の配置へ戻ります。

技術記事

実装の詳細は、技術記事にまとめています。

更新履歴

バージョン日付内容
v1.02026/10/15初回公開(.splat と 3DGS の .ply の表示、SH 0〜3 次、3 つの表示モード、フィルタとクロップ、計測、書き出し、PNG と録画、VR(WebXR))

クレジット

ライブラリ

外部のライブラリは、使っていません。WebGL2、Web Worker、WebXR の、ブラウザの機能だけで、作っています。

参考

3DGS のデータは、それぞれの作者が、作ったものです。このツールは、個人の制作物で、データの作者や、配布元とは、関係ありません。データを使うときは、それぞれの配布元の、利用条件に従ってください。

撮影サンプルデータ

Three.js公式サイト: