コンテンツにスキップ
Materials
TouchDesigner
3D City Visualization with PLATEAU

3D City Visualization with PLATEAU

Updated: 2026-05*

1. PLATEAU とは

PLATEAU は国土交通省が推進する、日本全国の都市デジタルツイン実現プロジェクト。建物・土地・道路を含めた各種 3D 都市モデルデータをデータベース化して公開している。

公式: https://www.mlit.go.jp/plateau/about/

3D 都市モデルデータは現在、都市部のみ詳細データが準備 されている状況。地方データは整備途上だが、国レベルの都市データ利活用が推進 されており、今後の応用拡大が見込まれる。

参照: 3D 都市モデルでできること — PLATEAU

データベースだけでなく、Unity / Unreal Engine / TouchDesigner 等での活用方法 も公開されている:

https://www.mlit.go.jp/plateau/learning/

2. 本演習の内容

2.1 演習の流れ

  • 3D 都市モデルデータの仕様の理解とデータの準備 が主な作業
  • TouchDesigner のプログラムは PLATEAU で公開されているサンプル を利用

2.2 最終制作物

PLATEAU が公開している TouchDesigner チュートリアルをベースに、墨田区モデル + 音楽差し替え + 色変更 で進める:

PLATEAU Tutorial 公式映像:

完成例（墨田区版、本演習で制作）:

3. 3D 都市モデルデータの仕様

3D 都市モデルの 地物詳細度 は LOD（Level of Detail） と呼ばれる。建築物では以下のように定義:

現在 G 空間情報センター で公開されている大部分のデータは LOD1。大都市の一部地域のみ LOD2 が公開されている。

参考

今回利用する 墨田区のデータ でも、スカイツリーと一部のビルのみ LOD2、それ以外は LOD1:

4. 墨田区 3D 都市モデルデータの準備

4.1 都市モデルデータの準備方法（紹介のみ）

G 空間情報センターの公開データには TouchDesigner で利用可能な OBJ や FBX が含まれない。CityGML データから Unity 用 SDK を利用して変換 する必要がある。

今回の演習では 変換後の OBJ データを配布 する。

CityGML → OBJ への変換方法（PLATEAU SDK for Unity による）は別途解説予定。

4.2 墨田区の OBJ 等データの配布

sumidaku_complete20240424.zip（124MB）を解凍する。

sumidaku_complete20240424 フォルダ内には 42 のファイルがあり、sumida-ku_testA1.obj がオブジェクトデータ:

4.3 Blender で確認（任意）

Blender で sumida-ku_testA1.obj を読み込む:

このままではオブジェクトが大きすぎて部分的に見えない。N キーで Sidebar を表示して View タブの End を 10000m に変更:

Viewport Shading: Solid のままで、Color: Texture に変更して確認:

Color: Attributes に変更して確認。今回はモデルの色やテクスチャは利用しないが、Color Attributes を利用して TouchDesigner のパーティクルに反映 させることもできる:

5. 音楽データのダウンロード

YouTube Studio のオーディオライブラリ（Google アカウント必要）から Icelandic Arpeggios - DivKid.mp3 をダウンロード:

6. PLATEAU チュートリアルデータのダウンロード

下記 GitHub から TD-PLATEAU-ParticleSample-main.zip をダウンロード:

https://github.com/hisahayashi/TD-PLATEAU-ParticleSample

解凍:

TD-PLATEAU-ParticleSample-main フォルダの中に、先にダウンロードしたデータを移動:

  • sumidaku_complete20240424 フォルダ
  • Icelandic Arpeggios - DivKid.mp3

7. TouchDesigner によるビジュアライゼーション

7.1 はじめに

チュートリアルデータの使い方は PLATEAU 公式 TouchDesigner 解説 を参照。本演習ではモデル・音楽の入れ替えと色修正のみ解説する。

7.2 サンプルプロジェクトの起動

sample_particle_01.toe をダブルクリックして TouchDesigner を起動:

フルスクリーン（Perform Mode）で表示されるので ESC キー を押す:

H キーでネットワーク全体表示:

7.3 バックグラウンド表示

必要に応じてタイムライン再生を停止して編集。

一番右側の Out TOP (out1) の Display ボタンを ON:

Null TOP (null1) と Out TOP (out1) の間に RGB Key TOP を Insert:

7.4 音楽データの入れ替え

Audio File In CHOP のパラメータウィンドウ > File から Icelandic Arpeggios - DivKid.mp3 に差し替え:

7.5 墨田区モデルデータの入れ替え

一番左の File In SOP でモデルデータが読み込まれている:

SOP や COMP は処理が重いため、必要に応じて Viewer ボタン でプレビュー確認:

sumidaku_complete20240424 フォルダ内の sumida-ku_testA1.obj を TouchDesigner 上にドラッグ＆ドロップ:

File In SOP (sumida-ku_testA1) から Transform SOP (transform1) に接続し直す:

7.6 モデルデータのスケールと位置の調整

Transform SOP (transform1):

  • tz: +250
  • Scale: 0.4, 0.4, 0.4

7.7 ワイヤーフレームの色調整

Level TOP (level1):

  • RGBA タブ > High R: 0

  • Post タブ > Opacity: 0.6

7.8 パーティクルの色調整

Level TOP (level2):

  • RGBA タブ > High R: 0

7.9 左上のテキスト表記の修正

アクティブになっている Text DAT (text2) のテキストを修正:

8. 映像データへ書き出し（課題提出用）

映像ファイルの書き出しには Movie File Out TOP を使う方法もあるが、リアルタイムレンダリングのため処理が重くコマ落ち する。今回は Export 機能 を使う。

手順

  1. File > Export
  2. Input > TOP Video に Out TOP をドラッグ＆ドロップして登録
  3. Input > CHOP Audio に Audio File In CHOP をドラッグ＆ドロップして登録
  4. Resolution: 1280 × 720
  5. Movie FPS: 30fps
  6. Codec: MPEG 4 (Part 2)
  7. End Frame: 500（課題提出としては短くてよい）
  8. Out > Filename の右側のフォルダアイコンをクリック
  9. Render Movie の Start をクリック

補足: Movie File Out TOP は 外部データ（カメラ映像やセンサー情報）のリアルタイムな書き出し用途 に適している。

9. 応用例

9.1 日野キャンパススキャンモデル

上の映像では ポリゴンの色（Color Attributes）をパーティクルの色に反映 させている。設定:

ノード 設定
Sprinkle SOP (sprinkle1) Surface Attributes: ON
SOP to CHOP (sopto1) Color RGB: ON
Geometry COMP (geo1) Instance 2 タブ: R: cr、G: cg、B: cb

9.2 人体スキャンモデル

人体スキャンモデル等、他のモデルに入れ替えれば様々なビジュアル表現に応用できる:

9.3 Blender による都市モデル映像制作

PLATEAU は Blender 等を利用した映像作品制作チュートリアル も公開している:

10. 関連ページ

Slit ScanOptical Flow + ParticlesGPU