【Unity】シェーダー：lilToonでSDFを使った顔影

https://scrapbox.io/files/670770543775f6001cd795e1.gif

lilToon 1.8.0でSDFが追加されたみたい↓

https://scrapbox.io/files/67076f73adf0a4001cba62d2.png

グレースケールではなく、通常Rチャンネル・左右反転用GチャンネルのRGテクスチャ

面倒な法線編集を一切しなくても、いい具合の影を付けられるのは大変便利

なんならUVマップと適当なペイントソフトさえあれば作ることができるのは大きい（空間認識力は試される）

メリット

手軽

リアルすぎない影になる

のっぺり影からの離脱

デメリット

（場合によって）VRアバターには合わない

影の制御に苦心する

備忘録としてメモ

［作り方］

用意するもの

顔のUVマップ

sdf_tool（後述）

グラデーションを手描きするなら不要

Blender（w/Auto Reloadアドオン）

確認しながら作らなくてもよいのなら不要

ペイントソフト（CLIP STUDIOでよい）

左右反転、トーンカーブか乗算かRGBチャンネル編集ができ、アルファ無しで書き出せればなんでもよい

※下記動画を参照してもいいけど、しっかり見なくてもとくに問題はない。（動画はblender用なので）

※（グレースケールのグラデーションを手描きできるなら、動画はほとんどスキップ可能）

https://www.youtube.com/watch?v=D3nEolOME50&t=0s

(補足:ツール配布元動画のほうがより最適でした)

まずはひとまず、動画概要欄のdriveリンクからツールをDL

(ttps://drive.google.com/file/d/1lvzZLBC8uet1cokQPCJkV5x7S3OnBY4X ...みたいなリンク)

SDFテクスチャのサンプルが入っているので、参考にするためにも

ツールを使って楽する方法、全部手描きする方法など（A or B↓）

方法A.ツールを使って少し楽する方法

解凍して./exampleの中を見、それを見本に顔の影を描いていく

aをほぼ斜め後ろ光源、hをほぼ真正面光源として徐々に変化させてグレースケールでイラスト風に描く。（※hはツールに読み込まれないので不要）

複数枚にわたって同じ位置に白黒の境目が重なると影がいきなりパッキリ分かれる。ずらすといいかんじに徐々に変化する。適宜使い分けるとよい

AutoReloadアドオンを有効にしつつBlender上で3次元的に確認しながらペイントソフトで手描きする方法もある。（上記動画のような方法でもよい。やりやすい方法で）

https://scrapbox.io/files/6707a54ff15c99001dbb0f37.png

a~gまで描けたら./imagesの中に各々上書き保存

画像出力はアルファ無しPNG　アルファチャンネルが存在するとエラー

アルファ無しグレースケール8bitで出力できるならベスト

全て書き出し終わったらrun.batを実行する

"Finish"まで出力されたらグレースケールSDFテクスチャの完成。

方法B.全部手描きする

https://scrapbox.io/files/670a5742fbb7c2001d545b73.png

ツールを使わずにクリスタ等で全部手描きしても全く問題はない。（ツールだと段階に分けて編集できてわかりやすい、なじませも自動でやってくれるというだけなので）

まとめて手描きする場合は、複数枚の照りテクスチャを管理する手間も少なくリソース的にも有利

上記のツール内、sdf.png等参照して、顔の左側から光が当たったグレースケールのテクスチャを描く

RGB=0（黒）が影、RGB=255（白）が光の当たった部分としてグラデーション。デフォルメとして弧を描いたような（球体のような、モルワイデ図法の経線のような）境界の影を意識?

RGB=0なら絶対的に影になり255なら絶対的に光が当たる訳ではない。RGB=0でも光源位置次第で影が出ないため注意（逆もまた然り）

ほっぺの照り、鼻の照りと影があるとよりリッチに

※簡易的に法線編集したのっぺり顔のモデルがある場合は、左から光を当てたテクスチャをベイクして下絵にしてもいいかも

※SDFの機能自体には法線編集は不要

lilToon用に変換

出力されたsdf.pngを適当な画像編集ソフトで開く（左右反転、トーンカーブか乗算さえ使えればOK。CLIP STUDIOでよい）

出力されたpngのRGBを分離

Rチャンネルをベースに

Gチャンネルは左右反転して加算

Bチャンネルはいらない

(例)

https://scrapbox.io/files/67076c231b9cc7001d2803eb.png

↑clipかpsd　ご自由にお持ちください。

この白黒の段階でペイントソフト使って微調整してもいいかもしれない

ジャギーになっている部分はなるべく消しておきたい

Unityに読み込み

lilToon→影設定からマスクタイプをSDFに

◎SDFにさっき作った赤緑のテクスチャを指定

DirectionalLightをRotationYで回したりして影設定を微調整

(例)

https://scrapbox.io/files/67077cb93c16f1001ccdd114.png

弄るべきは"Blend Y Direction"、"強度"、"範囲"、"ぼかし"？　体の影とも調和するように

顔メッシュのSkinnedMeshRendererの設定でRoot BoneをアバターボーンのHeadにする

Fix lighting等でAutoAnchorObjectになっているはずなので

sRGBは切っていた...ような気がする

おわり

https://scrapbox.io/files/670770543775f6001cd795e1.gif

結論：結構よさげ　しかし一概にいい結果になったとは言い難いかも？

絶対に影&絶対に光の当たる場所が作れないので、首との接合面の影をなじませられない

↑SDFにマスクかけられるようになったら解決するかも？

光源の位置がよくないと半月状態の影が左右に反復横跳びする

↑パッキリした影を作りたい都合と単一光源からの光しか受けられない都合が合わさり、ワールドによっては目まぐるしく変わる場合がある

SDFマップの境界面をぼかすことで、パッキリした影が浮いてしまう問題が改善出来たりするかも？

ただ法線をのっぺりした面から転写した、のっぺりな顔よりは圧倒的にいい結果になった。

のっぺりした顔面法線にするよりはSDFを使用したほうが良い。

（VRCにおいては、SDFを使用するよりも法線をちゃんとイラストルックに適した形に編集するほうが適しているかもしれない。

・間近で見る故アウトラインの重要度が比較的低い（≒顔アウトライン用法線を気にしなくてよい。多くはマスクで消す）

・ゲームやアニメーションと違って頭部の動作量が多い

・ゲームやアニメーションと違い光源位置が理想にならない

・多くのワールド・小物・衣装がセミリアル〜リアル調

など、セルルック表現とかみ合わない場合があるため。）

Y軸の回転変化にしか対応できないので、VRでは臨場感が落ちる面もあり取捨選択。

セルルックアバターでない場合はSDFマップをぼやかしたりして、自身の塗りと合わせてあげる必要はあるかも。

面倒な法線編集をしなくても、ある程度流用の効く画像だけでこの表現ができるというのは非常に大きい。

Blenderで特殊な操作をする必要もなく、素人でも白黒テクスチャを描ければ作ることができるのはよい。

参考文献：

lil @lil_xyz さんのツイート

UE5 SDF Face Shadowマッピングでアニメ顔用の影を作ろう

Shader facial anime Genshin Impact in blender

Get *PERFECT* Anime Face Shadows (Easier Way) in Blender

GUILTY GEAR Xrd開発スタッフが送るアニメ調キャラモデリングTIPS

@WARPSTAR15 さんのツイート（法線編集後の顔でライトベイクし下絵にする方法）

1枚目赤字の部分はSDFには直接無関係

補足：

「セルルック」はセル画系の、いわゆるアニメ塗りの中でも色や影をパッキリさせたもの（VRCアバターでは比較的少数派と思う）

「イラストルック」はよりリッチな塗りの、写実的な要素も取り入れたもの（総合的にVRCアバターにおいて多数派と思う）

と呼び分けています。