見出し画像

【初心者向け】lilToonのFakeShadowシェーダーで前髪の落ち影を表現したい


はじめに

前髪の落ち影を表現する方法としてはメッシュで作るかシェーダーで表現するかの大きく分けて二つになると思いますが、メッシュでの表現は前髪の構造によっては困難なケースがあるため、シェーダーで表現したい!というケースがあると思います。
本記事ではlilToonのシェーダーバリエーションであるFakeShadowを利用して前髪の落ち影を設定する方法を順を追って説明します。

設定

前髪のマテリアルを複製して任意の名前に変更します。ここでは"_FakeShadow"を末尾につけて複製しています。
複製リネームしたマテリアルを選択してInspectorからシェーダーバリエーションのlilToonFakeShadowを選択します。

前髪のメッシュを選択してInspectorからマテリアルのスロットを1つ増やします。追加したスロットに先ほど作成したFakeShadow用のマテリアルを割り当てます。

次にマテリアルのステンシル設定を行います。FakeShadowマテリアル、前髪用マテリアル、顔マテリアルの”拡張設定>ステンシル設定”の値を次のように設定します。

・FakeShadowマテリアル
Refの値を51に設定し、CompをEqualに。

・前髪用マテリアル
PassをReplaceに。

・顔用マテリアル
Refの値を51(FakeShadowマテリアルで設定したものに合わせる)に設定し、PassをReplaceに。

ちなみにステンシル設定についてはlilToonの説明書に記載されています。👇

次に、FakeShadowマテリアルのレンダリング設定の項目を調整して、乗算で合成されるようにForwardの項目を画像のように変更します。

乗算合成については以下の記事に詳細が記載されております。👇

FakeShadowマテリアルの向き、Offset、メインカラーをそれぞれ調整して落ち影が任意の位置に表示されるように設定します。

以上で設定完了です。以下ビフォーアフター。

補足

FakeShadowマテリアルのメインカラーにはテクスチャも割り当てることができるため、例えば以下の画像のように前髪にグラデーションを加えたテクスチャを用意してあげることでさらに影の表現を高めることができます。

FakeShadowマテリアルのメインカラー用テクスチャ
UVの前髪領域拡大図

以上

この記事が気に入ったらサポートをしてみませんか?