86
58

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【Unity Shader】原神の顔の影の処理の考察

Last updated at Posted at 2021-05-02

#はじめに
原神の顔の目の下の影の出方が気になったのでやり方を考えてみました

URPでトゥーンシェーダー作成中...

#環境
Unity2020.2
URP
AmplyfyShaderEditor
↑ ShaderGraphはノードが少なく、自作するのが面倒なので...

影の出方は3Dモデルの法線ベクトルとライトのベクトルので決まります

法線とは?
分かりやすく言うと面と垂直な線です。
代替テキスト
※なお直接法線をいじることも可能なのであくまでもイメージです
ライトのベクトルはライトが向いている方向ですね

ハーフランバートを作成する

image.png
ハーフランバートは
法線ベクトルとライトのベクトルの内積(ランバート)
を0.5をかけて0.5を足したもの

ライトの向きと逆側が黒くなっていますね
これは影の出やすさを意味するものとなります

簡単なトゥーンシェーダを作成

先ほどのハーフランバート(0~1)に適当な値でStep(2値化)します
その値をもとに基本色と影色を塗り分けするだけで完成です
image.png

基本的にはこれだけで、色の部分をテクスチャに置き換えるだけでシェーダーは完成です。

法線編集で影を操作

3Dモデルの法線情報を直接いじることにより、モデルの凹凸に関係なく
影の出やすさを調整することができます

先ほどのシェーダーで原神のモナちゃんをそのまま表示させてみます
モナちゃん原神公式配布リンク

そのままだと顔の凹凸がそのまま影に影響し汚い感じになります...
ゲームで使用しているデータとは異なるようです...

適当に目と口の部分に凹凸がないモデルを作成し、法線を転写させます

※適当です ひとまず変な影は出なくなりましたね

#本題

PCゲーム版

今回用意したデータ

目の下が影じゃないという点で違いがあります

法線編集で有名なこちらでは
GUILTY GEAR Xrd開発スタッフが送るアニメ調キャラモデリングTIPS

ポリゴンごとに法線を変更しているようですが、今回の3Dモデルにはそこにポリゴンはありません

なので今回はテクスチャデータをもとに同様なことを行います。
##テクスチャベースで法線編集
目の下を黒く塗るようなテクスチャを用意します

※わかりやすいようにUVを表示しています

この黒くなった部分を指定方向に法線を曲げるような処理を追加します
ここで今回曲げる方向はGUILTY GEARの記事を参考にするとローカルX軸の反転を行いたいので

マスクの部分のみ法線方向に
Vector3(-1,1,1)を乗算します

※厳密にはここでWorldNormalはワールド空間なので一度ローカル空間に戻してから乗算する必要があります

マスク部分のX成分が左右逆になっていることがわかります

こちらの法線データをもとに先ほど作成したトゥーンシェーダーを表示させます。

ここで問題が発生します

X軸の反転だと反対側に影ができてしまいます
GUILTY GEARではこのような表現でしたが原神では影はできません

なので先ほどの法線をいじる前のハーフランバートと比較し
値が大きい方のみ採用する形をとります

こちらの影の部分のみ適用のイメージです

ゲーム本編と同様に表示させることができました

今回X軸のみ反転させましたが
影の出やすさはZ軸も関係しますので
いい感じになる値を探します

##完成

それっぽくなった気がします!
もう少し調整が必要そうですが30分クオリティー...

#まとめ
目の下の影は好みがありそうですね
上からライトが照らされるような時のみ表示するとかいろいろできそうです。

#最後に
改めてモナちゃんはが可愛いことが分かりました...

86
58
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
86
58

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?