Embed Size (px)
Citation preview
#ue4fest
Unreal Engineを使用した商用タイトルでのノンフォトリアルレンダリング（NPR）事例
田中達大
ソレイユ株式会社
#ue4fest
このスライドについて
このスライドは2017/10/08に開催された
UNREAL FEST EAST 2017
の講演で使用したスライドを公開用に一部修正したものです。
#ue4fest
自己紹介
名前：田中達大
ソレイユ株式会社 シニアソフトウェアエンジニアhttp://www.soleilgamestudios.com/
２８年ほどゲームプログラマーをやっている古参プログラマー。
いろいろやってきましたが、ここ１０年くらいはグラフィック関係がメインになっています。
現在は複数のプロジェクトの描画関連、エンジン関連を担当しています。
#ue4fest
このセッションについて
ソレイユ株式会社では、UE4で複数のタイトルの開発を行っています。
それらのタイトルのいくつかはNPR（ノンフォトリアルレンダリング）で作成されています。
よく「UE4はNPRは苦手」と言われますが、必ずしもそうでは無いと感じています。
このセッションでは、複数のNPRタイトルを手掛けた経験から、UE4でのNPRについてお話させていただきます。
特に特定のプロジェクトの事例という事ではなく、総合的な話として聞いていただければと思います。
#ue4fest
このセッションについて
とは言え、UE4の機能だけでは実用的なNPRは難しい面があります。なので、弊社ではUE4に独自の拡張を行い、NPRを実現しています。
拡張はわりとピンポイントなので、そこだけ手を加えてしまえばUE4でも実用的なNPR表現が可能です。
#ue4fest
アジェンダ
• フォトリアルとノンフォトリアル
• ノンフォトリアルレンダリング（NPR)とは
• セルシェーディング
• 拡散反射
• UE4を拡張しての実践NPR
• NPRの影表現
• 輪郭線
• おまけ
#ue4fest
フォトリアルレンダリングとノンフォトリアルレンダリング
違いを簡単に押さえておきましょう。
#ue4fest
フォトリアルレンダリング
実写に近い画像表現。
現実の光のふるまいをシミュレーションする物理ベースレンダリング(PBR)が一般的。
カメラによる映像を再現するレンズシミュレーションも含まれます。被写界深度やレンズフレアなど。
レンダリング方程式を根底に、エネルギー保存則に従うのが基本。
現実のパラメーターや撮影した写真から作成したテクスチャを使用することで実写っぽい画が比較的簡単に出せる、正しく作れば、時間や天候の変化など、環境が変化しても妥当性のあるレンダリングが実現できます。
#ue4fest
フォトリアルレンダリング
本来UE4が得意とするレンダリング。
PBRに対応したマテリアルが用意されており、少ないパラメーターで写実的なマテリアルが簡単に作れます。
• カラー（色）
• ノーマル（法線）
• ラフネス（表面の粗さ）
• スペキュラ（反射率）
• メタリック（金属度）
これらを正しく設定すれば望む質感を得られます。
#ue4fest
フォトリアルレンダリング
https://www.epicgames.com/paragon/en-US/home© 2017, Epic Games, Inc. Epic Games, Paragon, Unreal, Unreal Engine 4, UE4, and their respective logos are trademarks or registered trademarks of Epic Games, Inc. in the United
States of America and elsewhere. All rights reserved. © The “PS” Family logo is a registered trademark and “PS4” is a trademark of Sony Interactive Entertainment Inc.
物理ベースレンダリングの代表例として。Epic GamesのPARAGONは石や金属などだけでなく、肌や髪の毛や眼の表現などもUE4のマテリアルで作成されています。
#ue4fest
ノンフォトリアルレンダリング
フォトリアルに対してのノンフォトリアル。
たとえば・・・
・アニメーションのようなセルシェーディング
・水彩画のような絵画的表現
・海外アニメーション（カートゥーン）のような表現
・海外CGアニメーションのような表現
・ポスタリゼーションなどのイラスト的な表現
・独自の世界観を表現したい
#ue4fest
ノンフォトリアルレンダリング
https://www.epicgames.com/fortnite/en-US/home© 2017, Epic Games, Inc. Epic, Epic Games, the Epic Games logo, Fortnite, the Fortnite logo, Unreal, Unreal Engine 4 and UE4 are trademarks or registered trademarks of Epic Games, Inc. in the United States of America and elsewhere. All rights reserved.
Epic GamesのFOTNITEはNPRと言ってよいかと思います。写実的というよりは、アメリカのCGアニメーションのようなテイストです。アセットの作り方とライティングでアニメぽさを引き出しているのだと思います。
#ue4fest
ノンフォトリアルレンダリング
UE4のNPRタイトルとしてはABZÛなんかが有名ですね。
NPRらしい鮮やかな色使いと幻想的な画作りが素晴らしい。
http://www.abzugame.com/Developed by GIANT SQUID. © 2015 Published by 505 Games. All rights reserved.
#ue4fest
ノンフォトリアルレンダリング
RiMEもNPRなUE4タイトルです。
ファンタジー的な世界観にはフォトリアルよりもよく馴染むと思います。
http://www.tequilaworks.com/en/projects/rime/RiME © 2017 Tequila Works. All rights reserved.
#ue4fest
セルシェーディング
NPRとしての代表的な例としてセルシェーディングを取り上げます。
多くのNPR表現も基礎の部分はセルシェーディングの延長だったりします。
#ue4fest
セルシェーディング
日本のアニメーションのようなレンダリング。
主に明るい部分と影の部分を２色で塗り分ける。
塗り分けの境界はパッキリと。
セル＝セルロイド。昔は透明なセルロイドの板に着色し、背景画の上に重ねて撮影していたことに由来。
現在はデジタルで画をつくりますが、おおまかなテイストはセル時代を基準にしてると思っています。
３Dモデルをセルシェーディングでレンダリングして作成しているアニメーションも増えてきています。
#ue4fest
セルシェーディング
ゲームでも割りと昔から使われています。
PS2時代のタイトルとか
この時代に使われていたテクニックも今とそんなに変わりません。
ガンパレード・オーケストラ PlayStation 2©2005 Sony Computer Entertainment Inc./ BANDAI・BANDAI VISUAL
http://www.jp.playstation.com/software/title/scps15104.html
実は僕が関わったタイトルで一番古いセルシェーディングを使用したタイトルです。シェーディング部分の実装は僕ではありませんでしたが。調べたらまだ公式サイトがあったので例として。
#ue4fest
拡散反射
セルシェーディングの話をする前に、CGにおける拡散反射の話をします。
それほど難しい話ではありませんし、CGの基礎の基礎です。
#ue4fest
拡散反射
CGにおける光源計算の最も単純で基礎になる部分です。
光があたった物体の表面の色と明るさを表すのが拡散反射です。
物体表面の法線と光源の方向の内積が物体表面の明るさに相当します。
光源に向いた面ほど明るく、違う方向を向いている面ほど暗くなります。
#ue4fest
拡散反射
光の方向
法線
法線は物体の表面から垂直な方向です。この方向が光の方向に近いほど明るくなります。
#ue4fest
ベクトルの内積はとっても重要
このセッションの半分は内積でできています。
#ue4fest
拡散反射
物体の表面の明るさの近似として最も良く使用される数式は
N：法線のベクトル
L：光源方向のベクトル
表面の明るさ＝ N dot L です。
dotは内積です。ふたつの単位ベクトル（長さが１のベクトル）の内積はベクトル間の角度を表します。
角度と言っても度数ではなく、0～180度を1から-1に割り当てたものです。1の場合はふたつのベクトルは同じ方向を向いており、-1なら正反対です。
0の場合はふたつのベクトルの角度が90度。
#ue4fest
拡散反射
法線と光源の方向が同じということは、光の影響を１００％受けるので、明るさは最大。９０度より大きいということは、光が当たっていないので影響を受けないと考えます。
どんな複雑な物体でも法線と光源方向の内積を求めるだけという大変お手軽なモデルです。
N dot Lによる拡散反射はランバート反射と呼ばれています。
実際には物体表面の微細な凹凸がとか、物体内部で散乱した光がとかそう単純では無いのですが、その辺は今回は触れません。
あと、拡散反射以外の鏡面反射（スペキュラ）なども今回は割愛します。
#ue4fest
拡散反射
初代プレイステーションや、NINTENDO64といった初期の3Dゲーム機のCGはほぼこのN dot Lで明暗が作られているといっても過言ではありません。
N dot Lだけでスフィアをシェーディングするとこんな感じです。
間接光が無いので影は真っ暗。PS2くらいまではこれにハーフベクトルのスペキュラを加えてテクスチャマッピングしたものがほとんどで、影の部分には環境色として特定の色を加えてました。
#ue4fest
拡散反射
NPRの第一歩は、このN dot Lの結果に手を加えること。
多くのNPRでもやはり光と影は無視できません。
基礎となるセルシェーディングでは、光の当たり方で徐々に変化する明るさを明と暗の2色に単純化します。
具体的にはN dot Lの結果を0以上は全て１、0未満は全て0として扱うことで明るいところと暗いところを２値化します。
白い部分と黒い部分をそれぞれ明色と影色で塗り分ければ、初歩的なセルシェーディングの出来上がりです。
#ue4fest
拡散反射
アニメーションでは暗い色を何段階かにわけて塗り分けることがあります。２影、３影などと言ったりします。
この場合は、例えば0.2以上は明色、0.1以上は１影、0.1未満は２影といった感じで段階を付けて塗り分けたりします。
明色から影までは同じ階調だけど、影はグラデーションで徐々に暗くなって行くなど、工夫次第で様々な表現が可能です。
とは言え、基本はN dot Lです。
#ue4fest
拡散反射
ここでひとつ覚えておいて欲しいのは、N dot Lの結果は線形では無いということ。
さきほど角度を表すと言いましたが、この数値はcosθの結果に相当します。
つまりコサインカーブの縦軸です。
光源との角度が大きくなると急激に暗くなります。
#ue4fest
拡散反射
ということで話を戻しますと、本来滑らかに輝度が変化する物体表面の拡散反射を一定値で２色に塗り分けることで、基本となるセルシェーディングが実現できます。
少しグラデーションをつけたり、２色の境界をなめらかにしたり、もっと多くの段影を入れたり、いろいろ工夫できますが、それらも基本的にはN dot Lから産まれるコサインカーブを元にして作られます。
#ue4fest
UE4を拡張しての実践NPR
では、実際にUE4の拡散反射を拡張してNPRを実装してみた話に入ります
#ue4fest
UE4を拡張しての実践NPR
拡散反射の計算の結果に手を加えることでNPRが実現できることを説明しましたが、UE4で光源計算を行っている部分はエンジン内部にあり、プラグインやプロジェクトコードで変更することはできません。
Unlitなマテリアルのエミシッブを使用したり、ポストプロセスで再計算したりと、UE4上でセルシェーディングをする手法はありますが、エンジンの描画機能をフルに使えない制約があり、パフォーマンス面からも実際のゲームに使用するにはちょっと難しい面があります。
なので、ここからはエンジンに改造を加え、NPR表現を実現したお話です。
#ue4fest
UE4を拡張しての実践NPR
改造の方針
• なるべく少ない変更に留める
• 既存の機能をなるべく残す
• NPRマテリアルをマテリアルノードで作成できるようにする
以上を踏まえて、UE4のマテリアルノードのシェーディングモデルを拡張することにしました。
Default Litの替わりにこのシェーディングモデルを選択することで、既存のPBRとは違うライティングのマテリアルを作成することができます。
#ue4fest
UE4を拡張しての実践NPR
具体的な実装項目
• N dot Lの結果をテクスチャにマッピングして明暗をコントロール
• 影色を指定する
• 影になりやすい、なりにくいをコントロールする
プロジェクトによって少し違う実装をしていますが、大筋はこんな感じです。
#ue4fest
UE4を拡張しての実践NPR
拡張すること箇条書き
• シェーディングモデルを追加するマテリアル関連のエンジンコードを拡張
• ベースパスで新規のシェーディングモデルの情報を書き込むベースパスのシェーダーコードの拡張
• ライティングパスで独自の光源計算を行うライティング関連のシェーダーコードの拡張
この３点の拡張を行うことで、UE4にNPR用のシェーディングモデルを追加することができます。
#ue4fest
拡張したシェーディングモデルの例です。
ベースカラーが明るいところの色、Shadow Colorが暗いところの色で、この2色で塗り分けるシェーダーです。
Shading Offsetで影の位置を調整。
LUT Indexでシェーディングに使用するテクスチャを選択します。
#ue4fest
UE4を拡張しての実践NPR
• サブサーフェスカラーのピンに、影色を入力
• Custom0にShading Offsetこれは鏡面反射にオフセットを加えます。キャラクターの顔のあまり影になって欲しくない部分をマスクする目的です。
• Custom1にLUT Index後述するライティングようのテクスチャの縦軸をずらして、マテリアルごとに違うシェーディングをするためのものです。
• MetallicをOutlineに変更NPRではMetallicの要素は必要ないのにで、かわりに輪郭線のコントロール情報を入力。
#ue4fest
UE4を拡張しての実践NPR
フォワードシェーディングとディファードシェーディング
UE4にはフォワードシェーディングとディファードシェーディングの２種類のレンダリングモードがあります。
それぞれを説明すると長くなるので、ここでは説明しませんが、一般にNPRはフォワードシェーディングの方がやりやすいと言われています。
しかし、NPRのプロジェクトを開始した時点ではまだフォワードシェーディングは実装されていなかったので、まずはディファードシェーディングで実装しました。
後にとあるプロジェクトがフォワードシェーディングで開発になったので、フォワードにも対応しましたが、必要な変更はわずかでした。
#ue4fest
UE4を拡張しての実践NPR
影色を指定しなくても、ベースカラーの明度を変えるだけでもセルシェーディングっぽくはなりますが、影色を「ただ暗い」ではなく、色を指定することでよりアニメっぽくしたり、独特な効果を加えることができます。
例えば、肌の色などは影色に赤みが強い色を使ったり、影色の彩度を落としたりといった工夫ができます。
また、影色部分にのみハッチングを加えたりといった効果をつくるのにも都合が良かったので、影色指定を実装してみました。
#ue4fest
UE4を拡張しての実践NPR
シェーディング用のテクスチャを用意します横方向にN dot Lの結果をマッピングします。内積の結果は1から-1なので、これをテクスチャ座標系の0から１に変換します。
縦方向には、シェーディングの結果が違うものを並べます。
テクスチャサンプル時のvを変更することで、様々なシェーディングを選択することができます。
#ue4fest
UE4を拡張しての実践NPR
縦に0から８までタイプの違うシェーディングを並べてみました。
0は通常のランバート反射。
２を選択すると、セルシェーディングです。
３は明暗の境界に少しグラデーションを入れてみました。
その他、段を増やしたり、全体にグラデーションを加えたり。
#ue4fest
UE4を拡張しての実践NPR
このテクスチャでライティングした結果です。
画像
#ue4fest
UE4を拡張しての実践NPR
先程も触れましたが、N dot Lの結果は線形変化ではないので注意しましょう。
Photoshopのグラデーションツールなどで作ることは推奨しません。
画像ツールなどで加工する場合はガンマ補正に注意。実際に必要なのはガンマ補正されていないリニアなテクスチャです。
できればプログラムでテクスチャを生成しましょう。
前ページのテクスチャはUE4エディタ上でRenderTargetにマテリアルで計算して作成したものです。
#ue4fest
こんな感じでノードを組んでベースになるシェーディング用のテクスチャを作成しています。
重要なのはここ。
cos(inUV.x * PI);
でN dot Lの0~πの範囲を出力しています。
#ue4fest
UE4を拡張しての実践NPR
テクスチャから得られるのは法線の向きと光源への向きから得られる輝度の値です。これをそのままカラーに乗算してもライティングできますが、影色を指定する場合は、明色と影色の線形補間の値として使用します。1で完全に明色、0で影色、その間は明色と影色のブレンドです。
さらに、テクスチャは４チャンネルあるので、輝度変化だけではもったいないので、他の要素も載せます。
例えばRGBに乗算色、Aに輝度値を入れたテクスチャを使用し、輝度だけでなく、微妙な色変化を加えるなど。
他にもハイライトのコントロールなどにも使えます。
#ue4fest
UE4を拡張しての実践NPR
キャラクターのシェーディングLUTの例
これはキャラクター用のシェーディングLUTの一例ですが、影に入るところでぐっと、暗くなり、その後少し明るくなります。
そして、影に入るところからちょっと赤みが出るように乗算色が入っています。
プロジェクトによって違いますが、数種類から数十種類のシェーディングタイプを選択できるようにしています。
#ue4fest
NPRの影
NPRで一番難しいのは影かもしれません
#ue4fest
NPRの影
シェーディングは出来ましたが、次に考えないといけないのは影の処理です。
レンダリングで生成される影にはいろいろあります。
• 物体表面の拡散反射の計算で光があたっていないとみなされる影（N dot Lが０以下)
• 光源を遮るほかの物体が落とす影
• 自分自身が光を遮り、自分に落とす影（セルフシャドウ）
#ue4fest
NPRの影
光源計算による影は問題無いのですが、光源を遮ることによって産まれる影が厄介です。
何が厄介かと言うと、これらの影はデプスシャドウで生成される、精度が悪い影だからです。
デプスシャドウは一旦テクスチャに投影され、複雑な計算で物体に落ちる影として描画されますが、テクスチャの解像度や、中間の計算式、深度バッファの精度など様々な要素の影響を受けます。
また、シャドウマップに描画されるのは物体の形状そのままなので、法線の影響も受けません。
#ue4fest
NPRの影
UE4に標準のスフィアを置いてみたものです。表面上にモアレのような影がみられます。シャドウアクネなどと呼ばれるアーティファクトです。
スフィアそのものは頂点間の法線が補間されて、きれいな球に見えますが、シャドウマップには形状がそのまま投影されるため、ポリゴン形状にそってアーティファクトが発生します。
#ue4fest
NPRの影
カメラをもっと寄せると、シャドウのアーティファクトが頂点の形状に出ているのが良くわかります。
#ue4fest
NPRの影
もっとわかりやすくするために、LightAttenuationバッファを抽出してみました。
シャドウマップなどからスクリーンスペースに変換されたバッファで、描画時に影として合成されるバッファです。
シャドウマップによって生成される影はいかに精度が低いかということを理解していただければと。
#ue4fest
NPRの影
拡散反射をカスタマイズして、落ち影はLightAttenuationバッファの内容を乗算してやるのがお手軽です。
しかし、この手法では影色に変化するのではなく、ただ暗くなるだけなので、影色の一貫性が失われます。
そこで、シェーダー内部で光源計算の結果とLightAttenuationバッファの値を合成しています。
具体的にはN dot Lの結果とLightAttenuationの値を比較して、より暗い方の結果を使ってテクスチャを参照します。
#ue4fest
NPRの影
NPRのシェーディングに光源を遮る事による影も反映させたもの
右のスフィアから物体に影が落ちています。地面と真ん中の物体はそれぞれ違うシェーディングテクスチャを使用しているので、影の境界や濃さに違いが出ています。
#ue4fest
NPRの影
NPRの影のもうひとつの問題。セルシェーディングなどでは、物体表面の微妙な陰影が２値化されてしまうため、全てが影に入ってしまうと、影色のみで塗りつぶされ、たいへんのっぺりしてしまいます。
これを回避するために、地面からの照り返しとして、カメラからオフセットした斜め下から擬似ライトをあてたりしています。
この疑似ライトはマテリアル内で影色にのみ乗算する形で実装されています。
また、間接光も弱めにブレンドすることで若干の陰影を出すのも効果的です。
#ue4fest
マテリアルのアンビエントオクルージョン
ちょっと脱線、マテリアルの「アンビエントオクルージョン」ピンのはなし
#ue4fest
マテリアルのアンビエントオクルージョン
マテリアルノードの「アンビエントオクルージョン」ピンですが、このピンの機能を誤解しているひとをたまに見かけます。
このピンは、「アンビエントオクルージョンを調節」するピンではなく、「アンビエントオクルージョンの結果」を入力するものです。
実際には、間接光が反映される強さを入力するピンです。
事前に計算されたアンビエントオクルージョンの値を入力することで、遮蔽されて暗くなるべきピクセルの間接光の影響を弱めるためのものと考えると良いと思います。
#ue4fest
マテリアルのアンビエントオクルージョン
なので、逆手にとってこのピンに0.2とか弱い数値をいれることで、NPRに対する間接光の強度を一律弱めることができます。
NPRの場合、間接光が強くききすぎると通常のシェーディングのように見えてしまいますが、全くなくなるとのっぺりしすぎるし、周囲と馴染まなくなるので、このピンで調節してやると良いです。
もちろんNPRのタイプにもよるのですが。
#ue4fest
マーケットプレースの「サンテンプル」をToonぽくしてみました
#ue4fest
輪郭線（アウトライン）
アニメやイラストなど、画を意識したNPRには輪郭線がつきものです。
#ue4fest
輪郭線（アウトライン）
日本のアニメに輪郭線はつきもの。
海外のNPRタイトルには輪郭線が無いものが多い。
大きく分けて２種類
• キャラなどと背景との境界の輪郭線
• キャラの鼻筋や顎、服のシワなど、同じメッシュ内の輪郭線
プロジェクトによっては背景にも輪郭線をいれています。
#ue4fest
輪郭線（アウトライン）
輪郭線のアルゴリズムはだいたい３種類
• メッシュを裏返してスケールをかけて描画
• ポストプロセスで生成
• 線をメッシュとして生成
それぞれ利点と欠点がありますし、得意不得意があります。
複数を組み合わせて使用する場合も。
#ue4fest
輪郭線（アウトライン）
メッシュを裏返してスケールをかけて描画
PS3くらいまでは輪郭線描画の主流だった。
○実装が簡単（特殊なシェーダーなどが不要）
○線の太さをコントロールしやすい
✗メッシュを２回描画する必要がある
✗顎のラインや服のしわなど、メッシュの内側の輪郭線は苦手
#ue4fest
輪郭線（アウトライン）
ポストプロセスで生成
最近はこちらが主流？
○顎のラインや服のしわなど、メッシュ内側の輪郭線も描画できる
○ピクセル単位にコントロールが可能。色を変えたり。
✗GBuffer情報を使うのでフォワードでは使えない
✗線の太さをコントロールしにくい
#ue4fest
輪郭線（アウトライン）
線をメッシュとして生成
あらかじめメッシュに輪郭線用のメッシュを仕込んでおいたり、ジオメトリシェーダ―などでプロシージャルに生成したりする
○頑張ればどんな線も作れる？
✗プロシージャルの場合は実装難易度が高い
弊社でもメッシュにしこんだラインを特定のカメラ方向の場合だけ表示するという手法を使っていたりします。
#ue4fest
ポストプロセスによる輪郭線
今回はポストプロセスによる手法を解説
マテリアルエディタだけでそれなりのものが作れます
#ue4fest
ポストプロセスによる輪郭線
輪郭線を出すには
「どういう部分に輪郭線を出したいか」
「そこにはどんな情報があるか」
を考えます。
キャラと背景の境に輪郭線を出したい->マテリアルの境界を検出する
• キャラと背景に違うシェーダーモデルを使用し、その境界を検出
• カスタムデプスやステンシルの境界を検出
#ue4fest
ポストプロセスによる輪郭線
UE4のエディタでActorを選択した場合にオレンジの縁取りが描画されますが、これは選択したActorをカスタムデプスに描画し、カスタムデプスが描画された領域とそれ以外の領域との境界を検出して、ポスト処理で描画されています。
#ue4fest
ポストプロセスによる輪郭線
顎の線に輪郭線を出したい
->顎と首の深度値の差を抽出
服の皺に輪郭線を出したい
->法線の変化が激しいところを抽出
鼻筋に輪郭線を出したい
->視点と法線が垂直に近いところを抽出
#ue4fest
ポストプロセスによる輪郭線
この中でも汎用性が高いのが「法線の変化を抽出」です。
なので、この手法について説明していきます。
法線の差というのは隣のピクセルの法線との角度がどれくらい違うかということで判断します。
これを簡単に計算する方法が、先程光源計算で出てきた、「ベクトルの内積」です。
例えば、「隣のピクセルと法線の角度が10度以上違えば輪郭線を書く」といった感じになります。
#ue4fest
ポストプロセスによる輪郭線
ところで、法線の角度が10度違うというのは実際にはどういう値になるでしょうか。
先程触れたように、単位ベクトル（長さが１のベクトル）どうしの内積の値は、ベクトル感の角度の値になります。
その値は角度をθとすると、cosθの値になります。
シェーダーでは角度をラジアン（180度=𝜋）で扱うので
cos(10/180*(3.14)) = 0.98480775…
おおよそですが、内積の値が0.985より小さければその２つのベクトルは10度以上の角度をなしていると言えます。
#ue4fest
ポストプロセスによる輪郭線
「左のピクセルと法線の角度が一定以上違う場合に黒、そうでなければ白を描く」
という単純なポストプロセスマテリアルを作成してみました。
#ue4fest
左のピクセルと法線を比較して0か1を出力する
#ue4fest 輪郭線の例
#ue4fest
ポストプロセスによる輪郭線
左のピクセルとの比較だけでもそれなりに輪郭線を抽出できています。
上下左右のピクセルとの角度を評価して濃度を変化させるなどの拡張をすれば、実用になります。
ただし、このままではカメラから遠いところには輪郭線が密集し、真っ黒になってしまいます。
そのため、距離によって拾う角度を狭めたり、サンプリングする点を減らしたり、色を薄くしたりという工夫が必要でしょう。
#ue4fest 輪郭線なし
#ue4fest 4点サンプルの輪郭線を重ねたもの
#ue4fest 4点サンプルの輪郭線のみ
#ue4fest 4点サンプルの輪郭線マテリアル
#ue4fest
ポストプロセスによる輪郭線
一例として
• キャラクターと背景で別の輪郭線アルゴリズムを使用
• 法線以外にも複数のGBuffer情報から生成
• 距離によって細く、薄くする
• 特定の状態でキャラの周囲の輪郭線の色を変える
といった機能を実装しています。
#ue4fest
その他
その他、NPRについて
#ue4fest
他にNPRのためにやったこと
• 間接光はそのまま加算するが、少し弱めにマテリアルの「アンビエントオクルージョン」で調整。キャラは弱め、背景は強めに。
• ポイントライトなども弱めに加算
• カメラに近いときはディテールを加えて手書き感を加える
• 影の中の影はIndirect Capsule Shadowの結果を抽出し、ハッチングを加えて描画
#ue4fest
その他エンジン拡張
• マテリアルパラメータコレクションの各項目に説明を追加
• マテリアルノードに「シーンの平行光源の方向」を取得するノードを追加
• ポストプロセスマテリアルのSceneTextureにLightAttenuationバッファや、ShadingModelIDの取得を追加
などなど。描画以外の機能もいろいろ拡張されています。
拡張すればするほど、エンジンのバージョンアップが面倒になります。
#ue4fest
おまけ
ポストプロセスマテリアルの最適化
#ue4fest
ポストプロセスマテリアルの最適化
輪郭線のポストプロセスが複雑になりすぎて、けっこうな負荷になっており、パフォーマンス担当氏に怒られました。
30fpsのタイトルなら許容範囲でしたが、60fpsの場合には少々重くなりすぎました。
なので、最適化して高速化するために、当初背景用とキャラ用に分かれていたポストプロセスマテリアルをシェーダーコードで書き直してみました。
#ue4fest
ポストプロセスマテリアルの最適化
キャラ用と背景用にわかれていた輪郭線のマテリアルをまとめてコードで書き直してCustomノードにつっこんだ結果
巨大なカスタムノードが誕生。中のコードは300行ほど。
ここに数式を入力します。
#ue4fest
ポストプロセスマテリアルの最適化
バカみたいに縦長のCustomノードが爆誕しましたが、描画時間が半分くらいになりました。
マテリアルノードだとピクセルごとに条件分岐で処理を並列化できなかったり、同じGBuffer情報取得が複数箇所で重複してしまったりする部分が最適化されたのが高速化につながったものと思われます。
どんなマテリアルでもコードにすれば速くなるってものでも無いですが、ポストプロセスには割りと有効かなと。
#ue4fest
ポストプロセスマテリアルの最適化
ここまで内積を推してきたので、内積の便利な使い方もちょっと
ベクトルの内積は各要素に別のベクトルの各要素を掛けて足す事です。
(x,y,z) dot (a,b,c) = x*a + y*b + z*c周囲４ピクセルとの内積の結果を(x,y,z,w)に格納して、(1,1,1,1)との内積を求めれば、４要素の和が１命令で計算できます。
(r,g,b)から輝度を求める時は、
(r,g,b) dot (0.299,0.587,0.114)で計算できます。ピクセルの輝度を求めたり、モノトーンへの変換に使えますね。
#ue4fest
ポストプロセスマテリアルの最適化
ただし、最近のGPUでは内積はGPU命令では無く、コンパイラが乗算と加算に展開するものもあるので、高速化にならないケースもあります。
この辺は対象のGPUを調べた上で実装しましょう。
#ue4fest
おまけ2
輪郭線ポストプロセスの描画順
#ue4fest
ポストプロセス輪郭線の描画順
ポストプロセスで輪郭線を描画する場合、UE4標準の描画順では問題になることがあります。
• ディストーションを使用すると、輪郭線だけ歪まずに描画される
• フォグが輪郭線にかからず、浮いてみえる
などの問題です。
これを回避するために、エンジンを拡張して、ライティング直後にもポストプロセスをかけられるようにし、輪郭線はディストーションの前にかけるようにしています。
#ue4fest
おまけ３
#ue4fest
影の境界
N dot Lで計算される物体表面の輝度は明るい方から暗い方へ一方的に変化するコサインカーブです。
ですが、この画像を見て、影に入るところにがいったん暗くなってから少し明るくなっているように見えませんか？
#ue4fest
#ue4fest
影の境界
NPRの設計をしているときに、アーティストから「この線を強調したい」と言われたことがあります。
とは言え、数式上はこんな線が出る理屈がありません。そこで描画後のバッファを検証してみましたが、
多分、眼の錯覚ですね。マッハバンドと呼ばれるものだと思います。
#ue4fest
影の境界
左のピクセルより右のピクセルが明るくなっている場合だけ白いピクセル、それ以外は黒いピクセルを出力してみました。
#ue4fest
影の境界
ただし、上から光があたっている場合、地面に近い場合は下から反射光が照り返しとしてあたるため、結果的に側面が最も光の影響を受けなくなり、暗くなる事はあるかと思います。
イラストレーターによっては、実際に視える世界を絵にする過程で、間接光の影響やマッハバンドを意識して絵にする事もあるみたいなので、意識して光と影の境界を強調するのもありかなと思います。
なので、影の境界にちょっと輝度と色の変化を加えて強調するのも面白いと思います。
#ue4fest
影の境界
なんとなくそれっぽい状況を見つけたので撮影してみました。ほぼ真上に照明があって、下からは照り返しがあるので、側面が一番暗くなっています。アーティスト的にはこういうイメージだったのかなと。
#ue4fest
まとめ
UE4でNPRはやればできる。
#ue4fest
UE4でNPR まとめ
• NPRもPBRも光と影の基礎は同じ
• 拡散反射計算を独自に行うには、エンジンの拡張が必要
• NPRを設計するときは影をどうするかも考える
• 輪郭線も重要な要素
•ベクトルの内積は便利
NPRは工夫しだいでいろいろ面白い画がつくれます。
ぜひチャレンジしてみてください。
#ue4fest
実際にNPRで作成されたゲーム画面の紹介
UNREAL FEST当日には許可を得て、開発中のゲーム画像を紹介しましたが、公開用スライドからは削除させていただきました。ご了承ください。
該当タイトル『NARUTO TO BORUTO シノビストライカー』に関しては、下記ウェブサイトご覧ください。
http://naruto-action.bn-ent.net/
