Help us understand the problem. What is going on with this article?

【Unity】3Dキャラクターの白目に出る”あのアウトライン”を消す

概要

2019-11-05_16h31_21.png
※画像は分かりやすく緑色のアウトラインを出しています。
(モデル:オリジナル3Dモデル『Noy』ver1.2)

3Dキャラクターのトゥーンシェーダーをセットアップする際に、顔にアウトラインを設定してしまうと、口の周り・白目の部分・まつ毛などの小さいオブジェクトなんかは不自然に見えるケースは多いです。
上記のようなケースのアウトラインは消したいけど、顔の輪郭や横顔から見た際の鼻の部分の輪郭は欲しいみたいなニーズはあると思います。
力技の解決策としては、こういったアウトライが出ないメッシュの構造にするとか、アウトライン非表示にしたいメッシュを別マテリアルとして切り出すとか、小さいオブジェクトはテクスチャに書き込むなどの方法が考えられると思いますがスマートではありません。

こういったケースでは、アウトラインのマスクを設定する事によって解決できます。
特殊なフレームワークや軽いスペックが求められる環境などでなければ、トゥーンシェーダーの実装においてアウトラインのマスク機能はほぼ標準実装されているものと思っても差し支えないと思います。
少なくとも、VRMのトゥーンシェーダーであるMToonや、Unityで使える代表的なトゥーンシェーダーであるユニティちゃんトゥーンシェーダーではこのアウトラインのマスクを使用する事ができます。

アウトラインのマスク作成

NoyMask.jpg
今回は Noy ちゃんのアウトラインのマスクを作成してゆきます。
ダウンロードデータの中にレイヤー構成を含むPSDファイルがあるので、それをペイントソフトで読み込んで上記のような感じでテクスチャを作成します。
Noyちゃんの場合は Head_Tex.psd を開いて、上記のような感じで右側のマスクテクスチャを作成します。
瞳や瞳のハイライトなどもアウトラインが出ると不格好になる事が多いので、マスクで指定します。

顔の部分にかかっているマスクの輪郭がぼかされてる理由ですが、マスクの濃さに応じてアウトラインの太さが変わるので、暈かすことでなだらかにアウトラインの太さを変える事ができます。
(マスクのRedチャンネルの値によって線の太さを変えてる。R255ならwidth×0、R127ならwidth×0.5 という具合)
なので、髪の毛のアウトラインをグラデーションで設定すれば先端に近づくほどアウトラインを細くするなども表現も可能になります。

アウトラインのマスクを適用する

NoyMask1.jpg
マスクを設定すると顔の輪郭を表示しつつ、目の周りや口元、まつ毛などの細かいパーツの部分の表示を隠す事ができるようになりました。

Unityでの作業

MToonSetting.jpg

マスクテクスチャをUnityに取り込んで、マテリアルの設定を行います。
MToonで設定する場合は、Outlineの項目にあるWidthにTextureが設定可能になってるので、そこにマスクを割り当てます。
他のトゥーンシェーダーも大体似たような設定になるかと思います。

マスクテクスチャのスペックについて

通常のテクスチャと同様にTexture2Dによってマスクのデータが読み込まれるので、解像度は低ければ低いほどいいです。
ただし、精度の問題があるのでマスクの解像度低すぎるとうまく指定できない可能性はあります。
(512もあれば十分で、1024は大きいと思います)

なら、マテリアル分割したほうが最適化できるのでは?となるかもしれませんが、マスクテクスチャ1枚読み込むのと追加マテリアルではテクスチャ1枚の方が圧倒的に軽いです。
(一般的にボトルネックとなる事の多いCPUとGPUの通信コストを下げるのを優先する場合の話です。マスクテクスチャをロードする事でビデオメモリは圧迫します。)

サンプルデータ

Head_Tex_Mask_512.png
実際に作成したNoyちゃんのマスクのサンプルです。ダウンロードして自由にお使いください。

UVの情報が分からない場合の対処

2019-11-05_17h42_46.png
マスクを作成したい箇所がテクスチャから判断しづらい場合であったり、テクスチャ関係のファイルにUVマップが含まれてない場合は、fbxをBlenderで読み込んで、UVが欲しい箇所を選択した状態でUVモードに切り替える事でそこからUVマップを画像としてエクスポートする事ができます。
面倒ではありますが、アウトラインを消したい箇所のメッシュを選択→UVをエクスポートとするのがよいと思います。

まとめ

Noyちゃん かわいい

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした