忘れちゃうCOMP達 [TouchDesigner]






随時更新されます

最終更新 : 2023/02/25
UI周りを更新しました。

画像59


何もない所を右クリック


open parent parametersより、
親Compのparameterを開くことができる。


Comp 共通 Common tab




Parent ShortcutでそのComp内のnodeからのexpressionやpathとかでこのCompを呼ぶ場合のショートカットとしてのネームを好きに指定できる。

同様に、 Global OP ShortcutではこのCompへのパスをどこでも参照できるGlobalの名前を決めれる。

ex : Global OP Shortcut = TDBasicWidgetsになっていたら

op.TDBasicWidgetsでアクセスできる。

ex:
op.TDBasicWidgets.op('buttonMomentary') if hasattr(op, 'TDBasicWidgets') else ''

ちなみに、複数のcompで同じ名前のglobal OP Shortcutがついているとエラーになる。


Internal OP Shortcut 1 に好きなShortcutNameと
Internal OP にそのComp内にあるノードのpathを指定することで
iop.ShortcutNameでアクセスできるようになる。
なので頻繁にアクセスするOPがあった場合、その親CompのInternal OPのところに指定してあげることで簡単にアクセスできるようになる。

Assume you want to refer to /project1/geo1 frequently.
Go to the parameters of /project1, to the Common page. Name your internal operator shortcut by setting Internal OP Shortcut 1 to TopGeo.
Give the path to the Geometry component by setting Internal OP 1 to ./geo1.
The geo1 component is now easy to refer to within your component:
Go back in project1 and create a Camera component. In its Look At parameter put in its expression field iop.TopGeo.
Move geo1, the camera cam1 will look continue to look at geo1.

プロジェクト1/geo1を頻繁に参照する場合を想定しています。
project1 のパラメータから Common ページに移動します。Internal OP Shortcut 1 を TopGeo に設定し、内部演算子のショートカットに名前を付けます。
Internal OP 1 を ./geo1 に設定し、Geometry コンポーネントのパスを指定します。
これで、geo1 コンポーネントはコンポーネント内で簡単に参照できるようになりました。
project1 に戻り、Camera コンポーネントを作成します。project1 に戻って Camera コンポーネントを作成し、Look At パラメータに式フィールド iop.TopGeo を入力します。
Move geo1 で、カメラ cam1 は geo1 を見続けます。

https://derivative.ca/UserGuide/Internal_Operators

Node Viewでは
そのCompがビューアーに表示するものを選べる。
Default Viewerの場合は勝手に初期状態として選べて、
Operator Viewerにすること子ノードのどれをビューアーに指定するかを選べる。
だいたい初期は./out1などになっている。


Node View


Operator Viewer


Enable Cloning でCloneできるようにするかどうかを選べて、
Clone MasterでmasterとなるClone元を選べる
Clone については以下の記事が分かりやすい。


Clone Master row1


Clone先へ矢印が引っ張られる。

Replicatorみたいに元の何かを参照しながらコピーしたい場合にCloneが使えれる。

クローン間で共通化されるもの
クローン内部には、Masterが保持しているノードと同一のものを含む
ノード間の接続とレイアウトが同一となる
クローン内部のノードのパラメータは、Master内にあるノードのパラメータと強制的に一致する(本体のCOMPのパラメータは変化可能)
クローン内部のノードのフラグ(バイパスやビュワーなど)は強制的に一致する

クローン間で独立するもの
コンポーネントへの入力 - inを介してクローン内部に入るCHOPやSOPのようなオペレータは、異なる入力を持つことがあります。したがって、クローン内のノードからのデータ出力は、クローン自体からのデータ出力と同様に、異なることがあります。
変数 - オペレータの親の名前、番号を使用したクローン内のノードにある変数はクローン間で変化します。たとえば、クローンされたノード名の数字(digits)を使用して、テーブルの値を検索することができます。したがって、パラメータは同じ式ですが、評価値が異なる場合があります。
Immuneノード - クローン内部にあり、Immuneフラグが有効になっているノードは操作不可で、ユニークです。Immuneフラグが設定されているノードは、クローンのマスターと一致させる必要はありません。たとえば、Immuneフラグが有効なTable DATをクローン内に置くことで、ユニークにカプセル化し、移植性のあるものにすることができます。
コンポーネントのパラメータ - クローンされたコンポーネントのパラメータ(レイアウト、Background、オーバーライド、トランスフォーム)などは変化します。これは、クローン内部のノードのパラメータではなく、クローン自体のパラメータです。

https://qiita.com/kodai100/items/05b360a89a91516f21e6

CloneしているCOMPは黒くなる
この間は常にcloneされているので、任意のタイミングでclone offにすれば、そこまでのものが全てcopyされているcompが出来上がるため便利。

row2, row3は黒くなる。


Load on Demand をオンにすると
常にこのComponentをメモリにロードするわけではなくて、必要に応じてロードされる。


External .toxにtoxファイルを指定することで
そのコンポーネントはその.toxを参照している形となる。
中に入ると黄色い字で左上にExternal Toxという名前で存在していることがわかる。

このexternal .toxを指定した後に内部のコンポーネントに変更を加えたとして、Common tabの一番下のRe-Init Networkを押すとExternal .toxが再参照されて初期状態に戻すことができる。

Re-Init Network

実際の挙動はここの動画が分かりやすい。

ただし、Save Backup of Externalをonにしていると、External .toxのバックアップが.toeに保存される形になって.toxが見つからんかった場合にバックアップで保存してあったものが参照される形になる。
色々複雑になるのでoffにしておくのもあり。


Reload .tox on Startでは.toeが起動時にExternal .toxで指定した.toxファイルがロードされるようになって、そのCompは.toxと同じ内容に強制的になる。

Reload .tox on Start / reloadtoxonstart
オン(デフォルト)の場合、.toeの起動時にExternal.toxで指定した.toxファイルがロードされ、COMPの内容は.toxファイルの内容と一致します。 起動時に参照された.toxからのロードを避ける場合、必要に応じて、これをオフにすることができます(COMPのコンテンツは代わりに.toeファイルからロードされます)。 COMPで外部の.toxを参照させて、Re-Init Networkパラメーターボタンをonにした時にロードするような場合に役立ちます。

http://ted-kanakubo.com/touchdesigner-jp/?p=2989


Reload Custom Parameters / reloadcustom
このチェックボックスを有効にすると、コンポーネントのカスタムパラメータの値は、.toxがリロードされるときにリロードされます。

Reload Built-in Parameters / reloadbuiltin
このチェックボックスが有効になっている場合、.toxがリロードされると、コンポーネントの組み込みパラメーターの値がリロードされます。

Save Backup of External / savebackup

このチェックボックスを有効にすると、External .toxパラメーターで指定されたコンポーネントのバックアップコピーが.toeファイルに保存されます。 外部.toxが見つからない場合、このバックアップコピーが使用されます。 これは、.toxの名前が変更、削除された場合、またはコンポーネントメディアが欠落している別のコンピューターで.toeファイルが実行されている場合に発生する可能性があります。

http://ted-kanakubo.com/touchdesigner-jp/?p=2989


https://shugohirao.com/blog/654 自作toxのロードについて
いい感じのオペレータ群ができたら、オペレータ群をまるっと選択>右クリック>CollapseSelected でひとつのコンテナにまとめる。
このコンテナをtoxとして利用するため、Save Component .toxでtoxファイルに書き出すのですが、このときのもとの自作コンテナは自動ではtoxファイルを参照していることにはなりません。
CommonでExternal.toxを指定でき、これを指定することで初めて、toxファイルを参照して利用することができます。
Reload .tox on Startで起動時にtoxファイルを読み込んできますが、作業中にtoxを編集して再度読み直す場合は、Common>Re-Initが便利です。

また初期値として、ReloadCustomParametersがONになっています。このため、toxを使いまわしそれぞれパラメータを調整しても、ここがONのままだと次回起動時に元になっているtoxファイルの値が入ってしまい、調整が水の泡になってしまいます。け適宜OFFにするなど注意してください!

https://shugohirao.com/blog/654




このExternal toxが独立して動くのを防ぐためにつくっているtoxもある。



Sub-Component to Load / subcompname
外部の .toxファイルをロードする場合、このオプションを使用すると、.toxファイル内のCOMP内容を除く他のすべてを無視しますして、参照するCOMPをトップレベルのCOMPにすることができます。 たとえば、「project1.tox」という名前の.toxファイルに「project1 / geo1」が含まれている場合、「geo1」をサブコンポーネントとしてロードすると、現在のCOMPの代わりに「geo1」がロードされます。 このパラメーターが空白の場合、ファイルのトップレベルのCOMPを通常使用して `.tox`ファイルをロードするだけです。

http://ted-kanakubo.com/touchdesigner-jp/?p=2989







panel系 COMP


Panel 要素の特殊な機能として、上下についているコネクタを接続することで、ネットワーク内部で配置した親子関係と同じように階層を作ることができます。
込み入った階層構造のUIを作る時にネットワークを出入りする手間がなくなるので、使い方によってはUI制作の手間が大幅に楽になります。
[引用] http://satoruhiga.com/TDWS2019/day16/

左下にButtonが出力されている。

画像93


Replicator

opをreplicator_callback DATに書いたルールに従って、複製することができる。
3Dの画的な沢山の複製はInstancingで複製できるが、
TOP的なものの複製に便利replicator

Operetor Prefixではコピーを作っていくOPの接頭辞
その後ろにindex番号が付く
Master Operatorには基となるOPを選ぶ
Callbacks DATで生成規則を書くことができる
Layout Originでノード複製場所の座標を指定できる。
Replication MethodをBy Numberにすると、生成する個数を指定できる。
Number of Replicantsで数を指定する。
Replicant Suffix Startで生成するOPの名前のインデックスを何から始めるかを指定できる。

画像3

Recreate All Operators / Recreate Missing Operatorsでリセットできる。
text DATとかでFrameごとに更新する場合、pulseで押すようにすればリセットできるのでよし。

画像2
画像1


Replication Methodを By Tableにすると
Template DAT TableにTable DATを指定できる。

画像47

Name from TableRow Indexの場合
行のindexの数だけ生成される。
Ignore First RowをONにすると、最初の行を無視できる。

その際の生成されるOPの名前は指定したOperator Prefix + Row indexとなる。

画像43
画像45

Name from TableColumn by Indexの場合
Column Indexに指定した、列の行数だけ生成される。
その際の生成されるOPの名前は指定したOperator Prefix + Table cellとなる。

画像46
画像47


Name from TableColumn by Nameの場合
Column Nameに指定した、列名の名前の列の行数だけ生成される
その際の生成されるOPの名前は指定したOperator Prefix +Table cellとなる。

画像48
画像49




callbacks

確認した範囲では、onReplicateよりも、onRemoveReplicantの方が先に処理される。

onRemoveReplicant(comp, replicant):

compはreplicator Comp自体を指すOP
replicantは削除されるOPを指す

onReplicate(comp, allOps, newOps, template, master):

関数内に初期生成時から定義されているcは生成されるOPを表している。
こいつに対して、c.par.****とか指示していく。

compはreplicator Comp自体を指すOP

もし自分でOPを生成して、nodeX/Yを指定する場合は
Yに関しては95ぐらいずつ移動させれば、大体ちょうどいいかも

画像70


def onRemoveReplicant(comp, replicant):

	replicant.destroy()
	# print(comp)
	# print(replicant)
	# debug()

	digit = replicant.digits
	# print(digit)
	DeathMulti = op('multi' + str(digit))
	DeathMulti.destroy()
	return

def onReplicate(comp, allOps, newOps, template, master):
    ......
    for c in newOps:
    ....
    ....
        if bool(op('multi' + str(i))) == False:
        	parent().create(multiplyTOP, 'multi' + str(i))
    	multi = op('multi' + str(i))
    	multi.nodeX = 3500
    	multi.nodeY = 0 + i * 95
    	c.outputConnectors[0].connect(multi.inputConnectors[0])
    	movie_null.outputConnectors[0].connect(multi.inputConnectors[1])




common page



Timeline

メインのタイムライン以外に、CompごとにTimelineを持つことができる。

COMPを右クリックして、 Add Component Time

画像20

COMPの中に入ると、localという名前が付いたBase COMPが出来上がっている。

画像21

さらにTimelineの上に新たなLocal TimelineのUIが表示される。
メインのタイムラインとは別時間軸で動くタイムラインとなっている。

画像22


= Run Independently
これにチェック入っているとタイムラインUIとは別軸で勝手に再生がスタートする。
外すと、再生ボタンを押すとLocal TImelineも動き始める。

画像26

= Scope Timeline : path
Timeline UIの時間軸をこのLocal Timelineにすることができる。
Timeline UIが青く光っていない色になる
ここで設定したStart や  End, FPSなどはLocal TImelineの設定が変更されることになる。

画像25
画像27

/」を押すことでTimeline UIの時間軸をrootのタイムラインに戻すことができる。

画像23
画像24


Timeline CHOPを使えば、ローカルタイムラインのFrame数など設定を取得することができる。



Time

Local Timelineを上記の方法で作成した時に、LocalというBaseCompの中にTime COMPが入っている。
先ほど設定していたPlayやRun IndependentlyなどはこのTimeCOMPと紐づいている(Bindされている)。

ここに何かしらExpressionなどを仕込めば、
動画の長さに自動でTimelineを合わせてくれるものなどを作れる。

画像28


timeCOMP Class


このTIme CompからはTimelineのfpsなどの変更はできないがする方法がある。

project全体のfpsを変えるならproject.cookRateからpython等々で変更することができる。

Get or set the maximum number of frames processed each second. In general you should not need to use this. It is preferred to look at the FPS of the root component to know the cooking rate. Individual components may have their own rates, specified by rate.

https://derivative.ca/UserGuide/Project_Class


time comp周りのlocal Timelineとかについてはこっち
こっちのlocal timelineのfpsも変更する方法があるはず。




Animation

outがCHOPになっていて、設定したキーフレームアニメーションが出力される。

画像4

右クリックして Edit Animationを選ぶと
キーフレームエディターが出現する。

画像5
画像6

左側のPathに今設定したいAnimation COMPを選んで、
NamesにChannnel名を設定して、
Add Channelsを押すと下のタイムラインにセットされる。
消したいときはバツマーク
×と名前の間にあるピンクの四角を押すとLockすることができる。

画像7
画像103

Alt + Clickをするとキーフレームを設定できる。

画像8
画像9

上のFunctionの方からカーブの種類を選べる

Snapのタブから X or Yにチェックを入れると指定した単位でキーフレームがスナップ(指定単位ごとに綺麗に整えてくれる)してくれるようになる。

画像10
画像19

レイヤーで選択しているチャンネルは同時に表示することができる。

画像11

Extend Left / RightでRange範囲外の扱いを決めれる
Hold / Slope / Cycle / Mirror / Default Value

画像12

Time ReferenceではどのTimeline軸で設定するかを選べる。
path指定

Play Mode設定を変えれる。

これは、オペレーター自身の時間軸をどういうふうに更新するかというオプションで、Sequential にすると内部的に持っている時間軸に、Locked to Timeline にするとタイムラインの時間軸によって再生されます。また Specify Index の選択肢があるものは、任意のフレームや秒数を指定することもできます。
[引用] http://satoruhiga.com/TDWS2018/day13/

output Full Rangeに設定すると、sample(波形)でoutputすることができうr。

画像13
画像17
画像18


Rangeタブの TypeをCustomに変えると、

画像14

Start と Endの時間を決めれる

画像16
画像15


Object系 COMP

COMPは他のオペレーターとは違い、オペレーターの上下にもインプット/アウトプットのポートを持っています。
3Dオブジェクトの場合はこの上下の接続を使うことで移動、回転、スケールの親子関係を作ることができます。
[引用] http://satoruhiga.com/TDWS2019/day8/

XformのPivotはAdobeでいうアンカーポイント

Pivot p - ⊞ - The Pivot point edit fields allow you to define the point about which a Component scales and rotates. Altering the pivot point of a Component produces different results depending on the transformation performed on the Component.
For example, during a scaling operation, if the pivot point of an Component is located at -1, -1, 0 and you wanted to scale the Component by 0.5 (reduce its size by 50%), the Component would scale toward the pivot point and appear to slide down and to the left.
[引用] https://docs.derivative.ca/Camera_COMP

画像104

In the example above, rotations performed on an Component with different pivot points produce very different results.
[引用画像] https://docs.derivative.ca/Camera_COMP

Xform tab


基本的なトランスフォームが行える。

Unit Scaleは全体に乗算されるようなScaleのイメージ
用には3つの軸に対して均一にスケールされる。

回転行列などの順序を気にしなきゃいけない場合はRotate Orderを変えれる。

Rotate Order / rord
このオプションをクリックすると表示される回転行列により、コンポーネントの回転順序を設定できます。 Transform Order(上記)と同様に、コンポーネントの回転順序を変更すると、コンポーネントの最終位置が変更されます。 Rx Ry Rzの回転順序は、次のように最終的な回転行列を作成します `R = Rz * Ry * Rx`

  • Rx Ry Rz / xyz
    R = Rz * Ry * Rx

  • Rx Rz Ry / xzy
    R = Ry * Rz * Rx

  • Ry Rx Rz / yxz
    R = Rz * Rx * Ry

  • Ry Rz Rx / yzx
    R = Rx * Rz * Ry

  • Rz Rx Ry / zxy
    R = Ry * Rx * Rz

  • Rz Ry Rx / zyx
    R = Rx * Ry * Rz


Constrain To
は、

Look At
このコンポーネントが指定したComp方向に向くようになる。
指定すると
Forward Direction / Look At Up Vectorなど出現する
Forward Direction 
にてどの軸が真正面方向かを決めれる。


Look At Up Vector
その際、Look Atで指定したコンポーネントのY軸を通過するときにアニメーションがフリップする可能性があるので、Up Vectorを指定することができる。自分がどの方向を上だと思っているかをVectorでしていできる。

Use Roll
Use Up Vector
Use Quaternions
が選べる。

RollとUp Vectorはなんかマニュアルで指定できる。
Quartenionsはどこで何かを指定できるのかよくわからない。
もしかしたらクウォータニオンを勝手に使ってくれていい感じにしてくれるのかもしれない。

Use Quaternions
クォータニオンは、3D回転の数学的な表現です。 この方法は、球上のある点から別の点に移動する最も効率的な手段を導き出します。

http://ted-kanakubo.com/touchdesigner-jp/?p=3011

Path SOPは指定したSOPのパスに沿って移動することができる。
スプライン系のSOPを指定してあげるのが良い。

制作のヒント:
パスに沿ったスムーズなモーションを作成する場合-コンポーネントをアニメーションパスに追従させるのは簡単です。 ただし、NURBSカーブをパスとして使用する場合、コンポーネントがパスに沿って移動すると、予期せずに移動が高速化および低速化することがあります。 これは、CVの間隔が不均等であるためです。 そのような場合は、Resample SOPを使用して、曲線に沿って等間隔になるようにCVを再配置します。 ただし、パスカーブがアニメーションする場合、Resample SOPの使用で処理が遅くなる可能性があります。
別の方法は、Basis SOPをパスカーブに追加して、Uniform Curveに変更することです。 このようにして、コンポーネントは曲線の下を均一に移動し、Resample SOPと不要に生成されるポイントは必要なくなります。

http://ted-kanakubo.com/touchdesigner-jp/?p=3011


Pre-Xform tab


Pre-Xformパラメーターページは、Xformページのパラメーターが適用される前に、オブジェクトコンポーネントにトランスフォームを適用します。 つまり、Null COMPをこのノードの親として接続し、Pre-Xformページと同じ変換パラメーターを設定すること同じです。 行列演算に関して、「右側の乗算ベクトル」(列ベクトル)規則を使用する場合、方程式はpreXForm * xform * vectorになります。

http://ted-kanakubo.com/touchdesigner-jp/?p=3007

Xformより先に適用されるトランスフォームで、Null Compを親ノードとして上に接続するのと同じこととなる。
行列的に順序が重要になってくるときにはpre-xformが生きてくる。


Reset Transfromでpre-xformのリセット

Commit to Main Transformで現在のpre-xformに設定している。Transform設定を今のX-formの方に一元管理するようにパラメータを調整してくれる。
自分のテスト環境ではTransformとRotationは適用されたが、Scaleが適用されなていないように感じた。


Xform Matrix /CHOP /DAT
で4x4 matrixを使って、transformを定義することができる。
ただ、preX-formよりも変換の後に適用される。積の順序の以下になる。

This transform will be applied after the regular Pre-Transform transformation. That is, it'll be applied in the oder XformMatrix * PreXForm * Position.

この変換は、通常の Pre-Transform 変換の後に適用されます。つまり、XformMatrix * PreXForm * Positionの順序で適用されます。

https://docs.derivative.ca/Camera_COMP

そのマトリックスの定義は以下のリンク。





Render tab


material にはMATを指定できる。
Geometryでよくやるやつ

Renderをonにしてあると、Render TOPを介した際に表示されるかどうかを決めれる。

Draw Prioirtyでは
描画される順序を決定できる大きな値のコンプの上に小さな値のやつが描画されるシステム。
つまり0だと最上段に描画されるようになる。

Pick Priority / pickpriority
Render Pick CHOPまたはRender Pick DATを使用する場合、Search Areaを設定するオプションがあります。 Search Area内で複数のオブジェクトが見つかった場合、pick priorityを使用して、あるオブジェクトを別のオブジェクトよりも優先して選択させることができます。 低い値よりも高い値が選択されます。 これは、描画順序、または同じピクセル上で互いに描画されるオブジェクトには影響しません。 ピクセルごとに1つのピックのみが表示されます。

http://ted-kanakubo.com/touchdesigner-jp/?p=3009

Wireframe colorでワイヤーフレームの際の色を決めれる。



Geometry

Instane 2の
Rotate to Vectorに3次元ベクトルを入力すると
そちらのベクトル方向に向くように回転する

画像60


Instance Textures
ここにTOPを指定すると、Geometryのinstanceのテクスチャとして貼り付けられる。MAT からではなくGeometry COMPからつける方法。
いくつかのTOPを指定してあげると、複数の色が使える。
その際Texture Index
インスタンス数と同じのlengthのsampleを作って、その値を0/1/2整数の値が入っているような物を作る
例として、math CHOPでIntegerをfloorとかにして、rangeで調整してあげれば作れる。

注意 Mac OS版だと対応されていないようで、errorが出て使えない機能となっている。
TouchDesignerの公式のページにテクスチャーインスタンシングは現在AppleのOpenGLドライバーをサポートしてない。(https://docs.derivative.ca/MacOS)
Texture3Dで2D Texture ArrayにしてPhongに入れたらMacでも同様なことができるみたい

画像63
画像63
画像63


Texture Cord は Texture のどの位置を参照するかの指定
3D モデルのテクスチャを貼る時にどこの部分を使うか指定するようなやつ


Rotate up は up で指定した軸を中心とした回転?

画像64


Camera


ViewタブのProjection
Perspectiveだと、パースがついたカメラ的映りで
Orthographicだと、パースがつかない大きさをそのままに映る。
Perspective to Ortho Blendはわからん
Custom Projection Matrixは自分でProjection Matrixを作りたい人がCHOP , DAT , GLSL DATで指定できる。

画像54


ViewタブのViewing Angle Method
Horizontal / Vertical FOVだと、FOV Angleで視野角度を決めて画角を決める。
Focal Length and Apertureだと、実際のカメラに慣れている人だと考えやすい、Focal Length(焦点距離)とApertureを指定できるが、Apertureの意味は絞りの意味ではなくて、フィルムアパーチャー・フィルムゲート(Apeture size)の事を言っている。実質のセンサーサイズ。
ちょっと感覚・意味が違う。下記リンクから詳細を知れる。

画像55
画像56
画像57


View タブの Near / Far
描画範囲のDepthを指定できる。

画像65


例えば、Rectangle SOPのsizeXが16/9, sizeYが1だとして、
(16:9を想定している)
Cameraと対象の距離とFocal Lengthを同じにして、
Apertureを16/9にすると画面とぴったりに表示される。

ここのCamera Compでいう Apertureは  的な絞りのことを言っているわけではなくて、film gate的なapertureの事を言っている。

Film Gateは画像を映すエリアの大きさのこと。大体はそれがイメージセンサーやフィルムの大きさに対応する。

Apertureという英単語自体が開口部みたいな意味を持つために、レンズの絞り機構にもApertureという言葉が使われることが多くある。
レンズの絞り機構がいくら締まってようが、設計上センサーの大きさまでは光が当たるように大体設計されているため実質のCG上気にしたいApertureはFilmGateの大きさととらえられる。


Mayaの場合のCamera Aperture設定



ViewタブのWindow X/Y / Size / Roll 

画像66


Look At に COMPを入れると、そのCOMP方向に向かって、カメラの視点がそっちに向く

画像53

Cameraを任意の軌道でのカメラワークをつける方法
Path SOPにSOPを入れると、そのSOPのPointの順番に移動していくようなカメラを作れる。
Positionを0 - 1まで変えることで、SOPのPointを移動することができる。

画像50
画像52

Camera COMPを任意の軌道に乗せることができます。
ここではBox SOPの周りで円軌道上を回るカメラワークを実装します。
任意のSOPをGeometry COMP, Camera COMP, Light COMP, Render TOPでレンダリングします。
Camera COMP->Xform->Path SOPにカメラの軌道となるSOPを参照させます。
Xform->Positionの値を変化させることで、指定したSOPの軌道上をカメラが動きます。
また、Xform->Look AtにNull COMPを参照させることで、Null COMPのTranslateの位置を向き続けるカメラを実現できます。
[引用]
https://qiita.com/narumin256/items/25710e6952079e1b3348

画像51


SettingsタブのBackground Color
初期設定だとalphaが0になっていて、背景は透過されているが、
Backgroundを設定することもできる。

画像67

SettingsタブのFog
Linear / Exponential / Squared Exponential
フォグの生成ができる。

画像69
画像68

Camera Light MaskにはLight COMPが指定される。

Camera Light Mask - Allows only specific lights to be used by this camera. This is used in conjunction with the Lights parameter in the Render TOP to determine what lights are used to illuminate the geometry. When this parameter is left blank, all lights specified in the Render TOP will be used. Lights specified in this parameter will limit the geometry's lighting with this camera to the light(s)specified assuming the light(s) is also listed in the Render TOP.
[引用] https://docs.derivative.ca/Camera_COMP

カメラの画角にオブジェクトが無く透明で表示されている部分はSettings tabよりBackground Colorを設定すると何もない所が塗りつぶされる。


settings Background color

Camera Blend

inputがマルチになっていて、Camera COMPを複数入力することができる。

画像30

Render TOPのCamera(s)のところをCamera Blendに設定する。

画像30

Camera Blend COMPのBlendタブの
TypeがBlnedの場合
Weight1がinput1, Weight2がinput2の重みを表しており、
1 : 1だと、Camera1と2の間のT[xyz]・R[xyz]・S[xyz]・BG・FOGになる。

画像31
画像32

0 : 1にすれば、Camera2と同じになる。

画像33
画像34

Maskのボタンを押すと、その部分が無効になる。

画像35
画像36

TypeがSequenceの場合、
入力順にindexが振られて、0の時はinput0 , 1の時はinput1....
へとカメラのパラメーターが補完されていく。

画像37
画像39
画像38
画像40
画像42
画像41

Sequenceの値をイーズなどのアニメーションを掛けた変化にすればカメラモーションもつけれる。

カメラのスイッチングにも使える。

Short Rotation shortrot - Does quaternion blending in cases where 2 inputs are being blended.
[引用] https://docs.derivative.ca/Camera_Blend_COMP

カメラのスイッチングに関しては、こっちの方が自由度が高くて便利



Null

3D object系COMPのNullとして機能する。


画像58


Window


好きなOPを別ウィンドウに表示することができる。
別モニターなどにフルスクリーンで表示して出力することとかもできる。

Window COMP は、ウィンドウを作るためのオペレーターです。Window > Window Operator に指定したオペレーターの内容を別のウィンドウに表示します。その時にどれぐらいの大きさで表示するか、どのモニターに表示するか等をパラメーターで指定します。
[引用] http://satoruhiga.com/TDWS2018/day20/


画像71

Window Operatorに出力したいOPを入れる。

画像72
画像73


Justify and Offset Toでどのモニターに出力するかを選択できる。

Specify Monitorの時はMonitorの値を変更してどのモニターにするかを選ぶ

画像74

Opening Sizeでどのくらいの解像度でウィンドウを作るかを選べる
Automatic from Pnel COMP / TOPではそのOPで設定されている解像度に合わせて表示されて、FillではFULL画面で出てくる。Customではその下のWidth/Heightで自分で設定できる。

画像76

Cursor Visibleでマウスカーソルの表示設定を変更できる。
Constrain CursorWindowでは表示した際にそのWindow領域の中にマウスが制限されて、Monitorでは表示しているモニターに制限される。

画像84
画像85

V-sync Modeで垂直同期の設定を選べる。

画像86

諸々の設定が完了したらOpen As Separate Window の Openを押すと以下のようにwindowが出現する
Closeを押すと閉じる。同様にESCキーorウィンドウの終了ボタンを押しても戻る。


画像75


BordersをOFFにすると縁がなくなる

画像77

TouchDesigner左上のPerformモードもWindow COMPから出力できる。
Open as Perform WindowからPerformを押すと起動できる。
PerformモードではESCキーで戻る。

TouchDesigner画面左上の Perfome Mode ボタンを押すか、キーボードの F1 キーを押すことでTouchDesignerは Perfome Mode と呼ばれる状態になります。これは、1つの Window COMP のみを表示して後はすべて非表示にする、という働きをします。
[引用] http://satoruhiga.com/TDWS2018/day20/

画像78

Set as Perform Windowを押すと、
Window Placement DialogというところのPerform Windowにチェックが入る。
開き方はメニューのDialogs > Window Placement or Window COMP > Window Placement Dialogから開ける。

Include in Placement DialogをON / OFFにすることでWindow Placement Dialogに表示するかしないかを選べる。

画像81


Window Placement Dialog
Perform Window
というところにチェックの入っているWindow COMPは
Performモードで表示される対象となる。
Designer Mode(Esc) / Perform Mode(F1)のボタンからでもPerformモードとDesignerモードを切り替えられる。

画像80

ParのPという項目をクリックすると、そのWindow COMPのParametersを別ウィンドウで表示することができる。

画像82

Netのところにあるマークを押すとそのwindow COMPがあるネットワークを別ウィンドウで表示することができる。

画像83

Open CloseOpenを押すとOpen as Separate Windowを押したときと同じように別ウィンドウで表示できる。



Parameter


Parameter COMP はパラメーターウィンドウの必要なコントロール部分のみを抜き出してUI要素とするオペレーターです。Parameter > Operator に、パラメーターのUIを作りたいオペレーターを指定して Parameter Scope で操作したいパラメーターの名前を指定するとその部分のみのUIが作られます。
必要なパラメーターを取り出した後は Layout > Width / Height を調整して大きさを調整しましょう。
[引用] http://satoruhiga.com/TDWS2018/day20/


画像87
画像88

OperatorにOPを設定して、
Viwer Activeモード(OP右下 +マーク) もしくは右クリック View..でOPのParameterをいじることができる。

HeaderをONにするとParameterのヘッダーもいじることができて、
Page NamesをONにするとParameterのページタブもいじることができる。

画像89
画像90

Page Scope / Parameter Scopeで表示させたいページ・パラメーターを絞ることもできる。

画像91
画像92

Panels系 COMP


基本的には、Parent Compの中に入っている、Child Compとして扱われる。
という親子関係の他に
Compの上下のポートに接続する親子関係も存在する。

Compの内部に入れる形の親子関係は、Panels系のCOMPに至ってはレイヤーのような概念になる。
上下のポートの親子関係はAEでいうピッグウィップによる親子関係みたいなイメージ。



中ボタンクリック等でinfoを見るとpanel boundsにそのcompがどの大きさでどのxyにいるかを確認できる
child数も見ることができる。

info



Layout tab



Depth Layer は同じ階層にいる子compに対してレイヤー順を決めるもの。
数値が高い方が上に表示される。


Horizontal Mode / Vertical Mode
Fixed Width, Fill, Anchorsから選べる。

Horizontal Mode

デフォルトで、Fixed Widthになっていて、これだと
Width, Heightの数値に合わせて、そのcompの大きさが決まる。
Left Anchor / Bottom Anchorがさわれて
0-1に正規化されていて、親の左端
(上)が0、右端(上)が1になるようになっている。
Horizontal Origin / Vertical Originで、パネルの原点の位置を設定できる。デフォルトの原点(0,0)はパネルの左下隅

Fillにすると、親のCOMPに合わせて、horizontal / verticalに幅をfillして埋める。
Horizontal Fill Weight

Anchorsを選ぶと、一見Fillと同じような挙動をするが
Left(Right) Anchor, Left(Right) Offsetが出てきて、
anchorを0-1で正規化された数値で設定できて左端が0、右端が1にして選べる。そのoffsetをそれぞれ設定できる。
Top Bottomでも同じ。


AnchorのRight/Left、Bottom/Topをそれぞれこれから配置しようとする中央になるポイントの座標で同じ値にして、
offsetを128x32の画像ならL-64,R64,B-18,T18にすればいい感じに配置することもできる。

anchor offset
Anchors


anchors


Parent Alignment
defaultでAllowになっている。これは親CompのChildren tabでalignが設定されていた時に、それに適用されるかされないかを選べる。
Ignoreにしていると無視されて、Ingnore and Ignore Marginsを選ぶと親のマージンも無視される。

Parent Alignment

Allowの時に、Align orderが選べて、親のAlignに従うときに並ぶ順番をどうするかを設定できる。Align Orderが小さい方が先に並ぶ。



Size from Windowをonにすると、
viewerを出していた時に、マウスでウィンドウの大きさを変えると、Layout tabの Width/Heightもバインドされて更新される。

container viewer

ONにしていると、bindされているから大きさを変更しても解像度が保たれているが、
offにしていると、無理やりストレッチした感じに解像度が下がる。

Panel tab


Floating Viewer Aspect

Propotionalにすると、OPを右クリックして、Viewerを表示した時にウィンドウを同じアスペクト比率で拡大できるようにするか、
Unconstrainedにすると、左右のみ、上下のみなどアス比に関わらない大きさ変更ができる。



Look tab

Background Color / Background Alpha

Background Alphaがデフォルトで0になっている。alpha > 0の時にBackground Colorが効いてくる。

Children tab

children tab

例えば、Container comp(A)の中にあるContainer Comp(B)はAがparentとなり、Bがchildということになる。
Parent(A)のcompの中にあるChildren tabをいじれば、中にあるBなどのChildに対しての設定ができる。


Align
Left to Righなどを選べば、同じChild compを左から右へ並べることができる。

Align
Left to Right

Spacingを増やすと、子comp同士の間にスペースを空ける。

Spacing
親compのbackgroundを赤にしている。

Max per Lineの数値を2にすると、1 line(行)に入れれる子compの数が指定できる。
デフォルトの0にしていると、全部が1行に並ぶ。

Max per Line 2

Marginをいれると、親コンプの四辺に対してマージンを入れれる。

Margin

表示される順番は、child compの名前に依存される。
layout1,2,3の順に表示されているが、例えば、緑の1を4とかにすると、順番が変わる



異なるCompに対して、順番を変更したい場合
button , button , sliderになっているが、button , slider ,buttonにしたいとき

変更前

それぞれのcompに対して、Layout tabにある、Align orderを設定してあげると任意の順番にできる。数字が少ない順に並ぶ。

変更後

Justify Horizontal / Justify Vertical
off / left / center / horizontalが選べて、
水平方向の左揃え、右揃え、センター揃えなどが選べる。

Justify Horizontal


Off


Center
Right


Crop
子Compがこの親コンプを超えて配置されているときにどのように表示するかを選べる。
off(Use Parent), Neverの違いはよくわからない。
onにするとクロップされる。

crop




UIの作り方手順

参考 : 

例えば、以下のようなUIを作りたいとしたとする。

とりあえず、Container COMP でHorizontal / Vertical ModeをFillにして、階層で分けていく。
そのとき、一番上のContainer COMP > Layout > Size from Window > OnにしておくとViewでみやすい。
要素の大きさは気にせずにとりあえず、区分けだけを階層的に行っていく。

最下層では、widget COMPを使って配置しておく。

Widgetの上の階層等で次はsectionごとの具体的な大きさを決めていく。
任意のHorizontal / Vertical ModeをFixed Wdith / Heightにして、幅を決めていく。
Size from Window > onにしていたため、固定にしたくない部分以外はFillにしておくと、windowサイズを変えたときにレスポンシブデザインにできる。


もし最終的に全体の固定のウィンドウサイズが決まった場合は、
一番上のContainerでサイズを打って、 Size from windowをoffにすることで固定のデザインに。

決まったら、最下層のWdiget Compが置かれているところにいって、そのWidgetの中にUIを作っていくか、置き換えてしまえばおk



便利な方法として、
この設定したUIからパラメーターのreferenceをとってくるときに、このViwerからControl + 右クリック(win)でNetwork, Parameterなどにアクセスできるショートカットが出てくる。
これでいちいち最下層にあるUIのパラメーターを探しに潜らなくてもいい。

一番上のすべてをまとめているContainerにたいしてCustom Componentでページを作って
そこを各UIとbindさせると便利。

UI側でbindさせる方が綺麗。

っていう作業をしなくても、customize componentで、parameterのところに好きなparameterをドラッグ&ドロップすることで、そこにbindするようにできる。
Bind New Par as Masterの方だと、元のparameter(master)の方にbindが書かれる。
Bind New Par as Referenceの方だと、このcustomしているcomp側にbindが書かれる。

ドラッグアンドドロップ

UI Widgetsの場合、valueの下のnameのところに好きなparameterネームを書くことで、それがcustom先のparameterの名前になる。

name

Container

Panel系のCOMPの複数のUIをまとめれるCOMP

COMP系のオペレーターは他のものとは違い、上下に接続のポートがあります。複数の Parameter COMP を Container COMP に接続すると Container COMP にUIが重なって表示されるのがわかると思います。この状態でそれぞれの Parameter COMP の X/Y を移動させて位置を決めてもいいですが、自動でレイアウトする方法もあります。
Container COMP の Children > Align で子要素のレイアウトの方法を指定できます。たとえば Top to Bottom にすると上から下へ、Left to Right にすると 左から右へ、といったように自動でレイアウトされとても便利です。
[引用] http://satoruhiga.com/TDWS2018/day20/

注意で、上下の接続ポートにContainerをContainerに接続した時にUIをclick、入力等々ができなくなってしまう。そうしたい時はWidgetを使う。
あえて、使うならContainerは最終端でまとめたい時に使う。

Children > Align > Top to Bottomにしたとき

画像94
画像95




Slider

0-1のCHOPとしての値をoutputすることができる。

画像96


Button

一般的にクリックしたらという反応はMomentaryをしたらいい。

画像97
画像98


Table

テーブル上のUIを作れる。
DATからのinputとボタンを紐づけることができる。

画像100
画像99


Widget

Panel系COMP


階層上にUIをまとめてくれるUIのNull的な扱いで使える。
Containerでこれをやろうとすると、中のUIがクリックしたり中の、UXが使えなくなる。



Field

テキストを打ち込めるUI

画像100

Field TypeでString / Float / Integerを選べる

画像101
画像102


Select

Panel系COMP

さて、折角作ったUIですがこの状態だと Perfome Mode の画面に出てきません。デフォルトの状態だと Perfome Mode では /project1 を表示する設定になっていますが、そこに表示するには /project1 の直下にCOMPを置く必要があるためです。
各UIをすべて /project1 直下に作ってももちろんいいでのすが、 Select COMP を使うともっと簡単にUIとプログラムを分離して管理できます。Select COMP は、指定したCOMPオペレーターのViewの表示を参照するためのものです。たとえば /project1 直下に置いた Select COMP で他の階層の COMP を参照すると /project1 のViewにそれが表示されます。
他の階層で色々なUIをつくったものを Select COMP を使って表示しつつレイアウトするというのが、TouchDesignerでUIを作る時のベストプラクティスになると思います。
[引用] http://satoruhiga.com/TDWS2018/day20/





この記事が気に入ったらサポートをしてみませんか?