はじめに
GoogleMapsの都市モデルってかっこいいですよね！
今回はフォトグラメトリ(Photogrammetry)という手法を使ってポリゴンおよびポイントクラウド情報を取り出す方法をご紹介します。
Polygon → Camera Depth Point Cloud → Point Cloud#touchdesigner #realtime #pointcloud pic.twitter.com/8iVGfaN20j
— ツミキルーム\Takashi Kawamura (@tsumiki_room) October 28, 2019
フォトグラメトリとは
被写体をさまざまなアングルから撮影し、そのデジタル画像を解析、統合して立体的な3DCGモデルを作成する手法です。デジタルカメラを用いた3次元測定機に応用されています。フォトグラメトリーは3Dスキャナのような特殊な機器が不要で、通常の写真だけで生成できることが特徴です。一般的には110枚程度の画像データが必要となり、都市や建築物などの大きなものまで3Dモデルとしてデータにできます。
https://school.dhw.co.jp/word/cg/photogrammetry.html から引用
ネットで入手できる作成ツールがいろいろありますが、今回は無料の作成ツールMeshRoomで作成し、描画はTouchDesignerを使いたいと思います。
- MeshRoom ─ https://alicevision.org/
- TouchDesigner ─ https://derivative.ca/
1.Google Mapsで素材を取得する
1.1 GoogleMapsの3D化したいエリアを開き、余計な表示を消しておく
- 地図表示から航空写真表示にする
- 検索ボックス内にあるハンバーガーメニューを開いて航空写真の”ラベルを表示”をクリックする
- 画面左のパネルを折りたたむ
するとこんなふうにすっきりした航空写真になります
1.2 あとはひたすらにスクリーンキャプチャする
左クリック ─ 縦横移動
ctrl+左クリック ─ 回転
中ホイール ─ ズーム
こんな感じでエリアをまんべんなくキャプチャしていきます。
適切な枚数はエリアのサイズによって異なりますので、一度100枚程度で試してみてから精度が低い部分を追加で撮影するのがコツかなと思います。
当然枚数が増えると精度が増しますが、そのぶんMeshRoomでの計算に時間がかかります。
1.3 書き出した画像の無駄な部分をトリミングする
画面キャプチャした際に発生した無駄な部分（ウィンドウ枠など）をトリミングしていきます。
方法はいろいろあると思いますが、僕は以下の方法でおこなっています。
- Adobe Bridgeで連番入りのファイルネームにリネーム
- Adobe AfterEffectsで矩形にトリミングしてフレーム単位の連番書き出し
これでMeshRoomで処理するための画像の準備が整いました！
2.MeshRoomを使ってPointCloudデータとポリゴンデータを生成する
2.1 MeshRoomを起動して、書き出したキャプチャを読み込みプロセスを実行する
- 画面左側の"images"に画像をドラッグ＆ドロップするとファイルが読み込まれる
- ファイルを一旦保存する
- 上部中央緑色のの"Start"を押してプロセスを実行する
画像枚数によって異なりますが、プロセスが終了するまで数時間待つこともあります。 ファイルを保存した場所に各ノードのディレクトリが生成されるので、実行前に必ず保存しておきましょう。
生成結果はこんな感じです。大量のカメラとポイントクラウドが生成されました。
Y平面の角度が斜めになっていて扱いにくそうですが、それはこの後TouchDesignerで直すことにします。
2.2 ポリリダクションする
──ポリゴンデータを使いたい人用の工程です。PointCloudのみ使用したい場合はこの項目を読み飛ばしても構いません。
まずはポイントクラウドからポリゴンデータを取り出してみます。
ただポリゴン数が多すぎるとこの後なにかと面倒なのでポリリダクションしておきます。
- "Graph Editor"の"Texturing"ノードを選択し、"3D Viewer"中央下部にある"Load Model"をクリックしてメッシュデータを表示させる
- "Meshing"ノードを選択し、"Max Points"パラメータの値を5～10分の1程度に下げる
- 再度"Start"を押して処理を実行する
"Graph Editor"です。各ノードを選択することでプロセスを細かく設定することができます。
右/約500万ポリゴン(減ポリ前)、左/約100万ポリゴン(減ポリ後)
若干ディテールが削られているのがわかると思います
用途にあわせて適切なリダクションをしましょう
2.3 ポイントクラウドとポリゴンデータを取り出す
MeshRoomのディレクトリから必要なモデルデータを取り出します。
- ポリゴン ─ MeshroomCache\Texturing\ 以下フォルダ内の.obj
- pointcloud ─ MeshroomCache\PrepareDenseScene\ 以下フォルダ内の.abc(alembic)
書き出せました！あとはTouchDesignerで描画するだけです
3.TouchDesignerを使ってPointCloudを描画してみる
今回は取り出したalembicをTouchDesignerで描画してみたいと思います。
現状experimental版のみTOPを使ってインスタンス化することができます。
なのでexperimental版の使用を推奨します。
通常版を使う場合はglsl MATでインスタンス化する必要があります。
3.1 alembicから座標と色を取り出す
alembicには頂点カラーと頂点座標、さらにスキャンに使った大量のカメラ情報が入っています。
今回必要なのはカラーとポジションなので、それを取り出します。
- alembicをエディタ上にドラッグ＆ドロップする、もしくはalembic SOPで読み込む
- transform SOPで地面をXZ平面と地面の位置を揃える(目合わせ)
- SOP to CHOPでCHOP化し、"Position XYZ"と"Color RGB"を"ON"にする
%0Age-store.s3.ap-northeast-1.amazonaws.com/0/152366/b78dd4ed-c475-9fba-1537-346594b19f39.png)
インスペクタの中身はこんな感じです
3.2 カラーと頂点のCHOPを2次元画像にする
そのままgeo COMPに入れても描画されるのですが、より軽くてより扱いやすくするためにTOPにしてからインスタンス化します。
- 全6チャンネルをそれぞれselect CHOPで分ける
- shuffle CHOPで2次元配列にする
- CHOP to TOPで画像化する
- reorder TOPでカラーとポジションそれぞれをRGB画像にまとめる
こんなふうにselect CHOPで小分けにして、shuffle CHOPで配列にして、CHOP to ToPで画像化したものをreorder TOPでまとめます
Shuffule CHOPのインスペクタはこんなかんじ
Methodを"Split N Samples"にして"N Value"を1000くらいにしておきます
できたテクスチャをreorder TOPでRGB画像にまとめます
3.3 geometory COMPでインスタンス化する
あとはそれぞれのテクスチャを使ってインスタンスするだけです。
テクスチャのRGBをそれぞれの座標や色に置き換えていきます。ここまでくればいつものインスタンス化のプロセスと同じですね。
geometory COMPのインスペクタ
テクスチャのRGBを使ってインスタンスの指定したいので”r”と”g”と”b”で各数値を指定します
3.4 インスタンス化するテクスチャやオブジェクトを工夫してみる
カラーと座標を使ってパーティクルを配置/着彩するところまでできました。
複製するオブジェクトやテクスチャを工夫して個性豊かなポイントクラウドを作ってみましょう！
板ポリとノーマルマップを使って球体風にしたもの
#touchdesigner pic.twitter.com/PxKHkUxzf5
— ツミキルーム\Takashi Kawamura (@tsumiki_room) October 26, 2019
アルファ抜きした板ポリでアイコン風にしたもの
Symbolized city#touchdesigner #dotfes2019 pic.twitter.com/Yt7YeHY4dn
— ツミキルーム\Takashi Kawamura (@tsumiki_room) November 4, 2019
最後に
TouchDesignerのソースをgithubにあげたのでこちらも参考にしてみてください
https://github.com/tsumikiroom/pointcloud
ごく当たり前ですが、本来フォトグラメトリとは実際にカメラで撮影したものをモデル化する手法なので、今回のようにgoogle Mapsをキャプチャするほうが特殊な使い方です。もちろん同じプロセスで普通のフォトグラメトリもできますので、そちらもチャレンジして頂けると表現の幅が広がっていいんじゃないかと思います。