TOPIC35｜TouchDesignerでインタラクティブな作品を作る

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

【目次】

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

35.2　  プロジェクトの全体像

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

　35.3.1　 3D都市モデルの読み込み

　35.3.2　 テクスチャ投影の調整

　35.3.3　 幾何形状（ジオメトリ）の構成

35.4　 入力処理

　35.4.1　 各マテリアルから参照するNull CHOP

　35.4.2　 音の入力と解析

　35.4.3　 キーボードの入力

35.5　 マテリアルを構成する

　35.5.1　 グラデーションを作る

　35.5.2　 色を付ける

35.6　 カメラを動かす

35.7　 レンダリングする

　35.7.1　 背景にグラデーションを付ける

　35.7.2　 被写界深度風のぼかしを付ける

　35.7.3　 光らせる

35.8　 まとめ

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

このトピックは、【TOPIC 34｜ PLATEAU TouchDesigner Pluginを活用する 】の続きです。PLATEAU TouchDesigner Pluginで変換したOBJ形式の3D都市モデルを読み込んで、音に合わせたエフェクトをかけながら、見栄えの良い作品を作る方法を解説します。

このトピックで扱うのは、図35-1のように3D都市モデルの上空を回りながら、音に合わせた光のエフェクトをかけて映し出すサンプルです。

使用しているのは、東京都庁周辺の3D都市モデル。このモデルから「枠線」と「面」をレンダリングし、それぞれを重ねて表示しています。アニメーションはグラデーションパターンで表現しており、音が大きくなるほど、アニメーションが速くなります。また、音のピークに合わせて、リズム良くネオンのように光ります。またキーボードの［1］キーで光のパターン、［2］キーで光の色をそれぞれ変更できます。

3D都市モデルの上空を回りながら、音に合わせた光のエフェクトをかけて映し出す

サンプルプロジェクトは、下記からダウンロードできます。

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

「02_Interactive」が、本トピックのサンプルです。以下では、このサンプルプロジェクトの構造と主要な仕組みを解説します。

主な見どころは、以下のとおりです。

① 3D都市モデルの読み込み

OBJ形式に変換した3D都市モデルを読み込む方法。建物や道路、橋梁などを合わせて読み込む方法を解説します。

② 音に合わせたエフェクト処理

音に合わせて光を調整するには、音のピーク値を抽出します。ピークに応じて光らせたり、ピーク値を積算してアニメーションの速度を変えたりすることで、音に合わせたエフェクト処理を実現します。

③ 見栄えを良くするいくつかのテクニック

被写界深度風のぼかしを付けたり、ネオンのように光らせる効果を出したりするなど、見栄えを良くするいくつかのテクニックを紹介します。

35.2 _ プロジェクトの全体像

プロジェクトの全体像は、図35-2のとおりです。

① 3D都市モデルの読み込み

PLATEAUの3D都市モデルを読み込んでいるのは、左下の「PLATEAU Mesh」と囲んだブロックにあります。このサンプルでは、「建物」「道路」「橋梁」の3つの都市モデルを扱います。これらを読み込んでマージし、上から見た位置に調整します。　

3D都市モデルを表示するためのGeometryは、「色づけするためのGeometry COMP」と「ワイヤフレーム表示のためのGeometry COMP」の2つのGeometry COMPで作り、重ね合わせます。

② 音の入力

「Audio In」で囲んだ部分は、音を取り込んで再生する部分です。音データの出力は④の「Material」のブロックと接続し、音に応じて色が変化するようにしています。

③ キーボード入力

「Keyboard in」で囲んだ部分は、キー入力を処理する部分です。キーボードの［1］キーおよび［2］キーを押したときの処理を書いており、光のパターンや色を調整して④の「Material」のブロックと接続しています。

④ 色の設定

色を設定しているのは、「Material」で囲んだ部分です。ここでは、色づけするように設定したマテリアルである「constant1」と、黒い枠線を表示するように設定したマテリアルである「wireframe1」を用意し、それぞれ①で用意したGeometry COMPに接続します。

⑤ カメラ

3D都市モデルを撮影するカメラは、「Camera」で囲んだブロックにあります。カメラは円周上をグルグルと回るように構成しています。

⑥ レンダリングと後処理

「Post Process」のブロックでは、カメラで捉えた映像をレンダリングして、最終的な映像出力を作成しています。「Ramp」「Depth」「Bloom」などのエフェクトをかけて最終的な映像を作り出します。

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

まずは、3D都市モデルを読み込む部分から解説します。読み込む処理は、図35-3のように構成しています。

35.3.1 _ 3D都市モデルの読み込み

今回のサンプルでは、都庁周辺の3次メッシュのうち、次の範囲の3D都市モデルを使っています。この範囲をPLATEAU TouchDesigner Pluginで変換したOBJ形式ファイルを使います。「ビル（建物）」「道路」「橋（橋）」の3種類の地物を変換しました。

【使用した3次メッシュ範囲】
53394534、53394535、53394536
53394524、53394525、53394526
53394514、53394515、53394516

変換した「ビル」「道路」「橋」の各OBJ形式のファイルをTouchDesignerにドラッグ＆ドロップしてFile In SOPを作り、それらをMerge SOPでマージします。Merge SOPの先には、Transform SOPを接続して、位置を調整しています。

35.3.2 _ テクスチャ投影の調整

このあとの処理でテクスチャを投影するので、Texture SOPを接続して、UVマッピングの投影方法を設定しています。［Texture Type］には［XYZ Normalized］、［Projection Axis］には［Y Axis］を設定しており、この設定により、テクスチャは真上から並行投影されるようになります。

35.3.3 _ 幾何形状（ジオメトリ）の構成

Texture SOPの後ろには、Geometry COMPを2つ取り付けています。色を設定するテクスチャ、ワイヤフレームの枠線を設定するテクスチャをそれぞれあとで設定します。

35.4 _ 入力処理

このサンプルでは、「音」と「キーボード」を入力とし、これらの入力に基づいて、マテリアル（色）を変更する処理をしています。

35.4.1 _ 各マテリアルから参照するNull CHOP

次節で説明するマテリアル部では、次の4つのNull  CHOPの値を参照しています。この入力のブロックでは、これらの値を作り出します。

① Movement

入力された音のピーク（瞬間的な大きさ）がくるたびに「1」「2」…とカウントアップするような値を作ります。言い換えると、大きい音が鳴ったときに増加量が大きくなります。

この値は、次節で説明するマテリアル部において、Ramp TOPで作成するグラデーションパターンの位置を指定するパラメータとして使います。音が大きくなるにつれて増えていく値を参照することで、グラデーションが大きく動く――すなわち、アニメーションが速く動く――ような効果を出します。

② Strength

音のピークに合わせて「0」もしくは「1」を出力するように構成します（実際は後述するように、Lag CHOPを使うことで「0」と「1」がなめらかに遷移するようにします）。この値は、マテリアル部において、光の強さの値として採用します。そうすることで、音のピーク――音のリズム―に合わせて、光が「ピカッ」「ピカッ」と光るような効果を出せるようにします。

③ Type

マテリアル部において、作成するグラデーション画像の種類を指定するパラメータとして使います。キーボードの［1］キーが押されるたびに、「0」「1」「2」「3」と切り替わるような出力をするように作ります。これはマテリアル部で参照するときは、それぞれ「垂直」「水平」「放射状」「円形」に対応します。

④ Color

マテリアル部において、光の色を指定するパラメータとして使います。［2］キーが押されるたびに、0～1の範囲の小数がランダムに出力されるように作ります。

35.4.2 _ 音の入力と解析

音の入力部では、先頭に音声ファイルを読み込むためのAudio File In CHOPを置き、MP3形式ファイルを読み込んでいます。そこからAudio Device Out CHOPへと接続してスピーカーから出力します。

そして音のピークを計算するための前処理としてまず、Math CHOPを使ってチャンネルをひとつに――ステレオからモノラルへと――変換します。さらにAudio Filter CHOPを使ってバンドパスフィルタをかけます。ここでは、10000Hz以上の周波数をカットすることでノイズを除去し、人間の聞こえ方の感覚により近い波形変化を取り出すことを狙っています。

この出力から音のピークを求めるため、［Function］の設定値を［Maximum］（最大）に設定した、Analyze CHOPを接続します。そして、このピークに応じて、「0」と「1」の出力が出るように、Trigger CHOPを接続します。Trigger CHOPでは、音の大きさに応じて心地よく「0」と「1」が切り替わるよう、Trigger Threshold（閾値）をはじめとしたパラメータを調整します。

この結果から、マテリアル部で使うMovementとStrengthを作ります。

まず、どちらも「0」と「1」の値だと切り替わりがなめらかではないため、Lag CHOPを使ってなめらかにします。

StrengthのほうはLag CHOPを通した結果をそのまま採用します。Movementのほうは、Speed CHOPを使うことで「1」になったときに、「1」「2」「3」…のようにカウントアップする値を作り出します。音のピークのタイミングで増えるので、要は、音が大きくなるにつれてどんどんとこの値が大きくなります。

35.4.3 _ キーボードの入力

キーボードの入力処理の部分の先頭には、Keyboard In CHOPを配置し、［Keys］プロパティに「1 2」を設定しています。これで、キーボードの「1」と「2」を読み込めます。その後ろにSelect CHOPを置き、「1」が押されたとき、「2」が押されたときの処理を分岐しています。

［1］キーが押された場合は、押されるたびにTypeの値を「0」から「3」まで変化させるように構成したCount CHOPを構成しています。0から3までの値は、あとでRamp TOPから参照するときに、それぞれ、「垂直」「水平」「放射状」「円形」に相当するパラメータ値です。

［2］キーが押された場合も同様にCount CHOPでカウントアップさせていますが、こちらの処理では、TypeにRandomを設定したPattern CHOPを使って、このカウントアップ値に基づく、ランダムな値を発生するようにしています。つまり、クリックするたびにランダムな0～1の範囲の値が出力されるようになります。

35.5 _ マテリアルを構成する

マテリアルを構成する処理は、図35-15のとおりです。

35.5.1 _ グラデーションを作る

今回のサンプルでは、アニメーションはグラデーションパターンで実現し、パターンの位置を変えることで動いているように見せかけています。位置を大きく動かせばアニメーションが速く、小さく動かせばアニメーションが遅くなります。グラデーションを作っているのは、Ramp TOPです。

グラデーションの種類はtypeパラメータで決まります。「垂直」「水平」「放射状」「円形」のいずれかの種類が、それぞれ「0」～「3」に対応します。ここでは前節で作成したTypeというNull CHOPを参照しています。Typeは、キーボードの［1］キーを押すことで0～3の範囲で値が変わるようにしてありますから、［1］を押すたびに、グラデーションの種類が「垂直」「水平」「放射状」「円形」と切り替わります。

グラデーションの位置は、phaseパラメータで決まります。前節で作成した、音が大きくなるにつれて大きくなるように構成したMovementと名付けたNull CHOPを参照しています。つまり、音が大きいほどパターンの移動量が大きくなるので、アニメーションが速くなったように見えます。

作成したグラデーションは、Threshold TOPを使って特定の閾値で「0」と「1」の値に変換します。このとき、softenの値を0.5に設定して、「0」と「1」の境界をなめらかにしています。さらにMath TOPを使ってStrengthと名付けたNull CHOPの値をかけ算しています。前節では、音のピークが来たときに「1」、そうでなければ「0」となるようにしていますが、この処理によって、音のピークごとに「ピカッ」「ピカッ」と光る効果が出せます。

この一連の流れで作成した値は、他のところから参照しやすくなるよう、colorMapと名付けたNull TOPを作成しています。

35.5.2 _ 色を付ける

こうして作成したグラデーションをカラーマップとして、色を付けたマテリアルを作ります。

図35-18に示すように、「Keyboard in」ブロックの最終出力として出てきている0～1の範囲のランダムな値をCHOP to TOPで変換し、Ramp TOPで用意したグラデーションのなかから選んだ色を作ります。この処理はLookup TOPで行います。Lookup TOPを通ったら、Top to TOPでRGBに変換し、この色を使って固定色のマテリアルであるConstant MATを作ります。このMATは、geo1と名付けたひとつめのGeometry COMPに適用しています。これで建物など全体が色づきます。

そうしてもうひとつ、geo2と名付けたふたつ目のGeometry COMPには、ワイヤフレームのための真っ黒な固定色を設定したConstant MATを作り、それを適用しています。これで建物などの境界線が黒くなります。

35.6 _ カメラを動かす

このサンプルでは、カメラが上空を回るように動かしています。これを実現するには、Circle TOPで円の軌跡を作り、Camera COMPのPath SOPパラメータで参照します。またカメラの視点を示すNULL COMPを作り、それをLook Atパラメータで参照します。この方法については、「34.4.7　 ライトとカメラを設定する（Step5）」で解説したので、詳細は割愛します。

35.7 _ レンダリングする

結果をレンダリングして出力します。「Camera COMP」「ランダムな色をマテリアルとして適用したGeometry COMP」「ワイヤフレームのための真っ黒な色をマテリアルとして適用したGeometry COMP」から、Render TOPを構成しています。

こうして生成したレンダリング結果に、さまざまなエフェクトを加えて、格好良い見栄えを作ります。

35.7.1 _ 背景にグラデーションを付ける

Render TOPで生成した映像はアルファチャンネルが適用されており、背景が透明です。そこで、グラデーションの背景を付けます。Ramp TOPで作成したグラデーションをOver TOPで合成することで実現しています。

35.7.2 _ 被写界深度風のぼかしを付ける

これでほぼ完成ですが、さらに見栄えを良くするため、被写界深度風のぼかし――遠いほどぼけるような効果――を付けます。

これを実現するための構成が、図35-24です。

ぼかしを実現するには、Luma Blur TOPを使います。これは入力したグレースケールイメージの輝度に応じてピクセル単位で画像をぼかすオペレータです。入力するグレースケールイメージが白いところほどよくぼけるので、被写界深度のようなぼかしを実現するには、遠いほど白いグレースケールのイメージを用意する必要があります。それが一連の処理の下の部分です。

Depth TOPを使うとカメラからの距離に応じた深度のグレースケールイメージを作ることができます。ここでは単純に距離が遠いほどぼけるのではなく、中心を少しくっきり見せたいので、Ramp COMPで中心が黒いグラデーションを作り、Add COMPで重ね合わせることで、中心部分を少し黒めに（＝Lama Blur TOPを通したときに、くっきりするように）します。こうして生成したグレースケールイメージをLevel TOPを使ってコントラストや明るさを変更することで、ぼけ味を調整しています。

35.3.7 _ 光らせる

最後に、光らせる効果を出します。

光らせるにはBloom TOPを使います。ここではこだわりとして、中心部よりも周辺を暗くすることでアーティスティックな雰囲気を出すヴィネット効果を表現してみました。そのために、Ramp TOPを使って周辺が暗くなるようなグラデーションを作り、それにMultiply（乗算）を指定したCOMP TOPで重ね合わせました。

35.8 _ まとめ

このトピックでは、PLATEAU TouchDesigner Pluginで変換した3D都市モデルを使って、インタラクティブな作品を作る例を紹介しました。3D都市モデルをOBJ形式ファイルに変換することで、TouchDesignerで手軽に扱えます。今回のCircle COMPを使った例のように、カメラを動かす軌跡のパスを作れば、カメラを動かした映像を映し出すのも簡易です。

格好良い見栄えにするには、さまざまなエフェクトが重要です。今回は、音に合わせて「ピカッ」「ピカッ」と光るサンプルを作りましたが、こうしたリズムと合うような仕組みを作るには、音のピークを抽出した処理で行うのが一般的です。

今回説明したように、レンダリング後の映像に対してぼかしをつけたり「ピカッ」と光る効果を付けたりすると、なおのこと格好良い作品を作れます。

このトピックでは、細かい操作は割愛していますが、チュートリアル動画では、本文では入れられなかった細かいテクニックも語られています。興味がある方は、ぜひ視聴してください。