アウトラインの実装方法比べ：背面法 vs ポストプロセス法

以下は、Unreal Engineにおけるアウトラインの作成方法についての説明と分析です。

## 背面法とポストプロセス法のアウトラインの簡単な作成方法

- 背面法：
    1.  この画像のように、オーバーレイマテリアルを作成。
        ![overlayMaterial.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3941984/588c8613-8c49-3cf2-0a61-39c4f365718b.png)
    1.  アクターにオーバーレイマテリアルとして設定。
        ![actorOverlay.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3941984/bbfd08b6-3791-47e3-a18e-6e626aaa1c43.png)
    1.  手前のキャラクターとアクターに適用した結果。
        ![outlineOverlay.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3941984/68f0f60d-c00b-8a21-07e7-1c5dd240a03b.png)
- ポストプロセス法：
    1.  この画像のように、ポストプロセスマテリアルを作成。
        ![postProcessMaterial.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3941984/5082074b-8323-efb4-a2f6-b0fb407dbecd.png)
    1.  カメラのポストプロセスマテリアルに設定して適用。
        ![cameraPostProcess.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3941984/13ccd28e-0521-757d-7a19-781ba0a0d3a3.png)
    1.  適用した結果。
        ![outlinePostProcess.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3941984/eccf4b96-65a7-4c65-3bee-4da6909665c9.png)


## 背面法とポストプロセス法の特徴比較

- 実装の容易さ
    - 背面法：比較的簡単。
    - ポストプロセス法：計算が複雑で、カスタムステンシルを利用する場合はさらに複雑に。
- 設定の容易さ
    - 背面法: 数によって変わる。一々アクターにオーバーレイマテリアルを設定する必要あるから。
    - ポストプロセス法：易い。カメラに設定するだけ。ただし、カスタムステンシルを利用する場合、アクターごとの設定が必要。
- アウトラインの描画範囲
    - 背面法： アクターの外周のみ。
    - ポストプロセス法：アクターの内側に描画しやすい。アクターの外周も描画可能ですが、外周の半透明とのブレンドが難点。
- パフォーマンス
    - 背面法：適用アクター数に依存し、全画面適用には向かない。
    - ポストプロセス法：全画面適用に適するが、カスタムステンシルの処理を多用でパフォーマンス低下。
- アクターごとの色設定
    - 背面法：マテリアルインスタンスで対応可能。
    - ポストプロセス法：難しい。カスタムステンシルで実現可能だが、負荷が高くなる。
- 太いアウトライン
    - 背面法：簡単に実現可能。
    - ポストプロセス法：難しい。アウトラインが太いほどの見た目は荒くなるから、サンプル数増加が必要で、計算コストが高い。サンプル数を増やすについではSobelやLaplacianフィルタを調査推奨。
- パラメータカスタマイズ
    - 背面法：自由度が高く、さらにメッシュの頂点色を用いた細かな制御が可能。
    - ポストプロセス法：全体で同一のパラメータ。但しカスタムステンシルで一部を変更可能。太さの精密調整が難しい。
- 画面解像度の依存性
    - 背面法：解像度によって太さが変化し、比率を維持。
    - ポストプロセス法：解像度に依存しないので、解像度ごとに適切な設定が難しい。
- ローポリモデル・ハードエッジ対応
    - 背面法：ローポリやハードエッジでは途切れや細くなる場合がある。
        ![lowpolyProblem.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3941984/5189a5da-8d6c-5cbd-198a-cadfd5056701.png)
        ローポリモデルの場合、メッシュの法線再計算で対応できるが、モデルの見た目をローポリに戻すにはモデル側のマテリアルの処理が必要。
        ![recomputeNormals.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3941984/36e4d8e2-1bbf-591e-3d7f-9cb428d9f7bc.png)
        ハイポリモデルの場合、メッシュの法線転写で対応可能。
    - ポストプロセス法：問題なく対応可能。
- 手前の半透明オブジェクトの表現
    - 背面法：普通に隠れる。
    - ポストプロセス法：半透明のオブジェクトの手前に表示。隠すにはSeparate Translucencyやカスタムステンシルでマスク処理が必要。
        ![postProcessTranslucentProblem.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3941984/18c5d329-639e-71f5-753e-cba4c179e7f7.png)
- ディザ抜き・ディゾルブ演出への対応
    - 背面法：容易に対応可能。フェードアウト中のアウトラインが自然に消える。
    - ポストプロセス法：難しい。全てのピースにアウトラインが表示され、見た目が煩雑になることがある。修正にはカスタムステンシルで不要なアウトラインを削除する必要がある。
         ![postProcessDissolveProblem.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3941984/e38142e2-ee11-2b14-a0fb-f836ef590fec.png)
- マイナススケールのアクターの対応
         ![minusScale.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3941984/7466c537-62df-70c0-1ca0-25a7c17e649f.png)
    - 背面法：難しい。マイナスのスケールによって、逆に正面が表示される問題があり。逆転したマテリアルで対応が必要。
    - ポストプロセス法：問題なく対応可能。
- 両面マテリアル
    - 背面法：対応不可。メッシュの縁のノーマル修正が難しいため。
    - ポストプロセス法：対応可能。


## 結論

- それぞれの手法には向き不向きがあります。
    - キャラクターのみのアウトライン：背面法が最適。
    - 全画面アウトライン： ポストプロセス法が適する。
- 両方を運用する際に、おすすめ組み合わせ：
    - キャラクター： 背面法
    - 背景：ポストプロセス法