DAY1: イントロ，作品事例，ハンズオン

目次

イントロダクション

画像表現研究で扱うTouchDesingerでは，本来なら長時間かけて習熟していく内容を極力飛躍のないように省き，最終的に画像を入力としてインスタレーションができるような方針で進めていきます．ウェブページ上の目次とそれぞれの見出しでは，この授業で扱わない要素もテストのように，薄く記載されていますので，時間が余ったり，既に習熟している学生は適宜参照してください．

教員紹介

青木 聖也 / Scott Allen

京都精華大学メディア表現学部講師
武蔵野美術大学通信教育課程デザイン情報学科非常勤講師
慶應義塾大学環境情報学部非常勤講師
情報科学芸術大学院大学（IAMAS）非常勤講師
多摩美術大学情報デザイン学科非常勤講師
IAMAS修了．アーティスト．投影装置・映像メディア・AIに関する作品を制作．
詳細は以下のBiographyを参照．
https://scottallen.ws/biography

予定

  • 6月18日 DAY1: イントロ，作品事例，ハンズオン
  • 6月19日 DAY2: ハンズオン続き(，作品プラン)
  • オンライン: 作品プラン＋図面提出，フィードバック
  • 7月3日 DAY3: 場所決め，設営開始，トラブルシュート
  • 7月4日 DAY4: 設営続き，講評

TouchDesignerについて


カナダ・トロントのDerivative社によって2000年に開発されたNodeベースのヴィジュアルプログラミング環境です．
2017年にMac版もリリースのリリースにより日本でも利用者が増え，かなり盛り上がりを見せています．
その安定性の高さから，様々なデジタルアート展示作品やハリウッド映画の映像制作にも利用されているようです．

ProcessingからTouchDesignerへ

Processingとの比較

円を描いて円状の軌跡で動かす

マウスクリックで動画を再生する

以上はあくまで例ですが，Processingに対してTouchDesignerは

  • 短時間で作成できる
  • テキストのタイピングが少なくクリックやドラッグ＆ドロップが主の操作
  • 即時反映のため値や動画の絵が常に確認できる

ということがわかります．

特徴

TouchDesignerは一般的なプログラミング環境と異なり，機能を持ったボックスを視覚的に繋げていく（パッチング）ことでプログラムを構築するビジュアルプログラミング環境です．
また，即時実行されるため，考えたことを高速に形にすることができ，制作初期段階のプロトタイピングや終盤の微調整にも向いています．
ビジュアルデザイン・アート領域において，個人のデザイナー，アーティストから，大規模なプロダクションチームにまで広く利用されていることがよく分かります．

事例

ライブ演出

BABYMETAL MV: Elevator Girl / Shanti Shanti Shanti

BABYMETALのミュージックビデオ．このMVでは，ライブの演出としてTouchDesignerを使用してライブカメラにエフェクトがかけられており，MVにもその一部が使われています．
詳細: https://backspace.tokyo/works/babymetal-elevatorgirl-shantishantishanti/

“millennium parade” Launch Party

インタビュー動画の一部に出てくる３D映像のライブ演出もTouchDesignerによって作られています．

詳細: https://backspace.tokyo/works/millennium-parade-launch-party/

ライブパフォーマンス

Ai.step live at nine tomorrows

Ai.step(Kakuya Shiraishi + Scott Allen)によるパフォーマンスのダイジェスト．visualパートはTouchDesignerによって作られています．

インスタレーション

Ryota Kuwakubo / 残像

TouchDesignerを使用してLEDテープの制御を行なったインスタレーションです．
映像分野に限らず，物理的に動くものの制御なども可能です．


使う前に

UI


基本操作

Operator windowを出す: レフトクリック２回 or tabキー
ライトクリックメニューを出す: ライトクリック or ダブルタップ
Operatorをドラッグして選択: ライトクリックでドラッグ or shiftキー+マウス移動
Operatorの情報を見る: ミドルクリック or altキー+ダブルタップ

オペレータの種類と役割

TOPはTexture Operatorの略で，2Dの画像処理などを行なうオペレータです．ADOBEで言えばPhotoshopのようなイメージです．


CHOPはChannel Operatorの略で，数値として処理するためのオペレータです．演算やデバイスからの入出力を扱ったりします．


SOPはSurface Operatorの略で3Dオブジェクトを扱ったりモデリングしたりするオペレータです．


MatはMeterialの略で，3Dオブジェクトの質感を決めるオペレータです．SOPと共に使用することになります．


DATはDataの略で，データベースや外部デバイスとのデータのやりとりで使用するオペレータです．CHOPと重複する機能もありますが，scriptによってCHOPより詳細に設定可能だったります．


COMPはcomponentの略で，大きめの構造を持ったオペレータです．複数のオペレータをまとめて作られた箱のようなイメージです．


映像を生成する

座標系

座標系はOpenGLに等しく，系が右手系でup軸はYとなります．
下の図のようになります．
これまでやってきたProcessingと大きく異なる点なので注意しましょう．

図形を描く


これで全てではありませんが，

  • Circle TOP
  • Rectangle TOP
  • Constant TOP
  • Text TOP

などがあります．
Processingからの対応で言えば，以下のようになるでしょう．

ellipse(x, y, w, h);
rect(x, y, w, h);
background(r, g, b); // 厳密には異なる
text("text", x, y);

Circle TOP


Rectangle TOP


Constant TOP


Text TOP


主な設定事項

名称 機能 主な設定事項
Circle 楕円を描く 半径，回転，中心座標，塗り色，
塗り色透明度，背景色，背景不透明度，枠線太さ
Rectangle 四角形を描く 幅高さ，回転，中心座標，塗り色，
塗り不透明度，背景色，背景不透明度，枠線太さ
Constant 塗画像を描く 塗り色，塗り不透明度
Text 文字を描く テキスト文字列，フォント，サイズ，方向，
カーニング，ラインスペース，揃え，色

色の設定

RGB値（赤，緑，青）＋A値（透明度）で表すことはProcessingと同じですが，値が0 – 1の小数で表されます．

ファイルを再生する

カメラの映像を取り込む

素材を合成する

素材を選択する

主な設定事項

名称 機能 主な設定事項
Composition 2つのインプットを指定の合成方法で合成する 合成方法選択
Switch 複数のインプットのうち1つだけ描く テクスチャ選択（整数）

解像度について

解像度には注意する必要があります．何かを生成した場合には256 x 256 pxとなります．
例えば1280 x 720 pxの画像上にComposite TOPで重ねたい場合は，Operater windowのCommon > Resolutionで解像度を合わせたりするなどの対策をすると良いです．

映像として出力する

今はまだ厳密に理解する必要がありませんが，プロジェクトファイルを最終的にウィンドウ出力したい場合には，Out TOPに繋げ，
F1キー
を押すことでウィンドウとして表示できます．
macOSの場合はfnキーを押しながら1，タッチバー付きのmacbook proの場合は，fnキーを押すとタッチバーにF1が出現します．

CHOPについて

Channel

CHOPにはChannelがあり，値が格納されています．
下のCHOPの状態はProcessingでは，
float chan1 = 0.5;
という，変数の宣言と初期化に相当します．


下のCHOPはChannelが２つあるように，CHOP１つの中にChannelは異なる名前であれば，複数存在することができます．

Sample

CHOPにはSampleもあり，そちらにも値が格納できます．
下のCHOPの状態はProcessingでは，
float[] chan1 = {1, 3, 6, 2, 5};
という，配列の宣言と初期化に相当します．


このように

  • Sample数が１つのときはCHOPの背景は棒グラフ
  • Sample数が２つ以上のときは折れ線グラフ

で表されます．

数値を生成する

Constat CHOP

まずは一番基本的なConstant CHOPを使用した定数を生成してみましょう．

LFO CHOP

LFOとはLow Frequency Oscilator（低周波発信器）の略で，耳には聞こえないほどの低い周波数の電気信号を絶えず発している装置のことです．
TouchDesignerでは音以外の目的に使用することも多いです．
また，値の推移を確認する時にTrail CHOPを使用すると血圧記録紙のように見ることができてとても便利です．

入力を扱う

様々な入力を扱えるようになると，インタラクティブな作品を作ることが可能になります．

Mouse In CHOP

その名の通りマウスの入力情報を取得できるCHOPです．
クリック情報もParameter window上でchannel名を入力すれば取得可能になります．

Keyboard In CHOP

その名の通りキーボードの入力情報を取得できるCHOPです．
Parameter windowのKeyboard In > Modifier keysで何か選ぶことによって，そのキーを押しながらでないと入力されないことになります．
制作するアプリ内でショートカットを設定する時などにも役立ちます．

Audio Device In CHOP

PCマイクからの音入力情報を取得します．
より遅延なく反映させたい場合はParameter windowのAudio Device In > Buffer Lengthをより小さい値にするとレスポンスが早まります．
Analyze CHOPはSampleが複数あるChannelに対して指定した手法で解析しSampleを１つにして出力します．
ここではRMS Power（二条平均平方根）で，音量（0 — 1）を取得しています．

インタラクションデザイン

様々な入力を扱えるようになることで，体験者とアプリの相互作用（インタラクションデザイン）を考えられるようになります．

パラメータリンク

ある入力が描画結果に影響を与えるためには，これまで扱ってきたCHOPのパラメータを他のパラメータに反映させる必要があります．それをパラメータリンクといいます．
パラメータリンクをする方法は

  • マウスドラッグ
  • 直接Script入力

があります．

マウスドラッグ

直接Script入力

リンク時のオプション

パラメータをリンクさせるときに，ドラッグ・アンド・ドロップで行おうとするとオプションが数種類出現します．オプションの種類と特徴は以下の表の通りです．

リンクオプション 概要 記述例 box色
Chop Export パラメータを直接読み込む constant1: chan1 緑
Chop Reference Pythonベースのパラメータ参照
・四則演算
・他のパラメータとの組み合わせ
が可能なのでオススメ		 op(‘constant1’)[‘chan1’] 水色
Current Chop Value 現時点の値を代入する なし なし

Chop ReferenceはPythonベースの参照であり，op('constant1')['chan1']のように書かれます．そしてリンクした後にop('constant1')['chan1'] + 1のようにPythonの記述形式に従っていれば，四則演算できます．さらにop('constant1')['chan1'] * op('constant2')['chan1']のように他のパラメータと組み合わせたりもできます．その点でChop Referenceが最も自由度が高く，オススメです．
動画でも確認してみましょう．

Sampleが複数のとき

これまでSample数が１つのときのみを扱ってきましたが，Sampleが複数の場合もパラメータリンクは可能です．
op('noise1')['chan1'][0]
のように，Sampleのインデックスを指定することで，値を取得できます．


単純に今までと同じ

op('noise1')['chan1']

のように記述にした場合は，タイムラインのフレームがインデックスとして割り当てられて値が取得されます．チャンネルまでしか指定していませんが，実際はSampleまで勝手に取得されていることに注意しましょう．

Noise CHOP

Pattern CHOP

Pulse CHOP

Null CHOPからリンクさせよう

制作していると，これまでと違うCHOPをリンクさせたいと思うことが多々あります．しかし，これまで通りパラメータリンクしていると，参照先が変わるたびに毎回リンクし直したりする必要があります．それを防ぐことができるのがNull CHOPです．CHOPに限らず，パラメータリンクするときはNull XOPをリンクさせておいてそこに繋ぐXOPを変更するということを習慣づけましょう．現状変更する予定がないパラメータだとしても，後々変更する，あるいは一部を転用してまた制作することがあります．

値を変化させる

Math CHOP

得られた入力の値をグラフィックにリンクしたとき，その変化があまりに小さくor大きく意図した動きを得られないことがよくあります．そんなときにはMath CHOPのParameter window内Range > from Range, to Rangeによって値の範囲を決めることで動きを調整すると便利です．


他にも表のように，様々な計算に関わる処理をすることができるCHOPです．

パラメータ 処理内容
Range > from Range, to Range 数値の範囲を指定する
OP > Combine Channles 複数あるChannelを指定の方法で１つにする
OP > Combine CHOPs 複数繋げられたCHOPのChannelを指定の方法で１つにする
OP > Channel Post OP positive, root, squareなど指定の方法で数を処理する
OP > Integer 指定の方法小数点以下を切り捨てる

Count CHOP

同じ入力（0 — 1）で入力があるたびにそれをカウントしたい場合があります．たとえばNoise CHOPのSampleのインデックスを少しづつカウントアップして参照したい場合などです．

Lag CHOP

値が変化した場合にラグを与えることができます．値が飛び飛びに変化していくのを埋めるアニメーションをさせたいときに便利です．

Count CHOPとLag CHOPを組み合わせたアニメーションを見てみるとわかりやすいです．

一つにする

Select CHOP, Merge CHOP

一つのCHOPに複数のChannelがあるとき，個別に値の変化をつけたいときがあります．そいういうときには，一度Channelを１つだけにしてMath CHOPで処理したいすると良いです．最終的にMerge CHOPに繋ぐことで元通りになります．

Logic CHOP

合わせる方法として，簡単なロジックを組むこともできます．論理積（And，かつ）や論理和（Or，または）を利用してインタラクティビティの詳細を設計できます．

Switch CHOP

Switch TOPと同様に使用できます．

SOPについて

Point, Vertex, Primitive

名称 概要
Point 座標情報を持った点
Vertex Primitive形成のためにPointをどう繋ぐかという，PrimitiveとPointの紐付け
Primitive 画像・映像に落とし込める（レンダリング可能な）オブジェクト（もの）

Point

Point(点)は座標情報を持った点を示します．図のように，点としては 0 – 9 番目の10点であることが分かります．

Vertex

Vertex(頂点)は点をどのように繋ぐかという順番も含まれた情報です．図のように，左下の六角形は 0 – 5 で形成されており，右上の六角形も 0 – 5 で形成されて，それぞれは独立したPrimitiveであることが分かります．
また，この場合 0番目 と 5番目 は繋がれて閉じた面になるよう設定されています．

Primitive

Primitiveはレンダリング可能なオブジェクトを示します．図のように，六角形が２つ作られていますので，左下と右上それぞれの中央に0, 1と割り振られています．
Primitiveは平面に限らず，直線，曲線，曲面，球，直方体，パーティクルシステムなど様々なPrimitiveがあります．

Primitiveの種類

名称 概要
Primitive 原点，経など最低限の構成
Polygon 3点（三角形）がつなぎ合わさった構成
Mesh 4点（四角形）がつなぎ合わさった構成
NURBS Non-Uniform Rational B-Spline（非一様有理Bスプライン）という数学的モデルで作られる構成
Bezier ベジェのモデルで作られる構成
Particle Particle SOPなどで作られる，ポイントクラウドの構成
Metaball Meta Ball SOPから作られる，引力を用いたモデルで作られる構成

Geometry viewer

目的の形にモデリングする時には，Primitiveの状態を確認しながら進めることが重要です．Geometry viewerはPoint, Vertex, Primitiveなどの状態を確認したり，形状を確認したりできます．

3Dモデルを生成する

どこまでモデリングするか

TouchDesignerでもモデリングはできます．しかし，考え方としては

  • 複雑なモデル（スカルプティングが必要など）は他のモデリングソフトに任せる
  • リアルタイムにモデルに変化を加える
  • シンプルなモデルをルール（アルゴリズム）に従って大量複製する

とすると良いでしょう．

画像のようなBlenderで作られたドラゴンをTouchDesignerで敢えて作ろうとするよりも，TouchDesignerの良いところであるリアルタイム性や可変性を活かせるような付き合い方をしましょう．

(https://cgboost.com/create-a-dragon-in-blender/より参照)


また，TouchDesignerのオペレータの仕組みとかなり近い考え方でHoudiniというプロシージャルモデリング環境があります．実は，Houdiniを改造して2000年に作られたリアルタイムビジュアルプログラミング環境がTouchDesignerという，本家と分家のような関係です．近年プロシージャルなモデリング環境は盛り上がりを見せており，モデリングを深堀りしたい方はHoudiniを使用してみるのも良いでしょう．

(https://www.oneclub.org/awards/theoneshow/-award/32647/the-origin-of-lifeより参照)


3Dモデル生成一覧

TouchDesignerでゼロから生成できる3Dモデルはほぼ表の通りです．当然ですが，2D系のTOPより多くの情報を持っています．詳細を一つずつ動画で確認しましょう．

名称 概要 主なパラメータ
Circle 楕円モデル タイプ，方向，半径，中心座標，弧
Line 線モデル 始点/終点の座標，点数
Rectangle 四角形モデル 方向，サイズ，中心座標
Text 文字モデル タイプ，フォント，サイズ，文字内容
Grid 格子モデル タイプ，方向，サイズ，中心座標，列数，行数
Sphere 球モデル タイプ，方向，半径，中心座標，列数，行数など
Box 直方体モデル サイズ，中心座標
Torus トーラスモデル タイプ，方向，半径，中心座標，列数，行数
Tube 円筒モデル タイプ，方向，半径，高さ，中心座標，列数，行数

Circle SOP

Line SOP

Rectangle SOP

Text SOP

Grid SOP

Sphere SOP

Box SOP

Torus SOP

Tube SOP

変化させる

Boolean SOP

Boolean SOPは2つのPolygonで作られたSOPの共通する空間を起点に結合したり，差し引いたりするSOPです．シンプルなモデル生成をした後に少し複雑な形をつくる際にはBoolean SOPのBoolean > Operation > A minus Bを多用します．

Clip SOP

Clip SOPは設定した平面でSOPをクリップします．時間的な変化をさせたい時に効果を発揮します．例の動画のようにテキストモーションなどで出てきたり消えたりする演出をする最に使用すると良いかもしれません．

Copy SOP

Copy SOPはインプット1のモデルをインプット2のモデルのポイントの位置に複製します．Copy SOPを2回使うと3次元的に複製することもできますが，数を増やしすぎると処理が重くなり，FPSが落ちる原因となるので注意が必要です．

Extrude SOP, Trace SOP

Extrude SOPは2次元のSOPデータを押し出して立体にします．Text SOPを押し出したり，Trace SOPでアルファ付き画像をSOP化した後に押し出したりして立体にして扱うと良いでしょう．

Noise SOP

Noise SOPはインプットしたSOPのPointの位置や色などにノイズ関数に基づくバラつきを与えます．時間的に変化させたり，簡単な地形などをモデリングするときに手っ取り早く作ることができます．

Primitive SOP

Primitive SOPはモデルの位置，サイズ，配置，色，アルファプリミティブ固有のアトリビュートを操作できます．
今回のモデリングの段階では，主に色情報を与えるために使用してみましょう．

Sweep SOP

インプット1のモデルの筆でを，インプット2のポイントに従って，描くようなイメージ（Sweep）です．リボンや管のようなものを作成したいときに効果を発揮します．

一つにする

Merge SOP

Merge TOP, Merge CHOPと同様にMerge SOPを使用できます．

プロシージャルモデリング

プロシージャルモデリングとは，簡単にいうとルールを用いてモデリングしていくことです．それによって後の変更が楽だったり，細かい仕組みを後から追わなくても，最初のPrimitiveだけ変えればレイアウトが反映されたりとブラックボックス化することが可能です．

作例

Transform SOPにて，以下の簡単なスクリプトによって，インプットするSOPはy軸がゼロの平面に乗るようになります．

-me.inputs[0].min.y

レンダリング

レンダリングとは，3D座標やその点の繋ぎ方，色情報などを持ったPrimitiveを最終的に2Dのピクセルだけの情報に落とし込むことを言います．みなさんの身の回りを想像してください．皆さんがものを見るという状況は

  • 対象物
  • 光
  • 光を捉える目

が存在することで成り立っています．
(さらに厳密に言えば，目は２つあることで，奥行きを捉えることができます．)

あらゆるCG環境ではカメラでモノを撮影するときの状況をシミュレーションします．TouchDesignerでは，図のような構成要素によって，最終的に写真・映像の状態（2Dにピクセルだけの情報）に落とし込みます．

図のそれぞれの要素は表のようになります．

名称 概要
Geometry COMP 対象物．Primitiveそのものや，Primitiveを使用して作られた情報
xxxx MAT Geometryの表面の質感を決める要素
Camera COMP カメラ．画角や座標，パースありなしなど
Light COMP ライト，光
Render TOP レンダリング

最低限のレンダリング

最低限のレンダリングをするためには，先程の表を以下のように構成します．
COMPについては後の授業で説明しますので，一旦多くの機能を持った箱のような存在というくらいの認識でいてください．
レンダリングしたいSOPのアウトプットから引っ張った状態でTABキーを押してGeometry COMPを作るのがポイントです．

Geometry COMP

Geometry COMPでは，レンダリング可能なPrimitiveを大量複製(インスタンシング)したり，レンダリングに必要なPrimitiveの質感を決めるMATを関連付けたりします．
TransformもGeometry COMP内で可能ですが，紛らわしくなることを防ぐために，Transform SOPのみでTransformさせるようにすることを推奨します．

Camera COMP

Camera COMPはカメラの機能を果たします．通常のデジタル一眼レフカメラでは，

  • ISO感度
  • 絞り値(F値)
  • シャッタースピード
  • レンズの焦点距離

などがカメラのボディーやレンズによって異なります．
TouchDeisgnerのCamera COMPでは，一般的なCG環境でのカメラと同じくカメラの設定が行えます．
よく触れそうな箇所は，以下の表の通りです．

パラメータ 概要
View > FOV angle 画角の調整が可能．
大きいと広角レンズのように中心が縮んで見え，
その周りは伸びて見える
View > Projection パースを排除したい場合はOrthographic
Xform > Transform カメラ位置
Xform > Look At geo1 や Null COMP を指定して目標に追従させる

Light COMP

Light COMPは太陽やライトなどの光の機能を果たします．
よく触れそうな箇所は，以下の表の通りです．

パラメータ 概要
Xform > Transform ライト位置
Xform > Look At geo1 や Null COMP を指定して目標に追従させる
Light > Light Color ライトの色
Light > Dimmer ライト強さ
Light > Light Type ライトのタイプ．Point Light か Cone Light をよく使います
Shadows > Shadow Type 影のタイプ．
Hard, 2D Mappedは境界がはっきりした影
Soft, 2D Mappedは境界をボカした影

Render TOP

Render TOPはGeometry COMP( + MAT)やCamera COMP，Light COMPの情報を元に，2Dのピクセルへの落とし込みを行ないます．
デフォルトでは

  • Render > Camera(s): cam1
  • Render > Geometry: *（同じ階層にある全てのGeometry COMP）
  • Render > Lights: *（同じ階層にある全てのLight COMP）

となっています．
タイミングによって切り替える必要が出た場合は，選んでください．

MAT（質感）

MATはMaterialの略で，Geometry COMPと関連付けて表面の質感を表現します．質感は具体的にはシェーディングと言い，表面に当たった光の反射や陰影の具合をどう計算するか考慮します．

基本的には光に対する拡散反射（Diffuse）と鏡面反射（Specular）の成分をあわせて，面の明るさを決めます．ガラスや水などの表現には透過・屈折（Refraction）の成分も考慮したります．また，表面に環境用の画像を載せることで映り込みを表現したりもします．
TouchDesignerでデフォルトの主要なシェーディング（レンダリングを含む）を以下の表と図に示します．

名称 概要
Constant 一色でベタ塗り
Wireframe 頂点を順序通り結んだ線
Phong フォン．法線ベクトルの補完によってスムーズシェーディング行なう
PBR Physically Based Renderingの略．物理的に厳密に計算される
Point Sprite MAT point sprite．パーティクルのポイントに画像を貼り付ける


その他，GLSL（OpenGL Shading Language）という言語をMATとして記述することもでき，ガラスの表現など応用的なことも可能です．

Constant MAT

Constant MATは質感の計算なしにとにかくPrimitiveをベタ塗りします．
フラットなモーショングラフィックスを作りたい場合などはとても有効です．そしてその場合TOPで作る基本図形と大きく異なるのは，3Dの位置関係を生かしたアニメーションができることです．

パラメータ 概要
Constant > Color 塗り色

Patatap(https://patatap.com/)はウェブサイトで体験できるオーディオビジュアル作品です．フラットなモーショングラフィックスが特徴的です．

Wireframe MAT

Wireframe MATではPrimitiveの情報通りに線で繋がれます．
敢えて，デジタルな描画として観せたい時などに有効です．

パラメータ 概要
Wireframe > Color 塗り色
Wireframe > Line Width 線の太さ

Iron manでも敢えてWireframeでデジタルの質感を出して，モデリングされていることを表現しています．

Marvel's Avengers: Age of Ultron UI Reel | Screen Graphics | Territory Studio from Territory Studio on Vimeo.

Phong MAT

Phong MATはスムーズシェーディングの代表例でとても多く使用されています．明確な目的がなければまずPhong MATで作り始めるのが良いかもしれません．

パラメータ 概要
Phong > Diffuse 拡散反射の色
Phong > Specular 鏡面反射の色
Phong > Emit 発光の色
Phong > Shiness 輝き度合い（つまり平滑性）の値

PBR MAT

環境マップ

PBR MATはPBRを再現します．PBRがTouchDesigner標準MATの中で最も現実世界に近い質感を出すことができます．Environment Light COMPを併用することで画像から環境光としてライティングします．環境光用の画像はEquirectanglar形式である必要があります．
参照: http://photopin.com/free-photos/equirectangular

さらに，環境光で画像を利用したということは，その画像自体が環境でなければいけません．そのために新たにSphereにConstant MATからColor MAPを割り当てて，テクスチャを貼った大きい球体でカメラを覆うことによって，カメラからは景色が見える状況になります．

PBRのマップパラメータ

さらに，PBRのMAPパラメータにテクスチャマップを割り当てることで，PBRの質感を場所によって詳細に変化させることができます．各用語については表の通りです．

パラメータ 概要
Base Color Map ベースの色(RGB)，Diffusion Mapに同じ
Specular Level Map 鏡面反射の度合い(GRAY)
Metallic Map 金属の度合い(GRAY)
Roughness Map 粗さの度合い(GRAY)
Ambient Occulusion Map 陰影強調の度合い(GRAY)
Normal Map 法線マップ(光の反射レベルで凹凸を表現)
Height Map 高さの度合い(GRAY)

テクスチャマップ参照: https://texturehaven.com/textures/

データを扱う

データを作る

データを扱う際はDATを使用しますが，DATは主に

  • Text
  • Table
  • Communication
  • Script

などがあります．
このうちCommunicationはUSBでつないだデバイスや無線機器との通信です．ScriptはPythonという言語を使って作っていくロジックです．今回は基本的にはコーディングせずに組んでいくことを考えます．

Text DAT

Text DATは文字列を入力することができるDATです．単純に文字列を入力する以外にも，Scriptを書いて，それをRun ScriptすることによりScriptを実行することもできます．

Table DAT

Table DATはExcelやNumbersのような表形式のデータを入力することができます．また，表形式のデータを選んで読み込むこともできます．

RowとColumn

データを扱っていると，データを調整する必要が出ることが多々あります．その際TouchDesignerではRowとColumnという言葉頻出します．それそれが縦と横のどちらの要素を扱っているのかこんがらがってしまわないために以下の図の用に覚えるとわかりやすいでしょう．

DATのパラメータリンク

DATのパラメータリンクはこれまでの様にドラッグ・アンド・ドロップでリンクすることは不可能です．Table DATのCellをリンクさせたい場合は

op('オペレータ名')[R, C]

とScriptを書くことで取得できます．

オペレータタイプ変換

オペレータタイプ変換はそれぞれのタイプ（TOP, CHOP…）の相互の変換を指し，TouchDesignerの強力な機能の一つであるといえます．それぞれのオペレータタイプ変換のOPは以下の表の通りです．

名称 注意点
CHOP to TOP CHOP -> TOP．TOPは縦が1pxになるので，その後Fit TOPなどで調整が必要
DAT to CHOP DAT to > output，DAT to > First Row is, DAT to > First Column isを調整
SOP to CHOP 特になし
CHOP to SOP 特になし
DAT to SOP DAT to > Points，DAT to > Vertices，DAT to > Primitivesの情報が必要
CHOP to DAT CHOP to > Include Namesをオンにすることでチャネル名を取得可能
SOP to DAT SOP to > Extractでどの要素を抽出するか選択する

インスタンシング

Geometry COMPのInstancingを使うことで，大量にPrimitiveをコピーしてリアルタイムに描画することが可能です．Instancingは，リアルタイムコンピュータグラフィックスにおけるGPU Instancingを指します．

CPUとGPU

GPUとはGpaphics Processing Unitの略で，３Dグラフィックスを高速に描くためのパーツです．とはいいつつ，近年ではその構造を利用して，深層学習（ディープラーニング）や，他の汎用計算に利用されることも多くあります．GPUがなぜ速いのかということについては，The Book of Shadersの図がとてもわかりやすいので引用します．

The Book of Shaders: https://thebookofshaders.com/?lan=jp


図の通りですが，CPUは複雑な処理ができる代わりにタスクを１つずつ順番に終わらせていく太い土管のような存在なのに対して，GPUは単純な計算を大量に行える代わりにそれぞれ複雑な処理をするには適していない大量のストローのような存在です．TouchDesignerのインスタンシングはこのGPUの特性を使ったGPU Instancingを実装してあるおかげでリアルタイムに大量のSOPを処理することができます．


CPUのイメージ図(The Book of Shaders シェーダーとは？より引用)



GPUのイメージ図(The Book of Shaders シェーダーとは？より引用)

インスタンシングのパラメータ

インスタンシングのパラメータにリンクしたオペレータのチェンネル名をアサインすることによってサンプル数だけコピーし，サンプルの値を適用することができます．
パラメータとその概要は以下の表の通りです．

パラメータ 概要
Translate(X, Y, Z) 座標移動
Rotate(X, Y, Z) 回転
Scale(X, Y, Z) 拡大縮小
Pivot(X, Y, Z) 支点
Texture(U, V, W) テクスチャ
Color(R, G, B) 色