【Unity道場14】Shader Forge 102

Transcript

1. Unity道場 14
   Shader Forge 102
   ～ShaderForgeをつかって学ぶシェーダー入門～
   カスタムライティング/トゥーンシェーダー編
   Unity Technologies Japan合同会社
   コミュニティエバンジェリスト
   小林信行
   2016/10/30
   

   View Slide

2. 本コースを受講することで得られる知見
   •  本コースは、「ShaderForgeを使ってシェーダーを学ぶ」のが目的ですので、
   ＳｈａｄｅｒＦｏｒｇｅの全機能を紹介するものではありません。
   •  本コースでは、ShaderForgeを使ってカスタムライティングについて学びます。
   •  実際にシェーダーを組んでいく上で、よく使われるノードの機能や、しばしば
   使われるパターンを見ていきましょう。最後にそれらの知識を元に、トゥーン
   シェーダーのサンプルをいくつか組んでみましょう。
   •  ShaderForgeの基本的な操作については、『ShaderForge 101』のスライドを
   参照してください。
   

   View Slide

3. カスタムライティングを
   ノードで組んでみよう
   

   View Slide

4. シェーダーの準備
   新規作成するとサンプル
   ノードが設定されている
   ので、不要なものを削除
   する。
   Custom Lightingを選択する
   

   View Slide

5. ライトとライトカラーのみが反映するシェーダー
   

   View Slide

6. ライトとライトカラーのみが反映するシェーダー
   Light Colorノード
   レンダリング対象となるカレント
   ライトのカラーを取得する。
   Light Attenuationノード
   ライトの減衰を取得する。
   このノードはライトのフォールオフ
   とシャドウを同時に取得する。
   

   View Slide

7. ライトとライトカラーのみが反映するシェーダー
   

   View Slide

8. 最も単純なLambertシェーダーを作ってみよう
   

   View Slide

9. 最も単純なLambertシェーダーを作ってみよう
   Normal Directionノード
   ワールド空間でのメッシュの法線
   方向を出力する。チェックをつけ
   るとノーマルマップを考慮する。
   Light Directionノード
   レンダリング対象となるカレント
   ライトの方向を出力する。
   Dot Productノード
   AとBの２つのベクトルの内積を
   とる。
   

   View Slide

10. 内積（Dot Product）とは？
    A
    →
    B
    →
    θ
    A
    →
    ｜ ｜ B
    →
    ｜ ｜
    cosθ
    A
    →
    B
    →
    ・ =
    このオレンジ部の長さは、 A
    →
    ｜ ｜
    cosθ
    特に、　　が長さ1の時、オレンジ部の長さはcosθとなる。
    A
    →
    内積とは、２つのベクトルがなす角度の状態を示すスカラー値のこと。
    特に2つのベクトルがノーマライズされている場合には、内積が即、
    ２つのベクトルの内角のcosθの値となっている。
    

    View Slide

11. 内積（Dot Product）とは？
    上図のように、ライトベクトルと
    法線ベクトルの内積を取ること
    で、光の当たり具合を０～１で
    表現することができる！
    内積がマイナスは、
    「光が当たっていない」
    ことを示している。
    

    View Slide

12. 内積（Dot Product）とは？
    Dot Productノード内の設定で、出力される値域が変わるので注意！
    

    View Slide

13. 「法線方向との内積」でよく使われるベクトル
    

    View Slide

14. 「法線方向との内積」でよく使われるパターン
    Light Directionノードと内積
    をとって、ライティングの状
    態を得る。
    View Directionノードと内積をとっ
    て、One Minusで反転し、リムライト
    の状態を得る。
    Half Directionノードと内積をとって、
    Powerノードで絞り込み、スペキュラ
    （グロッシイ)反射の状態を得る。
    

    View Slide

15. Half Lambertを作ってみよう
    l  Half Lambertとは、通常-1～１の範囲で示されるライティングの状態を、0～１の範囲にリマップし直
    すことです。結果、陰影の入り方が柔らかめになります。
    l  Half Lambertの作成はいくつかありますが、ここでは「ライティング結果に、0.5を掛けて、0.5を足す」
    という手法をとります。
    Half Lambertの場合 Lambertの場合
    

    View Slide

16. Half Lambertを作ってみよう
    

    View Slide

17. Blinn-Phongモデルを作ってみよう
    l  Lambertモデルに、スペキュラ反射を足すことで、Blinn-Phongスペキュラ反射モデルが作成できます。
    l  Blinn-Phongモデルの場合、スペキュラ反射の計算は、ハーフベクトルとノーマルベクトルの内積より
    求めます。
    Blinn-Phongの場合 Lambertの場合
    

    View Slide

18. Blinn-Phongモデルを作ってみよう
    スペキュラの計算
    

    View Slide

19. Blinn-Phongモデルを作ってみよう
    Powerノード
    値の累乗を求める。
    この例の様に、明るい部分を絞り込むのに使われる。
    

    View Slide

20. Blinn-Phongモデルを改造してみよう
    l  Blinn-Phongモデルに、ノーマルマップとキューブマップによる環境マッピングを追加してみましょう。
    

    View Slide

21. Blinn-Phongモデルを改造してみよう
    ノーマルマップ
    キューブマップによる
    環境マッピング
    

    View Slide

22. Half Lambertで明るくする
    l  陰が強くかかり過ぎているようなので、Half Lambertに切り替えることで明るくしてみましょう。
    今回は別のやり方でやってみます。
    

    View Slide

23. Half Lambertで明るくする
    Normalized に変えることで、
    Half Lambertに変更できる。
    

    View Slide

24. トゥーンシェーダーを
    作ってみよう！
    

    View Slide

25. トゥーンシェーダーとは？
    l  トゥーンシェーダーは、ライティングモデルを元に、光が当たっている場所と当たってない場所を段階
    を追って変化させるのではなく、明色と陰色のふたつにカラーを別けてしまう技法のことです。
    l  DCCツールでは、主にランプシェーダーから作りますが、今回はHalf Lambertモデルから作ってみま
    しょう。
    Shading Map Ramp Shader
    

    View Slide

26. Half Lambertを用意し、不要なノードを消す
    不要なノードは
    消してしまいます
    不要なノードは
    消してしまいます
    

    View Slide

27. Shading　Map用のテクスチャを割り当てる
    マスクの反転
    マスクをUVとして、テクスチャを貼る
    

    View Slide

28. Shading　Map用のテクスチャを割り当てる
    One Minusノードでマスクを反転します。
    テクスチャ座標系では、左が０で、右が１です
    が、ライティングモデルの値そのままだと、
    明るい方が１で、暗いほうが０となってますの
    で、マスク反転することでテクスチャ座標系
    と合わせます
    Component　MaskノードでRRの数値を取り
    出し、UV座標とします。
    マスクからは、スカラーで各頂点の明るさの
    レベルが来ていますので、それをベクトルの
    各要素に見立て、RRとして取り出すことで、
    UV座標とします。
    取り出したUV座標を元に、各頂点のカラー
    をシェーディングマップより割り出します。
    

    View Slide

29. View Slide

30. ランプシェーダーを作ってみよう！
    l  ランプシェーダーも、Half Lambertモデルから作ることができます。
    l  その際、StepノードとLerpノードの２つのノードを使用します。
    Stepノードで２値のマスクを作成し、そのマスクに従って、明色と陰色を塗り分けます。
    Step (A<=B)ノード
    AがBと同じかそれ以下の場合、
    １を出力。それ以外は０を出力する。
    ２値化の閾値を設定するノード
    Lerpノード
    マスク値として与えられるTに応じて、
    A、Bを混ぜるノード
    

    View Slide

31. ランプシェーダーを作ってみよう！
    

    View Slide

32. View Slide

33. アンビエントカラーに反応するようにしよう
    l  シェーダーをアンビエントカラーに反応するようにしておくと、シーン全体にカラーを馴染ませるのが
    やりやすくなります。
    l  アンビエントカラーの設定は、LightingウィンドウのSceneタブでおこないます。
    Ambient Lightノード
    シェーダーがレンダリングされるシーン
    のアンビエントライトを出力する
    アンビエントカラーの設定
    

    View Slide

34. アンビエントカラーに反応するようにしよう
    例では、Switchノードを使って、
    アンビエントライトの影響を
    ON/OFFできるようにした。
    

    View Slide

35. アンビエントカラーに反応するようにしよう
    アンビエントライトの影響
    をONにした場合
    

    View Slide

36. ＦａｌｌＯｆｆをランプシェーダーのマスクにしてみよう
    l  FallOffをランプシェーダーのマスクとして使うことで、さらに複雑な明色と陰色のブレンドが可能に
    なります。
    l  ＦａｌｌＯｆｆ用のテクスチャはＰｈｏｔｏｓｈｏｐなどで簡単に作ることが出来ますので、いろいろと試してみると
    いいでしょう。
    FallOff用のテクスチャの例
    グレースケールで作成する
    

    View Slide

37. ＦａｌｌＯｆｆをランプシェーダーのマスクにしてみよう
    

    View Slide

38. ＦａｌｌＯｆｆをランプシェーダーのマスクにしてみよう
    FallOffをランプシェーダーの
    マスクにしてみた例
    この面が明色と
    陰色の中間に
    なっている
    

    View Slide

39. FallOffをマスクに使う時のTips
    このような場合は、FallOffに
    使用しているテクスチャの
    WrapモードをClampにする
    とよい。
    FallOffを使っている時に、
    へそがでる場合
    

    View Slide

40. トゥーンライン（アウトライン）
    を設定してみよう
    

    View Slide

41. ​ アウトラインを設定するのは、とても簡単です。
    ​ Mainノードの Outline Width に数値を入力すると、
    Outline Color にカラーが接続できるようになります。
    ​ これだけで、基本のアウトラインが表示されます。
    マテリアルベースのアウトラインを表示する
    

    View Slide

42. 「トゥーンライン」に見る、処理系による線表示の違い
    ノーマル反転によるマテリアルベースのトゥーンライン（アウ
    トライン）表示は軽い分、クリース線や交差線は出ない。
    またハードエッジに弱い等の弱点があるが、処理は軽く、
    線の入り抜きなどの制御もしやすい。
    古いハードウェアでも対応できるので、互換性が高い。
    イメージエフェクトによるトゥーンラインの表示では、
    アウトラインだけでなく、クリース線や交差線も表示
    できる一方で、線の入り抜きなどの制御はしにくい。
    またポストエフェクトとして処理される分、モバイル
    では負荷が高くなる可能性がある。
    ノーマル反転によるマテリアルベースのトゥーンライン表示 カメラベースのポストエフェクトによるトゥーンライン表示
    

    View Slide

43. トゥーンシェーダーの実例として
    「ユニティちゃんトゥーンシェーダー」
    を見てみよう！
    •  トゥーンシェーダーとは、NPR系シェーダーの系譜としては、「あるオブジェクトへの光の当たり具合に
    基づいて、そのオブジェクトを指定のカラーで塗り分けるシェーダー」にあたります。
    ここでは「ユニティちゃんトゥーンシェーダー」を例に、その仕組みを見てみましょう。
    

    View Slide

44. ユニティちゃんトゥーンシェーダーとは？
    ​ 「ユニティちゃんトゥーンシェーダー」は、セル風3DCG
    アニメーションの制作現場での要望に応えるような形で
    設計された、映像志向のトゥーンシェーダーです。
    ​ 特に影の制御に重点が置かれた設計になっています。
    •  アウトラインの入り抜き調整は、テクスチャで指定可能
    •  必ず影にしたい場所をテクスチャで指定可能
    •  ノーマル色と影色の混合部のぼけ足を調整可能
    •  ライトの位置を変えずに影色の支配域を変更可能
    •  モバイル環境/WebGLでも動作します
    •  Shader Forgeで確認できる、ノードベースで実装されています
    ⇒目的に合わせて、カスタマイズができます！
    http://unity-chan.com/download/index.php
    

    View Slide

45. ユニティちゃんトゥーンシェーダーのノードグラフ
    トゥーンシェーダーとは、
    「あるオブジェクトへの光の当たり
    具合に基づいて、そのオブジェクト
    を指定のカラーで塗り分ける
    シェーダー」である。
    陰部分のマスクの調整
    アウトラインの調整　
    光の当たり具合を元に、
    通常色と陰色を割り当てる
    光の当たり具合を求める
    

    View Slide

46. 光の当たり具合を求めるノードパターン
    Normal Directionノード
    ワールド空間でのメッシュの法線方向
    を出力する。チェックをつけるとノーマ
    ルマップを考慮する。
    Light Directionノード
    レンダリング対象となるカレントライト
    の方向を出力する。
    Dot Productノード
    AとBの２つのベクトルの内積をとる。
    「内積」は、２つのベクトルが構成する
    角度の開き具合を表している。
    上図のように、ライトベクトルと法線ベクトルの内積を取ることで、
    光の当たり具合を、
    ０（光が全く当たっていない）～１（光が真正面から当たっている）
    の範囲で表現することができる！
    

    View Slide

47. マスク値を元に通常色と陰色を割り当てるノードパターン
    Lerpノード
    マスク値として与えられるTに
    応じて、A、Bを混ぜるノード
    「光の当たり具合」が
    マスク値Tとして接続される
    ※「光の当たり具合」をどのように
    　　マスク値として評価するかによって　　
    　　トゥーンカラーシェーダーごとの特徴が出る。
    通常色
    陰色
    

    View Slide

48. トゥーンシェーダーの本質は、
    光の当たり方を元に、オブジェクトを
    通常色と陰色の２種類のテクスチャで
    塗り分けることだから、
    両者に違うタッチのテクスチャを割り当て、
    カメラ側でカラーを乗せることもできる。
    unity-chan! In 《Tank!》
    

    View Slide

49. 参考文献
    l  SHADER FORGE Nodes http://acegikmo.com/shaderforge/nodes/
    l  SA09 Realtime education - Try Real-time Shader for artist – Kazuhiro Fumoto, http://
    www.slideshare.net/SIGTART/sa09-realtime-education
    l  Kansai cedec 2015_fumoto ノードベースリアルタイムシェーダ表現学習, Kazuhiro Fumoto,
    http://www.slideshare.net/SIGTART/kansai-cedec-2015fumoto
    l  『ゲームを動かす数学・物理』 堂前 嘉樹 / SBクリエイティブ / 2015
    l  『DirectX シェーダプログラミング　仕組みからわかるゲームエフェクトテクニック』
    N2Factory / SBクリエイティブ / 2007
    l  「アーティストのアーティストによるアーティストのためのリアルタイムシェーダー入門
    　～トゥーンシェーダーを書こう！～」 本村・C・純也 / GTMF2016 Tokyo Session C-7
    

    View Slide

50. View Slide