Unity道場 14 Shader Forge 102 ~ShaderForgeをつかって学ぶシェーダー入門~ カスタムライティング/トゥーンシェーダー編 Unity Technologies Japan合同会社 コミュニティエバンジェリスト 小林信行 2016/10/30
Jan 24, 2018
Unity道場 14
Shader Forge 102 ~ShaderForgeをつかって学ぶシェーダー入門~
カスタムライティング/トゥーンシェーダー編
Unity Technologies Japan合同会社 コミュニティエバンジェリスト
小林信行 2016/10/30
本コースを受講することで得られる知見
• 本コースは、「ShaderForgeを使ってシェーダーを学ぶ」のが目的ですので、ShaderForgeの全機能を紹介するものではありません。
• 本コースでは、ShaderForgeを使ってカスタムライティングについて学びます。
• 実際にシェーダーを組んでいく上で、よく使われるノードの機能や、しばしば使われるパターンを見ていきましょう。最後にそれらの知識を元に、トゥーンシェーダーのサンプルをいくつか組んでみましょう。
• ShaderForgeの基本的な操作については、『ShaderForge 101』のスライドを参照してください。
カスタムライティングをノードで組んでみよう
シェーダーの準備
新規作成するとサンプルノードが設定されているので、不要なものを削除する。
Custom Lightingを選択する
ライトとライトカラーのみが反映するシェーダー
ライトとライトカラーのみが反映するシェーダー
Light Colorノード レンダリング対象となるカレントライトのカラーを取得する。
Light Attenuationノード ライトの減衰を取得する。このノードはライトのフォールオフとシャドウを同時に取得する。
ライトとライトカラーのみが反映するシェーダー
最も単純なLambertシェーダーを作ってみよう
最も単純なLambertシェーダーを作ってみよう
Normal Directionノード ワールド空間でのメッシュの法線方向を出力する。チェックをつけるとノーマルマップを考慮する。
Light Directionノード レンダリング対象となるカレントライトの方向を出力する。
Dot Productノード AとBの2つのベクトルの内積をとる。
内積(Dot Product)とは? A →
B → θ
A →
| | B →
| | cosθ A →
B →
・ =
このオレンジ部の長さは、 A →
| | cosθ
特に、 が長さ1の時、オレンジ部の長さはcosθとなる。 A →
内積とは、2つのベクトルがなす角度の状態を示すスカラー値のこと。 特に2つのベクトルがノーマライズされている場合には、内積が即、2つのベクトルの内角のcosθの値となっている。
内積(Dot Product)とは?
上図のように、ライトベクトルと法線ベクトルの内積を取ることで、光の当たり具合を0~1で表現することができる!
内積がマイナスは、 「光が当たっていない」
ことを示している。
内積(Dot Product)とは?
Dot Productノード内の設定で、出力される値域が変わるので注意!
「法線方向との内積」でよく使われるベクトル
「法線方向との内積」でよく使われるパターン
Light Directionノードと内積をとって、ライティングの状態を得る。
View Directionノードと内積をとって、One Minusで反転し、リムライトの状態を得る。
Half Directionノードと内積をとって、Powerノードで絞り込み、スペキュラ(グロッシイ)反射の状態を得る。
Half Lambertを作ってみよう l Half Lambertとは、通常-1~1の範囲で示されるライティングの状態を、0~1の範囲にリマップし直
すことです。結果、陰影の入り方が柔らかめになります。
l Half Lambertの作成はいくつかありますが、ここでは「ライティング結果に、0.5を掛けて、0.5を足す」という手法をとります。
Half Lambertの場合 Lambertの場合
Half Lambertを作ってみよう
Blinn-Phongモデルを作ってみよう l Lambertモデルに、スペキュラ反射を足すことで、Blinn-Phongスペキュラ反射モデルが作成できます。
l Blinn-Phongモデルの場合、スペキュラ反射の計算は、ハーフベクトルとノーマルベクトルの内積より求めます。
Blinn-Phongの場合 Lambertの場合
Blinn-Phongモデルを作ってみよう
スペキュラの計算
Blinn-Phongモデルを作ってみよう
Powerノード 値の累乗を求める。この例の様に、明るい部分を絞り込むのに使われる。
Blinn-Phongモデルを改造してみよう l Blinn-Phongモデルに、ノーマルマップとキューブマップによる環境マッピングを追加してみましょう。
Blinn-Phongモデルを改造してみよう ノーマルマップ
キューブマップによる環境マッピング
Half Lambertで明るくする l 陰が強くかかり過ぎているようなので、Half Lambertに切り替えることで明るくしてみましょう。
今回は別のやり方でやってみます。
Half Lambertで明るくする
Normalized に変えることで、Half Lambertに変更できる。
トゥーンシェーダーを作ってみよう!
トゥーンシェーダーとは? l トゥーンシェーダーは、ライティングモデルを元に、光が当たっている場所と当たってない場所を段階
を追って変化させるのではなく、明色と陰色のふたつにカラーを別けてしまう技法のことです。
l DCCツールでは、主にランプシェーダーから作りますが、今回はHalf Lambertモデルから作ってみましょう。
Shading Map Ramp Shader
Half Lambertを用意し、不要なノードを消す
不要なノードは消してしまいます
不要なノードは消してしまいます
Shading Map用のテクスチャを割り当てる
マスクの反転
マスクをUVとして、テクスチャを貼る
Shading Map用のテクスチャを割り当てる
One Minusノードでマスクを反転します。テクスチャ座標系では、左が0で、右が1ですが、ライティングモデルの値そのままだと、明るい方が1で、暗いほうが0となってますので、マスク反転することでテクスチャ座標系と合わせます
Component MaskノードでRRの数値を取り出し、UV座標とします。 マスクからは、スカラーで各頂点の明るさのレベルが来ていますので、それをベクトルの各要素に見立て、RRとして取り出すことで、UV座標とします。 取り出したUV座標を元に、各頂点のカラーをシェーディングマップより割り出します。
ランプシェーダーを作ってみよう! l ランプシェーダーも、Half Lambertモデルから作ることができます。
l その際、StepノードとLerpノードの2つのノードを使用します。Stepノードで2値のマスクを作成し、そのマスクに従って、明色と陰色を塗り分けます。
Step (A<=B)ノード AがBと同じかそれ以下の場合、1を出力。それ以外は0を出力する。2値化の閾値を設定するノード
Lerpノード マスク値として与えられるTに応じて、A、Bを混ぜるノード
ランプシェーダーを作ってみよう!
アンビエントカラーに反応するようにしよう l シェーダーをアンビエントカラーに反応するようにしておくと、シーン全体にカラーを馴染ませるのが
やりやすくなります。
l アンビエントカラーの設定は、LightingウィンドウのSceneタブでおこないます。
Ambient Lightノード シェーダーがレンダリングされるシーンのアンビエントライトを出力する
アンビエントカラーの設定
アンビエントカラーに反応するようにしよう
例では、Switchノードを使って、アンビエントライトの影響をON/OFFできるようにした。
アンビエントカラーに反応するようにしよう
アンビエントライトの影響 をONにした場合
FallOffをランプシェーダーのマスクにしてみよう l FallOffをランプシェーダーのマスクとして使うことで、さらに複雑な明色と陰色のブレンドが可能に
なります。
l FallOff用のテクスチャはPhotoshopなどで簡単に作ることが出来ますので、いろいろと試してみるといいでしょう。
FallOff用のテクスチャの例 グレースケールで作成する
FallOffをランプシェーダーのマスクにしてみよう
FallOffをランプシェーダーのマスクにしてみよう
FallOffをランプシェーダーのマスクにしてみた例
この面が明色と陰色の中間になっている
FallOffをマスクに使う時のTips
このような場合は、FallOffに使用しているテクスチャのWrapモードをClampにするとよい。
FallOffを使っている時に、へそがでる場合
トゥーンライン(アウトライン)を設定してみよう
アウトラインを設定するのは、とても簡単です。
Mainノードの Outline Width に数値を入力すると、Outline Color にカラーが接続できるようになります。
これだけで、基本のアウトラインが表示されます。
マテリアルベースのアウトラインを表示する
「トゥーンライン」に見る、処理系による線表示の違い
ノーマル反転によるマテリアルベースのトゥーンライン(アウトライン)表示は軽い分、クリース線や交差線は出ない。またハードエッジに弱い等の弱点があるが、処理は軽く、線の入り抜きなどの制御もしやすい。古いハードウェアでも対応できるので、互換性が高い。
イメージエフェクトによるトゥーンラインの表示では、アウトラインだけでなく、クリース線や交差線も表示できる一方で、線の入り抜きなどの制御はしにくい。またポストエフェクトとして処理される分、モバイルでは負荷が高くなる可能性がある。
ノーマル反転によるマテリアルベースのトゥーンライン表示 カメラベースのポストエフェクトによるトゥーンライン表示
トゥーンシェーダーの実例として「ユニティちゃんトゥーンシェーダー」
を見てみよう!
• トゥーンシェーダーとは、NPR系シェーダーの系譜としては、「あるオブジェクトへの光の当たり具合に基づいて、そのオブジェクトを指定のカラーで塗り分けるシェーダー」にあたります。ここでは「ユニティちゃんトゥーンシェーダー」を例に、その仕組みを見てみましょう。
ユニティちゃんトゥーンシェーダーとは? 「ユニティちゃんトゥーンシェーダー」は、セル風3DCGアニメーションの制作現場での要望に応えるような形で設計された、映像志向のトゥーンシェーダーです。
特に影の制御に重点が置かれた設計になっています。
• アウトラインの入り抜き調整は、テクスチャで指定可能 • 必ず影にしたい場所をテクスチャで指定可能 • ノーマル色と影色の混合部のぼけ足を調整可能 • ライトの位置を変えずに影色の支配域を変更可能 • モバイル環境/WebGLでも動作します • Shader Forgeで確認できる、ノードベースで実装されています
⇒目的に合わせて、カスタマイズができます!
http://unity-chan.com/download/index.php
ユニティちゃんトゥーンシェーダーのノードグラフ
トゥーンシェーダーとは、「あるオブジェクトへの光の当たり具合に基づいて、そのオブジェクトを指定のカラーで塗り分けるシェーダー」である。
陰部分のマスクの調整
アウトラインの調整
光の当たり具合を元に、通常色と陰色を割り当てる
光の当たり具合を求める
光の当たり具合を求めるノードパターン
Normal Directionノード ワールド空間でのメッシュの法線方向を出力する。チェックをつけるとノーマルマップを考慮する。
Light Directionノード レンダリング対象となるカレントライトの方向を出力する。
Dot Productノード AとBの2つのベクトルの内積をとる。 「内積」は、2つのベクトルが構成する 角度の開き具合を表している。
上図のように、ライトベクトルと法線ベクトルの内積を取ることで、 光の当たり具合を、
0(光が全く当たっていない)~1(光が真正面から当たっている) の範囲で表現することができる!
マスク値を元に通常色と陰色を割り当てるノードパターン
Lerpノード マスク値として与えられるTに応じて、A、Bを混ぜるノード
「光の当たり具合」がマスク値Tとして接続される
※「光の当たり具合」をどのように マスク値として評価するかによって トゥーンカラーシェーダーごとの特徴が出る。
通常色
陰色
トゥーンシェーダーの本質は、光の当たり方を元に、オブジェクトを通常色と陰色の2種類のテクスチャで塗り分けることだから、 両者に違うタッチのテクスチャを割り当て、カメラ側でカラーを乗せることもできる。
unity-chan! In 《Tank!》
参考文献 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