3D Gaussian Splatting (3DGS)のモデルを Cesiumの地球の上で可視化する方法

7月9日に行われたオンラインの勉強会 AIMTG にて、3D Gaussian Splatting (3DGS) のモデルをCesiumの地球儀の上で可視化する方法について紹介しました。ここでは、AIST Cesium Threejs 3DGSを利用した方法を主に紹介しました。

動画
https://youtu.be/aG3wjoNj_u4?t=1532

イベントページ
https://osaka-driven-dev.connpass.com/event/359771/

Transcript

1. 3D Gaussian Splatting (3DGS)のモデルを Cesiumの地球の上で可視化する方法 板倉健太 ImVisionLabs株式会社代表取締役
2. 3D Gaussian Splatting（3DGS）の概要 任意の角度から見たときの対象の画像情報の再構成を可能にする技術 図1:花瓶に対する実行結果 図1, 3 はScaniverse、図2はSupersplatを利用して可視化しています 図2:樹木細部に対する実行結果 図3:樹木に対する実行結果 点群にガウス分布を割り当て、視点に応じてその分布をレンダリングすることで、 きめ細かな描写とスムーズな可視化を両立可能 従来のNeRF（Neural Radiance Fields）に比べて高速かつ高精細な表現が可能
3. 3Dモデルを地図上で可視化するモチベーション 現実の3次元的な情報を集約して分析することができる 東京都デジタルツイン3Dビューアにてハザードマップを表示した時の様子 図出典： 東京都デジタルツインプロジェクト https://info.tokyo-digitaltwin.metro.tokyo.lg.jp/ 地理的要因を付与することが出来る（測量地の高さや傾斜など） スマートシティの実現や災害シミュレーションなどに貢献
4. Cesiumの概要と3DGSとの連携について Google Earthのような3D地球をWeb上で扱える 出典： 四日市市3次元都市モデル公開サイト https://www.city.yokkaichi.lg.jp/3d-city/index.html 地形データや3Dモデル（建物や植物など）を表示可能
5. 3DGSをCesium上で可視化する方法1  3DGSをCesiumにて可視化する方法は複数存在する  例えばCesium ionにて「Gaussian splats」という項目をオンにしてアップロードする
6. 3DGSをCesium上で可視化する方法2 別の方法としてAIST Cesium Threejs 3DGSを利用して3DGSもCesium上に表示可能 出典： AIST Cesium Threejs 3DGS https://github.com/aistairc/aist_cesium_threejs_3dgs 本スライドでは上記のツールを利用して3DGSをCesiumにて可視化する方法を紹介
7. 3DGSをCesium上に可視化するワークフロー 1. Cesium ionアクセストークンの取得 2. 3DGSデータと座標データの準備 3. Cesiumに反映させるためにindex.htmlを編集 4. Dockerを利用した仮想環境の構築 5. Cesiumの起動 6. 実行結果の確認
8. アクセストークンの取得 Cesium ionにログインし、「Access Tokens」の「Create Token」からCesium の アクセストークンを取得 ローカルでCesiumJSを利用するためにCesium ionアクセストークンを取得 アクセストークンは再発行されないので、 メモに保存するなどして、記録が必要 データの 準備 idex.htm lを編集 トークンの 取得 仮想環境 の構築 Cesiumの 起動 実行結果 の確認
9. データの準備 3DGSデータ データの 準備 idex.htm lを編集 トークンの 取得 仮想環境 の構築 Cesiumの 起動 実行結果 の確認 桜の3DGS 3DGSの座標データ  3DGSデータとは別に対象の座標データ （緯度経度）を準備  座標データは、自身で調べる必要がある
10. データの準備 3DGSデータ（ply形式）を「aist_cesium_threejs_3dgs¥public¥demo」下に移動 データの 準備 idex.htm lを編集 トークンの 取得 仮想環境 の構築 Cesiumの 起動 実行結果 の確認 追加した3DGSデータ 先述したAIST Cesium Threejs 3DGSのコードをダウンロードする
11. idex.htmlを編集 取得したアクセストークンに編集 デモデータと同様の形式でリストを追加する データの 準備 idex.htm lを編集 トークンの 取得 仮想環境 の構築 Cesiumの 起動 実行結果 の確認 高さの情報なども微調整する必要がある • Cesium.Ion.defaultAccessToken=の後に自分のトークンを入力
12. 仮想実行環境の構築 AIST Cesium Threejs 3DGSのREADMEではNode.jsを利用したローカル実行を紹介 データの 準備 idex.htm lを編集 トークンの 取得 仮想環境 の構築 Cesiumの 起動 実行結果 の確認  複数のPCで試したところ、Node.jsのバージョンの違いやその他 の依存関係で問題が発生する場合があった Dockerファイルの例  Dockerファイルを利用して環境を構築
13. 仮想実行環境の構築 Dockerを利用して仮想実行環境を構築 以下のコマンドを実行し、イメージをビルド docker runコマンドを実行し、Docker Containerを起動 docker build -t cesium_3dgs . データの 準備 idex.htm lを編集 トークンの 取得 仮想環境 の構築 Cesiumの 起動 実行結果 の確認 ブラウザで以下のURLにアクセス <http://localhost:5173/>
14. Cesiumの起動 Cesium上に表現された3Dデータが表示される データの 準備 idex.htm lを編集 トークンの 取得 仮想環境 の構築 Cesiumの 起動 実行結果 の確認
15. 実行結果の確認 3DGSが追加できているか確認 追加できていると右上のタブに自身の追加した3DGSのタイトルが 表示され、選択すると3DGSを可視化することが出来る データの 準備 idex.htm lを編集 トークンの 取得 仮想環境 の構築 Cesiumの 起動 実行結果 の確認
16. 実行結果の確認 3DGSが追加できているか確認 追加できていると右上のタブに自身の追加した3DGSのタイトルが 表示され、選択すると3DGSを可視化することが出来る データの 準備 idex.htm lを編集 トークンの 取得 仮想環境 の構築 Cesiumの 起動 実行結果 の確認
17. 実行結果の確認 地球儀の上で3DGSのモデルを可視化することができた データの 準備 idex.htm lを編集 トークンの 取得 仮想環境 の構築 Cesiumの 起動 実行結果 の確認
18. まとめ AIST Cesium Threejs 3DGSを利用してCesiumの地球儀の上で3DGSのモデルを可 視化する方法について紹介しました 建物・構造物のリアルな可視化（例：文化財、災害復旧前後の比較）などにも利用で きるかもしれません