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

1.2K Views

October 19, 15

スライド概要

UE3の世代では国内でトゥーンシェーダー等ノンフォトリアルな表現が採用されたタイトルがいくつもリリースされましたが(アスラズラース、ジャイロゼッター、ロリポップ・チェーンソー、キラーイズデッド、YAIBA: ニンジャガイデン Z、ギルティギア Xrd、LORD of VERMILION III、LORD of VERMILION Arena等)、UE4では出ていません。(所謂トゥーンでないNPR的な表現のタイトルはキングダムハーツIIIやストリートファイターV、スクール オブ ラグナロク等出始めています)

ひとつにはUE4ではディファードレンダリングが採用されていて、各サーフェースの描画時にはライト情報が参照できない事に起因しています。 というお話から、その問題を解決してトゥーンシェーダーを始めとするノンフォトリアル表現をUE4で実現するための方法を紹介させていただきます。

profile-image

Unreal Engineを開発・提供しているエピック ゲームズ ジャパンによる公式アカウントです。 勉強会や配信などで行った講演資料を公開しています。 公式サイトはこちら https://www.unrealengine.com/ja/

シェア

埋め込む »CMSなどでJSが使えない場合

各ページのテキスト
1.

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

2.

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

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パート – マーザ・アニメーションプラネット様 「ハッピーフォレスト」

7.

UNREAL ENGINE 3

8.

UE3の時代 • ノンフォトリアルな表現が採用されたタイトルが いくつもリリースされました – – – – – – – アスラズラース(2012/2) ジャイロゼッター(2012/10) ロリポップ・チェーンソー(2012/6) キラーイズデッド(2013/8) YAIBA: ニンジャガイデン Z(2014/3) ギルティギア -Xrd-(2014/2) LORD of VERMILION III 及び Arena

9.

旧来のリアルタイムトゥーン表現 • 影色の塗り分け リニアなライトの影響をトゥーン用の1Dルック アップテクスチャでマッピングする実装が多い • アウトライン描画 PS2/Xbox世代では裏面を法線方向に膨らま せるアプローチが多かったかと思います

10.

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

12.

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

13.

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ディファードレンダリング(シェーディング)が 採用されていて、リアルなシーンに大量のライト ソースがある場合にはとても有用なのですが… • 各サーフェースの描画時にはライト情報が参照 できない事が、トゥーンシェーディング的には痛 いです

18.

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

19.

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

20.

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

21.

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

22.

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

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.

新たな輪郭線へのアプローチ • 目標 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点!

31.

エッジライン手法の違い ここのUの字型の凹みは ノーマルマップ エッジラインなし 法線が側面を向いている ピクセルを黒くする 法線方向にオフセットしたピクセルとの 深度差の大きいピクセルを黒くする ※違いをわかりやすくするため強めににかけています 両方を掛け合わせて利用することも可能です

32.

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

33.

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

34.

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

35.

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

36.

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

37.

輪郭線抽出+セル塗り

38.

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

39.

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

40.

UE4+トゥーンで何します? • アニメ調のゲームが制作できる! – アニメ調のゲームどんどん制作してみてください • CGアニメ制作ができる! – 3DCGからアニメを制作するような現場でも利用できます – 制作時間の短縮・試行錯誤に時間を割ける • CGアニメの世界に入るVRが制作できる! – 3DCGのアニメ用データを活用したVRコンテンツができます

41.

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

42.

Showdownデモ、NPR化

43.

水彩画調どうやってるの? • 基本はStylizedサンプル – Stylizedで使われている画用紙テクスチャを拝借 • トゥーンをかける • 紙の凹みの部分の彩度を濃く、出ている部分の彩度を薄く • 紙の凸凹に応じて明るく暗くライティング的な効果 • 紙の凹みに応じて線の太さを変化させる – 上記の彩度やライティング効果をなしで、ざらついたラインだけ 使う事も面白いと思う

44.

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

45.

拡大

46.

謝辞 • 「中野シスターズ」(http://nakasis.com/) を商用利用可能として公開いただいている 株式会社ガミング様(http://gumming.co.jp/) と関係者の皆様に感謝です。

47.

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

48.

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

49.

次にやる事、やらない事 • 実装を検討中 – ライトの影響による塗り分けOFF – スペキュラやリフレクションのOFF – セル塗り専用キャラライト • (今のところ)やる予定のない事 – 法線をいじって影を出にくくする • DCCツールで法線を調整したほうが意図通りに調整できる • ギルティギアXrdの本村さんとGOTETZさんによる SoftImage向けUser Normal Translatorを使おう!

50.

その他のNPR (WIP) • ハッチング – 昨年のバージョンには入っているのですが、もう少し使いやすく したいなと思っています • 漫画調(スクリーントーン) – こちらの昨年のバージョンには入っていましたが、同じくもう少 し使いやすくと思っています • 油絵調 – キャンバスの下地に、塗り分けをして、さらにエンボス?

51.

Q&A ありがとうございました! – ご質問がありましたらどうぞ。 UE4のご活用いつもありがとうございます! 今後ともご支援ご鞭撻よろしくお願いいたします~