Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

31,587 views

Published on

UE3の世代では国内でトゥーンシェーダー等ノンフォトリアルな表現が採用されたタイトルがいくつもリリースされましたが(アスラズラース、ジャイロゼッター、ロリポップ・チェーンソー、キラーイズデッド、YAIBA: ニンジャガイデン Z、ギルティギア Xrd、LORD of VERMILION III、LORD of VERMILION Arena等)、UE4では出ていません。(所謂トゥーンでないNPR的な表現のタイトルはキングダムハーツIIIやストリートファイターV、スクール オブ ラグナロク等出始めています)
ひとつにはUE4ではディファードレンダリングが採用されていて、各サーフェースの描画時にはライト情報が参照できない事に起因しています。 というお話から、その問題を解決してトゥーンシェーダーを始めとするノンフォトリアル表現をUE4で実現するための方法を紹介させていただきます。

Published in: Engineering
  • Be the first to comment

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

  1. 1. Jun Shimoda // Epic Games Japan Unreal Fest 2015 Yokohama アンリアルエンジン4で ノンフォトリアル描画しよう! 写真撮影もちろんOKです(シャッター音は消してくださいね) #UnrealFest2015
  2. 2. ノンフォトリアルの基礎用語
  3. 3. ノンフォトリアル描画って何? • 写実的(フォトリアリスティック)ではない描画 – 略称NPR (Non Photorealistic Rendering) • 有名なところでは – トゥーンシェーダー(Toon Shader) (別名セルルックシェーダー(Cel Look Shader)) • SIGGRAPH等では様々なNPR表現が見られる – 水彩画風、油絵風、etc.
  4. 4. トゥーンレンダリングって何? • 3DCGをアニメやマンガ調のレンダリング – トゥーンシェーディングやセルルックシェーディングとも – 近年は一般的なアニメーションでも利用される事が多い • 2009年頃から「プリキュア」シリーズのエンデイングは 3DCGのトゥーンレンダリング • 近年では「蒼き鋼のアルペジオ」や「シドニアの騎士」 などが有名
  5. 5. リアルとノンリアル:絵画の歴史 • 写真の発明以前、絵画の世界ではいかにリ アルに描くかが追求された時代がありました • 写真が発明され、リアルの追求に終止符が 打たれます • 写真の普及後、リアルな写真とは異なる表現 が発展します、抽象絵画等
  6. 6. UE4のフォトリアリスティックレンダリング • UE4はフォトリアリスティックなレンダリングは得 意です • CG業界でも今までプリレンダーが使われていた ような所にリアルタイムレンダーのUE4の採用が 始まっています。 – デジタル・フロンティア様 TVドラマ版「デスノート」のCGパート – マーザ・アニメーションプラネット様 「ハッピーフォレスト」
  7. 7. UNREAL ENGINE 3
  8. 8. UE3の時代 • ノンフォトリアルな表現が採用されたタイトルが いくつもリリースされました – アスラズラース(2012/2) – ジャイロゼッター(2012/10) – ロリポップ・チェーンソー(2012/6) – キラーイズデッド(2013/8) – YAIBA: ニンジャガイデン Z(2014/3) – ギルティギア -Xrd-(2014/2) – LORD of VERMILION III 及び Arena
  9. 9. 旧来のリアルタイムトゥーン表現 • 影色の塗り分け リニアなライトの影響をトゥーン用の1Dルック アップテクスチャでマッピングする実装が多い • アウトライン描画 PS2/Xbox世代では裏面を法線方向に膨らま せるアプローチが多かったかと思います
  10. 10. UE3ならではの次世代トゥーン • 影色の塗り分け はこれまで通りだが、ハッチング等にも対応 • アウトライン描画 ノーマルマップが多用されるようになり、ポリ モデルのエッジライン描画だけでは役不足 • そこでUE3向けのサンプルをつくりました
  11. 11. UE3のトゥーンサンプル • 側面を向いている面を暗くするというアプロー チ(裏面用メッシュを用意すれば、裏面を法線 方向に膨らませるテクニックも可能)
  12. 12. UE3のトゥーンサンプル • 法線を元に計算しているので、ノーマルマップ 中の側面にも線が描かれるようにできる
  13. 13. 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/
  14. 14. UE3からUE4へ • UE3世代ではギルティギア Xrdが UE3のトゥーンを極めてしまった感があります。 • そろそろUE4に行きましょうか
  15. 15. UNREAL ENGINE 4
  16. 16. UE4ではどう? • UE4でもやはり 「トゥーンってできるの?」と聞かれます • UE4ディファードレンダリング(シェーディング)が 採用されていて、リアルなシーンに大量のライト ソースがある場合にはとても有用なのですが… • 各サーフェースの描画時にはライト情報が参照 できない事が、トゥーンシェーディング的には痛 いです
  17. 17. ディファードレンダリング? • ディファードレンダリングが実用的になる以前 はフォワードレンダリングという手法が使われ ていました。
  18. 18. フォワードレンダリングとは • オブジェクト毎にGPUのシェーダーにメッシュ データとライト情報を渡して描画 • 適用できるライトの数に制限
  19. 19. ディファードレンダリングとは(1) • いったんシーンの全体の色や法線情報を最 初に複数のGバッファに描画し(次のフェーズ でシーンに対してライティング) ※DirectX 9以降で導入されたMRT(Multi Render Target)により現実的に利用できるレベルになった
  20. 20. ディファードレンダリングとは(2) • foreach (ライト群) foreach (シーン Width*Height) RenderTarget += (シーン法 線 ・ ライトベクタ)*ライトカラー*シーン色
  21. 21. UE4の現状 • 昨年のアンリアルフェス2014でも実はちらっ とトゥーンの作例とサンプルコードを発表させ ていただきました • https://www.youtube.com/watch?v=oLzpDR GzSFE
  22. 22. どんな手法で実現してたの? • ポストプロセスマテリアル(Blendables) – 法線が側面方向を向いている面を黒く描画 – リニアなライトの当たり具合を段階化して面を塗り分け • あれっ?ライトの情報ないんじゃないの? – ないです。 • モデルの描画時にないだけではなく • ポストプロセスの処理時にもありません
  23. 23. 面の塗り分け • ライトの当たり具合を段階化 – ポストプロセス内で 最終イメージ ・ Normalize(ベースカラー)=ライトの当たり具合 – なんで割り算じゃなくて内積なの?(特にライトがカラーの場合割り算 でカラー値を導出できた方がよくない?) • UE4の場合、リフレクションのイメージ(&スペキュラ)が結構乗っ ています • ベースカラーのベクトル上から逸脱したカラー成分をリフレクショ ン(&スペキュラ)として抜き出したい • 最終イメージ - ((最終イメージ ・ Normalize(ベースカラー))*ベース カラー)=リフレクション(&スペキュラ)
  24. 24. 昨年のバージョンの問題 • 制御がしずらい – シーンの明るさに合わせた、セル塗りの制御がしづらい – ハッチング・トーン処理がデフォルトで入っていて外しづらい • エッジラインの表現が法線ベースのものだった – きちんと輪郭線が出せない場合があった – 稜線(クリース線)に対応できなかった • ポストプロセス処理なので重め – モバイルにも対応できない(Tegra K1以上は例外的に対応可)
  25. 25. デモ • TPSテンプレート • マチネ(MatineeFight) • Infiltratorデモ(時間があれば)
  26. 26. 昨年の問題点を解消! • 自動露出変化への対応 (ダイナミックな光源変化に対応) • 輪郭線への対応 • 稜線への対応 • ノーマルマップの凹凸にも線が乗せられる
  27. 27. 輪郭線考察 • 旧来の方法考察 – 裏面の法線方向への押し出し • 面の向き(法線の向き)による線の太さの変化が良い • ポリゴンのエッジにしか輪郭線が出ない – ポストプロセスでSobelやPrewittエッジ検出 • Sobel operatorとPrewitt operatorはwikipediaにも情報あります • UE3(UDK)のポストプロセスでのSobel実装(8点サンプリング) • UE4のStylizedサンプル (4点サンプリング) • 綺麗だが、スクリーンスペースで処理され線の太さが一定 – サンプリングも少ないと嬉しいよね
  28. 28. 新たな輪郭線へのアプローチ • 目標 – 線の太さの変化 – 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)
  29. 29. エッジライン手法の違い エッジラインなし 法線が側面を向いている ピクセルを黒くする ※違いをわかりやすくするため強めににかけています 法線方向にオフセットしたピクセルとの 深度差の大きいピクセルを黒くする 両方を掛け合わせて利用することも可能です ここのUの字型の凹みは ノーマルマップ
  30. 30. 稜線(クリース線)は? • 輪郭線はSobel等で深度差で検出できますが 法線の変化で稜線が検出可能です • ということは輪郭線のアプローチが使えな い? – 法線の逆方向にオフセットした1点との法線の変化量の 大きい場合に稜線とみなす
  31. 31. 輪郭線と稜線まとめ(1) • 輪郭線も稜線も法線方向へオフセットした1点 のサンプリングのみで良好な結果が得られる • 法線方向にオフセットするので、法線が側面 を向いている程サンプリングポイントが遠くな る(線が太くなる、法線の向きで線の太さが変 化する)
  32. 32. 輪郭線と稜線まとめ(2) • 法線に線の太さを想定した値を掛ければ、全 体的にもっと線を太くしたり細くしたりできる
  33. 33. リアルタイム3DCGアニメーション • ハイエンド3DCGをリアルタイムにトゥーン化で きるソリューションの完成!
  34. 34. ハイエンド3DCG(オリジナル)
  35. 35. 輪郭線抽出+セル塗り
  36. 36. ベースカラー(ほぼアルベドテクスチャのまんま)
  37. 37. ベースカラー × (輪郭抽出+セル塗り) + 半透明
  38. 38. UE4+トゥーンで何します? • アニメ調のゲームが制作できる! – アニメ調のゲームどんどん制作してみてください • CGアニメ制作ができる! – 3DCGからアニメを制作するような現場でも利用できます – 制作時間の短縮・試行錯誤に時間を割ける • CGアニメの世界に入るVRが制作できる! – 3DCGのアニメ用データを活用したVRコンテンツができます
  39. 39. トゥーン+VR • VRを普及させるためには、リアルコンテンツだけ だと弱いですよね。 • アニメ系コンテンツも普及の強力な後押しになる はずですが、単純に立体視できるだけのアニメ では弱いです • そこで必要になるのがハイエンドCGのリアルタイ ムトゥーン化ソリューション
  40. 40. Showdownデモ、NPR化
  41. 41. 水彩画調どうやってるの? • 基本はStylizedサンプル – Stylizedで使われている画用紙テクスチャを拝借 • トゥーンをかける • 紙の凹みの部分の彩度を濃く、出ている部分の彩度を薄く • 紙の凸凹に応じて明るく暗くライティング的な効果 • 紙の凹みに応じて線の太さを変化させる – 上記の彩度やライティング効果をなしで、ざらついたラインだけ 使う事も面白いと思う
  42. 42. 画用紙の凹凸への濃淡と明暗
  43. 43. 拡大
  44. 44. 謝辞 • 「中野シスターズ」(http://nakasis.com/) を商用利用可能として公開いただいている 株式会社ガミング様(http://gumming.co.jp/) と関係者の皆様に感謝です。
  45. 45. 中野シスターズ 鷺宮なかちゃん!
  46. 46. 中野シスターズ 鷺宮カノちゃん!
  47. 47. 次にやる事、やらない事 • 実装を検討中 – ライトの影響による塗り分けOFF – スペキュラやリフレクションのOFF – セル塗り専用キャラライト • (今のところ)やる予定のない事 – 法線をいじって影を出にくくする • DCCツールで法線を調整したほうが意図通りに調整できる • ギルティギアXrdの本村さんとGOTETZさんによる SoftImage向けUser Normal Translatorを使おう!
  48. 48. その他のNPR (WIP) • ハッチング – 昨年のバージョンには入っているのですが、もう少し使いやすく したいなと思っています • 漫画調(スクリーントーン) – こちらの昨年のバージョンには入っていましたが、同じくもう少 し使いやすくと思っています • 油絵調 – キャンバスの下地に、塗り分けをして、さらにエンボス?
  49. 49. Q&A ありがとうございました! – ご質問がありましたらどうぞ。 UE4のご活用いつもありがとうございます! 今後ともご支援ご鞭撻よろしくお願いいたします~

×