Unity道場 14

Shader Forge 102 ～ShaderForgeをつかって学ぶシェーダー入門～

カスタムライティング/トゥーンシェーダー編

Unity Technologies Japan合同会社 コミュニティエバンジェリスト

小林信行 2016/10/30

本コースを受講することで得られる知見

•  本コースは、「ShaderForgeを使ってシェーダーを学ぶ」のが目的ですので、ＳｈａｄｅｒＦｏｒｇｅの全機能を紹介するものではありません。

•  本コースでは、ShaderForgeを使ってカスタムライティングについて学びます。

•  実際にシェーダーを組んでいく上で、よく使われるノードの機能や、しばしば使われるパターンを見ていきましょう。最後にそれらの知識を元に、トゥーンシェーダーのサンプルをいくつか組んでみましょう。

•  ShaderForgeの基本的な操作については、『ShaderForge 101』のスライドを参照してください。

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

シェーダーの準備

新規作成するとサンプルノードが設定されているので、不要なものを削除する。

Custom Lightingを選択する

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

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

Light Colorノード レンダリング対象となるカレントライトのカラーを取得する。

Light Attenuationノード ライトの減衰を取得する。このノードはライトのフォールオフとシャドウを同時に取得する。

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

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

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

Normal Directionノード ワールド空間でのメッシュの法線方向を出力する。チェックをつけるとノーマルマップを考慮する。

Light Directionノード レンダリング対象となるカレントライトの方向を出力する。

Dot Productノード AとBの２つのベクトルの内積をとる。

内積（Dot Product）とは？ A →

B → θ

A →

｜ ｜ B →

｜ ｜ cosθ A →

B →

・ =

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

｜ ｜ cosθ

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

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

内積（Dot Product）とは？

上図のように、ライトベクトルと法線ベクトルの内積を取ることで、光の当たり具合を０～１で表現することができる！

内積がマイナスは、 「光が当たっていない」

ことを示している。

内積（Dot Product）とは？

Dot Productノード内の設定で、出力される値域が変わるので注意！

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

「法線方向との内積」でよく使われるパターン

Light Directionノードと内積をとって、ライティングの状態を得る。

View Directionノードと内積をとって、One Minusで反転し、リムライトの状態を得る。

Half Directionノードと内積をとって、Powerノードで絞り込み、スペキュラ（グロッシイ)反射の状態を得る。

Half Lambertを作ってみよう l  Half Lambertとは、通常-1～１の範囲で示されるライティングの状態を、0～１の範囲にリマップし直

すことです。結果、陰影の入り方が柔らかめになります。

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ノードでマスクを反転します。テクスチャ座標系では、左が０で、右が１ですが、ライティングモデルの値そのままだと、明るい方が１で、暗いほうが０となってますので、マスク反転することでテクスチャ座標系と合わせます

Component　MaskノードでRRの数値を取り出し、UV座標とします。 マスクからは、スカラーで各頂点の明るさのレベルが来ていますので、それをベクトルの各要素に見立て、RRとして取り出すことで、UV座標とします。 取り出したUV座標を元に、各頂点のカラーをシェーディングマップより割り出します。

ランプシェーダーを作ってみよう！ l  ランプシェーダーも、Half Lambertモデルから作ることができます。

l  その際、StepノードとLerpノードの２つのノードを使用します。Stepノードで２値のマスクを作成し、そのマスクに従って、明色と陰色を塗り分けます。

Step (A<=B)ノード AがBと同じかそれ以下の場合、１を出力。それ以外は０を出力する。２値化の閾値を設定するノード

Lerpノード マスク値として与えられるTに応じて、A、Bを混ぜるノード

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

アンビエントカラーに反応するようにしよう l  シェーダーをアンビエントカラーに反応するようにしておくと、シーン全体にカラーを馴染ませるのが

やりやすくなります。

l  アンビエントカラーの設定は、LightingウィンドウのSceneタブでおこないます。

Ambient Lightノード シェーダーがレンダリングされるシーンのアンビエントライトを出力する

アンビエントカラーの設定

アンビエントカラーに反応するようにしよう

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

アンビエントカラーに反応するようにしよう

アンビエントライトの影響 をONにした場合

ＦａｌｌＯｆｆをランプシェーダーのマスクにしてみよう l  FallOffをランプシェーダーのマスクとして使うことで、さらに複雑な明色と陰色のブレンドが可能に

なります。

l  ＦａｌｌＯｆｆ用のテクスチャはＰｈｏｔｏｓｈｏｐなどで簡単に作ることが出来ますので、いろいろと試してみるといいでしょう。

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の２つのベクトルの内積をとる。 「内積」は、２つのベクトルが構成する 角度の開き具合を表している。

上図のように、ライトベクトルと法線ベクトルの内積を取ることで、 光の当たり具合を、

０（光が全く当たっていない）～１（光が真正面から当たっている） の範囲で表現することができる！

マスク値を元に通常色と陰色を割り当てるノードパターン

Lerpノード マスク値として与えられるTに応じて、A、Bを混ぜるノード

「光の当たり具合」がマスク値Tとして接続される

※「光の当たり具合」をどのように　　マスク値として評価するかによって　　 　　トゥーンカラーシェーダーごとの特徴が出る。

通常色

陰色

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

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