アンリアルエンジン4で ノンフォトリアル描画しよう！@UNREAL FEST 2015 YOKOHAMA

写真撮影もちろんOKです（シャッター音は消してくださいね） #UnrealFest2015 アンリアルエンジン4で ノンフォトリアル描画しよう！ Unreal Fest 2015 Yokohama Jun Shimoda // Epic Games Japan

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

ノンフォトリアル描画って何？ • 写実的（フォトリアリスティック）ではない描画 – 略称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 3D http://www.gdcvault.com/play/1022031/GuiltyGearXrd -s-Art-Style-The – 西川善司さんの日本語記事もあります。 • http://www.4gamer.net/games/216/G021678/2015 0317055/

UE3からUE4へ • UE3世代ではギルティギア Xrdが UE3のトゥーンを極めてしまった感があります。 • そろそろUE4に行きましょうか

UNREAL ENGINE 4

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

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

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

ディファードレンダリングとは • いったんシーンの全体の色や法線情報を最 初に複数のGバッファに描画し（次のフェーズ でシーンに対してライティング） ※DirectX 9以降で導入されたMRT（Multi Render Target）により現実的に利用できるレベルになった

ディファードレンダリングとは • foreach (ライト群) foreach (シーン Width*Height) RenderTarget += (シーン法 線 ・ ライトベクタ)*ライトカラー*シーン色

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

どんな手法で実現してたの？ • ポストプロセスマテリアル（Blendables） – 法線が側面方向を向いている面を黒く描画 – リニアなライトの当たり具合を段階化して面を塗り分け • あれっ？ライトの情報ないんじゃないの？ – ないです。 • モデルの描画時にないだけではなく • ポストプロセスの処理時にもありません

面の塗り分け • ライトの当たり具合を段階化 – ポストプロセス内で 最終イメージ ・ Normalize(ベースカラー)＝ライトの当たり具合 – なんで割り算じゃなくて内積なの？（特にライトがカラーの場合割り算 でカラー値を導出できた方がよくない？） • UE4の場合、リフレクションのイメージ（＆スペキュラ）が結構乗っ ています • ベースカラーのベクトル上から逸脱したカラー成分をリフレクショ ン（＆スペキュラ）として抜き出したい • 最終イメージ - ((最終イメージ ・ Normalize(ベースカラー))*ベース カラー)＝リフレクション（＆スペキュラ）

昨年のバージョンの問題 • 制御がしずらい – シーンの明るさに合わせた、セル塗りの制御がしづらい – ハッチング・トーン処理がデフォルトで入っていて外しづらい • エッジラインの表現が法線ベースのものだった – きちんと輪郭線が出せない場合があった – 稜線（クリース線）に対応できなかった • ポストプロセス処理なので重め – モバイルにも対応できない（Tegra K1以上は例外的に対応可）

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

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

輪郭線考察 • 旧来の方法考察 – 裏面の法線方向への押し出し • 面の向き（法線の向き）による線の太さの変化が良い • ポリゴンのエッジにしか輪郭線が出ない – ポストプロセスでSobelやPrewittエッジ検出 • Sobel operatorとPrewitt operatorはwikipediaにも情報あります • UE3(UDK)のポストプロセスでのSobel実装（8点サンプリング） • UE4のStylizedサンプル （4点サンプリング） • 綺麗だが、スクリーンスペースで処理され線の太さが一定 – サンプリングも少ないと嬉しいよね

新たな輪郭線へのアプローチ • 目標 P(-1,-1) P(0,-1) P(+1,-1) P(-1,0) P(0,0) P(+1,0) P P – 線の太さの変化 P – 8点や4点のサンプリングからサンプリング数を減らす (-1,+1) (0,+1) (+1,+1) • どうやって実現する？ – もし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のご活用いつもありがとうございます！ 今後ともご支援ご鞭撻よろしくお願いいたします～