目次
- イントロダクション
- ProcessingからTouchDesignerへ
- 事例
- 使う前に
- 映像を生成する
- CHOPについて
- 数値を生成する
- 入力を扱う
- インタラクションデザイン
- 値を変化させる
- 一つにする
- SOPについて
- Geometry viewer
- 3Dモデルを生成する
- 変化させる
- 一つにする
- プロシージャルモデリング
- レンダリング
- MAT(質感)
- 課題
イントロダクション
デザインエンジニアリング演習のTouchDesigner回では,本来なら長時間かけて習熟していく内容を極力飛躍のないように省き,最終的にデータビジュアライゼーションできるような方針で進めていきます.ウェブページ上の目次とそれぞれの見出しでは,この授業で扱わない要素もテストのように,薄く記載されていますので,時間が余ったり,既に習熟している学生は適宜参照してください.
教員紹介
青木 聖也
多摩美術大学情報デザイン学科非常勤講師
情報科学芸術大学院大学(IAMAS)非常勤講師
慶應義塾大学環境情報学部非常勤講師
武蔵野美術大学通信教育課程デザイン情報学科デザインシステムコース非常勤講師
backspacetokyo所属
IAMAS修了.アーティスト.Scott Allenとして活動中.投影装置・映像メディアに関する作品を制作.
詳細は以下のBiographyを参照.
https://scottallen.ws/biography
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
インタビュー動画の一部に出てくる3D映像のライブ演出もTouchDesignerによって作られています.
詳細: https://backspace.tokyo/works/millennium-parade-launch-party/
ライブパフォーマンス
Ai.step live at nine tomorrows
Ai.step(Kakuya Shiraishi + Scott Allen)によるパフォーマンスのダイジェスト.visualパートはTouchDesignerによって作られています.
インスタレーション
nor / dyebirth
TouchDesignerを使用して装置の制御を行なったインスタレーションです.
映像分野に限らず,物理的に動くものの制御なども可能です.
詳細: https://nor.tokyo/dyebirth
使う前に
UI
基本操作
Operator windowを出す: レフトクリック2回 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が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/
課題
課題1
以下のようにSwitch TOPで信号が切り替わるプロジェクトを作成しなさい.
要件
- ファイル名を学籍番号+名前(ローマ字).toe として添付して提出(例: 11111111SeiyaAoki.toe)
- 色,形などは厳密に同じでなくて良い
締切: 2020年6月23日19:00
提出先: Google Classroom
課題2
画像のように時計を作りなさい.
要件
- ファイル名を学籍番号+名前(ローマ字).toe として添付して提出(例: 11111111SeiyaAoki.toe)
- Clock CHOPを使用して時間を取得する
- Transform TOPを使用して針を動かす
- 時針は厳密に少しずつ動かなくて良い
- 色や形などは厳密に画像通りでなくて良い.
締切: 2020年6月23日19:00
提出先: Google Classroom
課題3
画像のように椅子をモデリングし,レンダリングしなさい.
要件
- ファイル名を学籍番号+名前(ローマ字).toe として添付して提出(例: 11111111SeiyaAoki.toe)
- 各スケールは問わない
- 色は問わない
- 破綻(机の足が座面を突き破るようなこと)がないこと
締切: 2020年6月23日19:00
提出先: Google Classroom
次回までの課題
SOPをレンダリングし,インタラクティブに変化を加えなさい.
要件
- ファイル名を学籍番号+名前(ローマ字).toe として添付して提出(例: 11111111SeiyaAoki.toe)
- mouse, keyboardなどインタラクションさせる要素は問わない
- 変化させるものは問わない(動き,色,スケール,などなど)
- モチーフは問わない
- 画像などを使用した場合,プロジェクトファイルを同一フォルダに入れて,Zip化して添付すること
- 自分が授業の範囲外で知っている,あるいはこのページでプラスアルファで学んだことも使用して良い
締切: 2020年7月13日23:59
提出先: Google Classroom