---
title: 【Unity】トゥーン表現で眉毛透過
tags:  #unity #shader  
author: [おかひろ](https://www.docswell.com/user/okahiro_p)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/YE65XK4QJV.jpg?width=480
description: 2023年12月に目黒インディゲームもくもく会でLTした資料です。
published: December 09, 23
canonical: https://www.docswell.com/s/okahiro_p/K38DE2-2023-12-09-171717
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/YE65XK4QJV.jpg)

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


# Page. 2

![Page Image](https://bcdn.docswell.com/page/GE5YXPQ2E4.jpg)

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


# Page. 3

![Page Image](https://bcdn.docswell.com/page/972GX6P17R.jpg)

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


# Page. 4

![Page Image](https://bcdn.docswell.com/page/DJYV8954JM.jpg)

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


# Page. 5

![Page Image](https://bcdn.docswell.com/page/V7NMQLN6E8.jpg)

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


# Page. 6

![Page Image](https://bcdn.docswell.com/page/YJ9ND4RRJ3.jpg)

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


# Page. 7

![Page Image](https://bcdn.docswell.com/page/GJ8K3QWGED.jpg)

どうやって実現する？

髪用Shader

３Pass用意する（アウトラインがなければ２Pass）

Pass１：眉毛と重ならない部分（不透明）

Pass２：アウトライン

Pass３：眉毛と重なる部分（半透明）
Tags
{
&quot;LightMode&quot; = &quot;UniversalForward&quot;
}
Cull Back
Stencil
{
Ref 1
Comp NotEqual
}
Pass１
Tags
{
&quot;LightMode&quot; = &quot;AdditionalUniversalForward&quot;
&quot;RenderType&quot; = &quot;Transparent&quot;
&quot;Queue&quot; = &quot;Transparent&quot;
}
Blend SrcAlpha OneMinusSrcAlpha
Cull Back
Stencil
{
Ref 1
Comp Equal
}
Pass３


# Page. 8

![Page Image](https://bcdn.docswell.com/page/LJLZVXNX7R.jpg)

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


# Page. 9

![Page Image](https://bcdn.docswell.com/page/47MVGLX37W.jpg)

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


# Page. 10

![Page Image](https://bcdn.docswell.com/page/P7R2ZKNRJ9.jpg)

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


# Page. 11

![Page Image](https://bcdn.docswell.com/page/PJXD9LNYEX.jpg)

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


# Page. 12

![Page Image](https://bcdn.docswell.com/page/3JKXPLN4ED.jpg)

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


# Page. 13

![Page Image](https://bcdn.docswell.com/page/LE35X3VDJ5.jpg)

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


# Page. 14

![Page Image](https://bcdn.docswell.com/page/8EDD2482EG.jpg)

まつ毛と眼も対象に


# Page. 15

![Page Image](https://bcdn.docswell.com/page/V7PX1M8LE8.jpg)

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


# Page. 16

![Page Image](https://bcdn.docswell.com/page/2JVLY9N67Q.jpg)

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


