3D Gaussian Splatting（3DGS）ファイルをブラウザで閲覧できるビューアを開発しました。本記事では、3DGSの概要と、通常のPLY Viewerでは表示できない理由、そして専用ビューアの実装について解説します。

デモ:

https://3dtiles-viewer.vercel.app/3dgs-viewer.html?manifest=https://3dtiles-viewer.vercel.app/iiif/ply/manifest.json

なぜ通常のPLY Viewerでは3DGSを表示できないのか

3DGSファイルは拡張子が.plyであるため、一見すると通常のPLYファイルと同じように扱えそうに見えます。しかし、Three.jsのPLYLoaderで読み込んでも正しく表示されません。

通常のPLYファイルと3DGS PLYファイルの違い

通常のPLY（メッシュ/点群）:

eppppppeplrrrrrrlreooooooeomppppppmpeeeeeeeeenrrrrrrnrtttttttttyyyyyyyvfefffuuualrlllccccitooohhheseaaaaaatxtttrrr50u1xyzrgb0c0erlh0deua0eernintvertex_indices

3DGS用PLY:

epppppppppppppplrrrrrrrrrrrrrreoooooooooooooomppppppppppppppeeeeeeeeeeeeeeenrrrrrrrrrrrrrrtttttttttttttttyyyyyyyyyyyyyyveffffffffffffffrlllllllllllllltooooooooooooooeaaaaaaaaaaaaaaxtttttttttttttt1xyzfffosssrrrr4___pcccoooo2dddaaaatttt0cccclll____0___ieee01230012t___y012####球不ス回面透ケ転調明ー（和度ルク関（ォ数楕ー（円タ色体ニ）サオインズ））

PLYLoaderで読み込むとどうなるか

Three.jsのPLYLoaderは3DGS用のプロパティを理解できません。読み込むと以下のような問題が発生します：

  1. 色情報の欠落 : f_dc_0, f_dc_1, f_dc_2は球面調和関数の係数であり、RGBカラーではないため、正しい色が表示されない
  2. 単なる点群として表示 : 各ガウシアンの形状（スケール・回転）が無視され、ただの点として表示される
  3. レンダリング品質の低下 : ガウシアンスプラッティングの特性である滑らかな補間が行われない

専用レンダラーが必要な理由

3DGSを正しく表示するには、以下の処理が必要です：

  1. 深度ソート : 視点からの距離で全ガウシアンをソート（毎フレーム）
  2. 2D投影 : 3Dガウシアンを2D楕円に投影
  3. アルファブレンディング : 後ろから前に向かって合成

これらはGPUシェーダーで効率的に処理する必要があり、通常の点群・メッシュレンダラーでは対応できません。そこで、専用ライブラリであるSpark.jsを使用しました。

3D Gaussian Splattingとは

3D Gaussian Splatting（3DGS）は、2023年にSIGGRAPHで発表された革新的な3D表現技術です。従来のNeRF（Neural Radiance Fields）と比較して、リアルタイムレンダリングが可能で、高品質な3Dシーンを効率的に表現できます。

従来技術との比較

技術レンダリング速度品質編集性
メッシュ非常に高速中高
点群高速低〜中高
NeRF低速（秒単位）高低
3DGSリアルタイム高中

3DGSの仕組み

3DGSは、3Dシーンを多数の「3Dガウシアン」（楕円体状の点）の集合として表現します。

各ガウシアンは以下のパラメータを持ちます：

  • 位置（Position） : 3D空間での中心座標
  • 共分散（Covariance） : 楕円体の形状と向き
  • 不透明度（Opacity） : 透明度
  • 球面調和関数係数（SH coefficients） : 視点依存の色情報

レンダリング時には、これらのガウシアンを2D画面に投影（スプラッティング）し、アルファブレンディングで合成します。

対応ファイル形式

PLY形式（.ply）

最も一般的な3DGS形式です。標準PLYと圧縮PLY（compressed.ply）の両方に対応しています。

pfeppppppppppppppelolrrrrrrrrrrrrrrnyreoooooooooooooodmmpppppppppppppp_aeeeeeeeeeeeeeeehtnrrrrrrrrrrrrrretttttttttttttttabyyyyyyyyyyyyyydiveneffffffffffffffrarllllllllllllllrtooooooooooooooyeaaaaaaaaaaaaaa_xttttttttttttttli1xyzfffosssrrrrt4___pcccoooot2dddaaaattttl0cccclll____e0___ieee0123_0012t___ey012ndian1.0

SPLAT形式（.splat）

軽量なバイナリ形式で、Webでの配信に適しています。

KSPLAT形式（.ksplat）

Kevin Kwok氏が開発した効率的な形式です。

SPZ形式（.spz）

Niantic社が提案する圧縮形式で、ファイルサイズを大幅に削減できます。

実装の詳細

使用ライブラリ

ライブラリバージョン用途
Three.js0.170.03Dレンダリング基盤
OrbitControlsThree.js同梱カメラ操作
Spark.js0.1.103DGSレンダリング

Spark.jsについて

Spark.jsは、3D Gaussian SplattingをThree.jsで扱うためのライブラリです。WebGLシェーダーを使用して、ガウシアンのソートとスプラッティングを効率的に行います。

ic}asmo)wcpnuo};aeoSsrninrptlPctetl:ro.asonsa{tp'gspdMlmroldSeaoela(pstdsetslhMes.Mpaをel:lelt作s.osaM成hp(ghteしlp(.Msて=yr`lehシ'o$osーn,g{ah}ンerpd)にwerP;f追sorr加Ssgoop)rmmleia=ss't>se@M.;se{lpsoahar(dk{ejdsd/evp/rsopgarreks's;.total100}%`);

Import Mapsの活用

ES Modulesを使用し、CDN経由でライブラリを読み込んでいます。

<{}s/c"}sricim"""rpptt@itohhsprrrpttteea>yseerp""/ke::"j=:s"{"dih"emthvptt/optsrsppt:sam/:ra//kpe/""se:>ms.m"s.hhst/htt/phtsrh:er/ee/@es0@p.0a1.r71k07j.0s0.."0d,/e"v,/releases/spark/0.1.10/spark.module.js"

これにより、ビルドツールなしで最新のJavaScriptモジュールシステムを活用できます。

カメラの自動調整

モデル読み込み後、バウンディングスフィアを基にカメラ位置を自動調整します。

i}fccccc)aa(ooooa;xxcnnnnmccceeusssカtカeeee座ssrtttメrメrnnn標HHrラoラattt軸eeescrタlを.eeeヘllnpeaーsモprrrルppthndゲ.デo...パeeSetiッtルsxyzーrrpreuトaかiも..lersをrらt+++モspaモg適iデcot===デe切orrrルas.ルtなnaaaにligcss中.距.ddd合eteupp心c離siiiわ.iorhhにoにeuuuせsomreep配tsssてeneerry置(スt.tnee(ケ(crt..cーroyScre101ルappean...dy&lndt555i(&atie,,ucteursec.rs)nug;;/treero2rem,)ne5;tt;rSrapydl.iabutos.ugn/edoi2mn,egtSrrpayhd.eibruoesu;n/di2n)g;Sphere){

モデル回転機能

3DGSファイルは作成時の座標系によって向きが異なることがあります。スライダーとプリセットボタンで調整できるようにしました。

f}ddduooonrrrc)ccccooou;プuuuttttrxyzリmmmiXYZrセeeeo...eッnnnnvvvnトtttaaatMMM...slllSaaagggeuuupttteeeteeelhhhtttRa...EEEo===tPPPlllt.IIIeeeaxyzrmmmt;;;o///eeeitnnnoa111tttnt888BBB(i000yyyxo,,III,nddd.(((ys''',eppptrrrz(eee)ssseee{ttt---dzfeulfpia'pu)'l.)ta.'da)dd.EdavEdevdneEtnvLteiLnsittsLetinesentree(rn'(ec'rlc(il'cickcl'ki,'c,k',=>=>s=es>teRtsoRetotatRtaoittoianot(ni-(o91n08(,00,,0,00,,0)00)));));;

ドラッグ&ドロップ実装

ファイル読み込み中でもドラッグ&ドロップで新しいファイルを読み込めるよう、オーバーレイUIを実装しています。

d}d}o)o)cdi};cci};ドurfuofラmadmnlッeg(res(oグnCdantfa中torgtidの.uoO.flSオbnpvbiepーotZeolslバdeorde.aーyrnlysltレ.+ea.e(イa+.ya=nf表d;c.dgi示dlcdetlEalE.hevsavdsessea>[nLsnt0tiLta0]LsiLT)itsir&;s.tsa&tc.tneoaesfnndnfietdeelra(rre(i'(.s'nv'f[dsidi0r(srl]a'ioe.ghbpsneil';ande,mtd'eee)e.rn;m''=a,)>t)c{h{(/=\>.({ply|splat|ksplat|spz)$/i)){

IIIF対応

IIIF Presentation API 3.0のマニフェストに対応しています。マニフェストから3DGSファイルのURLを抽出して読み込みます。

{}""""}@tli]cyat""}opbeti]neemyt""}t"lspeti]e:""emyt""}x::"spetbt":"emyo""""M{[:"spditf:a{":"eydyon"S[:"""pr[iec{":::em"fneA["ahe"nn{"{":tts:enAh"tt"ont":p"[,tntM:,"aopo"/cttsdm/aia:eoicot/lditni/"eiuPoe,lfsanx/."g"api]e,mlo"py/},l"a,ep.ic/opmr/emsoednetla.tpiloyn"/,3/context.json"],

パフォーマンス考慮

ピクセル比の制限

高解像度ディスプレイでのGPU負荷を軽減しています。

renderer.setPixelRatio(Math.min(window.devicePixelRatio,2));

メモリ管理

新しいモデルを読み込む際は、前のモデルを適切に破棄します。

epppppppppppppplrrrrrrrrrrrrrreoooooooooooooomppppppppppppppeeeeeeeeeeeeeeenrrrrrrrrrrrrrrtttttttttttttttyyyyyyyyyyyyyyveffffffffffffffrlllllllllllllltooooooooooooooeaaaaaaaaaaaaaaxtttttttttttttt1xyzfffosssrrrr4___pcccoooo2dddaaaatttt0cccclll____0___ieee01230012t___y012####球不ス回面透ケ転調明ー（和度ルク関（ォ数楕ー（円タ色体ニ）サオインズ））

0

制限事項

制限説明
ファイルサイズブラウザのメモリ制限に依存（数百MB程度が目安）
ガウシアン数数百万程度まで（GPU性能に依存）
モバイル動作するが、大きなファイルは推奨しない

今後の改善案

  1. LOD対応 : 視点距離に応じた詳細度の切り替え
  2. 複数モデル対応 : 複数の3DGSファイルを同時に表示
  3. アニメーション : 4D Gaussian Splatting対応
  4. エクスポート : 他形式への変換機能

参考リンク