🙆

WebブラウザでGaussian Splattingの編集ができるビューワーが公開されました。

2023/11/02に公開

JavaScript

この記事について

PlayCanvasのモデルビューワーで、3D Gaussian Splatting(.ply)ファイルを編集することができる「Super Splat」というプロジェクトがPlayCanvasのGitHubリポジトリにオープンソースでMITライセンスで公開されました。

GitHub
GitHub playcanvas/super-splat

Super Splatについて

こちらが開発チームの「Will Eastcott」さんのツイートとなります。

この動画のように3D Gaussian Splatting(.ply)ファイルに対しての処理をブラウザで高速に実施できます。

.plyファイルのインポート
加工・編集
編集後のデータを.plyファイルでのエクスポート

インストール方法

リポジトリのURLはこちらとなります。まだドキュメントは用意されていませんが、以下の手順でローカルの環境で実行できます。

クローン ( git clone )

git clone git@github.com:playcanvas/super-splat.git

サブモジュール ( submodule ) のインストール

サブモジュールとsubmodules/model-viewerが配置されていますので以下のコマンドでサブモジュールをインストールします。

git submodule update --init --recursive

実行

npm install # パッケージのインストール
npm run build  # ビルド (distフォルダに生成されます)
npm run serve # ローカルサーバーの起動

上記を実行後、ブラウザで localhost:3000 にアクセスし「Super Splat」のプロジェクトを利用できます。

起動後 localhost:3000

使い方（データのインポートからエクスポートまで）

私の環境で「Super Splat」のモデルビューワーをホスティングしてみましたのでこちらを元に使い方を見ていきます。

1. データの読み込み

こちらのURLにアクセスすると、以下のような画面が表示されます。

こちらは、先日私が撮影したものをアップロードしたデータです。
Luma AIなどで撮影をした.plyファイルがあれば、ローカルからアップロードをしてインポートできます。

2. データの編集（不要な点群の削除）

a. 球体の大きさを元に不要な点群を削除

Selection の項目から Sphere を選択します。
入力箇所が４つありますが、左から順に位置（x, y, z）, 大きさ (radius) となります。

切り抜く範囲を設定した後

b. 不要な点群を選択

Scene の項目にある Delete selected Splats をクリックし、切り抜きを実施します

切り抜きを実施した後

c. 修正・調整

先程、反対に切り抜いてしまったので Reset Scene をクリックしてシーンをリセットします。
Invert をクリックすることで、これまで選択されていなかった箇所を選択して切り抜くことができます。

切り抜く範囲を調整後

3. データのエクスポート

Export to の項目から Ply file を選択して新しい .ply ふぁいるとして　エクスポートをします。

エクスポートしたデータをPlayCanvasのモデルビューワーで表示

モデルデータの確認のためにこちらの、PlayCanvas glTF Viewerにアクセスをしてエクスポートした、.plyファイルを読み込みます。

model-viewer

こちらのビューワーを利用することでARでの表示なども可能です。

まだ、リリースされたばかりで大きく変更が加わる可能性が高いものとなりますが、ブラウザで.plyファイルの編集ができるのは便利だと思います。