Go to Qiita Advent Calendar 2024 Top
LoginSignup
9
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@YuukiOgino(雄季 荻野)

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

Last updated at Posted at 2017-01-09

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

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

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

使い方は以下の通りですが、今まで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に与え、法線をライトの向きに寄せて顔等を明るく保つ事ができます）

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

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

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

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

こちらのフォーラムからver 0.2（2017年1月時点）をダウンロードしましょう。

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

2017-01-09.png

こんな感じです。
このNPR_MaterialsフォルダをプロジェクトファイルのContentフォルダに入れます。
2017-01-09 (1).png

追記 2017/07/24
ver0.5が昨年のUnreal Engine 4 (UE4) Advent Calendar 2016で公開されてました
NPR_Materials_20161207.CelAnim.ver0.5.zip

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

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

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

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

まずは

PP_NPRからMaterialInstanceを作成

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

2017-01-09 (3).png

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

赤枠が作成したマテリアルインスタンスです。PPI_NPRは青枠で囲っています。
2017-01-09 (4).png

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

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

モードの検索枠(赤枠で囲った部分)にPostと入力すると、Post Process Volumeが出てくるので、これをビューポートにドラッグ&ドロップします。
2017-01-09 (5).png

追加したPostProcessVolumeがアウトライナ（赤枠）に追加されています。
とりあえずワールド全体に反映させるため、Unbound（青枠で囲った部分）にチェックを入れます。
2017-01-09 (6).png

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

まず詳細のPostProcessVolumeのSettings(赤枠で囲った部分)を開き、Blendablesを開きます。
2017-01-09 (7).png

続いてArrayのエレメントの隣にある＋ボタンをクリック後、プルダウン（赤枠で囲った部分）からアセットリファレンスを選択します。
2017-01-09 (8).png

選択すると以下の画像のようになります。
2017-01-09 (9).png

この「なし」の部分に作成したマテリアルインスタンス(もしくはPPI_NPR)をドラッグアンドドロップしましょう。
2017-01-09 (10).png

ドロップに成功すると、赤枠で囲ったようにマテリアルが反映されています。
2017-01-09 (11).png

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

・ビフォー
2017-01-09 (12).png

・アフター
2017-01-09 (13).png

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

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

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

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

(1)Blendablesの部分

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

select.png

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

select1.png

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

select2.png

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

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

select3.png

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

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

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

2017-01-09 (14).png

このように色々なパラメータが配列で並んでいるので、この値を変更することで調整が可能です。
2017-01-09 (15).png

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

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

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

以下の画像のように、モデルのSkeletalMeshを開きます。
2017-01-09 (17).png

髪のマテリアルに当たる部分ののシャドウをオフにします。以下の画像は、ユニティちゃんＣＲＳの例です。
2017-01-09 (16).png

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

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

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

コンテンツフォルダからNPR_Materialsを開き、その中にあるM_CharacterBaseを選択し、マテリアルインスタンスを作成します。
2017-01-09 (18).png

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

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

2017-01-09 (19).png

では手っ取り早く、テクスチャーとノーマルマップを反映します。赤枠がテクスチャー、青枠がノーマルマップです。ノーマルマップはなければデフォルトで問題ないです。
2017-01-09 (20).png

このようにコンテンツフォルダからテクスチャーとノーマルマップをドラッグ&ドロップします。
2017-01-09 (21).png

この状態で作成したマテリアルインスタンスをモデルに反映します。
2017-01-09 (22).png

するとさっきまで真っ黒だった髪が、鮮やかな金髪になりました！
2017-01-09 (23).png

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

もし、スペキュラマップとエミッシブマップがある場合、赤枠で囲った部分の左のチェックボックスを入れた後、右のチェックボックスにチェックを入れます。
2017-01-09 (24).png

すると、赤枠で囲った部分の通り、スペキュラマップとエミッシブマップが表示されるので、該当のテクスチャーを反映します。
2017-01-09 (26).png

スペキュラマップとエミッシブマップを反映するとこんな感じになります。
2017-01-09 (27).png

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

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

他の部位も同様にマテリアルインスタンスを作成して、入れ替えましょう。
色々いじくってこんな感じになりました。
2017-01-09 (28).png

エディッター上ではこのような感じに。素晴らしいぐらい簡単です。
2017-01-09 (29).png

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

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

コンテンツのNPN_MaterialsからBP_DirectionalLightForCharacterを選択し、ビューポートにドラッグ＆ドロップします。
2017-01-09 (30).png

アウトライナにDirectionalLightがある場合、Delボタンとかを押して削除します。
2017-01-09 (31).png

このような感じになります。
2017-01-09 (32).png

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

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

2017-01-09 (32).png

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

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

M_CharacterBaseを開きます。
M_CharacterBaseの両面処理にチェックを入れます。
2017-01-09 (33).png

これで微妙に途切れているのが直りました。
2017-01-09 (34).png

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

DiffuseTextureのSampler SouceをWrapに、ついでに赤枠で囲ったマテリアルノードを追加します。
2017-01-09 (35).png

こんな感じになりました。変な色の部分が修正されています。
2017-01-09 (36).png

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

unitychan.png

ふつくしい……

#まとめ

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

© Unity Technologies Japan/UCL

9
11
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
9
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?