3DCGmeetup12で講演したセッションです UE4のマテリアルを用いて、リアルタイムレンダリングでのNPR表現について解説しました

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

2. #3DCGMeetUp
自己紹介
Name : Kurosawa
Twitter ID : kurosaurus
URL : the-saurus.net
都内のゲーム会社に勤務
UnrealEngine4やMayaを使う仕事をしています。

3. #3DCGMeetUp
おしながき
 さまざまな入力情報
 計算式を加える
 さまざまな入力情報をつかう
 まとめ

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

5. #3DCGMeetUp
Constant
Constant
Constant2Vector
Constant3Vector
Constant4Vector
特定のチャンネル数の数値（定数）をつくる。
この数値はゲーム内では変更できない。

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

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

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

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

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

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

12. #3DCGMeetUp
赤成分のグラデーション
緑成分のグラデーション
＋ ＝

13. #3DCGMeetUp
（余談２）
マニュピレーターの色ってどうやって決まっているかわかりますか？
これ
こたえ
RGB ＝ XZYだから（MayaはXYZ）

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

15. #3DCGMeetUp
PixelDepth／SceneDepth
ピクセルのカメラからの深度（距離）を出力
SceneDepthは実際に描画されていないピクセルにも使えるが、
半透明マテリアルのみにかぎり使用できる

16. #3DCGMeetUp
PixelNormalWS／ VertexNormalWS
ピクセルが向いている方向／頂点が向いている方向を出力

17. #3DCGMeetUp
（補足）ここまででてきた数式のおさらい
Add たしざん
Subtract ひきざん
Multiply かけざん
Divide わりざん
Saturate 0以下と1以上を切り捨て
ComponentMask 特定のチャンネルだけにする

18. #3DCGMeetUp
Time
時間を出力

19. #3DCGMeetUp
（補足）Sine
Sine 正弦波に変換する
→ 入力
出
力

20. #3DCGMeetUp
CameraPositionWS
ワールド空間のカメラ位置を出力

21. #3DCGMeetUp
TextureCoordinate
UVを出力、使用するUV番号を決定
UとVそれぞれのチャンネルにTimeを加算

22. #3DCGMeetUp
チャンネルとは？
マテリアルの中で扱うときは、
色は3チャンネル、時間は1チャンネル、位置は3チャンネル、UVは2チャンネル
として扱える。
一つのチャンネルを持つものはScalar
2つ以上のチャンネルを持つものはVector
Vectorは単に2つ以上のチャンネルとしても表現可能ですが、
向き（3つのチャンネル）と大きさを持った単位です。
大きさを1に変換することを正規化といいます。

23. #3DCGMeetUp
CGにおいてすごくたいせつなこと
「色も時間も位置もUVもテクスチャもみんなおなじ」
（ここだけ覚えて帰ってもらっても大丈夫！）
マニュピレーターの話を思い出してください
コンピューターにとってはRGBもXZYも同じものなので
XZYに対応するRGBがそれぞれの軸の色になっています

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

25. #3DCGMeetUp
バウンディングボックス
ノード一つで簡単に！でもじつは…

26. #3DCGMeetUp
じつはファンクションの中身はこんなだったり
（ファンクションかどうかは最初は気にしなくていいです）

27. #3DCGMeetUp
グラデーションをシャープにする
グラデーションをシャープにすることができます。
ちなみに、シャープにするのは簡単ですがぼかすのはすごく重い処理が必要です。
少しずらして重ねるということを繰り返す必要があります。

28. #3DCGMeetUp
球を描く
中心の位置から半径の値を引くことで球は簡単に書けます。
（WorldPositionは塗りつぶす対象として必要です）

29. #3DCGMeetUp
球と円の違い
球と円の違いはZ軸（高さ方向）の値を持たない球が円であるといえます
カメラと球の中心位置からBチャンネル（この場合はZ）をMaskすると
円（円柱）になります。

30. #3DCGMeetUp
球を多重にしてみる
Fmod 余りを出力
余りを出力することでノコギリ波に変換できます

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

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

33. #3DCGMeetUp
さまざまな入力情報をつかう
ここまでは変数とWorldPositionだけでマテリアルを表現してみました
次は最初に覚えた様々な入力系を使ってみます

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

35. #3DCGMeetUp
UVにテクスチャを入れる
※ 左のTextureSampleにはコントラストのついたグラデーションが入っています
テクスチャのUVを指定する領域にテクスチャを入れる
UVとは0-1の2つの値を画像にマッピングしてるともいえる

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

37. #3DCGMeetUp
内積について
ここから先は内積を理解していないと難しいので先におさらい
難しそうに聞こえる内積
実はCG屋さんにはなじみ深いあるもので
考えれば簡単です。
ライティングされた球体
（マテリアルプレビューとかでまいにち見てますよね）

38. #3DCGMeetUp
内積について２
面の明るさはどうやって決まるか？
光源（Intensity１）
面の明るさはライトベクトルと法線ベクトルの内積で決まります
法線ベクトル
ここのあかるさに注目
ライトベクトル
ライトベクトルと法線の内積

39. #3DCGMeetUp
内積について２
法線ベクトル
０°(1)
30°(0.866)
45°(0.7071)
60°(0.5)
法線の角度(法線とライトベクトルの内積≒面の明るさ)
135°(-0.7071)
180°(-1)
ライトベクトル(1)
90°(0)
(補足)
内積の計算式自体には今回はふれない
（数学アレルギーを抑えるのが目的なので）
最初のうちは（正規化された）同じベクトルの場
合は１、90°の場合は0、反対側では-1となるとい
うことだけ分かればOK
2つのベクトル同士のおりなす量がわかるので、その
値をどう使っていくかということが本題

40. #3DCGMeetUp
カメラと法線の内積
ランプシェーダー（パラメーターを調整すればフレネルに似たの効果）

41. #3DCGMeetUp
任意のベクトルと法線の内積
マテリアル内でライティングのようなことができます
詳しくはもんしょ先生のブログを参考にしてください
http://monsho.blog63.fc2.com/blog-entry-128.html

42. #3DCGMeetUp
グラデーションを描く
点が2つあれば2点間のグラデーションが作れる

43. #3DCGMeetUp
まとめ
マテリアルで様々なことができるようになれば、
テクスチャを貼っただけではない、多様な表現ができる
「環境が変わった時の変化」
「動きのある表現」
「実在しない内部の表現」