アンリアルエンジン4で ノンフォトリアル描画しよう！@UNREAL FEST 2015 YOKOHAMA
•Als PPTX, PDF herunterladen•
41 gefällt mir•35,752 views
UE3の世代では国内でトゥーンシェーダー等ノンフォトリアルな表現が採用されたタイトルがいくつもリリースされましたが（アスラズラース、ジャイロゼッター、ロリポップ・チェーンソー、キラーイズデッド、YAIBA: ニンジャガイデン Z、ギルティギア Xrd、LORD of VERMILION III、LORD of VERMILION Arena等）、UE4では出ていません。（所謂トゥーンでないNPR的な表現のタイトルはキングダムハーツIIIやストリートファイターV、スクール オブ ラグナロク等出始めています） ひとつにはUE4ではディファードレンダリングが採用されていて、各サーフェースの描画時にはライト情報が参照できない事に起因しています。 というお話から、その問題を解決してトゥーンシェーダーを始めとするノンフォトリアル表現をUE4で実現するための方法を紹介させていただきます。
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Mehr von エピック・ゲームズ・ジャパン Epic Games Japan
Mehr von エピック・ゲームズ・ジャパン Epic Games Japan (20)
アンリアルエンジン4で ノンフォトリアル描画しよう！@UNREAL FEST 2015 YOKOHAMA
- 1. Jun Shimoda // Epic Games Japan Unreal Fest 2015 Yokohama アンリアルエンジン4で ノンフォトリアル描画しよう！ 写真撮影もちろんOKです（シャッター音は消してくださいね） #UnrealFest2015
- 3. ノンフォトリアル描画って何？ • 写実的（フォトリアリスティック）ではない描画 – 略称NPR (Non Photorealistic Rendering) • 有名なところでは – トゥーンシェーダー（Toon Shader） （別名セルルックシェーダー（Cel Look Shader）） • SIGGRAPH等では様々なNPR表現が見られる – 水彩画風、油絵風、etc.
- 4. トゥーンレンダリングって何？ • 3DCGをアニメやマンガ調のレンダリング – トゥーンシェーディングやセルルックシェーディングとも – 近年は一般的なアニメーションでも利用される事が多い • 2009年頃から「プリキュア」シリーズのエンデイングは 3DCGのトゥーンレンダリング • 近年では「蒼き鋼のアルペジオ」や「シドニアの騎士」 などが有名
- 5. リアルとノンリアル：絵画の歴史 • 写真の発明以前、絵画の世界ではいかにリ アルに描くかが追求された時代がありました • 写真が発明され、リアルの追求に終止符が 打たれます • 写真の普及後、リアルな写真とは異なる表現 が発展します、抽象絵画等
- 6. UE4のフォトリアリスティックレンダリング • UE4はフォトリアリスティックなレンダリングは得 意です • CG業界でも今までプリレンダーが使われていた ような所にリアルタイムレンダーのUE4の採用が 始まっています。 – デジタル・フロンティア様 TVドラマ版「デスノート」のCGパート – マーザ・アニメーションプラネット様 「ハッピーフォレスト」
- 8. UE3の時代 • ノンフォトリアルな表現が採用されたタイトルが いくつもリリースされました – アスラズラース（2012/2） – ジャイロゼッター（2012/10） – ロリポップ・チェーンソー（2012/6） – キラーイズデッド（2013/8） – YAIBA: ニンジャガイデン Z（2014/3） – ギルティギア -Xrd-（2014/2） – LORD of VERMILION III 及び Arena
- 10. UE3ならではの次世代トゥーン • 影色の塗り分け はこれまで通りだが、ハッチング等にも対応 • アウトライン描画 ノーマルマップが多用されるようになり、ポリ モデルのエッジライン描画だけでは役不足 • そこでUE3向けのサンプルをつくりました
- 14. 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/
- 15. UE3からUE4へ • UE3世代ではギルティギア Xrdが UE3のトゥーンを極めてしまった感があります。 • そろそろUE4に行きましょうか
- 16. UNREAL ENGINE 4
- 17. UE4ではどう？ • UE4でもやはり 「トゥーンってできるの？」と聞かれます • UE4ディファードレンダリング（シェーディング）が 採用されていて、リアルなシーンに大量のライト ソースがある場合にはとても有用なのですが… • 各サーフェースの描画時にはライト情報が参照 できない事が、トゥーンシェーディング的には痛 いです
- 20. ディファードレンダリングとは（1） • いったんシーンの全体の色や法線情報を最 初に複数のGバッファに描画し（次のフェーズ でシーンに対してライティング） ※DirectX 9以降で導入されたMRT（Multi Render Target）により現実的に利用できるレベルになった
- 21. ディファードレンダリングとは（2） • foreach (ライト群) foreach (シーン Width*Height) RenderTarget += (シーン法 線 ・ ライトベクタ)*ライトカラー*シーン色
- 24. どんな手法で実現してたの？ • ポストプロセスマテリアル（Blendables） – 法線が側面方向を向いている面を黒く描画 – リニアなライトの当たり具合を段階化して面を塗り分け • あれっ？ライトの情報ないんじゃないの？ – ないです。 • モデルの描画時にないだけではなく • ポストプロセスの処理時にもありません
- 25. 面の塗り分け • ライトの当たり具合を段階化 – ポストプロセス内で 最終イメージ ・ Normalize(ベースカラー)＝ライトの当たり具合 – なんで割り算じゃなくて内積なの？（特にライトがカラーの場合割り算 でカラー値を導出できた方がよくない？） • UE4の場合、リフレクションのイメージ（＆スペキュラ）が結構乗っ ています • ベースカラーのベクトル上から逸脱したカラー成分をリフレクショ ン（＆スペキュラ）として抜き出したい • 最終イメージ - ((最終イメージ ・ Normalize(ベースカラー))*ベース カラー)＝リフレクション（＆スペキュラ）
- 26. 昨年のバージョンの問題 • 制御がしずらい – シーンの明るさに合わせた、セル塗りの制御がしづらい – ハッチング・トーン処理がデフォルトで入っていて外しづらい • エッジラインの表現が法線ベースのものだった – きちんと輪郭線が出せない場合があった – 稜線（クリース線）に対応できなかった • ポストプロセス処理なので重め – モバイルにも対応できない（Tegra K1以上は例外的に対応可）
- 27. デモ • TPSテンプレート • マチネ（MatineeFight） • Infiltratorデモ（時間があれば）
- 28. 昨年の問題点を解消！ • 自動露出変化への対応 （ダイナミックな光源変化に対応） • 輪郭線への対応 • 稜線への対応 • ノーマルマップの凹凸にも線が乗せられる
- 29. 輪郭線考察 • 旧来の方法考察 – 裏面の法線方向への押し出し • 面の向き（法線の向き）による線の太さの変化が良い • ポリゴンのエッジにしか輪郭線が出ない – ポストプロセスでSobelやPrewittエッジ検出 • Sobel operatorとPrewitt operatorはwikipediaにも情報あります • UE3(UDK)のポストプロセスでのSobel実装（8点サンプリング） • UE4のStylizedサンプル （4点サンプリング） • 綺麗だが、スクリーンスペースで処理され線の太さが一定 – サンプリングも少ないと嬉しいよね
- 30. 新たな輪郭線へのアプローチ • 目標 – 線の太さの変化 – 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)
- 32. 稜線（クリース線）は？ • 輪郭線はSobel等で深度差で検出できますが 法線の変化で稜線が検出可能です • ということは輪郭線のアプローチが使えな い？ – 法線の逆方向にオフセットした1点との法線の変化量の 大きい場合に稜線とみなす
- 36. ハイエンド3DCG(オリジナル)
- 37. 輪郭線抽出＋セル塗り
- 39. ベースカラー × (輪郭抽出+セル塗り) + 半透明
- 40. UE4+トゥーンで何します？ • アニメ調のゲームが制作できる！ – アニメ調のゲームどんどん制作してみてください • CGアニメ制作ができる！ – 3DCGからアニメを制作するような現場でも利用できます – 制作時間の短縮・試行錯誤に時間を割ける • CGアニメの世界に入るVRが制作できる！ – 3DCGのアニメ用データを活用したVRコンテンツができます
- 41. トゥーン+VR • VRを普及させるためには、リアルコンテンツだけ だと弱いですよね。 • アニメ系コンテンツも普及の強力な後押しになる はずですが、単純に立体視できるだけのアニメ では弱いです • そこで必要になるのがハイエンドCGのリアルタイ ムトゥーン化ソリューション
- 42. Showdownデモ、NPR化
- 43. 水彩画調どうやってるの？ • 基本はStylizedサンプル – Stylizedで使われている画用紙テクスチャを拝借 • トゥーンをかける • 紙の凹みの部分の彩度を濃く、出ている部分の彩度を薄く • 紙の凸凹に応じて明るく暗くライティング的な効果 • 紙の凹みに応じて線の太さを変化させる – 上記の彩度やライティング効果をなしで、ざらついたラインだけ 使う事も面白いと思う
- 44. 画用紙の凹凸への濃淡と明暗
- 45. 拡大
- 47. 中野シスターズ 鷺宮なかちゃん！
- 48. 中野シスターズ 鷺宮カノちゃん！
- 49. 次にやる事、やらない事 • 実装を検討中 – ライトの影響による塗り分けOFF – スペキュラやリフレクションのOFF – セル塗り専用キャラライト • （今のところ）やる予定のない事 – 法線をいじって影を出にくくする • DCCツールで法線を調整したほうが意図通りに調整できる • ギルティギアXrdの本村さんとGOTETZさんによる SoftImage向けUser Normal Translatorを使おう！
- 50. その他のNPR (WIP) • ハッチング – 昨年のバージョンには入っているのですが、もう少し使いやすく したいなと思っています • 漫画調（スクリーントーン） – こちらの昨年のバージョンには入っていましたが、同じくもう少 し使いやすくと思っています • 油絵調 – キャンバスの下地に、塗り分けをして、さらにエンボス？
Hinweis der Redaktion
- モバイルは現在検討中
- UE4導入のメリット
- UE4導入のメリット
- UE4導入のメリット
- UE4導入のメリット
- Oculusに繋いで見せる。はい、できた！