Announcement

Collapse
No announcement yet.

アンリアルエンジン4でノンフォトリアル描画しよう!

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

    アンリアルエンジン4でノンフォトリアル描画しよう!

    先日のUNREAL FEST 2015 YOKOHAMAにご来場いただいた皆様
    ご都合がつかず参加が叶わなかった皆様、いつもUE4の応援ありがとうございます!

    「アンリアルエンジン4でノンフォトリアル描画しよう!」
    https://www.unrealengine.com/ja/blog...15-yokohama-10
    と題して講演させていただきましたが、楽しんでいただけましたでしょうか?

    現在ポストプロセスマテリアル等の公開に向けブラッシュアップを進めており近々にも公開できればと思っておりますが
    取り急ぎスライド中間違っていた部分の修正と実機デモを行った部分のスクショを追加をしましたものを公開させていただきます。
    https://www.slideshare.net/EpicGames...ohama-54129845
    Slideshareサイトからの閲覧の場合画像の細部が劣化して潰れてしまっている部分が見受けられます。
    輪郭線の細部等が気になる皆様はスライドをダウンロードいただいてオリジナルの画像をご確認くださいませ。

    現在までに制作できているマテリアルを公開させていただきます。
    ver 0.2 床や壁等に黒いバンドが出てしまう問題の修正、輪郭線と稜線が出しやすく調整。
    ver 0.1 first version.
    プロジェクトフォルダ中のContentフォルダにNPR_Materialsフォルダをコピーすれば利用できます。

    いくつかビデオも録っておきました。
    UE4:MatineeFight sample ToonShader WIP 2015-10-22 トゥーンシェーダーテスト
    https://youtu.be/LqzUBT-C6uc

    UE4:Showdown VR demo ToonShader WIP 2015-10-22 トゥーンシェーダーテスト
    https://youtu.be/ascTunVO15E

    UE4 ToonShader WIP with Nakano Sisters 2015-10-22 トゥーンシェーダーテスト中野シスターズ
    https://youtu.be/CdkpjVAgKHI

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

    ※StylizedデモからT_TexturedPaperを持ってきて、PPI_NPR_CanvasPaintのCanvasTextureに与えて、このPPI_NPR_CanvasPaintをBlendablesに設定すると水彩画調になります。

    ■NPR_ParamCollectionのパラメータ説明
    DebugWipe 画面を分割してオリジナルの画像と比べる事ができます
    LightIntensityStepping セルの塗り分けの段階(現状1以下にするとおかしくなるかも)
    LightIntensityBias シーンが暗い場合に、この値を上げることで暗い部分の明るさを底上げする事ができます
    FresnelFunc_ContrastDark 側面を向いた面の判定にFresnel_Functionを利用していますが、暗い部分の制御値です
    FresnelFunc_ContrastBright 側面を向いた面の判定にFresnel_Functionを利用していますが、明るい部分の制御値です
    EdgeLineThickness 輪郭線線の太さです
    CreaseLineThickness 稜線の太さです(マイナスの値(サンプルポイントが法線方向になる)を入れたほうが良好な結果が得られる場合がある?)
    FlankLine 側面をどの位暗い色にするか(0.0で真っ黒、0.5で元の色の0.5掛けくらい)
    EdgeLine 輪郭線をどのくらい暗くするか(0.0で真っ黒、0.5で元の色の0.5掛けくらい)
    CreaseLine 稜線をどのくらい暗くするか(0.0で真っ黒、0.5で元の色の0.5掛けくらい)
    LineColor 上記輪郭線等に上乗せする線の色(アルファ値でどのくらい上乗せするか制御します、アルファ値に応じてこの色が合成されます、大きなカラー値で光らせる事も可能です)
    CharacterLightVector キャラクタの顔等の為のライトのベクタです(ディレクショナルライトの向きをコピーするのがお勧め)
    CharacterLightColor (現在のところ未使用:キャラクタ用のライトカラー)

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

    ■シーン全体の色味を調整する方法
    シーン全体の明るさを底上げするだけでしたら、NPR_ParamCollection中のLightIntensityBiasの値を上げることで可能ですが、色味全体を変更する場合はカラーグレーディングがお勧めです。
    カラーグレーディングの使い方についてはロブのチュートリアルを見てみてください。
    https://www.youtube.com/watch?v=m1Vv-OSbtvw

    ■現在のバージョンの問題点
    ・視線に平行に近い床等で深度比較にひっかかってしまい縞模様が出てしまう。(法線方向にオフセットしたポイントとの深度差が床や天井面だと大きくなってしまう事が原因なんですが、オフセットしたポイントの深度は法線の向きから予測できるので、その予測値との差が大きい場合にエッジとみなす計算にしたほうが良いように思われる)
    ・セルの塗り分け部分がザラザラする。

    ■今後やりたい事
    ・モバイル対応
    ・ハッチング対応
    ・キャラの法線の調整機能

    ■やらない予定な事
    ・このポストプロセスマテリアルでの色味の調整機能の実装(ポストプロセスの設定にColor Gradingで調整できる機能があるので、その機能を使えた方がリアル系をやる時にも応用が効くので)

    ■FAQ
    Q. キャラに乗るスペキュラを外したい
    A. ポストプロセス内で、ある程度剥がす事もできますが、完全に剥がす事は難しいのと、計算負荷があがってしまいます。元のマテリアルのRoughnessを上げたりMetalicを下げることで、映り込みやスペキュラが乗らないように制御できます。その方がモデルごとに制御でき、逆にメカメカしたモデルの映り込みやスペキュラを残す事も可能になります。
    Q. ディフューズのテクスチャがスムーズになったほうが、トゥーンっぽくないですか?
    A. ポストプロセス内で、近隣のピクセルもサンプリングして平均化すればスムーズにはなりますが、テクスチャサンプル数が増えてしまって重くなるので、元のマテリアルで使用しているテクスチャを調整する事をお勧めします。その方がモデル毎に意図通りに制御できて良いと思います。
    Q. キャラの動きが激しいと線がジリジリする
    A. TemporalAAの影響です。PostProcessVolumeのSettingsのMiscにAA Methodがあるので、FXAAにすると抑える事ができます(静止画でのクオリティはTemporalAAの方が良好かと思います)。また、オフライン向けの描画であれば、Screen Percentage 200とTtemporarAAの組み合わせや、AAナシ(もしくはFXAA等)で2x2倍解像度でレンダリングしたものを縮小して利用する方向も有用です。

    QiitaのUnreal Engine 4 (UE4) 其の弐 Advent Calendar 2015 10日目
    「アンリアルフェス2015横浜で公開したNPR、トゥーンのアルゴリズムと使い方詳しく解説するよ(*´∀`)う」へのリンクも載せておきます。
    http://qiita.com/junyash/items/0e528e1f291a710cf04f

    皆様のご意見ご感想お待ちしております〜。
    Last edited by Jun Shimoda; 12-15-2015, 11:52 AM.

    #2
    参考画像集

    ■9/29 大八耐で制作したバージョンの改良版
    Starter Contents
    Starter Contents

    ■10/7 水彩画調
    中野シスターズ・鷺宮なか
    Infiltratorデモ(オリジナル)
    Infiltrarotデモ(水彩画調)
    MatineeFightデモ(オリジナル)
    MatineeFightデモ(水彩画調1)
    MatineeFightデモ(水彩画調2)
    MatineeFightデモ(水彩画調3)

    ■10/14 VR
    Showdownデモ(トゥーンシェーダー)
    Showdownデモ(水彩画調)
    Last edited by Jun Shimoda; 11-22-2015, 02:23 PM.

    Comment


      #3
      シモダさんのトゥーンを使ってみました。
      とても使いやすいと思うのですが、一部どうにか出来ないかなぁという部分で影のエッジ、といいますか。
      そこの見た目が気になります。画像で例をだしますと…

      Click image for larger version

Name:	1.PNG
Views:	1
Size:	737.5 KB
ID:	1091832
      こちらがシモダさんのマテリアルを使用して個人的に調整したものです。
      とは言え完全に調整できたわけではありませんが。

      Click image for larger version

Name:	2.PNG
Views:	1
Size:	796.3 KB
ID:	1091833
      そしてこちらは個人的に調整しているトゥーン描画のものです。
      セル調らしく、影になる部分はハッキリと分かれているのがわかると思います。

      これを調整できる方法は現状でもありますかね?

      Comment


        #4
        alweiさん、ありがとうございます!エッジラインの方と勘違いしてました。確かにザラザラしてるところありますね。問題はいつくか把握していて、トゥーンのマッピング用に用意したテクスチャ自体がザラついている、一旦描画されたリアルな最終シーンとベースカラーとでライトの影響を再計算しているのとライト以外のリフレクション(やスペキュラ)の影響も混ざってしまっている、元のモデルのテクスチャ等にザラつく要因がある可能性あり。
        この3点が考えられます。また、モバイル対応する時にモデル用のマテリアル側でのセルの塗り分け機能を入れようと思っていたので、こちらを併用するとほぼ解決できると思っています。とはいえ今日は忙しいので、明日以降調整してみます〜。ありがとうございます!
        Last edited by Jun Shimoda; 10-24-2015, 09:51 PM.

        Comment


          #5
          ありがとうございます!
          やはりこの影のエッジ部分がハッキリとするのは大事だと思われますので、対応されるのを楽しみにしております。

          Comment


            #6
            エッジのザラつきはまだ解消できていませんが、カワイイキャラクターモデルをいい感じにレンダリングするパラメータに関してご質問がありましたので、最初のポストの方に追記させていただきました。

            よろしくお願いします。

            Comment


              #7
              エッジのザラつきの解消ができないかと見てみたところ幾つかのポイントがありました。
              • 元のテクスチャがDXT1等の場合、ブロックノイズが原因でザラつく場合があります。テクスチャのTexture GroupをCharacterにして、Compression SettingsをUserInterface2D等にすると非圧縮になるのでテクスチャが原因のザラつきを抑える事が可能です。
              • ポストプロセスのアンビエントオクルージョンが効いていると、陰の部分にザラつきが出る場合があります。これが気になる場合アンビエントオクルージョンのIntensityを0.0にすると抑えられます。


              改良後の参考画像集

              ■11/18 輪郭線・稜線の検出方強化、床や壁の縞模様解消
              ハッカドール・3人
              ハッカドール・バストショット
              ハッカドール・足元
              Elementalデモ(オリジナル)
              Elementalデモ(トゥーンシェーダー)
              Infinity Bladeアセットのテストマップの立体文字(オリジナル)
              Infinity Bladeアセットのテストマップの立体文字(トゥーンシェーダー)
              Infinity Bladeアセットのテストマップの立体文字(水彩画風)
              Last edited by Jun Shimoda; 11-22-2015, 02:26 PM.

              Comment


                #8
                Amazing work and really thank you very much,it helped me a lot

                Comment


                  #9
                  Thanks so much ageofhzh! I put wrote detail of this algorithm and instructions here. Enjoy!
                  http://qiita.com/junyash/items/0e528e1f291a710cf04f

                  Comment


                    #10
                    Amazing work ! I hope there could be a video tutorial (I‘m not good at english and have no idea about japanese )

                    Comment


                      #11
                      とても興味深いお話ですね!!
                      私も試してみたく思い、PP_NPRからMaterialInstanceを作成まではしたのですが、PostProcessVolumeのBlendablesに作成したマテリアルインスタンスが表示されず困っています。
                      そもそもPostProcessVolumeの場所自体を間違っているという可能性も・・・。
                      何かもう少しわかりやすいサイト等ございましたらご教授いただけませんでしょうか?

                      Comment


                        #12
                        こちらのトゥーンシェーディングをお借りしてゲームを作成しました!
                        まだまだ自分の調整が甘いので、本来のスペックを発揮しきれていませんが、非常に綺麗にできていて、作ってる最中もニヤニヤが止まりませんでした!
                        http://www.nicovideo.jp/watch/sm28119398
                        こちらが実際の動画なのですが、ところどころで床に細くラインが入ってしまっています。
                        パラメーターでなんとかなるかな?と思いましたが自分には修正できませんでした・・・
                        →・視線に平行に近い床等で深度比較にひっかかってしまい縞模様が出てしまう。(法線方向にオフセットしたポイントとの深度差が床や天井面だと大きくなってしまう事が原因なんですが、オフセットしたポイントの深度は法線の向きから予測できるので、その予測値との差が大きい場合にエッジとみなす計算にしたほうが良いように思われる)
                        └この問題によるものなのでしょうか?

                        >raika0306さん
                        PP_NPRがコンパイルエラーになっていたりしませんか?確か最初導入したとき、CollectionParamがちゃんと参照されていなくてコンパイルエラーになっていたような気がします。
                        見当はずれだったらごめんなさい。。。

                        Comment


                          #13
                          excellent work!

                          Comment


                            #14
                            I need to relearn my Japanese. I definitely want to do an anime style game and now... need the proper shaders for UE4
                            Website/Portfolio: http://www.VictorBurgosGames.com

                            Join me on stream: https://www.twitch.tv/VictorBurgosGames for UE4 Game Dev. If you need help, just stop by and ask!

                            Lead Programmer - Contagion VR: Outbreak: http://www.indiedb.com/games/contagion-vr-outbreak

                            Comment


                              #15
                              unable to make it work, everything looks black when applied to my project
                              "Today a young man on acid realized that all matter is merely energy condensed to a slow vibration. That we are all one consciousness experiencing itself subjectively. There is no such thing as death, life is only a dream, and we are the imagination of ourselves. Here's Tom with the weather."

                              Comment

                              Working...
                              X