【UE4】Toon + PBRを生き残れ


## まえがき

UE4のフォトリアルな背景に、Toon調のキャラクタを表示して遊んでいます。
気づけば2年近くこれで遊んでいます。

今回はこの遊びを皆さんにも**手軽に**楽しんで頂けるよう、出発点を紹介します。
ただ**解説にToon要素は無い**です。紛らわしくてすみません…

全編茶番ですが 雰囲気で楽しんで頂ければ幸いです。
UE4.26を使っています。多少バージョンが異なっても動きます。

----

## UE4、フォトリアルとの戦い
UE4は あの手この手で、執拗にキャラクタをリアルに描画してきます。
上手く立ち回って、時には欺き、**リアルの魔の手から逃れましょう！**

|襲いかかるリアル|
|---|
|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36233/ff387021-96ca-0c24-9792-0169b084ae93.png)|

**協力者**

| [ビクトリア・ルービン](https://hub.vroid.com/characters/2792872861023597723/models/5013769147837660446)（この画像はVRoidHubのサムネイルです）|
|---|
|<img width="25%" alt="dum.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36233/c34b87d9-96f1-de56-a6fc-53c4cce93bd1.png">|

**UE4の強敵たち**

 - **マテリアル**
    - 最初の関門です。戦う武器を揃えましょう
 - **ライト**
    - 天敵です。濃い陰影を付けてきます
 - **ポストプロセス**
    - 重厚な雰囲気にしてきます。パラメータを制して、逆に利用してやりましょう
 - **カメラ**
    - 定番の必勝法があります


※以下、UE4でも使われている物理ベースレンダリングのことを**PBR**、
それで描画されたフォトリアルな背景のことを**PBR背景**と略します。

## 武器となるベースマテリアル
**極限まで単純化した3つのベースマテリアル**を紹介します。
これだけでPBRに立ち向かうことができます。
機能が物足りなく思うかもしれませんが、手段はマテリアルだけではありません…！

### Unlit ベースマテリアル
|Unlit ベースマテリアル(Customノードが2つあります)|プレビュー|
|---|---|
|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36233/1e8ec5b3-ee89-3dc4-2407-b1ee3101287a.png)|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36233/086c94d3-85fb-5b89-dc2b-9b627f76e858.png)|

**特性**：テクスチャ色がそのまま出ます。
**弱点**：そのままではPBR背景と馴染みにくいです。手動/自動でのパラメータ調整が必要です。

**解説**）
仕組みはややこしいので、深く気にしなくて大丈夫です。知りたい方は [昔に書いた記事があるのでどうぞ。](https://qiita.com/ruyo/items/28255f26725a6b6bd475)
EyeAdaptationはカメラ露出の補正です。

### Lit ベースマテリアル

|Lit ベースマテリアル|プレビュー|
|---|---|
|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36233/97566614-e402-423d-5d4a-11e481e35b44.png)|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36233/bd439233-8de7-fb1e-60f4-0c393548c0b7.png)|


**特性**：テクスチャ色を出しつつ、周囲の光の影響を受けられます。
**弱点**：暗い陰が出やすいです。淡い色が苦手です。

**解説**）
BaseColorを調整して色味をあわせつつ、Emissiveで明るさを担保しています。
テクスチャ調整の方向性としては、実写の写真からAlbedoMapを作成する工程をイメージすると良いかもしれません。
ラフネス=1、スペキュラ=0とすることで、真っ黒を表示できます。
後述の補助ライトを利用することを前提にして、Emissiveによる底上げを止める という選択もあります。

### SSS ベースマテリアル

|SSS ベースマテリアル|プレビュー|
|---|---|
|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36233/5d3b5e33-9beb-d782-41ff-81ecb6110e7b.png)|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36233/97464071-efab-6c3a-e566-e65433223000.png)|


**特性**：PBR背景と合わせやすいです。
**弱点**：フィギュアやドールを思わせる質感になります。ややリアルに侵食されており、好みが分かれるでしょう。逆光で透けます。

**解説**）
シンプルなサブサーフェスです。他にも種類がありますが、同じような考え方で利用できるでしょう。
後述の補助ライトを利用することで、逆光の見栄えは改善できます。
後述の法線補正を利用することで、陰影を弱めることができます。


----
**さぁ、準備ができたら、PBR背景に乗り込みましょう！**

## ライトの攻略方法
PBRとの戦いは、8割方ライトとの戦いとなるでしょう。最初から強敵です。
リアルの魔の手が忍び寄ってきます…！

### キャラクタ全体の陰影をやわらげる
|LITの見え方（左：未調整、中：SkyLight調整済、右：補助ライト調整済）|
|---|
|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36233/d65fa139-de54-04e4-197f-39a962776671.png)|
初期設定のSkyLightは、**下向きの面が暗くなります。**上向きの面にのみ光が当たります。
この影響によりキャラクタに奇妙な陰りが見えることがあります。対処方法は2つ

**対処法その1：SkyLightによる調整**
SkyLightの `LowerHemisphereIsSolidColor` をOFFにすれば下からも光が当たります。お手軽です。
ただこの変更はシーン全体のライティングにも影響します。白っぽく締まりのない絵になりがちです。

**対処法その2：補助ライト(DirectionalLight)を追加して下から照らす**
ライトチャンネルを利用してキャラクタのみ照らします。
DirectionalLightの`LightChannel 0`をOFF、`LightChannel 1`をON、`CastShadow`をOFFにします。
キャラクタ側の`LightChannel 0`と`1`をONにすれば完成です。
強すぎるとキャラクタが浮くので、ほんのり照らしましょう。影色のような効果も出せます。
SSSマテリアルでは逆光で素材が透けてしまうのを和らげる効果もあります。

### 顔の陰影をやわらげる

|法線補正ノード|SSSの見え方（左：未調整、右：調整後）|
|---|---|
|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36233/9db7bb36-c581-b104-811a-a0ba2cee5f7f.png)|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36233/e6bfa54c-28db-c3d7-65f6-2d474796e601.png)|
モデル形状の法線で陰影づけすると、影が濃く出ることがあります。法線を曲げて凹凸をなだらかにします。
順光の絵作りで活躍します。逆光では無しでも大丈夫です。

※法線転写などを行ったモデルでは、対処不要です。
※顔が平たい形状(正面顔に特化したモデル)の場合は補正しきれません… 負けです…

### シルエットを強調する
|未調整|補助ライトあり|
|---|---|
|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36233/c30031ee-0ff9-a018-9f9e-c4886e35a867.png)|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36233/a5bc01d8-9a49-b0cc-9063-9d0092a0595c.png)|
強いライトを上や奥から当てると違和感が減ります。逆光は勝利 ということです。
LightChannelを利用して、キャラクタにのみ適用します。
ライトはRectLightだと調整しやすいです。

## ポストプロセスの攻略方法
ポストプロセスは騙しやすいです。
パラメータが多くて取っつきづらいですが、積極的に利用してやりましょう。
**解説のため、強く効果を掛けています！** これの半分程度の強さで十分です。

### Bloomで馴染ませる

|LITの見え方（左：未調整、右：色付きBloom)|
|---|
|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36233/6bf0c53c-8563-4d29-11ab-c81c1ccf0ddf.png)|

馴染みますが画面が白くなりがちです。ガンマ補正等も併用してメリハリを付けましょう。
応用編になりますが、自前で色味を強調するBloomを作ると効果的です。（この紹介はあとがきのリンクへ）


###画面フェード板で馴染ませる
|Unlitの見え方（左：未調整、右：画面フェード板アリ）|
|---|
|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36233/f97a9518-045c-d90e-e694-8576855e8130.png)
|

キャラクタと背景に共通して画面効果を乗せると、馴染みやすいです。
画面隅にほんのり色を乗せています。

###キャラクタフェード板で馴染ませる
|Unlitの見え方（左：未調整、右：キャラフェード板アリ）|
|---|
|<img width="75%" alt="dum.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36233/e10bad5c-6b0a-6163-898b-d13a1b47f1e7.png">|

前段と同じ狙いです。顔や全身を中心にして、ほんのり色を乗せています。

### とにかく盛る
|とにかく盛る|
|---|
|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36233/1bca9b86-b136-ecec-85bd-24e757bb19fa.png)|
彩度低め、コントラスト高め、色温度を調整して、ノイズを乗せます。万能です。
その他エモい感じのイラスト等を参考に真似してみましょう。

ただこのように背景を大きく変化させる戦略は、センスの比重が大きくなります。
極端な話、**「エモければ勝ち」という勝負になります。**
個人の嗜好により、勝敗の評価軸が大きくブレるでしょう。

## カメラの攻略方法
|望遠、Roll、DOF|
|---|
|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36233/d03687bc-6899-f335-6441-e0f9a15d5b04.png)|
まずは望遠(画角をせまく)、Roll回転、DOF(被写界深度)を掛けましょう。
あとはキャラクタの魅力が助けてくれます。
**勝利を確信できるなら、PBR背景とキャラクタの接地部分も含めて**フレームに収めましょう。

これはPBRとの戦いの記録であると同時に、キャラクタとの大切な思い出の写真です。
どのような構図にするかは、悩ましい問題となります。


## まだ見ぬ強敵たち
ここまで進んだら武器の強化が必要です。
よく使うパラメータ、Toon機能などを整頓・追加して、マテリアルをカスタムしましょう！


**戦いは続きます**
マーケットプレイスから新たな背景をダウンロードし、キャラクタを配置して攻略しましょう。
「明るい町並」から「薄暗い工場」さらには「レイトレースを利用した部屋」から「100,000Luxで照らされたMegascans」「モバイル/VRシーン」まで多様な強敵が あなたの挑戦を待っています！



## さらなる高みへ

普通の戦いに飽きてしまった方のために、縛りプレイのレギュレーションも用意しました。

 - 逆光&リムライト禁止
    - 補助ライトやポストプロセスの腕が要求される
 - ポストプロセス禁止
    - マテリアルの柔軟性が要求される
 - Unlit マテリアルで戦う
    - ポストプロセスを極端に掛ければ楽勝。しかし自然な色合いを残す場合はトリッキーな技が要求される
 - リアルタイム実写AR合成
    - PBR界のラスボスといえば「実写」… 真の戦いはここからだ！


私の戦いの歴史は、「[VRM4Uギャラリー](https://ruyo.github.io/VRM4U/90_gallery/)」というページにまとめています。
この記事を読んだ後であれば、それぞれ何と戦っていたのか、どんな縛りプレイをしていたか見えてくるかもしれません。

## あとがき

お付き合いありがとうございました。

私は個人の活動として[VRM4U(VRMインポーター)](https://ruyo.github.io/VRM4U/)を開発しており、記事の内容はそれに基づくものです。
興味が出たら是非ご利用ください。

|おまけ。襲いかかるリアル の舞台裏|
|---|
|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36233/68e75689-61ca-e199-d6f1-f83371283261.png)|

追記：
色味強調Bloomの紹介は[短いですがこちらから辿れます。](https://ruyo.github.io/VRM4U/02_sss/#%E8%89%B2%E5%91%B3%E3%82%92%E5%BC%B7%E8%AA%BF%E3%81%97%E3%81%9Fbloom%E3%82%92%E4%BD%BF%E3%81%86)
前述のインポータに含まれていますので中身を見たい方はどうぞ。

おしまい。