TOPIC 34｜PLATEAU TouchDesigner Pluginを活用する

TouchDesignerは、ノーコードでインタラクティブな映像表現ができるビジュアルプログラミングツールです。TouchDesignerでPLATEAUの3D都市モデルを使うにはいくつかの方法がありますが、PLATEAU TouchDesigner Pluginを使ってOBJ形式に変換するのが簡易です。このトピックでは、PLATEAU TouchDesigner Pluginを使ってOBJ形式に変換し、利用するための方法を解説します。

このトピックの内容は「PLATEAU TouchDesigner Pluginの利用方法と導入例」（2024年度PLATEAU Hands-onアーカイブ動画）でも制作方法をハンズオン形式で紹介しています。

【目次】

34.1　  このトピックの見どころ

34.2　  PLATEAU TouchDesigner PluginでOBJ形式に変換する

　34.2.1　 OBJ形式とFBX形式

　34.2.2　 PLATEAU TouchDesigner Pluginで変換する

　34.2.3　 PLATEAU TouchDesigner PluginでOBJ形式とCSV形式に変換する

34.3　  PLATEAUの3D都市モデルを読み込んで表示する

　34.3.1　 レンダリングして表示する

　34.3.2　 カメラの位置を調整する

34.4　 属性を扱う

　34.4.1　 属性を使用するサンプル

　34.4.2　 提供しているサンプルファイル

　34.4.3　 属性情報の読み込みと整理（Step1）

　34.4.4　 MIDIコントローラで操作できるようにする（Step2）

　34.4.5　 インスタンシングしてBoxを作る（Step3）

　34.4.6　 3D都市モデルと重ね合わせる（Step4）

　34.4.7　 ライトとカメラを設定する（Step5）

　34.4.8　イメージフィルタ等をかけて格好良くする（Step6）

34.5　 まとめ

34.1 _ このトピックの見どころ

このトピックと次の「TOPIC35｜TouchDesigner Pluginでインタラクティブな作品を作る」では、TouchDesignerでPLATEAUの3D都市モデルを扱う方法を解説します。主な見どころは、以下のとおりです。

① 3D都市モデルを表示する

まずは、配布されているCityGML形式のファイルをTouchDesignerで扱えるように変換し、そのファイルを読み込んで表示する基本を解説します。

② 属性を扱う

PLATEAUの3D都市モデルには、建物の用途や高さなど、さまざまな属性情報が含まれています。TouchDesigner Pluginで変換すると、これらの情報をCSV形式ファイルに変換できます。変換されたCSV形式ファイルを読み込んで、どのように扱えばよいのかを解説します。

③ インタラクティブでビジュアルに特化した映像の作成

TouchDesignerは、インタラクティブでビジュアルに特化した映像を作成できるのが特徴です。MIDIコントローラを使って操作できるようにしたり、カメラが建物の上空を回ったり、イメージフィルタなどをかけて格好良いビジュアルにしたりする方法を解説します。

このトピックでは実例として、属性情報から建物の階数を取得し、それぞれの建物の屋上に建物の階数に応じた大きさのBox（立方体）を配置、指定した階数のBoxだけが光るサンプルを作ります。階数の指定には、MIDIコントローラのツマミを使用します。この実例を通じて、3D都市モデル（OBJ形式）の扱い方や属性のCSVの扱い方がわかります。

建物の屋上に階数に応じたBoxを表示。
MIDIコントローラのツマミで階数をコントロールし、該当の階数の建物のBoxだけが光る

また、次のトピックとなる「TOPIC35　 TouchDesigner Pluginでインタラクティブな作品を作る」では、PLATEAU TouchDesigner Pluginで変換したOBJ形式の3D都市モデルを読み込んで、音に合わせたエフェクトをかけながら、格好良い作品を作る方法を解説します。3D都市モデルの上空を回りながら、音に合わせた光のエフェクトをかけて映し出す方法がわかります。

34.2 _ PLATEAU TouchDesigner PluginでOBJ形式に変換する

TouchDesignerでPLATEAUの3D都市モデルを扱うには、 TouchDesignerで扱いやすいファイル形式に変換します。

34.2.1 _ OBJ形式とFBX形式

TouchDesignerでPLATEAUの3D都市モデルを扱う場合、主に次の2つのファイル形式に変換したものを使うことがほとんどです。テクスチャを扱う必要がなければ、軽量なOBJ形式を使うことを推奨します。

① OBJ形式

軽量で汎用性の高い3Dモデルファイル形式です。多くの3Dソフトウェアで広くサポートされています。シンプルな構造のテキストファイル形式で、ワイヤフレーム表示や任意のマテリアルの適用による表現に適しています。

TouchDesignerは、センサーやコントローラなどと接続してインタラクティブな表現をするのに使うことが多いですが、OBJ形式はデータ量が少なく、とくにこうしたリアルタイム処理が求められる場面で好まれます。

② FBX形式

アニメーション、マテリアル、テクスチャなども含む多用途のバイナリファイル形式です。3Dデータを高品質かつ効率的に管理できます。

TouchDesignerで読み込んだ場合、テクスチャやマテリアル設定、アニメーションデータもシームレスに利用可能です。複雑なシーンや高精度なビジュアルコンテンツを作成する際に適します。よりリアリティのある表現や動きのある3Dモデルが必要なプロジェクトで使用されます。

34.2.2 _ PLATEAU TouchDesigner Pluginで変換する

OBJ形式やFBX形式に変換する代表的な方法は、PLATEAU SDK for Unityを使った方法です。しかしPLATEAU SDK for Unityで変換したOBJ形式やFBX形式は、PLATEAUの3D都市モデルに含まれている「建物の用途」「高さ」などの属性情報が失われてしまいます。

これらを維持したまま変換するのが、本トピックで紹介する「PLATEAU TouchDesigner Plugin」です。PLATEAU TouchDesigner Pluginは、「テクスチャなしのOBJ形式」と「属性情報を記述したCSV形式」の2つのファイルを出力します。CSV形式ファイルをTouchDesignerで読み込むことで、建物の属性を活用した作品が作れます。

34.2.3 _ PLATEAU TouchDesigner PluginでOBJ形式とCSV形式に変換する

具体的に、PLATEAU TouchDesigner Pluginを使って、OBJ形式およびCSV形式に変換する方法は、次のとおりです。

■ CityGML形式ファイルのダウンロード

まずは、使用したい3D都市モデルをダウンロードします。G空間情報センターの「3D都市モデル（Project PLATEAU）ポータルサイト」には、各都市の年度別リンクがあるので、使用したいものをクリックします。このトピックでは、渋谷区の2023年度のデータを扱います。

リンク先から、CityGML形式のファイルをダウンロードします。ダウンロードしたZIPファイルは、適当なフォルダに展開します。

【3D都市モデル（Project PLATEAU）ポータルサイト】
https://front.geospatial.jp/plateau_portal_site/

【3D都市モデル（Project PLATEAU）渋谷区（2023年度）】
https://www.geospatial.jp/ckan/dataset/plateau-13113-shibuya-ku-2023

■ PLATEAU TouchDesigner Pluginのダウンロードと起動

次に下記のリンクから、PLATEAU TouchDesigner Pluginをダウンロードします。ZIP形式のファイルなので、適当なフォルダに展開してください。展開すると「PLATEAU-TouchDesigner-Plugin.toe」ファイルがあります。このファイルをダブルクリックして起動します。

【PLATEAU TouchDesigner Pluginダウンロード】
https://github.com/Project-PLATEAU/PLATEAU-TouchDesigner-Plugin/archive/refs/heads/main.zip

■ PLATEAU TouchDesigner Pluginで変換する

PLATEAU TouchDesigner Pluginが起動したら、次のようにして変換します。

【手順】PLATEAU TouchDesigner Pluginで変換する

［1］CityGMLフォルダを選択する

あらかじめダウンロードしておいたCityGML形式ファイルを展開したフォルダ（本トピックでは、ダウンロードした渋谷区の3D都市モデルが入ったフォルダ）を選択します。

［2］平面直角座標系番号

地域に応じて［使用する平面直角座標系番号］を選択します。渋谷区の場合は、［09：東京（本州）、福島、栃木、茨城、埼玉、千葉、群馬、神奈川］を選択します。選択したら［Next］をクリックします。

［3］中心座標を指定する

変換する際の中心座標を選択します。［施設名称・地名を検索］に名称を入れて［検索］ボタンをクリックすると地図が表示されるので、そこから選びます。ここでは「渋谷109」を検索して、この建物を中心点とします。選択したら、［Next］をクリックします。

［4］出力エリアと地物を選択する

［3］で選択した中心点を中心とした地図が表示され、その上に読み込んだCityGMLデータが存在する地域が四角形で示されます。CityGML形式ファイルはメッシュ単位で分割されており、それぞれの四角形の左上にはそのメッシュ番号が表示されています。

この画面で、どのメッシュの地域を読み込むのかをマウスでクリックして選択します。たくさん選ぶこともできますが、そのぶん重くなるので、今回は中心点に設定した渋谷109が含まれる「53393595」のみをクリックして選択します。メッシュを選択したら、さらに出力する地物を選びます。今回は［ビル］のみを選択します。選択したら、［Next］をクリックします。

［5］出力オプションなどを指定する

最後に、出力オプションなどを指定します。

出力オプションは2つあります。

・中心座標を設定地点に合わせる

チェックを付けると、中心点として設定した場所を原点にします。チェックを付けない場合は、平面直角座標の原点になります。今回はチェックを付けておきます。

・属性情報を出力する

チェックを付けると、PLATEAUの3D都市モデルに含まれている建物の用途や高さなどの属性が、CSV形式で出力されます。ここではチェックを付けておきます。

出力オプションに続き、［出力する最大LOD（Level Of Detail）］を選択します。LODは詳細度のことです。LODが大きいほど詳細になりますがデータが大きくなります。LOD0は平面データ、LOD1はそれに高さ情報を持たせたもの、LOD2は屋根や壁の情報を持たせたもの、LOD3はドアや窓の開口部を持たせたものです。ここでは、比較的軽量なLOD1とします。

最後に書き出しフォルダを選択して［書き出し］をクリックすると、OBJ形式ファイルなどがエクスポートされます。エクスポートには、しばらく時間がかかります。

■ 出力されたファイル

エクスポートが完了すると、出力した地物の種類ごとに1つのOBJ形式ファイル、属性データを含む1つのCSV形式ファイル、そして、変換設定を示したconfig_で始まる1つのCSV形式ファイルの3種類が作られます。

① 地物ごとのOBJ形式ファイル（選択したメッシュの数だけ）

各地物の幾何形状（ジオメトリ）情報が格納されたOBJ形式ファイルです。TouchDesignerで表示するときは、このファイルを読み込んで使います。

② bldg_から始まる属性CSV形式ファイル（1つ）

建物の経緯度、座標（メートル）、そして各種属性が設定されたファイルです。ファイルの内容は下記のとおりで、ObjectID列で示される地物IDがキーとして構成されています。TouchDesignerで属性を扱いたいときは、このファイルを読み込んで使います。

ObjectID centroidLatLon X (m) Y (m) offset_x offset_z bottomHeight topHeight name creationDate stringAttribute class usage measuredHeight …略（属性数だけ続く）… PosList
bldg_d3c43c5e-fa07-426a-a002-4af90d0f05df 35.65972985241315 139.69071948046394 -12912.315000710283 -37741.820002914406 -721.1540569131157 -15.500487343873829 28.089956 37.21 2024-03-15 3002 411 11.8 …略（属性数だけ続く）… surfaceID1 35.65895235201249 139.74522885734575 18.39…略…

リスト34-1　bldg_から始まる属性CSVファイルの例

③ config_からはじまるCSV形式ファイル

変換設定を記したファイルで、内容は、リスト34-2のとおりです。中心の経緯度と座標、変換日時が記載されています。Timestampに書かれている値はPLATEAU TouchDesigner Pluginで変換作業したときの日時（UNIXタイムスタンプ）で、①②③のすべてのファイルの接尾辞として採用されている値です。

name value
prcLon 139.83333333333333
prcLat 36.0
offset_x -37757.32049025828
offset_y -12191.160943797167
Timestamp 1735017461_8049402

リスト34-2　config_ファイル

34.3 _ PLATEAUの3D都市モデルを読み込んで表示する

それでは、変換したファイルをTouchDesignerで扱う方法を説明します。

34.3.1 _ レンダリングして表示する

まずはオペレータを配置して、OBJ形式ファイルを読み込んで表示するところまでを説明します。

【手順】OBJ形式ファイルを読み込んで表示する

［1］OBJ形式ファイルをドラッグ＆ドロップする

TouchDesignerを起動し、デフォルトで作られるオペレータをすべて削除し、まっさらな状態から作ります。

まずは、出力されたOBJ形式ファイルをドラッグ＆ドロップします。すると、幾何形状を読み取るFile In SOPが作成されます。画面を見るとわかるように、ここには読み込んだ3D都市モデルのプレビューが表示されます。

［2］Null SOPを追加する

読み込んだファイルを描画していくのですが、いったんこの後ろにNull SOPを取り付けます。［Tab］キーを押すとオペレータ一覧が表示されるので、［SOP］タブにある［Null］を選択して追加し、線でつなぎます。

コラム：Nullを追加する理由

Nullは何もしないオペレータです。なくてもよいのですが、種類（［DAT］や［CHOP］など、色が違うもの）が違うもの同士を接続するときは、その間にNullを配置しておくことを推奨します。

TouchDesignerでは、種類が同じもの同士が接続されている線に別のオペレータを追加しても、線が切れません。しかし種類が異なる場合は線が切れるので、接続し直しになります（ただしSOPとCOMPは例外で、Nullがなくてもつなぎ直しが簡単にできます）。こうした接続の面倒さを防ぐのが、Nullを適宜配置するテクニックです。種類が異なるところの接続点にNullを置くことで、線のつなぎ直しをすることなく、あとから他のオペレータを追加できるようになります。

［3］Geometry COMPを追加する

同様にして、この後ろにGeometry COMPを付けます。これで3Dデータとして読み込めるようになります。

［4］Camera COMPを追加する

幾何形状を撮影するためのCamera COMPを追加します。追加するだけで接続はしません（のちの手順でRender TOPを追加すると、自動的につながります）。

［5］Light COMPを追加する

同様にして、光源となるLight COMPを追加します。こちらも接続はしません（のちの手順でRender TOPを追加すると、自動的につながります）。

［6］Render TOPを追加する

この状態でRender TOPを追加します。すると、配置済みのGeometry COMP、Camera COMP、Light COMPと、配置したRender TOPがつながって配置されます。

これでRender TOPにレンダリングされました。

34.3.2 _ カメラの位置を調整する

Render TOPのプレビューを見ると、建物を下から見上げたようなレンダリング結果となっています。これは、レンダリングしている渋谷の地域が丘の上にあるため、0よりも高い位置に建物があるのが理由です。

そこでCamera COMPのTranslateパラメータを調整してカメラの位置を調整します。例えば、TranslateパラメータのY座標を80に設定すると、上から見下ろしたレンダリング結果に変わります。

34.4 _ 属性を扱う

「34.2　PLATEAU TouchDesigner PluginでOBJ形式に変換する」で説明したように、PLATEAU TouchDesigner Pluginでは、3D都市モデルに含まれている属性情報をCSVに変換できます。こうして変換したCSVを読み込んで活用する方法を説明します。

34.4.1 _ 属性を使用するサンプル

このトピックではサンプルとして、建物の屋上に建物の階数に応じた大きさのBox（立方体）を置き、それをユーザーの操作で、特定の階数の建物のBoxだけを光らせる作品を作ります。

建物の屋上に階数に応じたBoxを表示。
MIDIコントローラのツマミで階数をコントロールし、該当の階数の建物のBoxだけが光る

光らせる階数を指定するには、上下に動かせるノブを持つMIDIコントローラを使います。MIDIコントローラを持っていない場合は、マウスで操作することもできます。

それぞれの建物の階数（地上階数）は、PLATEAUの3D都市モデルのstoreysAboveGround属性を使います。またBoxを配置するには、その座標が必要ですが、中心点としてCSVファイルに書かれたoffset_x、offset_z、そして高さについては、CSV形式ファイルに含まれているtopHeight項目の値（最も高い高さ）を使います。

34.4.2 _ 提供しているサンプルファイル

このトピックでは、サンプルファイルを提供しています。

【サンプルファイル】
https://github.com/Project-PLATEAU/PLATEAU-TouchDesigner-Plugin/tree/main/Examples

「01_Geolocation」が本トピックのサンプルで、次の2つのファイルを収録しています。

① Sample.toe

完成版です。開いて実行すると、完成形を確認できます。

② HandsOnSample.toe

それぞれのステップごとに分けて収録したサンプルです。Step1～Step6まであり、ダブルクリックして開くと、それぞれの処理のオペレータの構成や設定が表示されます。

以下では、このHandsOnSample.toeに基づき、それぞれのStepごとに主要な処理内容を解説していきます。より細かい設定値については、HandsOnSample.toeを実際に確認してください。

コラム：Cookのオン・オフを変更する

提供しているサンプルは、負荷を抑えるため、すべてのStepにおいてcookをオフにして、オペレータが実行されない状態にしています（オペレータに［×］が表示された状態です）。このサンプルは、6つのStepがあるため、すべて実行してしまうと、6つが同時に実行されてしまうからです。

サンプルを確認するときは、それぞれのStepの左側の［×］ボタン（Cookingボタン）をクリックして、Stepごとに実行のオン/オフを切り替えて確認してください。［×］ボタンをクリックすると、オペレータの［×］が外れ、各オペレータのプレビューが確認できるようになります。

34.4.3 _ 属性情報の読み込みと整理（Step1）

まずは、属性情報の読み込み方から解説します。以下では、新しくプロジェクトを作り、デフォルトで作られるオペレータをすべて削除し、まっさらな状態から作ります。

■ 属性情報を読み込む

TouchDesignerでCSV形式ファイルを読み込むには、Table DATを使います。PLATEAU TouchDesigner Pluginで生成した属性情報を含むCSV形式ファイルをTouchDesignerにドラッグ＆ドロップすると、そのファイルを読み込むTable DATが作られます。

■ データを取り出したりマージしたりして必要なデータを取り出す

読み込んだデータを取り出したりマージしたりして必要なデータを取り出します。先ほど概説したように、今回のサンプルでは、CSV形式ファイルから、次の属性データを取り出して利用します。

・Boxの座標として、（offset_x, topHeight, offset_z)
・階数（Boxの大きさ）として、storeysAboveGround

［手順］必要なデータを取り出す

［1］列ごとに取り出せるようにする

各列を取り出すために、右側にConvert DATを追加します。するとデータが列ごとに分かれます。

［2］Boxの座標として（offset_x, topHeight, offset_z)を取り出す

Convert DATの後ろにSelect DATを取り付けると、必要な列を取り出せます。ひとつのConvert DATで取り出せるのは、連続した列です。

例えばBoxの座標として（offset_x, topHeight, offset_z)を取り出す場合、元のCSV形式ファイル上では、offset_xとoffset_zは連続していますが、topHeightは離れた列にあります。そこで別々に取り出して、Merge DATで合成するようにします。

まずは、Convert DATの後ろにSelect DATを取り付けて、offset_x～offset_zの列を取り出します。そのためには［Select Cols］に［by Name］を選択し、［Start Col Name］に「offset_x」、［End Col Name］に「offset_z」と、それぞれ入力します。

そしてもう1つSelect DATを追加して、topHeightを取り出します。

この2つのSelectをMerge DATで結合します。Merge DATは2つのデータを結合するものです。行結合（Append Rows）と列結合（Append Columns）など結合方法を選択できます。ここでは、［How］で［Append Columns］を選択して、列を順に結合します。

これで、(offset_x, offset_z, topHeight)の値を取り出すことができました。さらに別のオペレータをこのあとつないでいくので、ここにNull DATを配置しておきます。Null DATには、他のものと区別できるよう、適切な名前を付けるとよいです。ここでは「txyz_null」という名前を付けました。

［3］階数（Boxの大きさ）として、storeysAboveGroundを取り出す

同様にSelect DATを接続して、storeysAboveGround列を取り出します。こちらにもNull DATを取り付けておきます。このNull DATには、storeysAboveGround_nullという名前を付けました。

［4］CHOPを用いて、数値やグラフなどで扱えるようにする

こうして抽出したデータを数値やグラフなどで扱えるようにするため、CHOPに変換します。Null DATの先に、DAT to CHOPを接続します。
［Output］に［Channel per Columns］、［First Row is］に［Names］、［First Column is］に［Values］をそれぞれ選択すると、値をバラバラに取り出せます。取り出すと、グラフとして表示されます。

この操作を手順2で作成したtxyz_nullと、手順3で作成したstoreysAboveGround_nullの両方に対して操作します。

［5］列に名前を付ける

後から扱いやすくできるよう、列の名前をリネームします。リネームには、Rename DATを使います。［To］の部分に、先頭から順に空白で区切って名前を付けます。この段階では、「offset_x offset_z topHeight」という順でデータが並んでいます。この情報はビルの上にBoxを配置するときの座標として使うので、「tx tz ty」という名前にします。そうすると、この後の工程でBoxを配置する際、その中心座標を(tx, ty, tz)で指定できます。

同様にして、storeysAboveGround_nullも、このままだと長いので別名を付けます。Boxの大きさを示す値としてあとで使うので、scaleという名前にしておきます。

［6］Merge DATでひとつにまとめる

あとから使いやすくするため、Merge DATを使って、ひとつにまとめます。

これでPLATEAUの属性データを取り出すことができるようになりました。

34.4.4 _ MIDIコントローラで操作できるようにする（Step2）

次に、MIDIコントローラから操作できるようにしていきます。

■ MIDIコントローラ

TouchDesignerでは、インタラクティブな操作にMIDIコントローラを使うことが多く、［Dialogs］メニューの［Device Mappings］から、さまざまなMIDIコントローラをマッピングすると使えるようになります。実機を持っている場合は、ここからMIDIコントローラを設定します。

このトピックでは、MIDIコントローラをお持ちでない人のために、TouchDesigner上でマウス操作によってMIDIコントローラと同等の操作ができる「nanoKONCTOL2.tox」を添付しています。これをドラッグ＆ドロップすると、MIDIコントローラのような画面が表示されて、マウスでコントールできるようになります。今回は、これを使います。

［TD-nanoKONTROL2］
https://github.com/hisahayashi/TD-nanoKONTROL2

■ MIDIコントローラのスライダーの値を得る

ではこのnanoKONCTOL2.toxから、操作しているスライダー（ツマミ）の値を得るところまでを作ります。

【手順】MIDIコントローラのスライダーの値を得る

［1］Null CHOPを付ける

まずは、Null CHOPを接続します。すると、それぞれのツマミごとに「lb0」「s0」「k1」のような値として出力されていることがわかります。

画面上のnanoKONTROL2の右下の［＋］をクリックするとアクティブになり画面上でツマミを操作できます（非アクティブにするには、もう一度［＋］をクリックします）。実際にツマミを上下すると（もしくは連動する設定をしたMIDIコントローラを操作すると）、それに基づき、出力値が変わることが確認できます。

［2］1つめのスライダーの位置を取り出す

今回は、MIDIコントローラの一番左側のスライダーに関しては、階数を指定するユーザーインターフェイスとして使用します。一番左のスライダーは「s0」という値として出力されています（2番目は「s1」、3番目は「s2」）。そこでSelect CHOPを使って、この値を取り出します。Channel Namesの［▶］をクリックして［s0］を選択すれば、s0の値だけを取り出せます。

［3］名前を変えたあと、Nullを挟む

この値は、階数を設定する値として使うので、Rename CHOPを使ってfloorという名前に変更しておきます。また、このあとさらに別のオペレータをつなぐため、ここでいったん、Null CHOPを挟んでおきます。Null CHOPの名前は、floor_nullという名前にしました。

■ MIDIコントローラでのスケールを調整する

MIDIコントローラでのスライダーの操作では、0～1の範囲の小数値が出力されます。今回は、これで建物の階数を指定したいので、データ上の「建物の階数の最小値」と「建物の階数の最大値」の幅で動く値が得られるようにスケールを調整します。

【手順】MIDIコントローラでのスケールを調整する

［1］階数の最小値を取り出す

まずは、階数のデータの最小値を取り出します。ここまでの手順において、階数のデータは、storeysAboveGround属性を出力したDAT to CHOPから出てきていますから、ここから引き出して、最小値を取り出します。

TouchDesignerでは、最小・最大、平均などを計算できるAnalyze CHOPがあるので、これを配置します。配置したら、［Function］を［Minimum］に設定することで、最小値を取り出せるようにします。ほかとの連結点となるよう、Null CHOPを接続します。名前はmini_nullとします。

［2］階数の最大値を取り出す

同様にして、階数の最大値を取り出します。最大値を取り出すには、Analyze CHOPを配置して、［Function］を［Maximum］にします。そして同様に、Null CHOPを付けます。名前は、max_nullとしました。

［3］最小値と最大値に合わせてスケールする

いま取り出した階数の最小値と階数の最大値の範囲になるように、MIDIコントローラから出力される0～1の範囲の値をスケールします。スケールするには、Math CHOPを使います。

まずは、MIDIコントローラから0～1の範囲が出力されているfloor_nullという名前を付けたNULL CHOPの後ろに、Math CHOPを設定します。この結果を階数の最小値と最大値に変換したいのですが、出力は整数値としたいので、［Integer］を［Floor］に変更します。これで出力が整数に切り上げられるようになります。

続いて、スケールする範囲を［Range］タブで調整します。［Range］タブには、［From Range］と［To Range］があり、From値がToの値になるようにスケールする動作をします。

今回はMIDIコントローラの出力は0～1なので、From Rangeの左側に「0」、右側に「1」を設定します。

次に、To Range側をそれぞれ「最小階」、「最大階」に設定します。ここまでの操作で、最小階はmini_null、最大階はmax_nullが出力するようにしているので、これらを参照します。

参照するには、参照先の右下の［＋］をクリックします。するとマウスカーソルの形が変わるので、そのまま入れたい場所にクリックして［CHOP Reference］を選択します。

■ 該当の階数の建物だけ「1」にする仕組みを作る

今回のサンプルでは、MIDIコントローラで選択した階数の建物の上に配置したBoxだけを光らせます。そのための準備として、MIDIコントローラで選択した階数の建物だけが「1」、それ以外は「0」と出力されるようなデータセットを作ります。

【手順】該当の階数の建物だけ「1」にするデータセットを作る

［1］Expression CHOPを接続する

建物の階数であるstoreysAboveGround属性を出力しているDAT to CHOPから引き出し、Expression CHOPを接続します。Expression CHOPは評価式に基づいて値を変更するCHOPです。

［2］MIDIコントローラで選択している階数と合致したときに「1」にする式を設定する

Expressionのところに、MIDIコントローラで選択している階数と合致したときに「1」、そうでなければ「0」になるような評価式を記述します。これはPythonの評価式で設定し、次のように入力します。ここで参照しているop('floor_null')は、floor_nullという名前を付けたNULL CHOPの出力値です。つまり、これと入力値（me.inputVal）が合致すれば「1」、そうでなければ「0」に設定されます。

1 if me.inputVal == op('floor_null')[0] else 0

［3］名前を変更する

あとで参照しやすくするため、名前を変更しておきます。Rename CHOPに接続して、rgbという名前に変更します。

［4］ひとまとめにする

最後に、これまで作ってきたMerge CHOPに入れて、まとめておきます。

34.4.5 _ インスタンシングしてBoxを作る（Step3）

以上で、それぞれの建物の上にBoxを配置するためのデータが、Merge CHOPから取り出せるようになりました。これらの値からインスタンシングして、Boxを配置していきます。

【手順】座標をもとにBoxを作る

［1］Null CHOPを付ける

このあとさまざまなオペレータを接続するので、まずは、Null CHOPを接続しておきます。instance_nullという名前にしておきます。

［2］Boxをインスタンシングする機構を作る

この座標に応じたBoxをインスタンシングします。そのためにはまず、Boxを作る機構を用意します。

Box SOPを追加し、その後ろにNull SOP、さらに、Geometry COMPを接続した一連の流れを作ります。

［3］インスタンシングする

こうして作成したGeometry COMPにインスタンシングを設定することで、座標からBoxを作っていきます。［Instance］タブを開き、［Instancing］を［On］にします。そして、データが出力されているinstance_nullを［Default Instance OP］のところまでドラッグして、参照設定します。

［4］X座標、Y座標、Z座標を設定する

［Translate X］［Translate Y］［Translate Z］に、それぞれ参照したデータからX座標、Y座標、Z座標を設定します。ここでは、それぞれ「tx」「ty」「tz」を設定します。これでプレビュー画面を確認すると、その場所にBoxが配置されることがわかります。

［5］スケールを設定する

同様にして、Scale X、Scale Y、Scale Zに値を設定します。ここではすべてにscaleを設定します。これで、階数が高い建物の上に配置するBoxほど大きさが大きくなります。

［6］色を指定する

次に、色を付けていきます。色の設定は、［Instance 2］タブにあります。Color OPの「R」「G」「B」にinstance_nullから出力されているrgbを設定します。

この設定をすることで、MIDIコントローラで選択している階数と合致するものだけが白、そうでなければ黒で表示されるようになります。実際にMIDIコントローラ（もしくはマウス操作）で、ツマミを上下すると、白黒が変化します。

［7］マテリアルを設定する

このBoxにマテリアルを設定して、見栄えを良くします。Constant MATならびにNull MATを用意します。そして配置したNull MATをGeometry COMP上にドラッグし、［Parm：Material］を選択し、Geometry COMPから、このマテリアルを参照するようにします。

［8］色を選択する

Constant MATの［Color］で、好きな色を選択します。するとBoxの色が、その色に変わります。

34.4.6 _ 3D都市モデルと重ね合わせる（Step4）

建物の上にBoxを置いて光らせるところまでできました。ここに、3D都市モデルを重ねます。

■ 3D都市モデルを読み込む

まずは「34.3　PLATEAUの3D都市モデルを読み込んで表示する」と同様にして、変換したOBJ形式ファイルをドラッグ＆ドロップしてFile In SOPを作って、そこからNull SOPを経由してGeometry COMPをつなぐ流れを作ります。この手順は、先ほどと同様なので詳細は省略します。詳しい操作については、チュートリアル動画を参照してください。

■ 色を設定する

このサンプルでは建物に色を設定します。Phong MATを追加し、そこからNull MATを接続します。そして、このNull MATをGeometry COMPにドラッグ＆ドロップして配置します。

■ 動作を確認する

この段階で、動作を確認します。左上の［▼］ボタンから、［Geometry Viewer］を選択します。そうすると、建物の上にBoxが正しく重なっていることがわかります。

MIDIコントローラで操作すれば、その階数に合致する建物の上にあるBoxが光ります。

34.4.7 _ ライトとカメラを設定する（Step5）

続いて、ライトとカメラを設定します。

■ ライトを設置する

まずは、ライトを設置します。見栄え良くするため、手前と奥とで2つのライトを設定しています。詳細については、チュートリアル動画を参照してください。

■ カメラを設置する

続いてカメラを設置します。今回のサンプルでは、固定カメラではなく、上空から回って映し出すようなカメラワークを作ります。

【手順】カメラを設置する

［1］カメラを設置する

まずは、Camera COMPを追加します。

［2］Circle SOPを追加する

カメラが円周を回るようにするため、Circle SOPとNull SOPを作ります。Circle SOPでは上空の円周を回るようにRadiusやCenterを調整します。ここでは、Radiusを(600, 600)、Centerを(0, 240, 0)を設定し、上空240mの位置で600mの半径で回るようにしました。

［3］カメラがCircle SOPの円周上を動くようにする

こうして作成したNull SOPをCamera COMPのPath SOPにドラッグ＆ドロップして参照設定します。

［4］LFO COMPを配置する

動かすためにLFO COMPを配置し、その後ろにNULL COMPを付けます。LFO COMPは波形を作るオペレータです。デフォルトでは1秒で0から1まで値が変わるようなデータを出力するのですが、これだと速すぎるので、［Frequency］を0.03にします。これで、およそ30秒で1周する出力になります。

［5］カメラのPositionに設定する

Camera COMPの［Position］をクリックして選択し、作成したLFO COMPの一連の流れのNULL COMPをそこにドロップして設定します。メニューが表示されたら、［CHOP Reference］を選択します。これで円周上をカメラが動くようになります。

［6］カメラが見るべき視点（方向）を設定する

カメラが見るべき視点を設定します。それには、Null COMPを配置し、それをCamera COMPのLook Atに指定します（Null COMPの座標値については、チュートリアル動画を参照してください）。これでカメラが、その視点を向きます。

［7］円の位置や視点の位置を調整しレンダリングする

あとは円の軌跡を作っているCircle SOPやカメラが見るべき視点を指定しているNull COMPの位置を調整して、良い塩梅にします。

そして、Render TOPを追加して、レンダリングします。詳しくは、チュートリアル動画を参照してください。

34.4.8 _ イメージフィルタ等をかけて格好良くする（Step6）

最後に、Bloom TOPを用いて良い感じに光らせたり、RGB Key TOPを用いて透過部分を黒くしたりして、見栄えを格好良くします。詳しくは、チュートリアル動画を参照してください。

34.5 _ まとめ

このトピックでは、TouchDesignerを使って3D都市モデルを扱う方法を解説しました。3D都市モデルには属性も含まれており、PLATEAU TouchDesigner Pluginを使えば、CSV形式データとして取り出すことができ、Table DATからDAT to CHOPを使って値を取り出せます。値を取り出すときは、SelectやRename、Mergeを使って取り出したり合成したりするのがポイントです。

トピックの後半では、MIDIコントローラを使って操作したり、建物を上空から回りながら俯瞰するカメラの動きを作ったりする方法を解説しました。このトピックでは、細かい操作は割愛していますが、チュートリアル動画では、見栄えの良い映像を作るための細かいテクニックも語られています。興味がある方は、ぜひ視聴してください。