今回は 3D のレンダリング、インスタンシング、そしてインスタンシングを使ったオーディオのビジュアライズ の基礎を勉強をしていきます！
サンプルファイル
chimanaco/takara-univ-media-programming-2022
08が本日のディレクトリです。
レンダリング
レンダリングとは、3DCG ソフト上で形状や、マテリアル、テクスチャ、ライティングなどの計算を行い、最終的に2Dのイメージ出力を行うプロセスのことです。
TouchDesigner では以下のオペレーターを組み合わせてレンダリングしていきます。
| Name | Summary |
|---|---|
| Geometry COMP | 実際にレンダリングされるもの |
| Camera COMP | カメラを通して映し出されるものが出力される |
| Light COMP | ライティング |
| MAT | マテリアル、質感 |
| Render TOP | 出力結果 |
はじめてのレンダリング: /project1/Render_fundamental
まず Geometry COMP を追加。 中を見てみるとデフォルトで Torus SOP が入っています。
次に Render TOP を追加。そうするとカメラが無いと Warning が出ますので、
Camera COMP を追加。 形状がそれらしいものが出てくるのですが真っ黒になっています。ここで Light COMP を追加。無事 Torus が照らされました。
これが TouchDesigner のレンダリングの基本形です。
3D 空間で各コンポーネントを確認できる Geometry Viewer を開いてみましょう。alt + [ でネットワークエディターを分割し、左端の矢印ボタンから Geometry Viewerを選択すると以下のような画面になると思います。
SOP の Active Viewer と同じように操作することができます。
このように Geometry、Camera、Light が配置されているのが分かるかと思います。これらを動かしてみて、Render TOP の出力結果がどのように変わるか試してみてください！
Geometry の中の SOP の紫のボタンは render、青のボタンは display のトグルボタンになっています。表示がおかしい時はここをチェックしてみるといいかもしれません。
SOP と Geometry をつなぐ: /project1/Render_fundamental_2
SOP のアウトプットの上で右クリックして Geometry をつなぐと 内部に InSOP と OutSOP を自動で作成し、入力した SOP と同じものを Geometry 内に入れることができるのでおすすめです。
マテリアルについては次回勉強していきます！
Instancing
Geometry COMP には Geometry Instance という機能があります。これはgeometry のオブジェクトをコピーし、個別に変形を加えられるというものです。
GPU を使って処理をするため、以前ご紹介した CPU を使った Copy SOP よりも大量に高速に処理をすることができます。よく使うものには Translate、Rotate、Scale、Colorなどのパラメーターがあり、1つ1つの変化はシンプルでも大量のインスタンスを扱うことで面白い効果を得ることもできます。 それではやってみましょう！
いくつかやり方があるのですが、今回は CHOP を使用してインスタンスを作る方法をご紹介します。
Instancing Position: /project1/Instancing_position
Sphere に Noise をかけた形にインスタンスを配置してみましょう。
ポイントとなるのは以下です。
- 形を作る
SphereSOP を追加する。 - SOP を
SOP to CHOPで CHOP に変換して、3D空間上の各座標を CHOP で表示する。 Geometry COMPのInstanceタブのInstancingをONにする。Default Instance OPに変換した CHOP を指定する。Translate X/Y/Zにtx ty tzを指定する。
Instancing Normal: /project1/Instancing_normal
次に normal の値を使用して各インスタンスが元の SOP の法線の方向を向くようにしてみましょう。
SOP to CHOPでNormalをONにする。Rotate to Vector X/Y/Zにnx ny nzを指定する。
One or more of the Rotate to Vectors is co-linear with the up vector, no orientation will be applied for those instances. というエラーが出るかもしれません。これは上向きのベクター、y 方向のベクターと重なる法線があるので回転が反映されません、というワーニングです。Transform SOP で x か z 方向に少し回転を加えると直ったりします。
Instancing Color: /project1/Instancing_color
続いてインスタンスに色をつけてみます。
- 新しく
Noise CHOPを追加し、r g bの3チャンネルとする。インプットにSOP To CHOPのアウトプットをつなぐ。 Math CHOPを追加し、From Rangeを-1と1に指定。Merge CHOPを追加し、SOP to CHOPとr g bの入ったMath CHOPをインプットする。Geometry COMPのInstance2タブのR/G/Bにr/g/bを指定する。
Instancing Scale: /project1/Instancing_scale
最後にインスタンスのサイズを変えてみます。
- 新しく
Noise CHOPを追加し、チャンネル名をscaleとする。インプットにSOP To CHOPのアウトプットをつなぐ。 Math CHOPを追加し、From Rangeを-1と1に指定。To Rangeを0.5と2に指定（値は何でもかまいません）。Merge CHOPにインプットする。Geometry COMPのInstanceタブのScale X/Y/Zにscaleを指定する。
SOP に変化を加えたり、CHOP の値をいじることによって面白い動きになると思うので色々試してみてください！
Audio Spectrum を表示する /project1/Audio_spectrum_CHOP_TOP
別の Audio data visualization の方法として、スペクトラムもよく使われます。TouchDesigner では Audio Spectrum CHOP で FFT というアルゴリズムを使って Audio のスペクトラムを生成することができます。
ここでは2D でテクスチャを作ってそれを 3D に起こすという手法を使います。
以下のような手順になります。
Audio Spectrum CHOPでスペクトラム生成Resample CHOPでサンプル数を変更CHOPTo TOPでテクスチャに変換- Feedback を使ってテクスチャを作る
Audio Spectrum をインスタンシングでビジュアライズする /project1/Audio_spectum_Instancing
できたテクスチャを元に Instancing を使ってビジュアライズした例です。
Audio Spectrum を SOP でビジュアライズする /project1/Audio_spectum_SOP
できたテクスチャを元に SOP に変形を加えてビジュアライズした例です。
本日の課題： インスタンシングを使ってオーディオをビジュアライズしてみよう
今日勉強した Geometry Instancing を使って音をビジュアライズしたものを作ってください。プロジェクトフォルダごと Teams に提出してください。