TouchDesignerによる3D都市モデルのビジュアライゼーション
hr.icon
1. PLATEAUとは
PLATEAUは、国土交通省が推進する、日本全国の都市デジタルツイン実現プロジェクト。建物、土地、道路を含めた各種3D都市モデルデータをデータベース化して公開している。3D都市モデルデータはまだまだ都市部のみ詳細なデータが準備されているだけで、地方のデータに乏しい現状ではあるが、国レベルの都市データの利活用の推進が始まっており、今後データが整備されることで応用が広がっていくことが予想される。
https://gyazo.com/a74f298aad054363c22253fc2e07b0a9
https://www.youtube.com/watch?v=cSq011glubU
データベースだけでなく、Unity、Unreal Engine、TouchDesigner等での活動方法を紹介することで、ユーザーが様々なコンテンツやサービスを開発することができる情報も公開している
https://gyazo.com/e68e0631b04577792e4a71415b236a04
hr.icon
2. 本演習の内容
2.1 演習の流れ
3D都市モデルデータの仕様の理解とデータの準備が主な作業
TouchDesignerのプログラムは、PLATEAUで公開されているものを利用
https://gyazo.com/2d21b712d4c0d971bfb4ef7d108b1da9
2.2 最終制作物
本演習では、PLATEAUが公開しているTouchDesignerチュートリアルを参考に進める。すべて同じ内容ではなく、部分的に変更している。
下映像は、PLATEAU Tutorialの映像。
https://www.youtube.com/watch?v=yHqDjvgfjmQ
最終的に以下のような映像表現を制作する。
モデルデータを墨田区にして、音楽を入れ替えて、色を足している。
https://youtu.be/LOIuoyGYiJw
hr.icon
3. 3D都市モデルデータの仕様
3D都市モデルの地物詳細度はLOD（Level of Detail）と呼ばれ、建築物に関しては下図のように定義されている。
現在、G空間情報センターで公開されている大部分のデータはLOD1であり、大都市の一部地域のみでLOD2が公開されている。 https://gyazo.com/81dfa8b9cf95aa188ea0c26426461da5
参考
今回利用する墨田区のデータでも、スカイツリーと一部のビルのみLOD2で、それ以外はLOD1のデータとなっている。
https://gyazo.com/e462cab625e7a939268d3fc7ac9c128e
hr.icon
4. 墨田区3D都市モデルデータの準備
4.1 （紹介のみ）都市モデルデータの準備方法
現在、G空間情報センター（）の公開データにはTouchDesignerで利用可能なOBJやFBXが含まれないため、CityGMLデータからUnity用SDKを利用して変換する必要がある。 今回の演習では変換後のOBJデータを配布する。
CityGMAからOBJへの変換方法は、以下ページで解説している。
4.2 墨田区のOBJ等データの配布 ※kibacoのお知らせ経由で配布
sumidaku_complete20240424.zip（124MB）を解凍する。
sumidaku_complete20240424フォルダ内には42のファイルがあり、sumida-ku_testA1.objがオブジェクトデータにになる。
https://gyazo.com/16effcd6691525667b1b839455a9e76f
4.3 Blenderで確認（任意） ※確認のみ
Blenderでsumida-ku_testA1.objを読みこむ。
https://gyazo.com/0d7ee6b100c9937886c24a9d4076e806
このままでは、オブジェクトが大きすぎて部分的に見えない。
NキーでSidebarを表示して、ViewタブのEndを10000mに変更する。
https://gyazo.com/47e4fdfb6a9dd22e48aa1557c098b6f1
https://gyazo.com/029732552988095ef650000d7ccaa304
Viewport Shading: Solidのままで、Color: Textureに変更して確認する。
https://gyazo.com/0b641fb8198a3d1040d408d69f402c3d
Color: Attributesに変更して確認する。今回はモデルの色やテクスチャは利用しないが、Color Attributesを利用してTouchDesignerのパーティクルに反映させることもできる。後述の日野キャンパスや人体モデルで利用している。
https://gyazo.com/0a49a86d88a4be71882ea56828e240c6
hr.icon
5. 音楽データのダウンロード
YouTube Studioのオーディオライブラリ（Googleアカウント必要）から、Icelandic Arpeggios - DivKid.mp3をダウンロードする。
https://gyazo.com/5e002e9a06e82442acecc0d274652cf9
hr.icon
6. PLATEAUチュートリアルデータのダウンロード
下記URLのGithubからTD-PLATEAU-ParticleSample-main.zipをダウンロードする。
https://gyazo.com/9be869d816a3286471ba8812b9b13d0e
TD-PLATEAU-ParticleSample-main.zipを解凍しておく。
https://gyazo.com/4948da86b0cbab240bf0c312ad5f01e8
TD-PLATEAU-ParticleSample-mainフォルダの中に、先にダウンロードした以下データを移動する。
sumidaku_complete20240424フォルダ
Icelandic Arpeggios - DivKid.mp3
https://gyazo.com/7ef8eca33a6556b6f7daf2150e65ec50
hr.icon
7. TouchDesignerによるビジュアライゼーション
7.1 はじめに
本演習では、そこまで詳細な使い方には触れずに、墨田区のモデルや音楽データの入れ替えと色の修正のみを解説する。
7.2 サンプルプロジェクトの起動
sample_particle_01.toeをダブルクリックしてTouchDesignerを起動する。
https://gyazo.com/a336dbc98722b98271967b41e6a44cc3
フルスクリーンで映像が表示（Perform Mode）されるので、ESCキーを押す。
https://gyazo.com/2998e495fc0063e7f3c26b8e0c96dfbe
Hキーでネットワーク全体表示。
https://gyazo.com/bac214d6650b79735749ad9b73f4afea
7.3 バックグラウンド表示
必要に応じてタイムライン再生を停止して編集
一番右側のOuT TOP (out1)のDisplayボタンをONにする。
https://gyazo.com/343538affa6450e624beb5c3293e3d9c
Null TOP (null1)とOut TOP (out1)の間にRGB Key TOPをInsertする。
https://gyazo.com/2bb2910213ecfb6d8de27b9d68f755db
7.4 音楽データの入れ替え
Audio File In CHOPのパラメータウィンドウ > Fileから、Icelandic Arpeggios - DivKid.mp3に差し替える。
https://gyazo.com/a91165ed6b219b56e2da0e68a2074c1b
7.5 墨田区モデルデータの入れ替え
一番左のFile In SOPでモデルデータが読み込まれている。
https://gyazo.com/7e802b8c52493aa6bb65f80413daf042
SOPやCOMPは処理が重いため、必要に応じてViewerボタンを押すことでプレビューを確認する。
https://gyazo.com/90100d0316b3d81a148d993f2c1539c0
sumidaku_complete20240424フォルダの中のsumida-ku_testA1.objをTouchDesigner上にドラック＆ドロップする。
https://gyazo.com/aa7e7a36b9a70aaf207180a4152cdad6
File In SOP (symuda-ku_testA1)からTransform SOP (transform1)に接続し直す。
https://gyazo.com/b6bf10a4d66ac9c2c265b53e5c15a32a
7.6 モデルデータのスケールと位置の調整
Transform SOP (transform1) > tzに+250
Scal: 0.4, 0.4, 0.4
https://gyazo.com/ffbca624460b582f8d027fce850f7de2
7.7 ワイヤーフレームの色調整
Level TOP (level1) > RGBAタブ > High R: 0
https://gyazo.com/c0d21578e4d8f7aba683d17e093b8c5e
Level TOP (level1) > Postタブ > Opacity: 0.6
https://gyazo.com/f8125d6d7a2ec78e2299866245677018
7.8 パーティクルの色調整
Level TOP (level2) > RGBAタブ > High R: 0
https://gyazo.com/e6450a9eeaeb5e2bc219eda0be539591
7.9 左上のテキスト表記の修正
アクティブになっているText DAT (text2)のテキストを修正する。
https://gyazo.com/bd365cc6dbac086fa06018010227c318
hr.icon
8. 映像データへ書き出し（課題提出）
映像ファイルの書き出し方法にはMovie File Out TOPを利用する方法もあるが、リアルタイムレンダリングのため処理が重くいコマ落ちするので、今回はExport機能を利用する。
以下、手順。
File > Export
Input > TOP VideoにOut TOPをドラック＆ドロップして登録
Input > CHOP AudioにAudio File In CHOPをドラック＆ドロップして登録
Resolution: 1280 x 720
Movie FPS: 30fps
Codec: MPEG 4 (Part 2)
End Frame: 500 ※課題提出としては短くてよい
Out > Filenameの右側にあるフォルダアイコンをクリック
Render MovieのStartをクリック
（補足）Movie File Out TOPは、外部データ（カメラ映像やセンサー情報）のリアルタイムな書き出し用途に適している。
hr.icon
（紹介）日野キャンパススキャンモデルによるビジュアライゼーション
https://youtu.be/6Ne5P_hAaW0
上の映像ではポリゴンの色（Color Attributese）をパーティクルの色に反映させている。
以下はその設定。
Sprinkle SOP（sprinkle1）
Syrface Attributes: ON
STOP to CHOP（sopto1）
Coor RGB: ON
Geometry COMP（geo1）
Instance 2タブ
R: cr
G: cg
B: cb
hr.icon
（紹介）人体スキャンモデルによるビジュアライゼーション
人体スキャンモデル等、他の種類のモデルに入れ替えれば様々なビジュアル表現に応用できる。
https://youtu.be/xdPumbdRabw
hr.icon
（紹介）Blenderによる都市モデルデータを利用した映像作品制作
Blender等を利用した映像作品制作のチュートリアルも公開されている。
https://gyazo.com/97f368970f125849309cf3407c1f7980
https://www.youtube.com/watch?v=obsi8elpHV0