【Unity】トゥーン表現で眉毛透過

7.5K Views

December 09, 23

スライド概要

2023年12月に目黒インディゲームもくもく会でLTした資料です。

profile-image

フリーランスのTAです。 主にもくもく会でのLT資料などをアップロードしたいと思います。

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

Unityトゥーン表現で眉毛透過 おかひろ

2.

自己紹介  おかひろ  Twitter:@okahiro_p  個人で東方二次創作ゲーム作っています  フリーランスのTA  個人のゲームでもShaderやツール作成しまくって進捗悪い

3.

眉毛の透過?  キャラクターの眉毛(まつ毛や眼も含むこともある)が前髪に隠れたとき、前 髪の上から眉毛が見えるようにする 透過なし 透過あり

4.

どうやって実現する?  モデル側で、眉毛のMaterialを分ける(Unity側で眉毛用のShaderを分けるため)

5.

どうやって実現する?  Unity側のShaderは3種類作成する  本体用Shader(眉毛と髪以外)  眉毛用Shader  髪用Shader ※LilToonやUTS2では設定値を変えることで可能なはず。 おかひろは自作Shaderなので3つ作成した

6.

どうやって実現する?  眉毛用Shader  髪のShaderより早く描画したい   Queue=Geometry-1 眉毛の描画ピクセルにはStencil Ref=1を描く Tags { "LightMode" = "UniversalForward" "Queue" = "Geometry-1” } Cull Back Stencil { Ref 1 Comp Always Pass Replace Fail Replace }

7.

どうやって実現する?  髪用Shader  3Pass用意する(アウトラインがなければ2Pass)  Pass1:眉毛と重ならない部分(不透明)  Pass2:アウトライン  Pass3:眉毛と重なる部分(半透明) Tags { "LightMode" = "UniversalForward" } Cull Back Stencil { Ref 1 Comp NotEqual } Pass1 Tags { "LightMode" = "AdditionalUniversalForward" "RenderType" = "Transparent" "Queue" = "Transparent" } Blend SrcAlpha OneMinusSrcAlpha Cull Back Stencil { Ref 1 Comp Equal } Pass3

8.

どうやって実現する?  一つのShaderに3Pass以上設定する場合、URPではRendererFeatureにLightModeの 追加が必要(これをやっておかないと無視される)  今回は”AdditionalUniversalForward”という名前で追加。  1つめのPassが”UniversalFoward”、2つ目のPassがアウトライン用で”SRPDefaultUnlit” ※髪の毛のSkinnedMeshRendererに2つ目のMaterialを作成し、Pass3の Shaderをこちらで描画することもできる。この場合、RendererFeatureへの追加は不要

9.

結果  眉毛の透過はできた 後方から見てもおかしな表示にはなっていない

10.

結果  オブジェクト数は4なのに、1キャラ描画で10Pass ・Body ・Bodyアウトライン ・Cloth ・Clothアウトライン ・Face ・Faceアウトライン ・眉毛 ・髪(不透明) ・髪アウトライン ・髪(半透明)

11.

課題  眉毛は形状がシンプルで片面描画だから問題が起きにくいが、複雑な形状だと 後方から見たときに表示がおかしくなることがある 眉毛片面描画 眉毛両面描画 眉毛の形状で髪が半透明描画になっており、 肌が透けて見ている →眉毛だけなら片面描画で回避できそうだが、まつ毛なども透過表示しようとすると問題がでそう

12.

解決案  透過表示したいもの(眉毛、まつ毛など)は顔の前面を向いているのであれば、顔 の前面方向ベクトルとカメラベクトルの内積を計算することで、カメラが指定角度 より後方に行ったときに髪のアルファを調整することで回避できそう カメラ 頭 カメラ このぐらいの角度から 透過しないようにする 前方 (顔が向く方向) カメラ カメラ このぐらいの角度まで は透過して見えるよう にする

13.

解決案 対応前 斜め 横から見る 対応後

14.

まつ毛と眼も対象に

15.

まとめ  眉毛はMaterialを分ける必要がある  その分Passも増える  横や後方からの確認も必要  後方からの見た目がおかしくなる件については、髪を前髪(眉毛を透過表示) と横髪後髪(透過表示しない)でMaterialを分けるという手もある  Materialが増えるのでSetPassCallが増える  Materialが増えるとSubstancePainterでTextureが増えてしまう

16.

ご清聴ありがとうございました