NPRキャラクターレンダリング総結集!今こそ更なる高みを目指して【UNREAL FEST EXTREME 2020 WINTER】

12.1K Views

November 16, 20

スライド概要

講演アーカイブ:https://www.youtube.com/playlist?list=PLr_Cbd4sUDTzxG9a4TrU0Rg6-ApCJBCsI

講演内容:
昨今あらゆるゲームやアニメにおいて、NPR、セルシェーダー、トゥーンレンダリングなどが使われるようになりましたが、この講演ではそれらの技術を総結集し、可能な限り高みを目指した表現についてをぜひ共有したいと思います。UE4で実現可能なリッチな表現を活かしたカッコいいキャラクターを目指したい方にぜひ聞いていただきたいです。

講演者:
中村 匡彦(株式会社Indie-us Games 代表取締役)


UNREAL FEST EXTREME 2020 WINTER 再生リスト
https://www.youtube.com/playlist?list=PLr_Cbd4sUDTzxG9a4TrU0Rg6-ApCJBCsI

https://unrealengine.jp/unrealfest/
#ue4fest

profile-image

エピック ゲームズ ジャパン

@EpicGamesJapan

スライド一覧

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

シェア

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

各ページのテキスト
1.

NPRキャラクターレンダリング総結集! 今こそ更なる高みを目指して 株式会社Indie-us Games 代表&クリエイター 中村 匡彦 #ue4fest

2.

自己紹介 中村 匡彦 株式会社Indie-us Games 代表&クリエイター 自称Unreal Engineの何でも屋。 Unreal Fest登壇過去最多。 初の自社開発インディーゲーム TrinitySを絶賛開発中! #ue4fest

3.

アジェンダ • • • • • • • • NPRとは? エンジン改造 ベクトル マスク ライティング アウトライン ポストエフェクト 総括 #ue4fest

4.

NPRとは? #ue4fest

5.

NPRって? Non-Photorealistic Rendering(非写実的レンダリング) 漫画、イラスト、スケッチ、セルアニメ、テクニカルイラストレーション、 水彩、油絵、水墨画、日本画、点描、ドット絵など 現実では起こり得ないような表現。 厳密にはセルシェーダー、トゥーンレンダリングなどもNPRの一種。 #ue4fest

6.

セルシェーダー、トゥーンレンダリング これらの用語も似た意味で使われやすい。 セルシェーダー(セルアニメ調) トゥーンレンダリング(セルアニメ調以外も含む) この講演ではこれら全てを総称してNPRと呼ぶことにする。 とはいえ、厳密な定義はないのでこれが正解でもない。 #ue4fest

7.

まずは出来上がったものを ご覧ください #ue4fest

8.

#ue4fest

9.

#ue4fest

10.

今回制作したキャラ 名前:齋藤胡桃 元々はマーケットプレイスで 販売するために作ったキャラ。 今回のために再デザインし、 全て作り直した。 #ue4fest

11.

2Dでのキャラデザイン #ue4fest

12.

当初の目標 単純なセルシェーダーではなく、イラスト表現に 使われる手法を色々と取り入れたい。 イラストのタッチも取り入れるために試行錯誤。 ライティングが映えるような暗い空間で コントラストをハッキリとさせてカッコいい表現にしたい。 #ue4fest

13.

エンジン改造 #ue4fest

14.

エンジン改造する? なにかあればエンジン改造すれば実現可能。 でも本当にそのエンジン改造って必要? 実は改造しなくても実現できるのでは? エンジン改造のメリットデメリットを考える。 #ue4fest

15.

エンジン改造のメリット シェーディングモデルを独自に定義できる。 UE4既存ライティングに組み込み可能。 ネットにも拡張方法についての記事があるので比較的容易。 『UE4のShading Modelを拡張する』 https://qiita.com/dgtanaka/items/41f96ef2090820035609 #ue4fest

16.

エンジン改造でNPRを実現したもの https://forums.unrealengine.com/community/work-inprogress/41288-toon-shading-model #ue4fest

17.

エンジン改造でNPRを実現したもの https://forums.unrealengine.com/developmentdiscussion/rendering/1537277-toon-shading-modelsstylized-rendering-experiments #ue4fest

18.

エンジン改造でNPRを実現したもの https://forums.unrealengine.com/developmentdiscussion/rendering/1704696-wip-anime-toon-stylizedshading-model #ue4fest

19.

エンジン改造のデメリット エンジンの共有が大変。(50GB以上のデータ) C++コードとHLSLをメンテナンスする必要がある。 ノウハウが独自のものとなりがちで、公開する場合には不向き。 内向けはともかく、外向けであれば避けたい。 #ue4fest

20.

本プロジェクトにおいて エンジン改造は一切なし! 全てUE4標準の機能のみで実現できる手法を用いている。 多少強引なところはあるものの、概ね問題はなし。 出来る範囲で良い表現を目指す! 今回は全てUE4.25.4で作成。 #ue4fest

21.

ベクトル #ue4fest

22.

ベクトルの活用 様々な表現を実現するために、BPとマテリアルを駆使して ベクトルから表現を作り出す。 最も基本的な考え方は以下の記事を参考に。 『誰でもわかるセルシェーダー入門』 https://unrealengine.hatenablog.com/entry/2019/12/01/000735 #ue4fest

23.

ベクトルと内積 ベクトルと内積は非常に密接な関係。 考え方を理解するとベクトルと そのなす角から表現を加えたい 領域を制御できるようになる。 内積は表現を作る上で 最も重要な『ツール』となる! 『誰でもわかるセルシェーダー入門』から抜粋 #ue4fest

24.

ライトベクトル ディレクショナルライトのRotationを使う。 マテリアルにも『Light Vector』ノードがあるが これはフォワードオンリーなのでBPから 取得する方法が一般的。 Material Parameter Collectionで ベクトルを保存しておく。 #ue4fest

25.

ライトベクトル 保存したパラメーターをマテリアルから参照し、 あとは頂点法線などで内積をとることで 最も簡単な光源の当たった位置を マテリアルで取得することができる。 #ue4fest

26.

カメラベクトル ワールド空間上でメッシュの面法線から カメラ方向へのベクトルを取得。 フレネル表現などを作りやすい。 #ue4fest

27.

反射ベクトル ワールド空間上でのメッシュの面法線に対してカメラベクトル が反射するベクトルを取得。 環境マッピングなどで使われる。 #ue4fest

28.

マスク #ue4fest

29.

マスクの作成 ベクトルと内積で プロシージャルな領域を作成。 完全なグレースケールで 影響範囲を決めるようにする。 #ue4fest

30.

マスク基本機能 大体どのマスクにもある基本機能。 • オフセット • スムーズ化 • IDマップ(テクスチャーのバイアス) #ue4fest

31.

オフセット マスク位置をオフセットして 調整する機能。 あくまでも単純な調整向き。 基本的に単なる加算。 #ue4fest

32.

スムーズ化 マスク領域の境界に対して グラデーションをつけて 柔らかくする。 計算は単なる割り算な ことが多い。 #ue4fest

33.

IDマップ(テクスチャーのバイアス) 1枚のテクスチャー内に マスクのバイアスをつけるための グレースケール値を書き込む。 RGBAごとに違うマスクを持つ。 #ue4fest

34.

チャンネルごとにルールを作る IDマップのチャンネルごとにルールを持たせる。 例えば『1.0』が入る時は必ずAddされる。 『0.5~0.0』はマスクの強さを表す。 マスクが必ず入ってほしい部分、 マスクが入ってほしくない部分を作る。 鼻の上に必ずハイライトが入ってほしい #ue4fest

35.

マスクの種類 現状用意しているマスク • • • • シャドウマスク ハイライトマスク リムライトマスク パターンマスク #ue4fest

36.

シャドウマスク 一番基本的なマスク。 単純な陰影付けを行う。 ディレクショナルライトと スカイライトの色と強さを 拾えるようにもなっている。 #ue4fest

37.

シャドウマスク ノード基本構成 MF_SmoothFloorは SmoothCeilのFloor版 #ue4fest

38.

シャドウマスクのみの状態 #ue4fest

39.

ハイライトマスク 艶や光沢感を出すマスク。 反射ベクトルを用いて計算。 最終的にはエミッシブカラーへ 入力することになるので、 ブルームの影響も受ける。 #ue4fest

40.

ハイライトマスク ノード基本構成 SmoothStepで細かく グラデーションを制御 #ue4fest

41.

ハイライトマスクのみの状態 #ue4fest

42.

リムライトマスク 縁や輪郭を抽出するマスク。 カメラベクトルを用いて計算。 最終的にはエミッシブカラーへ。 ブルームの影響も受ける。 立体感が強い印象になる。 #ue4fest

43.

リムライトマスク ノード基本構成 #ue4fest

44.

リムライトマスクのみの状態 #ue4fest

45.

パターンマスク シャドウとは別にパターンのある テクスチャーを陰影とさせる。 カメラベクトルで計算し、 シャドウマスクと違う印象を 与えられるようにする。 #ue4fest

46.

パターンマスク ノード基本構成 #ue4fest

47.

パターンテクスチャーの適用 ハッチングやドットのパターンをタイリング #ue4fest

48.

パターンマスクのみの状態 #ue4fest

49.

ライティング #ue4fest

50.

ライティングの問題 NPRキャラクターのレンダリングは 影をある程度制御したい。 強すぎる陰影は印象がかなり悪い。 よく使う手はシェーディングモデルを 『Unlit』にすることで完全にフラットな 状態にすることができるが… Default Litでレンダリングしてみた状態 #ue4fest

51.

Unlitの問題 ライトの影響を受けないので 暗い空間で浮く!!!! #ue4fest

52.

考えられる対策 1. エンジン改造をして、独自シェーディングモデルで制御 → 理想ではあるが、メンテナンスコストが高すぎる 2. ライティング計算をBPやマテリアルで全て独自にやる → 可能だが、非常に複雑かつ、制限も多い なんとか『普通』のやり方で出来ないか… #ue4fest

53.

Subsurfaceの活用 『Subsurface』シェーディングモデルを試す。 ライトの影響を受けるが、光がある程度貫通するため 強い陰影が出づらい! 『Preintegrated Skin』 『Subsurface Profile』 も試したが、微妙な結果に。 #ue4fest

54.

Subsurfaceでライティング ライティングの影響を しっかりと受ける #ue4fest

55.

Subsurfaceの問題 ダイレクトな光を受けると メッシュを貫通してしまう。 ライトの上部にメッシュを 配置しても光の影響を受ける。 Subsurfaceの仕様。 #ue4fest

56.

Subsurfaceの問題 ライトベクトルが 上方を向くと透過するライト の存在がなくて上手く陰影の 計算ができなくなる。 別のライトを置くなどの サポートが必要。 #ue4fest

57.

ライトの影響を受けるマスク Subsurfaceへと入力するのは、 シャドウマスクとパターンマスクのみ。 ハイライトマスクとリムライトマスクは Emissive Colorへと入力するので ライトの影響を受けることがない。 #ue4fest

58.

ライトの調整 UE4の組み込みライトを そのまま使うとマスクで 作ったシャドウとは 印象が異なってしまう。 もう少しシャープにしたい。 #ue4fest

59.

ライトの調整 ライトのプロパティ設定 『Shadow Bias』を『1.0』 『Shadow Slope Bias』を『0.0』 『Shadow Filter Sharpe』を『1.0』 シャープな陰影に! #ue4fest

60.

メッシュの法線 顔面は特に陰影が重要。 ツール上でメッシュの法線を 編集し、一定方向を向くよう にしておく。 #ue4fest

61.

法線編集比較 左は未調整 右は調整済み #ue4fest

62.

参考資料 ARC SYSTEM WORKSさんの アニメ調キャラモデリング TIPSが非常に参考になる! 法線についてだけではなく、 考え方そのものが非常に有用。 © ARC SYSTEM WORKS GUILTY GEAR Xrd開発スタッフが送るアニメ調キャラモデリングTIPS https://www.slideshare.net/ASW_Yokohama/guilty-gear-xrdtips-124324946 #ue4fest

63.

目のライティング 強いハイライトは単にUnlitな マテリアルを割り当て。 眼球には擬似的な異方性反射 を取り入れて、少しだけ立体 感のあるハイライトを追加。 ライトの向きでハイライトが 動くようになっている。 #ue4fest

64.

アウトライン #ue4fest

65.

アウトラインは法線反転のメッシュ 今回のアウトラインはポストプロセスではなく、 最もシンプルな手法の法線反転したメッシュ。 今回はBlenderで反転メッシュを作成し、スケルタルメッシュに 法線反転メッシュが含まれた状態。 『誰でもわかるアウトライン入門』 https://unrealengine.hatenablog.com/entry/2019/12/05/000603 #ue4fest

66.

アウトライン基本機能 • • • • • 頂点カラーベースの太さマスク アウトラインカラーマスク カメラ距離ベースの自動調整 カメラFOVによる自動調整 テクスチャーインライン #ue4fest

67.

頂点カラーベースの太さマスク 頂点カラー上に太さを示す数値を入れる。 UE4のビューポート上で、 『Show』→『Advanced』→ 『Vertex Color』で頂点カラーを表示 0.1未満になると、アウトラインが Opacity Maskにより描画もオフにする。 #ue4fest

68.

頂点カラーベースの太さマスク 髪の毛先部分に小さいマスクが入っている状態。 #ue4fest

69.

頂点カラー太さマスクのノード構成 結果を『World Position Offset』へ接続 #ue4fest

70.

アウトラインカラーマスク メッシュUVとベースカラーテクスチャーに 別途アウトラインカラーを指定することで アウトライン自体への色付けが可能。 イラスト的なニュアンスで言うと色トレス。 色は彩度が低めの方が認識しやすい。 #ue4fest

71.

反転メッシュ切り替え比較 ノードはたったこれだけ。 #ue4fest

72.

カメラ距離ベースの自動調整 カメラから距離が離れると、アウトラインも小さくなってしまう。 アウトラインの存在感を少しでも出すためにカメラが離れても アウトラインを自動調整するようになっている。 マテリアル上で『Absolute World Position』を使って、 ローカル空間をカメラ空間に変換し、オフセット量を計算。 再度カメラ空間からワールド空間に変換してから 『World Position Offset』に渡すようになっている。 #ue4fest

73.

カメラ距離調整 視認性の比較 元の状態 自動調整なし 自動調整あり #ue4fest

74.

カメラ距離自動調整 基本ノード構成 ローカル → カメラ → ワールド変換は含まれていない #ue4fest

75.

カメラFOVの自動調整 カメラFOVも距離と同じように変更すると、 アウトラインの太さが変動する。 カットシーン作成の際にはFOVの変更が多い。 基本的な考え方はカメラ距離調整と同じ。 調整係数にFOVを考慮するようにするだけ。 #ue4fest

76.

FOV自動調整 視認性の比較 FOV 90 FOV30 自動調整なし FOV30 自動調整あり #ue4fest

77.

FOV自動調整 基本ノード構成 FOVはCustomノード #ue4fest

78.

テクスチャーインライン 正確にはアウトラインではなく、単なるマ スク。専用にテクスチャーを用意。 アウトラインでは表現しきれないような 描画線を出したい部分で使う。 テクスチャーに描くのとは違い、 色や強さを調整可能になっている。 RGBAチャンネルごとに指定が可能。 #ue4fest

79.

テクスチャーインライン 基本ノード構成 この先のLerpで合成 #ue4fest

80.

ポストエフェクト #ue4fest

81.

ポストエフェクトの調整 NPRな効果を生み出すポストプロセスエフェクト。 • • • • パラフィン効果 Diffusionフィルター Kuwaharaフィルター その他 #ue4fest

82.

パラフィン効果 セルアニメの撮影用語。 色の着いたパラフィン紙を セルの絵の上に重ねることで 光の照り返しや暗闇を 表現する特殊効果。 パラフィン紙 #ue4fest

83.

UE4上で疑似パラフィン効果 ポストプロセスの『Dirt Mask』に 画面をマスクするテクスチャーを 指定することで擬似的に再現可能。 テクスチャーはモノクロでOK。 #ue4fest

84.

パラフィン効果ありとなし比較 #ue4fest

85.

Diffusionフィルター カメラの写真用語。 光源や反射光を拡散させて ぼんやりとした印象を与える。 ハイコントラストな絵には 非常に効果的。 #ue4fest

86.

Diffusionフィルター ポストプロセスマテリアルによる実装は、 以下のもんしょさんのツイートの実装方法が参考に。 ただし、UE4.25現在では一部カスタムノードの書き換え必要あり。 https://twitter.com/monsho1977/status/670634806124920832 エンジン改造が可能なら更にハイクオリティな実装も。 『エンジンを拡張してポストプロセスを実装する PS編』 http://monsho.blog63.fc2.com/blog-entry-209.html #ue4fest

87.

Diffusionフィルターありとなし比較 #ue4fest

88.

Kuwaharaフィルター 日本人の桑原道義さんが 考案した平滑化フィルター。 油絵のような効果が出せる。 アニメの背景美術っぽい絵を 作れるように。 https://www.raywenderlich.com/100-unreal-engine-4-paint-filtertutorial#toc-anchor-004 #ue4fest

89.

Kuwaharaフィルター 検索するとロジックは色々でてくる。 『Kuwahara filterとかいう明らかに日本人の名前な画像フィルターに出会い、試してみたらすごかったので紹介する。』 https://qiita.com/Cartelet/items/5c1c012c132be3aa9608 UE4上での実装は以下の記事で完全に解説されている。 『Unreal Engine 4 Paint Filter Tutorial』 https://www.raywenderlich.com/100-unreal-engine-4-paint-filtertutorial#toc-anchor-004 #ue4fest

90.

Kuwaharaフィルターありとなし比較 #ue4fest

91.

その他のポストエフェクト • • • • • • • • • Cinematic DoF(被写界深度) Lens Flares(円形レンズフレア) Bloom Exposure Chromatic Aberration(色収差) Vignette Intensity(ビネット) Color Grading LUT Motion Blur etc … #ue4fest

92.

総括 #ue4fest

93.

エンジン改造なしでも十分 今のUE4の標準機能は非常に充実しており、 NPRキャラクターレンダリングのための機能は十分! ポストプロセスマテリアルだけでもNPR表現は可能だが、 キャラクター個別のカスタマイズが必要になった際には、 サーフェースマテリアルの方がより柔軟。 大規模であれば併用していくことも大事。 #ue4fest

94.

モデルが良いことも大前提 マテリアルだけでも不十分! 当然ながらモデル側のクオリティが 低ければどれだけマテリアル側で 工夫しても限界が来る。 マテリアル作成者、モデル作成者が しっかりと連携をとることが大事! #ue4fest

95.

#ue4fest

96.

ご視聴ありがとうございました! #ue4fest