Unreal Engine 4でToon Shaderを試してみる

Unreal Engine 4 (UE4) Advent Calendar 2014の7日目の記事です。
今回はUnreal Engine 4でToon Shaderをやります。

Toon Shaderを知らない方もいると思いますので、簡単に説明すると
3次元コンピュータグラフィックスを2次元の手描きアニメーション、あるいは漫画やイラスト風の作画でレンダリングさせる技術をトゥーンレンダリングといい、この画像処理を実現するために使用されるシェーダーをToon Shaderといいます。
もっと簡単に説明すると同じ球体だとしてもToon Shaderを使うと以下の画像のように輪郭線を出せます。
toon.png
詳しくはWikipediaのトゥーンレンダリングを参照してください。

ある日『Unreal Engineでトゥーンレンダリングって出来ないのかな?』って思って調べてたら、
[Closed] Cell Shading in Postprocess セルシェーディングのポストプロセス
というページを見つけました。
Epic Games Japanの下田さんが書かれた記事です。
今回の記事は上記の記事のより具体的なやり方の紹介になります。

今回、なるべくわかりやすくするため画像を多数使用しています。
画像が多いため全てサムネイルにしました。
画像が見難い場合は画像をクリックしていただければ大きな画像として表示されます。

前置きはここまでにして、Unreal Engine 4でToon Shaderを行う解説に移ります。
まず、[Closed] Cell Shading in Postprocess セルシェーディングのポストプロセスの下の方にあるcellpostprocess.zip (141.8 kB)をダウンロードして解凍してください。
ue4_00.png

解凍すると4つのuassetファイルが入ったPostProcessフォルダができます。
ue4_00_.png

Unreal Engineを起動します。
新規のプロジェクトでBlueprintの空きを選択します。
プロジェクト名は「ToonShaderSample」としました。
ue4_01.png
ここまでできたら一度Unreal Engineを終了してください。

先ほど作成したToonShaderSampleプロジェクトのフォルダを開き、Contentフォルダ内にPostProcessをコピーします。
ue4_03_.png
その後、もう一度Unreal Engineを起動し、ToonShaderSampleを選択します。
コンテンツブラウザには先ほど追加したPostProcessフォルダが追加されていることを確認してください。
次にコンテンツブラウザからStarterContentを選択し、StarterMap(レベル)を開いてください。
ue4_02.png

コンテンツブラウザのPostProcessフォルダを選択し、M_CellShadingを右クリック→マテリアルインタフェースを作成を選択してください。
名前は「M_CellShading_Inst」にしました。
ue4_04.png

M_CellShading_Instをダブルクリックしてください。
すると『[SM5] (Node TextureSampleParameter2D) Param2D>Requires Texture 2D』とエラーが表示されます。
ParentのM_CellShadingにテクスチャが設定されていないためです。
Material Editor Instance ConstantのParentのM_CellShadingをダブルクリックし、M_CellShadingのBlueprintを表示します。
ue4_05.png

Blueprintを左にスクロールし、エラーが出ているToonSampleを見つけてください。
ここにTextureが設定されていないためエラーとなっています。
ue4_07.png
TextureにToonLookupを設定し、保存してください。
ue4_08.png

StarterMapに戻り、シーンアウトライナからGlobalPostProsessVolmeを選択してください。
詳細のMiscにあるBlendablesの+ボタンをクリックし、作成したM_CellShading_Instを設定します。
ue4_09.png

MaterialSphereに対してToon Shaderをかけます。
比較のために同じMaterialSphereを複製します。
シーンアウトライナにあるMaterialSphereを全て選択してください。
ue4_10.png
その状態のままAltキーを押しながらX軸方向にずらす(赤色矢印をドラッグする)とMaterialSphereが複製されます。
Toon ShaderをかけたいActorを選択した状態で、Render Custom Depth にチェックを入れればToon Shaderが適用されます。
ue4_11.png
しかし、デフォルトの状態ではあまり差は感じられないと思います。
M_CellShading_Instのパラメータの設定がされていないためです。
ue4_13.png

既にM_CellShading_Instが適用されていますので、M_CellShading_Instのパラメータを変更することで見栄えが大きく変化します。
[Closed] Cell Shading in Postprocess セルシェーディングのポストプロセスに書かれていますが、パラメータは以下の通りです。
・ToonSampleがセル塗り用のLookupテクスチャ
・Quantize Levelをシーンのカラーに掛けて、小数部分をカットし(単純なカットではなく上記ToonSampleで切り分けます)
・Modulate After Quantizeを再度掛けて、もとの明るさに戻します
・Outline Colorをベースの色に掛けてアウトラインの色にします
・Outline Thicknessでアウトラインの太さを調整します
・Outline Sharpenessでアウトラインのシャープさを調整します
・Saturationで彩度を調整します(ゼロで彩度を調整しません)
・Saturation Offsetより明るい部分の彩度を下げ、暗い部分の彩度を上げます
試しにアウトラインの太さを3に変更してみました。
アウトラインがくっきりと表示されている事がわかります。
ue4_14.png

Unreal Engine 4でもToon Shaderは簡単に使用できますので、ぜひ試してみてください!
見栄えが大きく変化しますよ!

明日はkurisaka_konabeさんのUE4で Oculus Rift 展示です。
よろしくお願いします。
スポンサーサイト
プロフィール

hima_zinn(新社会人になってこれから忙しくなる暇人)

Author:hima_zinn(新社会人になってこれから忙しくなる暇人)
 
メインブログを移行しました。
http://hima-zinn.hatenablog.com/

Androidプログラマー。
ゲーム、マンガ、邦楽が大好き。
好きなゲーム…大神、ベヨネッタ、428、スマブラ、バーンアウト、クレタク、マリカー、VANQUISH、デビルメイクライ、デモンズ、ワンダと巨像、逆裁、NMH、勇なま、シレン、DiabloⅡ、ダンガンロンパ、ほか多数。
好きなゲーム会社はプラチナゲームズです。
好きなマンガ…イキガミ、デスノ、ONE PIECE、ハガレン、アライブ、GANTZ、エヴァ、バクマン、ONE OUTS、ほか多数。

最新記事
カテゴリ
最新コメント
最新トラックバック
月別アーカイブ
検索フォーム
カウンター
カレンダー
04 | 2017/05 | 06
- 1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31 - - -
RSSリンクの表示
リンク
QRコード
QR
ブロとも申請フォーム

この人とブロともになる