はじめに
原神の顔の目の下の影の出方が気になったのでやり方を考えてみました
URPでトゥーンシェーダー作成中...
環境
Unity2020.2
URP
AmplyfyShaderEditor
↑ ShaderGraphはノードが少なく、自作するのが面倒なので...
影の出方は3Dモデルの法線ベクトルとライトのベクトルので決まります
法線とは？
分かりやすく言うと面と垂直な線です。
※なお直接法線をいじることも可能なのであくまでもイメージです
ライトのベクトルはライトが向いている方向ですね
ハーフランバートを作成する
ハーフランバートは
法線ベクトルとライトのベクトルの内積(ランバート)
を0.5をかけて0.5を足したもの
ライトの向きと逆側が黒くなっていますね
これは影の出やすさを意味するものとなります
簡単なトゥーンシェーダを作成
先ほどのハーフランバート(0～1)に適当な値でStep(2値化)します
その値をもとに基本色と影色を塗り分けするだけで完成です
基本的にはこれだけで、色の部分をテクスチャに置き換えるだけでシェーダーは完成です。
法線編集で影を操作
3Dモデルの法線情報を直接いじることにより、モデルの凹凸に関係なく
影の出やすさを調整することができます
先ほどのシェーダーで原神のモナちゃんをそのまま表示させてみます
モナちゃん原神公式配布リンク
そのままだと顔の凹凸がそのまま影に影響し汚い感じになります...
ゲームで使用しているデータとは異なるようです...
適当に目と口の部分に凹凸がないモデルを作成し、法線を転写させます
※適当です
ひとまず変な影は出なくなりましたね
本題
PCゲーム版
今回用意したデータ
目の下が影じゃないという点で違いがあります
法線編集で有名なこちらでは
GUILTY GEAR Xrd開発スタッフが送るアニメ調キャラモデリングTIPS
ポリゴンごとに法線を変更しているようですが、今回の3Dモデルにはそこにポリゴンはありません
なので今回はテクスチャデータをもとに同様なことを行います。
テクスチャベースで法線編集
目の下を黒く塗るようなテクスチャを用意します
※わかりやすいようにUVを表示しています
この黒くなった部分を指定方向に法線を曲げるような処理を追加します
ここで今回曲げる方向はGUILTY GEARの記事を参考にするとローカルX軸の反転を行いたいので
マスクの部分のみ法線方向に
Vector3(-1,1,1)を乗算します
※厳密にはここでWorldNormalはワールド空間なので一度ローカル空間に戻してから乗算する必要があります
マスク部分のX成分が左右逆になっていることがわかります
こちらの法線データをもとに先ほど作成したトゥーンシェーダーを表示させます。
ここで問題が発生します
X軸の反転だと反対側に影ができてしまいます
GUILTY GEARではこのような表現でしたが原神では影はできません
なので先ほどの法線をいじる前のハーフランバートと比較し
値が大きい方のみ採用する形をとります
こちらの影の部分のみ適用のイメージです
ゲーム本編と同様に表示させることができました
今回X軸のみ反転させましたが
影の出やすさはZ軸も関係しますので
いい感じになる値を探します
完成
それっぽくなった気がします！
もう少し調整が必要そうですが30分クオリティー...
まとめ
目の下の影は好みがありそうですね
上からライトが照らされるような時のみ表示するとかいろいろできそうです。
最後に
改めてモナちゃんはが可愛いことが分かりました...
