Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×

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

Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Nächste SlideShare
[UE4] Material Effect
[UE4] Material Effect
Wird geladen in …3
×

Hier ansehen

1 von 51 Anzeige

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

Herunterladen, um offline zu lesen

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

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

Anzeige
Anzeige

Weitere Verwandte Inhalte

Weitere von エピック・ゲームズ・ジャパン Epic Games Japan (20)

Aktuellste (20)

Anzeige

アンリアルエンジン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のご活用いつもありがとうございます! 今後ともご支援ご鞭撻よろしくお願いいたします~

Hinweis der Redaktion

  • モバイルは現在検討中
  • UE4導入のメリット
  • UE4導入のメリット
  • UE4導入のメリット
  • UE4導入のメリット
  • Oculusに繋いで見せる。はい、できた!

×