Upgrade to Pro — share decks privately, control downloads, hide ads and more …

【Unity道場14】Shader Forge 102

unitydojo
October 30, 2016
2.8k

【Unity道場14】Shader Forge 102

unitydojo

October 30, 2016
Tweet

More Decks by unitydojo

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  10. 内積(Dot Product)とは?
    A

    B

    θ
    A

    | | B

    | |
    cosθ
    A

    B

    ・ =
    このオレンジ部の長さは、 A

    | |
    cosθ
    特に、  が長さ1の時、オレンジ部の長さはcosθとなる。
    A

    内積とは、2つのベクトルがなす角度の状態を示すスカラー値のこと。
    特に2つのベクトルがノーマライズされている場合には、内積が即、
    2つのベクトルの内角のcosθの値となっている。

    View full-size slide

  11. 内積(Dot Product)とは?
    上図のように、ライトベクトルと
    法線ベクトルの内積を取ること
    で、光の当たり具合を0~1で
    表現することができる!
    内積がマイナスは、
    「光が当たっていない」
    ことを示している。

    View full-size slide

  12. 内積(Dot Product)とは?
    Dot Productノード内の設定で、出力される値域が変わるので注意!

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  16. Half Lambertを作ってみよう

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  30. ランプシェーダーを作ってみよう!

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  35. FallOffをランプシェーダーのマスクにしてみよう

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  38. トゥーンライン(アウトライン)
    を設定してみよう

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  47. 参考文献
    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 full-size slide