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

151.8K Views

May 12, 22

ue4

スライド概要

UNREAL FEST EXTREME 2020 WINTERで講演した際のスライドです。

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

profile-image

関西を拠点にUnreal Engineを専門とするゲームスタジオ、Indie-us Games代表&クリエイター。

シェア

またはPlayer版

埋め込む »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