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.

Unreal Engineを使用した商用タイトルで のノンフォトリアルレンダリング(NPR)事例

5,277 views

Published on

UNREAL FEST EAST 2017で発表したスライドの公開用バージョン。
ソレイユ株式会社

  • Be the first to comment

Unreal Engineを使用した商用タイトルで のノンフォトリアルレンダリング(NPR)事例

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

×