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

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向けのサンプルをつくりました

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

12.
UE3のトゥーンサンプル
• 法線を元に計算しているので、ノーマルマップ
中の側面にも線が描かれるようにできる

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

15.
UNREAL ENGINE 4

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

35.
輪郭線抽出＋セル塗り

36.
ベースカラー（ほぼアルベドテクスチャのまんま）

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

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

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

40.
Showdownデモ、NPR化

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

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

43.
拡大

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

45.
中野シスターズ 鷺宮なかちゃん！

46.
中野シスターズ 鷺宮カノちゃん！

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

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

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