目次
- CHOPについて
- 数値を生成する
- 入力を扱う
- インタラクションデザイン
- 値を変化させる
- 一つにする
- SOPについて
- Geometry viewer
- 3Dモデルを生成する
- 変化させる
- 一つにする
- プロシージャルモデリング
- レンダリング
- MAT(質感)
CHOPについて
Channel
CHOPにはChannelがあり,値が格納されています.
下のCHOPの状態はProcessingでは,
float chan1 = 0.5;
という,変数の宣言と初期化に相当します.
下のCHOPはChannelが2つあるように,CHOP1つの中にChannelは異なる名前であれば,複数存在することができます.
Sample
CHOPにはSampleもあり,そちらにも値が格納できます.
下のCHOPの状態はProcessingでは,
float[] chan1 = {1, 3, 6, 2, 5};
という,配列の宣言と初期化に相当します.
このように
- Sample数が1つのときはCHOPの背景は棒グラフ
- Sample数が2つ以上のときは折れ線グラフ
で表されます.
数値を生成する
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を1つにして出力します.
ここでは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数が1つのときのみを扱ってきましたが,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を指定の方法で1つにする |
OP > Combine CHOPs | 複数繋げられたCHOPのChannelを指定の方法で1つにする |
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を1つだけにして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はレンダリング可能なオブジェクトを示します.図のように,六角形が2つ作られていますので,左下と右上それぞれの中央に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のピクセルだけの情報に落とし込むことを言います.みなさんの身の回りを想像してください.皆さんがものを見るという状況は
- 対象物
- 光
- 光を捉える目
が存在することで成り立っています.
(さらに厳密に言えば,目は2つあることで,奥行きを捉えることができます.)
あらゆる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)
: cam1Render > 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/