Jun Shimoda // Epic Games Japan

Unreal Fest 2015 Yokohama

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

よう！

写真撮影もちろん OK です（シャッター音は消してくださいね）#UnrealFest2015

ノンフォトリアルの基礎用語

ノンフォトリアル描画って何？• 写実的（フォトリアリスティック）ではない描画– 略称 NPR (Non Photorealistic Rendering)

• 有名なところでは– トゥーンシェーダー（ Toon Shader ）（別名セルルックシェーダー（ Cel Look Shader ））

• SIGGRAPH 等では様々な NPR 表現が見られる– 水彩画風、油絵風、 etc.

トゥーンレンダリングって何？• 3DCG をアニメやマンガ調のレンダリング

– トゥーンシェーディングやセルルックシェーディングとも– 近年は一般的なアニメーションでも利用される事が多い

• 2009 年頃から「プリキュア」シリーズのエンデイングは3DCG のトゥーンレンダリング

• 近年では「蒼き鋼のアルペジオ」や「シドニアの騎士」などが有名

リアルとノンリアル：絵画の歴史• 写真の発明以前、絵画の世界ではいかにリアルに描くかが追求された時代がありました• 写真が発明され、リアルの追求に終止符が打たれます• 写真の普及後、リアルな写真とは異なる表現が発展します、抽象絵画等

UE4 のフォトリアリスティックレンダリング• UE4 はフォトリアリスティックなレンダリングは得意です• CG 業界でも今までプリレンダーが使われていたような所にリアルタイムレンダーの UE4 の採用が始まっています。

– デジタル・フロンティア様TV ドラマ版「デスノート」の CG パート

– マーザ・アニメーションプラネット様「ハッピーフォレスト」

UNREAL ENGINE 3

UE3 の時代• ノンフォトリアルな表現が採用されたタイトルがいくつもリリースされました

– アスラズラース（ 2012/2 ）– ジャイロゼッター（ 2012/10 ）– ロリポップ・チェーンソー（ 2012/6 ）– キラーイズデッド（ 2013/8 ）– YAIBA: ニンジャガイデン Z （ 2014/3 ）– ギルティギア -Xrd- （ 2014/2 ）– LORD of VERMILION III 及び Arena

旧来のリアルタイムトゥーン表現• 影色の塗り分けリニアなライトの影響をトゥーン用の 1Dルックアップテクスチャでマッピングする実装が多い• アウトライン描画

PS2/Xbox 世代では裏面を法線方向に膨らませるアプローチが多かったかと思います

UE3 ならではの次世代トゥーン• 影色の塗り分けはこれまで通りだが、ハッチング等にも対応• アウトライン描画ノーマルマップが多用されるようになり、ポリモデルのエッジライン描画だけでは役不足• そこで UE3 向けのサンプルをつくりました

UE3 のトゥーンサンプル• 側面を向いている面を暗くするというアプローチ（裏面用メッシュを用意すれば、裏面を法線方向に膨らませるテクニックも可能）

UE3 のトゥーンサンプル• 法線を元に計算しているので、ノーマルマップ中の側面にも線が描かれるようにできる

UE3 の常識を覆したトゥーン• ギルティギア Xrd

– 我々の想像を超えていました！– ぜひ GDC 15 の GDC Vault を見てみてください。

• GuiltyGear Xrd’s Art Style:The X Factor Between 2D and 3Dhttp://www.gdcvault.com/play/1022031/GuiltyGearXrd-s-Art-Style-The

– 西川善司さんの日本語記事もあります。• http://www.4gamer.net/games/216/

G021678/20150317055/

UE3 から UE4 へ• UE3 世代ではギルティギア Xrd が

UE3 のトゥーンを極めてしまった感があります。• そろそろ UE4 に行きましょうか

UNREAL ENGINE 4

UE4 ではどう？• UE4 でもやはり「トゥーンってできるの？」と聞かれます• UE4 ディファードレンダリング（シェーディング）が採用されていて、リアルなシーンに大量のライトソースがある場合にはとても有用なのですが…• 各サーフェースの描画時にはライト情報が参照できない事が、トゥーンシェーディング的には痛いです

ディファードレンダリング？• ディファードレンダリングが実用的になる以前はフォワードレンダリングという手法が使われていました。

フォワードレンダリングとは• オブジェクト毎に GPU のシェーダーにメッシュデータとライト情報を渡して描画• 適用できるライトの数に制限

ディファードレンダリングとは（ 1 ）• いったんシーンの全体の色や法線情報を最初に複数の Gバッファに描画し（次のフェーズでシーンに対してライティング）

※DirectX 9 以降で導入された MRT （ Multi Render Target ）により現実的に利用できるレベルになった

ディファードレンダリングとは（ 2 ）• foreach ( ライト群 ) foreach ( シーン

Width*Height) RenderTarget += ( シーン法線 ・ ライトベクタ )* ライトカラー * シーン色

UE4 の現状• 昨年のアンリアルフェス 2014 でも実はちらっとトゥーンの作例とサンプルコードを発表させていただきました• https://www.youtube.com/watch?

v=oLzpDRGzSFE

どんな手法で実現してたの？• ポストプロセスマテリアル（ Blendables ）

– 法線が側面方向を向いている面を黒く描画– リニアなライトの当たり具合を段階化して面を塗り分け

• あれっ？ライトの情報ないんじゃないの？– ないです。

• モデルの描画時にないだけではなく• ポストプロセスの処理時にもありません

面の塗り分け• ライトの当たり具合を段階化

– ポストプロセス内で最終イメージ ・ Normalize(ベースカラー )＝ライトの当たり具合– なんで割り算じゃなくて内積なの？（特にライトがカラーの場合割り算でカラー値を導出できた方がよくない？）

• UE4 の場合、リフレクションのイメージ（＆スペキュラ）が結構乗っています• ベースカラーのベクトル上から逸脱したカラー成分をリフレクション（＆スペキュラ）として抜き出したい• 最終イメージ - ((最終イメージ ・ Normalize(ベースカラー ))*ベースカラー )＝リフレクション（＆スペキュラ）

昨年のバージョンの問題• 制御がしずらい

– シーンの明るさに合わせた、セル塗りの制御がしづらい– ハッチング・トーン処理がデフォルトで入っていて外しづらい

• エッジラインの表現が法線ベースのものだった– きちんと輪郭線が出せない場合があった– 稜線（クリース線）に対応できなかった

• ポストプロセス処理なので重め– モバイルにも対応できない（ Tegra K1 以上は例外的に対応可）

デモ• TPS テンプレート• マチネ（ MatineeFight ）• Infiltrator デモ（時間があれば）

昨年の問題点を解消！• 自動露出変化への対応（ダイナミックな光源変化に対応）• 輪郭線への対応• 稜線への対応• ノーマルマップの凹凸にも線が乗せられる

輪郭線考察• 旧来の方法考察

– 裏面の法線方向への押し出し• 面の向き（法線の向き）による線の太さの変化が良い• ポリゴンのエッジにしか輪郭線が出ない

– ポストプロセスで Sobel や Prewitt エッジ検出• Sobel operator と Prewitt operator は wikipedia にも情報あります• UE3(UDK) のポストプロセスでの Sobel 実装（ 8点サンプリング）• UE4 の Stylized サンプル （ 4点サンプリング）• 綺麗だが、スクリーンスペースで処理され線の太さが一定

– サンプリングも少ないと嬉しいよね

新たな輪郭線へのアプローチ• 目標

– 線の太さの変化– 8点や 4点のサンプリングからサンプリング数を減らす

• どうやって実現する？– もし 1点だけサンプリングするとしたらどこが良い？– 面が傾いているとしたらどこをサンプリングする？

• 法線方向にオフセットした 1点！

P(-1,-1) P(0,-1) P(+1,-1)

P(-1,0) P(0,0) P(+1,0)

P(-1,+1) P(0,+1) P(+1,+1)

エッジライン手法の違い

エッジラインなし 法線が側面を向いているピクセルを黒くする

※ 違いをわかりやすくするため強めににかけています

法線方向にオフセットしたピクセルとの深度差の大きいピクセルを黒くする

両方を掛け合わせて利用することも可能です

ここの U の字型の凹みはノーマルマップ

稜線（クリース線）は？• 輪郭線は Sobel 等で深度差で検出できますが法線の変化で稜線が検出可能です• ということは輪郭線のアプローチが使えない？– 法線の逆方向にオフセットした 1点との法線の変化量の大きい場合に稜線とみなす

輪郭線と稜線まとめ（ 1 ）• 輪郭線も稜線も法線方向へオフセットした 1点のサンプリングのみで良好な結果が得られる• 法線方向にオフセットするので、法線が側面を向いている程サンプリングポイントが遠くなる（線が太くなる、法線の向きで線の太さが変化する）

輪郭線と稜線まとめ（ 2 ）• 法線に線の太さを想定した値を掛ければ、全体的にもっと線を太くしたり細くしたりできる

リアルタイム 3DCG アニメーション• ハイエンド 3DCG をリアルタイムにトゥーン化できるソリューションの完成！

ハイエンド 3DCG( オリジナル )

輪郭線抽出＋セル塗り

ベースカラー（ほぼアルベドテクスチャのまんま）

ベースカラー × ( 輪郭抽出 + セル塗り ) + 半透明

UE4+ トゥーンで何します？• アニメ調のゲームが制作できる！

– アニメ調のゲームどんどん制作してみてください• CG アニメ制作ができる！

– 3DCG からアニメを制作するような現場でも利用できます– 制作時間の短縮・試行錯誤に時間を割ける

• CG アニメの世界に入る VR が制作できる！– 3DCG のアニメ用データを活用した VRコンテンツができます

トゥーン +VR• VR を普及させるためには、リアルコンテンツだけだと弱いですよね。• アニメ系コンテンツも普及の強力な後押しになるはずですが、単純に立体視できるだけのアニメでは弱いです• そこで必要になるのがハイエンド CG のリアルタイムトゥーン化ソリューション

Showdown デモ、 NPR化

水彩画調どうやってるの？• 基本は Stylized サンプル

– Stylized で使われている画用紙テクスチャを拝借• トゥーンをかける• 紙の凹みの部分の彩度を濃く、出ている部分の彩度を薄く• 紙の凸凹に応じて明るく暗くライティング的な効果• 紙の凹みに応じて線の太さを変化させる

– 上記の彩度やライティング効果をなしで、ざらついたラインだけ使う事も面白いと思う

画用紙の凹凸への濃淡と明暗

拡大

謝辞• 「中野シスターズ」（ http://

nakasis.com/ ）を商用利用可能として公開いただいている株式会社ガミング様（ http://gumming.co.jp/ ）と関係者の皆様に感謝です。

中野シスターズ 鷺宮なかちゃん！

中野シスターズ 鷺宮カノちゃん！

次にやる事、やらない事• 実装を検討中

– ライトの影響による塗り分け OFF– スペキュラやリフレクションの OFF– セル塗り専用キャラライト

• （今のところ）やる予定のない事– 法線をいじって影を出にくくする

• DCCツールで法線を調整したほうが意図通りに調整できる• ギルティギア Xrd の本村さんと GOTETZ さんによる

SoftImage 向け User Normal Translator を使おう！

その他の NPR (WIP)• ハッチング

– 昨年のバージョンには入っているのですが、もう少し使いやすくしたいなと思っています• 漫画調（スクリーントーン）

– こちらの昨年のバージョンには入っていましたが、同じくもう少し使いやすくと思っています• 油絵調

– キャンバスの下地に、塗り分けをして、さらにエンボス？

Q&Aありがとうございました！– ご質問がありましたらどうぞ。

UE4 のご活用いつもありがとうございます！今後ともご支援ご鞭撻よろしくお願いいたします～