Let's Enjoy Unreal Engine

Unreal Engineを使って遊んでみましょう

UE4 誰でもわかるアウトライン入門

この記事はUnreal Engine 4(UE4) #2 Advent Calendar 2019の5日目の投稿記事です。

qiita.com

前回の記事でセルシェーダー入門を書きました。

unrealengine.hatenablog.com

こちらはセルシェーダーのみで、いわゆるアニメ絵で必須と言われているアウトライン表示は行っていません。今回はアウトライン作成に焦点を当てていきます。

今回もあくまでもシェーダー初心者に対しての軽いネタなので高度なネタを期待されている方は改めて読む必要はないかもしれませんので、あしからず。

アウトライン実装の種類

セルシェーダーと同じくアウトラインの実装にも種類があり、大きく分けて以下の2タイプです。

1. ポストプロセスマテリアルによるG-Bufferを使ってライン検出
2. サーフェスマテリアルを法線反転したメッシュの誇張表現

1のポストプロセスによるライン検出は前回と同じく、PPCelShaderで実装済みなので気になる方は見てみてください。こちらでは2種類のアウトライン検出を実装しています。アウトライン検出のアルゴリズムは複数ありますので、調べてみると面白いかもしれません。

github.com

次にサーフェスマテリアルによる法線反転したメッシュの誇張表現ですが、セルシェーダーと同様、ポストプロセスよりも細かい調整がしやすく、キャラクターごとに調整したり、シェーダー次第でラインの入り抜きの表現なども可能です。今回はそこまで実装しませんが、より詳しい実装が気になる方は、GUILTY GEAR Xrdで実装されたアウトライン処理の実装方法を調べてみてください。ただし欠点はメッシュのポリゴン数が単純に倍になるので、ポリゴン数次第でかなり負荷が上昇するということに注意してください。

www.4gamer.net

メッシュの複製

法線反転を行うためには、同じ見た目を持つメッシュが複数必要になります。なので、何かしらの方法で複製を行う必要があります。複製方法はDCCツール上で、エクスポート時に最初からモデルにメッシュを含めた状態でインポートしてもいいですし、UE4上で複製したモデルを利用することも可能です。理想的にはDCCツール上で出力した方が無駄となる部分が少ないので、そちらをお勧めします。今回はあえてUE4内だけで完結する方法を解説します。

今回も前回の続きで、バンダイナムコスタジオさんが配布している公式モデルのミライ小町を利用させてもらいます。

f:id:alwei:20191204233042p:plain

既に配置しているスケルタルメッシュの子供として同じスケルタルメッシュコンポーネントを追加します。

f:id:alwei:20191204233321p:plain

これで見た目は変わりませんが、スケルタルメッシュが複製されたので準備完了です。

アウトラインマテリアルを作成

アウトラインを表現するマテリアルを作成しましょう。まずは通常のマテリアルを作成し、名前を"M_Outline"という名前のマテリアルにします。そのアウトラインマテリアルを使ったマテリアルインスタンス、"MI_Outline"も作成しておきましょう。

f:id:alwei:20191204233842p:plain

"M_Outline"を開き、マテリアルの基本設定を行います。詳細を開き、以下のように設定しましょう。

f:id:alwei:20191204233951p:plain

Blend Mode : Masked
Shading Model : Unlit
Two Sided : ON

次にマテリアルのノード構成です。シンプルなノード構成なので、1枚のスクリーンショットに全て載せます。

f:id:alwei:20191204234227p:plain

上から説明します。"OutlineColor"は"Vector Parameter"ノードで名前の通りアウトラインカラーを変更します。"TwoSidedSign"は主に法線を反転するために利用するノードです。これをマイナス1でかけ算することで、裏面を得ることができます。Opacity Maskに入力することで、不要な面をクリッピングにより消去してくれます。

最後は"VertexNormalWS"でワールド空間の法線方向を取得し、それを"OutlineTickness"の値でかけ算することでメッシュを誇張させることができます。これを"World Position Offset"に渡すことで、メッシュの位置が変形して少しだけ膨らむメッシュが完成するというわけです。

これでマテリアルは完成しました!あとはこのマテリアルを複製したメッシュのマテリアルとして適用させましょう!ここで適用させるのはマテリアルインスタンスである"MI_Outline"です。

f:id:alwei:20191204235136p:plain

全てのマテリアルを適用し終わると、アウトラインがしっかりとでているはずです!

f:id:alwei:20191204235257p:plain

少しアウトラインが太いですね。マテリアルインスタンスを開き、"OutlineTickness"のパラメーターを小さくしてみましょう!

f:id:alwei:20191204235504p:plain

色もちょっと変えてみたりで微調整してみました。うん、悪くないですね。
というわけでまたグレイマンとのツーショットです!

f:id:alwei:20191204235648p:plain

ゲームキャラとして運用する場合

表現としてはうまくいっていますが、ゲームの中で使うためにはブループリントに組み込まなくてはいけません。ブループリント内でメッシュの複製などを行ってください。複製したメッシュはそのままだとアニメーションが同期して動きませんので、Master Pose Poseコンポーネント、Copy Pose From Mesh、MergeMeshなどを使って、うまくアニメーションが動くようにする必要があります。以下のドキュメントを参考にして、組み込みましょう。

docs.unrealengine.com

最初から法線反転メッシュがスケルタルメッシュ内に入っている場合にはこれは必要ありません。

というわけで前回の記事と合わせてセルシェーダーとアウトラインの基礎を解説してみました。当然ですが、最低限の実装しかまだ入っておりませんので、ここからカスタマイズすることでより色んな表現が可能になっていきます。ぜひ自分なりの表現を研究してみてください!

明日は finap さんによる、「なにか」だそうです。よろしくお願いします!