Unityで始めるセルシェーダー入門編
概要
・VRchat等でオリジナルshaderが使いたい
・セルルックshaderの仕組みに興味がある
・HLSLは書けないけどシェーダーを作ってみたい
そんな方へ向けて「ノードベースでのシェーダー作成方法」を紹介します。
今回は「Toonシェード」「描き影」「アウトライン」の実装の仕方を中心に紹介していきたいと思います。
セルシェーダー？
「Toonシェーダー」「セルルック」「アニメ調」様々な言い方がありますが、今回は「Toonがオムレツ」「セルシェーダーがオムライス」のような認識で進めていきたいと思います。
準備
unityのインストール
unityのバージョンはなんでも大丈夫です。
VRchatで使用したい場合はunityのバージョンを合わせてください
現在の対応バージョン→ https://docs.vrchat.com/docs/current-unity-version
ShaderForgeのインストール
今回は無料で使用できる「シェーダーフォージ」を使用します。
下記のページからShaderForgeをインストールします
https://github.com/FreyaHolmer/ShaderForge
ダウンロードしたzipを解凍して「ShaderForge」をAssets内にドラッグします
Toolsタブに「ShaderForge」が追加されていれば完了です。
セルシェーダーを作る
ShaderForgeを開く
Toolsタブの「ShaderForge」を押すと
下の画面が出てきます。
Newshaderを押します
Unlitを選択し、保存階層を選びます
これが基本の画面です。
ピンがたくさんありますが、今回は基本的に「emission」しか使いません
今回のやり方は一戸建てのおうちのトイレだけ借りて、その中に仮設のキッチンとリビングと寝室を作るようなものです。
右クリックを押すとノード一覧が表示されます。
ノードはショートカットからも出せます。
例:add→「A」multiply→「M」僕は最初キー総当たりで出していました
shaderforgeのノード一覧は下記のサイトにあります。
https://acegikmo.com/shaderforge/nodes/
ノードの接続はaltキーをおしながら右クリックドラッグで切ることが出来ます
Toonシェーディングを作る
「Light Direction」「Normal dir」を「Dot product」に繋げると「Lambert」というものが出来ます
Lambertは球の半分がグラデーションになっている状態で月と同じように「物理的に正しい基本のシェーディング」です。
Lambertに0.5を掛け、0.5足すことで「halfLambert」というものを作ります
球全体がグラデーションになっている状態です。
※定数は1番キーを押すかVキーを押しながらvalueを選択すると出ます
halfLambertを「step」につなげ、0.5を入れることで2諧調になります。
これが基本的な「Toonシェーディング」のライトです。
※定数の代わりに「slider」をつなぐことでマテリアル側で範囲を調整することが出来ます。
「Collar」で適当に二色作り、「Lerp」のABにつなぎ、先程作った「Toonシェーディング」をTにつなぐと画像のように「明所」と「影色」が出来ます
このあたりで確認したいのでMaterialを作成してみます。
shaderを右クリック→create→Materialで作成できます。
MaterialをモデルにドラッグするとToonシェーディングが出来ていると思います
先程のカラーをテクスチャに置き換え、作成したMaterialにテクスチャを割り当てるとモデルに反映されます
※よくこの割り当てを忘れて「反映されないなんでぇ？」となることがあるので注意
これでToonマテリアルは完成です。
※テクスチャはTキーを押して「Texture2D」から出すことが出来ます
セルシェーダーを作る
先程のToonシェーディングだけではセルシェーダーとは言えません。
セルシェーダーでは「常に光が当たらない描き影」というものを作ります
※画像では一枚のテクスチャのRGBチャンネルにマスクを格納しているので「描き影」のマスクのみ抽出している状態です。
Lerpを追加し、「明所」と「影色」を「描き影」でマスクし、先程のlerpに繋げます
※shaderを更新したらMaterial側にもマスクテクスチャを割り当ててください
描き影が追加されることで情報量が増えました
アウトラインの追加
セルシェーダーではアウトラインが欠かせません
トップノードのOutline Widthに太さ、Outline Colorに色をつなげることで簡単にアウトラインを出すことが出来ます。
まとめ
他にも「描き線画」「matcap」「スペキュラ」「リムライト」など、アニメ表現を作るうえで欠かせない処理は多くありますが、こういったノードで作成することで簡単にshaderを作ることが出来ます。
他にも有料ですが多機能な「amplifyshadereditor」やUE4などでも同じようにノードベースで作ることが出来るのでぜひオリジナルshader作成のきっかけにしていただけますと幸いです。