第５回: レンダリング，質感

目次

レンダリング

レンダリングとは，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/

課題

授業内課題

PBRの環境マップを使って，第４回の課題をレンダリングしなさい

要件

  • ファイル名を学籍番号+名前（ローマ字）.toe　として添付して提出（例: 11111111SeiyaAoki.toe）

締切: 2022年5月20日16:10
提出先: 情デサーバー 05_授業内/

来週までの課題

今日の内容を使って，自分でモデリングしたSOPをレンダリングし，アニメーションさせなさい．

要件

  • ファイル名を学籍番号+名前（ローマ字）.toe　として添付して提出（例: 11111111SeiyaAoki.toe）
  • モデリングする対象は問わないが，第４回の課題でモデリングした題材とは異なるものにすること
  • ２つ以上Geometry COMPを使用してMATも２つ以上にすること（例: Phong MATとPBR MAT，PBRを２つなど）

締切: 2022年5月26日23:59
提出先: 情デサーバー 05_週課題/