101
72

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 5 years have passed since last update.

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

Last updated at Posted at 2019-11-05

概要

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ちゃん かわいい

101
72
1

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
101
72

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?