15-05-31《リアルタイム3DCGにおける輪郭線表現》

元記事：https://archive.md/UE62w

作成者：不沈空母様

ニコニコユーザーページ：https://www.nicovideo.jp/user/1942311

作成日：2015-05-31 18:00

先日、3DCGモデルに二次絵の様な輪郭線を付与する方法についてツイートしたところ、（自分にしては）多くの方からふぁぼやRTをいただきました。

リアルタイムCGにおける二次絵/セルアニメ風表現では定番中の定番といえる手法なのですが、なまじ定番すぎるためか雑誌記事や技法書でもほとんど取り上げられず、意外とご存知ない方が多いようです（ちなみに自分がこの方法を知ったのは確か昔のCGWORLD誌のゲームメイキング記事だったと記憶しています）。

・輪郭線ポリゴンの作り方と利点/欠点

具体的な作成手順はこんな感じです。

1.対象となるポリゴン形状をコピーする

2.輪郭色のシェーダーを割り当てる

3.面を反転する

4.輪郭線の太さだけオフセットする（オフセット量により線の太さが決まる）

当然ながら、ポリゴンは片面表示です（Shadeみたく両面表示がデフォになってるソフトとあるので念のため）。

この方法の利点は、何と言っても特殊な処理やツールを要せずに、DirectXだろうがOpenGLだろうが通常の3D機能でそのまま表示できるという事です（実際に上のツイートやこの記事の画像もメタセコイアの作業画面そのままです）。ニコニコ立体のランタイム投稿で輪郭線を出そうと思ったら実際この方法しかありません。

通常の3D表示で輪郭線が表示される

欠点としてはポリゴン数が単純に倍になってしまうため、GPUの描画負荷も倍になってしまう点がありますが、ポストエフェクトで処理する事を考えれば妥当な線でしょう。

また元のポリゴン同士が接近していると、めり込みが発生して線が欠けてしまう事があるのが難点です。特にボーン/モーフ変形を行う際は厄介です。

キューブの輪郭線が肌や他のキューブのポリゴンと干渉して一部欠けてしまっている

他にもポリゴン故の問題点はいくつかありますが、長くなるのでまたの機会に。

・MMDであえて手作業で輪郭線ポリゴンを用意した方が良い場合

ここまで読んで「MMDとかなら自動で出来るんだから原理なんかどうでもいいだろバカだろ死ねよ」と言う様な方はさっさと地獄に堕ちていただくとして、MMDでも自動に頼らずに手作業で輪郭線ポリゴンを用意してやった方が良い場合があります。

たとえばメカ物で、エッジをシャープに出すために頂点を分離してスムージングを回避する手法がありますが、そこにMMDで自動で輪郭線を加えると分離した頂点の部分で輪郭線が割れてしまいます。

【左】八角注をMMDで表示するとスムージングが強すぎて円柱に見えてしまう

【右】頂点を分離すればエッジがシャープに表示されるが輪郭線が割れてしまう

これは頂点を分離したことでオフセットしたポリゴンも分離してしまうためです。

これを回避するには、モデリングソフトで頂点を分離しない状態でオフセットして頂点の繋がった輪郭線ポリゴンを作ってやり、これを適用してやれば良いでしょう。

もちろん本体と同じウェイトを割り当てておく必要がありますし、輪郭線消去エフェクトも効かないので材質モーフで非表示にできるようにしておくと親切でしょう。

【左】エッジを分離したためにオフセットされた面が離れて輪郭線が割れてしまう

【右】ポイント結合した状態でオフセットして繋がった輪郭線ポリゴンを作っておいてやる

最近はCGソフト・ハードの進歩により、ほとんどの作業が自動化・単純化されて手軽にCG作品が作れるようになって来ましたが、やはり手の込んだ事をやろうとするとどうしても基礎的な知識・原理が必要になって来ます。このブロマガでは、そうした話題も採り上げていきたいと思っています。