4
5

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] アウトライン Outline - 概念篇

Posted at

Outlineはなんだ?

いわゆる以下の効果:
image
或いはエッジ、境界線など、物の外側の縁のこと。

これはとてもよく使われるエフェクトだけど、なぜか未だにネット上完璧なOpenSourceが見つかれない、シェルダーの勉強に兼ねていろいろ研究してみた。

作り方と問題

簡単に言えば、物をコピーして、ちょっと拡大して、全部同じ色にして、元の物の後ろで描画すればいい。

モデル拡大法

モデルの点を法線の方向に沿って移動し、マテリアルは単色にして、背面描画すること。
これは一番よく見かける手法で、この方法で作った結果:
image
スフィアの場合問題ないけど、キューブの場合は破綻が生じる。
この方法なら、Outlineの幅が大きすぎることができない。

後処理による方法

元々Outlineは2Dの効果で、PHOTOSHOPなどのソフトウェアは常備の機能の一つだ。
概念は同じですが、こっちは2D的な拡大方法を使う。まずモデルのレンダリングして、そのレンダリングの結果を使って拡大する。
この方法の問題は、レンダリング後深度(カメラとの距離)がなくなる。だから、よく見かけた結果(人によってこっちが正しい場合もある):
image
キューブがスフィアの後ろなのに、Outlineだけ前になっている。

ちなみに、Unity5.5からエディター画面でOutlineが選んでいるものについている。上の状況なら、結果はこう:
image

拡大について

実際、拡大は単純に物(3D的か2D的か問わず)を大きくすることではない。PHOTOSHOPの機能でその差別を見よう:
image
左は単純に拡大、右はPHOTOSHOPの機能の結果。
左の結果が欲しい場合もあるが、普通Outlineは右の方だ。

研究成果

自分にとって完璧な結果はこう:
image
軽く実験したか、どの状況でも適用するかどうかはまだ不明。詳しくは詳細篇によろしく。

4
5
0

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
4
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?