2018/12/8 第14回3DCGMeetup（大阪）で使用したスライドに補足を加えたものです。

1. #3DCGMeetUp
リアルタイムレンダリングでのマテリアル表現
3DCG Meetup #14
kurosawa

2. #3DCGMeetUp
自己紹介
Name : Kurosawa
Twitter ID : kurosaurus
URL : the-saurus.net
アートディレクター／テクニカルアーティスト

3. #3DCGMeetUp
お題目
マテリアルを学ぼう。マテリアルを学べばこんなことができる。
• テクスチャだけではできない表現
• 実例紹介
• 様々な入力情報
• 計算式を加える

4. #3DCGMeetUp
テクスチャだけではできない表現

5. #3DCGMeetUp
マテリアルを学ぶとできること
• 画像の値を超えた表示ができる
• 解像度の限界を超えられる
• バリエーションを作れる
• ゲーム中に動かせる

6. #3DCGMeetUp
画像の値を超えた表示
いわゆるHDR（ハイダイナミックレンジ）の表示
画像はRGB（各チャンネルが0-255／0-1）
反射やブルームなどに影響するので、高輝度なものは高輝度に表示したい

7. #3DCGMeetUp
解像度の限界を超えられる
いわゆるディテールマップ
コントラストを高めるなどの工夫をすれば、
さらに解像度が目立たない表現ができる

8. #3DCGMeetUp
バリエーションを作れる
モデルとテクスチャは使い回してマテリアルのパラメータだけを変えると
軽量なデータサイズで作れる

9. #3DCGMeetUp
ゲーム中に動かせる
狭義での動くマテリアル
• 明滅する
• 眼球が僅かに揺れる
• 波の満ち引き
広義での動くマテリアル
• カメラに近づくと消えるマテリアル
• ビルボード（カメラの向きを無視して空間に固定）
• インテリアマップ

10. #3DCGMeetUp
※ インテリアマップはUE4だとマテリアルファンクションが用意されているので、
CubeTextureをつなぐだけで簡単に作れます
（余談）マテリアルファンクション

11. #3DCGMeetUp
事例紹介

12. #3DCGMeetUp
Plugs
プロ向け動画チュートリアルサービス
https://plugs.jp/
UE4シーン作成講座 for アーティスト

13. #3DCGMeetUp
眼球をわずかに揺らす
UVの値に時間をサイン波で変換したものを二種類混ぜ、UV値に加算する

14. #3DCGMeetUp
DistanceFeildAOで波を作る
DistanceToNearstSurfaceの値と、UVスクロールするノイズをいい感じに混ぜる

15. #3DCGMeetUp
パラメトリックなサビを作る
※ Plugs動画内では潜水艦の作成には触れていませんがサンプルファイルは付属します
高さ情報とAO画像とノイズを混ぜてコントラストを付け、マテリアルの閾値にする

16. #3DCGMeetUp
マテリアルノードをみてみよう
まずは赤い枠で囲ったところに注目
赤い枠の要素を足したり掛けたりしている
どんな入力情報があるか理解する
→ あとはそれらをうまく使うだけ
アーティストの得意分野の『創意工夫』

17. #3DCGMeetUp
注意：マテリアルで扱えるのは入力情報
マテリアルはいろんなものを拾ってこれるが、
マテリアルを持つピクセル以外を変えることはできない
（例外： Vertexシェーダーでマテリアルが割り当てられている
頂点を動かすことはできる）

18. #3DCGMeetUp
さまざまな入力情報
本当にたくさんあるので、使い勝手のいいものだけ紹介します
※ 今回はパーティクル系は割愛

19. #3DCGMeetUp
Constant
Constant (Scalar）
Constant2Vector
Constant3Vector
Constant4Vector
特定のチャンネル数の数値（定数）をつくる。
この数値はゲーム内では変更できない。
Scalar 1チャンネル
Vector 2-4チャンネル
※ 分かりやすくするため画面すべてのオブジェクトに
同じマテリアルを貼っています

20. #3DCGMeetUp
Parameter
ConstantとParameterの違い
Parameterはゲーム内で変更できる／Constantは変更できない
何でもかんでもParameterにすると管理が大変
ScalarParameter
VectorParameter
変更可能な数値（変数）をつくる。
ゲーム内で変更可能。

21. #3DCGMeetUp
ここまでの知識でできること
高輝度なマテリアル
画像だとRGBがそれぞれ(0-1)の間に収まる
ConstantやParameterなら高輝度にできる

22. #3DCGMeetUp
基本的な数式を覚えておこう
Add 加算
Subtract 減算
Multiply 乗算
Divide 除算
Saturate 0以下と1以上を切り捨て
ComponentMask 特定のチャンネルだけにする
Append チャンネルを追加する

23. #3DCGMeetUp
ComponentMask補足
ComponentMask 特定のチャンネルだけにする ≠ 赤や緑になる
Photoshopでいうチャンネル表示（チャンネルごとに0-1の値）
赤さの強度 どれくらい赤いか

24. #3DCGMeetUp
TextureSample
UVに沿って画像を貼る
そもそも画像を貼るということはどういうこと？
（あとで説明します）

25. #3DCGMeetUp
TextureCoordinate
UVチャンネルの設定
タイリング処理などUV関連の機能
2チャンネルのベクター【重要】

26. #3DCGMeetUp
ここまでの知識でできること
ディテールノーマル
TextureCoordinateを接続しただけのNormalに、
UVに掛け算をして接続したNormalを合成
Normalを合成するためのめんどくさい計算はBlendAngleCorrectNormalさんが勝手にやってくれるぞ！
（興味のある人はみてみよう）

27. #3DCGMeetUp
ObjectPositionWS
WS＝ワールドスペース
オブジェクトごとのワールド空間の中心位置を出力

28. #3DCGMeetUp
WorldPosition
ワールド空間の現在のピクセル位置を出力

29. #3DCGMeetUp
ScreenPosition
スクリーン空間の位置を出力

30. #3DCGMeetUp
Vectorの話 グラデーションの正体
ComponentMask 選択したチャンネルだけに制限する
MaskでRのみの表示にすると横方向のグラデーション

31. #3DCGMeetUp
MaskでGのみの表示にすると縦方向のグラデーション

32. #3DCGMeetUp
画面の横度合いのグラデーション
画面の縦度合いのグラデーション
＋ ＝
R
G

33. #3DCGMeetUp
チャンネルが少ないということ
Photoshopのここが少ない状態
（上から順番に詰める）

34. #3DCGMeetUp
クイズ
マニュピレーターの色ってどうやって決まっているかわかりますか？
これ
こたえ
RGB ＝ XYZだから
コンピューターにとってはRGBもXYZも同じ

35. #3DCGMeetUp
WorldPositionのBチャンネルに使うと高さ方向のグラデーションになる
（例）WorldPositionのグラデーションをMaskしてみる

36. #3DCGMeetUp
TextureCoordinate＋TextureSample
Vector
複数のチャンネルの数値(ここではUとV)
2チャンネルのVector
Vectorであれば
TextureCoordinateでなくともよい

37. #3DCGMeetUp
ここまでの知識でできること
プロジェクションマッピング
WorldPosition R（X） → U
WorldPosition G（Z） → V
TextureCoordinateの代わりの値を作る

38. #3DCGMeetUp
Time
時間を出力
→ 入力
出
力
Sine 正弦波に変換
※ 実際には明滅します

39. #3DCGMeetUp
TextureCoordinateにTimeの値を加算
ここまでの知識でできること
UVスクロール
※ 実際には模様が移動します

40. #3DCGMeetUp
CameraPositionWS
ワールド空間のカメラ位置を出力
※ カメラのX座標で明るさが変わります

41. #3DCGMeetUp
DistanceToNearstSurface
マテリアル内でDistanceFieldAOの値を取得
オブジェクトの設置をとれる
画像は[Show] > [Visualize] > [Distance Fields Ambient Occlusion]

42. #3DCGMeetUp
あらためてチャンネルとは？
色 RGBの3チャンネル
時間 どれだけ経過したかという1チャンネル
位置 XYZの3チャンネル
UV UとVの2チャンネル

43. #3DCGMeetUp
CGにおいてすごくたいせつなこと
「色も時間も位置もUVも画像もみんなおなじ」
（いくつかのチャンネルの値でしかない）
コンピューターにとってはRGBもXZYも同じもの（3チャンネルのVector）
マニュピレータの色はXZYにRGBに相当することを示している

44. #3DCGMeetUp
計算式を加える

45. #3DCGMeetUp
グラデーションをシャープにする

46. #3DCGMeetUp
球を描く
中心の位置から半径の値を引く
（WorldPositionは塗りつぶす対象として必要）

47. #3DCGMeetUp
球と円の違い
円とは
Z軸（高さ方向）の値を持たない球
カメラと球の中心位置からBチャンネル（この場合はZ）をMask

48. #3DCGMeetUp
カメラ座標を使ってみる
球を描く式の中心の座標の代わりにカメラの座標を使ってみる
近づくと穴が開く仕組みができる

49. #3DCGMeetUp
球を多重にしてみる

50. #3DCGMeetUp
グラデーションの波形変換
正弦波
Sine（-1～1）
ノコギリ波
Fmod
矩形波（っぽいもの）
Sineに大きな値をかけてSaturateとか
キレイな正弦波や矩形波を作るマテリアルファンクション

51. #3DCGMeetUp
円を描くもう一つの方法
VectorToRadiusVaueで極座標変換できるのでこれでも円は描けます
（これもマテリアルファンクション）

52. #3DCGMeetUp
螺旋を作る
時計回りのグラデーションを利用して螺旋にしてみました

53. #3DCGMeetUp
画像でトーンマッピング
TextureSample ＝ チャンネルを画像ベースで再マッピングと解釈

54. #3DCGMeetUp
画像で動かす

55. #3DCGMeetUp
画像でUVをゆがめる
左側のテクスチャで右側のテクスチャが歪む

56. #3DCGMeetUp
UVにテクスチャをマッピングするということ
０ １
１
０
UV空間に画像をマッピング
↓
2Vectorと3Vector ⇒ 別の3Vector

57. #3DCGMeetUp
TextureSampleのほんとうの意味
TextureSample
UVに対して画像を貼るノード
TextureSample
2Vectorと3Vectorを使い、別の3Vectorをつくる
InputはUVでなくとも構わないし、
出力は画像でなくとも構わない

58. #3DCGMeetUp
画像を画像以外のものとして扱う
（もしかしてすごく特殊な話をしているように聞こえたかも…？）
でも、本質的にはこんにちのゲーム開発ではアタリマエ
よく使われる例
NormalMap
TangetNormalの変位情報
VAT（Vertex Animation Texture）
時間経過でピクセルの頂点がどう移動するかという情報
画像出典
http://houdini.indyzone.jp/blog/vertex-animation-texture-について/

59. #3DCGMeetUp
CGにおいてすごくたいせつなこと
「色も時間も位置もUVも画像もみんなおなじ」
画像を移動情報に使ってもよいし、オブジェクトの位置をカラーにしてもよい
UVの代わりにワールド空間を使ってもよいし、時間を使ってもよい
頂点座標を時間から作ってもよいし、色をUVから求めてもよい

60. #3DCGMeetUp
もっと自由なCG制作を楽しもう！