【初心者向け】下田さんが公開したアンリアルエンジン4でノンフォトリアルマテリアルを使ってみよう

下田さんがUNREAL FEST 2015 YOKOHAMAで公開した、ノンフォトリアルマテリアルを使ってみましょう！

「使い方？　わかるよ」という方は読まなくても大丈夫です。

下田さんの記事はこちら↓です。
[アンリアルフェス2015横浜で公開したNPR、トゥーンのアルゴリズムと使い方詳しく解説するよ(*´∀｀)う](http://qiita.com/junyash/items/0e528e1f291a710cf04f)
[Unreal Engine 4(UE4)ってPBRでHDRだけどアニメ調のレンダリングもしたいですよね？](http://qiita.com/junyash/items/a548fc71a8bae76382e1)

使い方は以下の通りですが、今までUE4を触ったことのない初心者だと説明文がわかりにくいと思います。

>■基本的な使い方
1. PP_NPRからMaterialInstanceを作成（既に作成済みのPPI_NPRでも可能）して、PostProcessVolumeのBlendablesに設定するだけでシーンに適用できます。
2. トゥーンの制御用のパラメータはNPR_ParamCollectionのパラメータを変更することで可能です。
3. 肌の明るさの段階を押さえる（SkeletalMeshエディタで髪のエレメントのシャドウをオフにする）
4. M_CharacterBaseからMaterialInstanceを作成して、キャラクタに適用する。
5. DirectionalLightを、BP_DirectionalLightForCharacterに置き換える。（DirectionalLightの向きを上記M_CharacterBaseに与え、法線をライトの向きに寄せて顔等を明るく保つ事ができます）

自分もガチ初心者の頃に、マテリアルを使うのに知識が無くて「？」と思いながらやってました。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">初めての時は自分もよくわからなかった。<br>もったいないし、あとでQiitaに書こうかな。 <a href="https://t.co/9a7PDvyfFW">https://t.co/9a7PDvyfFW</a></p>&mdash; 荻野雄季 (@YuukiOgino) <a href="https://twitter.com/YuukiOgino/status/818277817565614081">2017年1月9日</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

というわけで、使い方を画像で説明していきたいと思います。

---
追記：2017/07/24
ue4.16.2とue4.17 preview2で再検証しました


#0.ダウンロード～マテリアルをプロジェクトフォルダに反映

[こちら](https://forums.unrealengine.com/showthread.php?88581)のフォーラムからver 0.2（2017年1月時点）をダウンロードしましょう。

zipファイルがダウンロードされるので、解凍して開きましょう。
するとNPR_Materialsというフォルダが解凍先のフォルダに展開されているはずです。

![2017-01-09.png](https://qiita-image-store.s3.amazonaws.com/0/104377/10422ce6-f76a-b4ef-8204-efe85eb21a0d.png)

こんな感じです。
このNPR_MaterialsフォルダをプロジェクトファイルのContentフォルダに入れます。
![2017-01-09 (1).png](https://qiita-image-store.s3.amazonaws.com/0/104377/178f2775-9162-2011-a47b-8b82f0d70723.png)

---
追記 2017/07/24
ver0.5が昨年のUnreal Engine 4 (UE4) Advent Calendar 2016で公開されてました
[NPR_Materials_20161207.CelAnim.ver0.5.zip](https://epicgames.box.com/s/2ldnpzuwomyiu19vmjl2fzfp2f100rl0)

0.5もNPR_Materialsフォルダを持っていけば大丈夫です

---


これで準備終了です。プロジェクトを起動しましょう。

#1. PP_NPRからMaterialInstanceを作成（既に作成済みのPPI_NPRでも可能）して、PostProcessVolumeのBlendablesに設定する

今回は、ユニティちゃんにNPR_Materialsを当てていきます。

まずは
>PP_NPRからMaterialInstanceを作成

からやっていきましょう。

![2017-01-09 (3).png](https://qiita-image-store.s3.amazonaws.com/0/104377/ec5f999c-fd16-d985-163b-9a4d06948bde.png)

コンテンツフォルダからNPR_Materialsを開き、その中にあるPP_NPRを右クリックし、マテリアルインスタンスを作成を選択すれば、MaterialInstanceが作成されます。
名前は適当でかまいません。

赤枠が作成したマテリアルインスタンスです。PPI_NPRは青枠で囲っています。
![2017-01-09 (4).png](https://qiita-image-store.s3.amazonaws.com/0/104377/3ab60e2f-3e21-8be8-e011-f9e558604370.png)

つづいてPostProcessに作成したマテリアルインスタンス(もしくはPPI_NPR)を設定するために、PostProcessVolumeをシーンに入れます。

※すでにPostProcessVolumeがシーンに追加されている場合は、この作業は必要ありません。

モードの検索枠(赤枠で囲った部分)にPostと入力すると、Post Process Volumeが出てくるので、これをビューポートにドラッグ&ドロップします。
![2017-01-09 (5).png](https://qiita-image-store.s3.amazonaws.com/0/104377/ca8a8da0-419a-4649-77c0-55525af2c894.png)


追加したPostProcessVolumeがアウトライナ（赤枠）に追加されています。
とりあえずワールド全体に反映させるため、Unbound（青枠で囲った部分）にチェックを入れます。
![2017-01-09 (6).png](https://qiita-image-store.s3.amazonaws.com/0/104377/5dbef221-97df-7542-c620-df593c050da8.png)

これでPostProcessVolumeの追加が終わりました。
このPostProcessVolumeに先ほどのマテリアルインスタンス(もしくはPPI_NPR)を追加します。

まず詳細のPostProcessVolumeのSettings(赤枠で囲った部分)を開き、Blendablesを開きます。
![2017-01-09 (7).png](https://qiita-image-store.s3.amazonaws.com/0/104377/8baa8c8e-4421-19c8-80dc-feeb82e13348.png)

続いてArrayのエレメントの隣にある＋ボタンをクリック後、プルダウン（赤枠で囲った部分）からアセットリファレンスを選択します。
![2017-01-09 (8).png](https://qiita-image-store.s3.amazonaws.com/0/104377/c9c7b7b7-b658-256a-1b55-202d7df483fa.png)

選択すると以下の画像のようになります。
![2017-01-09 (9).png](https://qiita-image-store.s3.amazonaws.com/0/104377/1316eeb9-2782-c34a-2578-db6fcf279de5.png)

この「なし」の部分に作成したマテリアルインスタンス(もしくはPPI_NPR)をドラッグアンドドロップしましょう。
![2017-01-09 (10).png](https://qiita-image-store.s3.amazonaws.com/0/104377/8e8c8a67-330d-ef71-e4e9-26e12729fb85.png)

ドロップに成功すると、赤枠で囲ったようにマテリアルが反映されています。
![2017-01-09 (11).png](https://qiita-image-store.s3.amazonaws.com/0/104377/5b77d824-fdce-8d13-3c80-a888a93f673e.png)

これで１の設定が終了です。

・ビフォー
![2017-01-09 (12).png](https://qiita-image-store.s3.amazonaws.com/0/104377/90f8cc9a-53d0-c8bb-0d88-1802f351d34b.png)

・アフター
![2017-01-09 (13).png](https://qiita-image-store.s3.amazonaws.com/0/104377/6956248b-8cb8-bd05-8c88-a73d1e6c14cb.png)

ビフォーの状態からモデルが何かしら変われば、正常に反映されています。

※ここの時点でのモデルがどう変わるかは、使っているモデルとマテリアル次第なので気にしないでください。

###追記　4.16以降でのやり方

4.16以降のポストプロセスボリュームの一部プロパティ名変更、およびカテゴリ変更が反映されているため、一部手順に変更が入ります。
4.15から上記の変更が入っているかも？　すみません、見る時間が無くて確認が取れていません。

(1)Blendablesの部分

ue4.16からBlendablesがPostProcessMaterailsという名前に変更されています

![select.png](https://qiita-image-store.s3.amazonaws.com/0/104377/54724b6b-3456-3327-3275-d4ab70c3814b.png)

赤枠で囲った部分が旧Blendablesです。
Arrayの＋をクリックすると、選択というプルダウンが出てくるので、そのプルダウンを押し、アセットリファレンスをクリックしてください。

![select1.png](https://qiita-image-store.s3.amazonaws.com/0/104377/3c2145a4-3ca2-3431-f780-67b27bfbec97.png)

すると上記画像のようにBlendablesでの選択と同じ状態になるので、先ほどのマテリアルインスタンス(もしくはPPI_NPR)を追加します。

![select2.png](https://qiita-image-store.s3.amazonaws.com/0/104377/2a7b2e19-9310-05bc-d9b3-1a928e19038f.png)

反映すると上記の画像の通り、何かしらモデルとかステージの描画が変わります。
これでBlendablesと同じように設定ができます。

残りのプロパティは詳細の検索でプロパティ名を入れれば出てくると思います。

![select3.png](https://qiita-image-store.s3.amazonaws.com/0/104377/161d1b0d-1dfb-fea2-4d4d-d647dbac35b9.png)


名前変更したプロパティで絶対に使用するのはBlendablesぐらいなので、そこだけ注意してください。


#2. トゥーンの制御用のパラメータはNPR_ParamCollectionのパラメータを変更

NPR_ParamCollectionは以下の赤枠で囲ったものです。これを開きましょう。

![2017-01-09 (14).png](https://qiita-image-store.s3.amazonaws.com/0/104377/e3a11477-82cd-3d1d-b942-29eef21cd4c9.png)

このように色々なパラメータが配列で並んでいるので、この値を変更することで調整が可能です。
![2017-01-09 (15).png](https://qiita-image-store.s3.amazonaws.com/0/104377/8e6857d7-3ca4-a76b-b0d5-8333104f3f5a.png)

好き勝手動かして、好きなノンフォトリアルに設定しましょう。

実際にNPR_ParamCollectionを調整するのは、５までの作業が終わった段階になってからだと思います。

#3. 肌の明るさの段階を押さえる

以下の画像のように、モデルのSkeletalMeshを開きます。
![2017-01-09 (17).png](https://qiita-image-store.s3.amazonaws.com/0/104377/da7a49c4-3e62-7e03-a199-12de5ae4203c.png)

髪のマテリアルに当たる部分ののシャドウをオフにします。以下の画像は、ユニティちゃんＣＲＳの例です。
![2017-01-09 (16).png](https://qiita-image-store.s3.amazonaws.com/0/104377/f097d6e5-981e-1a40-fb34-04f887673d45.png)

これで３の作業は終わりです。

#4. M_CharacterBaseからMaterialInstanceを作成して、キャラクタに適用

４ではノンフォトリアルに対応したマテリアルインスタンスを作成していきます。

コンテンツフォルダからNPR_Materialsを開き、その中にあるM_CharacterBaseを選択し、マテリアルインスタンスを作成します。
![2017-01-09 (18).png](https://qiita-image-store.s3.amazonaws.com/0/104377/1f407f9f-5c35-a031-1d19-290aa750da42.png)

作り方は１でPP_NPRマテリアルからマテリアルインスタンスを作成した方法と同様です。

ここでは髪のマテリアルを例に作り方を記述します。
まず作成したマテリアルインスタンスを開きます。

![2017-01-09 (19).png](https://qiita-image-store.s3.amazonaws.com/0/104377/3440ca7f-fc5b-2d6f-86f7-379a43eec4a1.png)

では手っ取り早く、テクスチャーとノーマルマップを反映します。赤枠がテクスチャー、青枠がノーマルマップです。ノーマルマップはなければデフォルトで問題ないです。
![2017-01-09 (20).png](https://qiita-image-store.s3.amazonaws.com/0/104377/2d658042-cf3a-9659-d1fc-0188218f6b89.png)

このようにコンテンツフォルダからテクスチャーとノーマルマップをドラッグ&ドロップします。
![2017-01-09 (21).png](https://qiita-image-store.s3.amazonaws.com/0/104377/9aeb6ecd-0eca-af45-98dc-29ef0d9a5c00.png)

この状態で作成したマテリアルインスタンスをモデルに反映します。
![2017-01-09 (22).png](https://qiita-image-store.s3.amazonaws.com/0/104377/9b7573a9-c065-2158-180a-4b5b374cc5df.png)

するとさっきまで真っ黒だった髪が、鮮やかな金髪になりました！
![2017-01-09 (23).png](https://qiita-image-store.s3.amazonaws.com/0/104377/fb377d72-da20-ae61-893e-22f7bc7d775b.png)

最低限ですけど、十分すぎるほどいい感じのノンフォトリアルです。

もし、スペキュラマップとエミッシブマップがある場合、赤枠で囲った部分の左のチェックボックスを入れた後、右のチェックボックスにチェックを入れます。
![2017-01-09 (24).png](https://qiita-image-store.s3.amazonaws.com/0/104377/c431bf39-db19-4006-84cb-e91cf140f190.png)

すると、赤枠で囲った部分の通り、スペキュラマップとエミッシブマップが表示されるので、該当のテクスチャーを反映します。
![2017-01-09 (26).png](https://qiita-image-store.s3.amazonaws.com/0/104377/dfe0ac07-79c7-3a31-0989-00d36d0dfe10.png)

スペキュラマップとエミッシブマップを反映するとこんな感じになります。
![2017-01-09 (27).png](https://qiita-image-store.s3.amazonaws.com/0/104377/c10b443a-3834-f7b0-d87c-bdad53855fe6.png)

色々マテリアルインスタンスのパラメータをいじくって、好きなノンフォトリアルを作成していきましょう！

>■M_CharacterBaseに関して
基本的には上記ポストプロセスマテリアルを利用するだけでシーン全体がトゥーン化されますが、キャラクターへの陰の影響が強すぎたり色味がくすんでしまったりする場合は、M_CharacterBaseからマテリアルインスタンスを作成して、マテリアルインスタンス側で調整するのがお勧めです。
テクスチャ内に影色が既にある場合等で陰の影響が出ないようにするには、マテリアルインスタンス内のパラメータDiffuseBaseを0.01等にしてベースカラーをほぼゼロにして、DiffuseEmissiveを1.0にすることで、陰の影響が出なくなります。
また、リアル系との中間を目指したいけど色味がくすむのが気になる等の場合は、マテリアルインスタンス中の「シェーディングモデル」を「Subsurface」に変更して、SubsurfaceColorに赤色等を設定することで赤味を増したり、髪の毛であれば髪の毛の濃い目色や明るめの色を設定することで、微妙な制御が可能です。
光るパーツがある場合は、UseEmissiveTextureにチェックを入れていただいて、EmissiveTextureに光るパーツ用のテクスチャを入れて、EmissiveScaleに大きめの値を入れるといい感じに光ると思います。

他の部位も同様にマテリアルインスタンスを作成して、入れ替えましょう。
色々いじくってこんな感じになりました。
![2017-01-09 (28).png](https://qiita-image-store.s3.amazonaws.com/0/104377/95553fcb-fe70-e92d-e36f-2ca7e8eb454b.png)

エディッター上ではこのような感じに。素晴らしいぐらい簡単です。
![2017-01-09 (29).png](https://qiita-image-store.s3.amazonaws.com/0/104377/25ed8b31-ca58-63eb-6884-fa23f10e0d72.png)


#5. DirectionalLightを、BP_DirectionalLightForCharacterに置き換える。

デフォルトにDirectionalLightがある場合、削除して置き換えましょう。

コンテンツのNPN_MaterialsからBP_DirectionalLightForCharacterを選択し、ビューポートにドラッグ＆ドロップします。
![2017-01-09 (30).png](https://qiita-image-store.s3.amazonaws.com/0/104377/ffeda8b5-ac05-f816-b982-6da5b69f2b4a.png)

アウトライナにDirectionalLightがある場合、Delボタンとかを押して削除します。
![2017-01-09 (31).png](https://qiita-image-store.s3.amazonaws.com/0/104377/5853323c-c30f-ce53-6202-c048fa49fdae.png)

このような感じになります。
![2017-01-09 (32).png](https://qiita-image-store.s3.amazonaws.com/0/104377/0de7fecb-572d-a71e-dfc5-525a1fd9c05c.png)

あとは２の作業をしながら、ライトの角度とかをいい感じに調整していきましょう。

#おまけ　ユニティちゃんのビミョーにリボンとかが描画されてない部分を描画するようにする

![2017-01-09 (32).png](https://qiita-image-store.s3.amazonaws.com/0/104377/984e2ced-3987-bf8a-c187-e1e980e70e9e.png)

ユニティちゃんのマテリアルを当てている時、上記の赤枠で囲った部分のように絶妙に描画が途切れている部分があります。

せっかくなので、こいつをどうにかしましょう。

M_CharacterBaseを開きます。
M_CharacterBaseの両面処理にチェックを入れます。
![2017-01-09 (33).png](https://qiita-image-store.s3.amazonaws.com/0/104377/9e6fe5c9-c318-4165-a417-fd1e469e3fb6.png)

これで微妙に途切れているのが直りました。
![2017-01-09 (34).png](https://qiita-image-store.s3.amazonaws.com/0/104377/64ae8e0f-455a-3818-cd8f-31c4ed7c5b47.png)

あとは後ろの髪色が変な色になっているのを直しましょう。

DiffuseTextureのSampler SouceをWrapに、ついでに赤枠で囲ったマテリアルノードを追加します。
![2017-01-09 (35).png](https://qiita-image-store.s3.amazonaws.com/0/104377/b0af43bb-4907-7033-6e60-7dbec3f80bb1.png)

こんな感じになりました。変な色の部分が修正されています。
![2017-01-09 (36).png](https://qiita-image-store.s3.amazonaws.com/0/104377/7679c8d9-e17f-fa85-c3cb-0d5e3869582d.png)

---
追記　UE4.17でver0.5を簡単に反映してみた

![unitychan.png](https://qiita-image-store.s3.amazonaws.com/0/104377/23d0cd21-fcde-e1a8-4144-1b56a5529714.png)

ふつくしい……

#まとめ

極めて簡単にノンフォトリアルができました。やり方さえわかればだれでもできます。
とりあえずノンフォトリアルやりたい、というのであれば下田さんのマテリアルは非常に役に立ちますので、ガンガン使っていきましょう！

---
© Unity Technologies Japan/UCL