Próximos SlideShares
NPRキャラクターレンダリング総結集！今こそ更なる高みを目指して | UNREAL FEST EXTREME 2020 WINTER
- 1. #ue4fest#ue4fest NPRキャラクターレンダリング総結集！ 今こそ更なる高みを目指して 株式会社Indie-us Games 代表&クリエイター 中村 匡彦
- 2. #ue4fest#ue4fest 中村 匡彦 株式会社Indie-us Games 代表&クリエイター 自称Unreal Engineの何でも屋。 Unreal Fest登壇過去最多。 初の自社開発インディーゲーム TrinitySを絶賛開発中！ 自己紹介
- 3. #ue4fest#ue4fest • NPRとは？ • エンジン改造 • ベクトル • マスク • ライティング • アウトライン • ポストエフェクト • 総括 アジェンダ
- 4. #ue4fest#ue4fest NPRとは？
- 5. #ue4fest#ue4fest Non-Photorealistic Rendering（非写実的レンダリング） 漫画、イラスト、スケッチ、セルアニメ、テクニカルイラストレーション、 水彩、油絵、水墨画、日本画、点描、ドット絵など 現実では起こり得ないような表現。 厳密にはセルシェーダー、トゥーンレンダリングなどもNPRの一種。 NPRって？
- 6. #ue4fest#ue4fest これらの用語も似た意味で使われやすい。 セルシェーダー（セルアニメ調） トゥーンレンダリング（セルアニメ調以外も含む） この講演ではこれら全てを総称してNPRと呼ぶことにする。 とはいえ、厳密な定義はないのでこれが正解でもない。 セルシェーダー、トゥーンレンダリング
- 7. #ue4fest#ue4fest まずは出来上がったものを ご覧ください
- 8. #ue4fest#ue4fest
- 9. #ue4fest#ue4fest
- 10. #ue4fest#ue4fest 名前:齋藤胡桃 元々はマーケットプレイスで 販売するために作ったキャラ。 今回のために再デザインし、 全て作り直した。 今回制作したキャラ
- 11. #ue4fest#ue4fest 2Dでのキャラデザイン
- 12. #ue4fest#ue4fest 単純なセルシェーダーではなく、イラスト表現に 使われる手法を色々と取り入れたい。 イラストのタッチも取り入れるために試行錯誤。 ライティングが映えるような暗い空間で コントラストをハッキリとさせてカッコいい表現にしたい。 当初の目標
- 13. #ue4fest#ue4fest エンジン改造
- 14. #ue4fest#ue4fest なにかあればエンジン改造すれば実現可能。 でも本当にそのエンジン改造って必要？ 実は改造しなくても実現できるのでは？ エンジン改造のメリットデメリットを考える。 エンジン改造する？
- 15. #ue4fest#ue4fest シェーディングモデルを独自に定義できる。 UE4既存ライティングに組み込み可能。 ネットにも拡張方法についての記事があるので比較的容易。 『UE4のShading Modelを拡張する』 https://qiita.com/dgtanaka/items/41f96ef2090820035609 エンジン改造のメリット
- 16. #ue4fest#ue4fest https://forums.unrealengine.com/community/work-in- progress/41288-toon-shading-model エンジン改造でNPRを実現したもの
- 17. #ue4fest#ue4fest https://forums.unrealengine.com/development- discussion/rendering/1537277-toon-shading-models- stylized-rendering-experiments エンジン改造でNPRを実現したもの
- 18. #ue4fest#ue4fest https://forums.unrealengine.com/development- discussion/rendering/1704696-wip-anime-toon-stylized- shading-model エンジン改造でNPRを実現したもの
- 19. #ue4fest#ue4fest エンジンの共有が大変。（50GB以上のデータ） C++コードとHLSLをメンテナンスする必要がある。 ノウハウが独自のものとなりがちで、公開する場合には不向き。 内向けはともかく、外向けであれば避けたい。 エンジン改造のデメリット
- 20. #ue4fest#ue4fest エンジン改造は一切なし！ 全てUE4標準の機能のみで実現できる手法を用いている。 多少強引なところはあるものの、概ね問題はなし。 出来る範囲で良い表現を目指す！ 今回は全てUE4.25.4で作成。 本プロジェクトにおいて
- 21. #ue4fest#ue4fest ベクトル
- 22. #ue4fest#ue4fest 様々な表現を実現するために、BPとマテリアルを駆使して ベクトルから表現を作り出す。 最も基本的な考え方は以下の記事を参考に。 『誰でもわかるセルシェーダー入門』 https://unrealengine.hatenablog.com/entry/2019/12/01/000735 ベクトルの活用
- 23. #ue4fest#ue4fest ベクトルと内積は非常に密接な関係。 考え方を理解するとベクトルと そのなす角から表現を加えたい 領域を制御できるようになる。 内積は表現を作る上で 最も重要な『ツール』となる！ ベクトルと内積 『誰でもわかるセルシェーダー入門』から抜粋
- 24. #ue4fest#ue4fest ディレクショナルライトのRotationを使う。 マテリアルにも『Light Vector』ノードがあるが これはフォワードオンリーなのでBPから 取得する方法が一般的。 Material Parameter Collectionで ベクトルを保存しておく。 ライトベクトル
- 25. #ue4fest#ue4fest 保存したパラメーターをマテリアルから参照し、 あとは頂点法線などで内積をとることで 最も簡単な光源の当たった位置を マテリアルで取得することができる。 ライトベクトル
- 26. #ue4fest#ue4fest ワールド空間上でメッシュの面法線から カメラ方向へのベクトルを取得。 フレネル表現などを作りやすい。 カメラベクトル
- 27. #ue4fest#ue4fest ワールド空間上でのメッシュの面法線に対してカメラベクトル が反射するベクトルを取得。 環境マッピングなどで使われる。 反射ベクトル
- 28. #ue4fest#ue4fest マスク
- 29. #ue4fest#ue4fest ベクトルと内積で プロシージャルな領域を作成。 完全なグレースケールで 影響範囲を決めるようにする。 マスクの作成
- 30. #ue4fest#ue4fest 大体どのマスクにもある基本機能。 • オフセット • スムーズ化 • IDマップ（テクスチャーのバイアス） マスク基本機能
- 31. #ue4fest#ue4fest マスク位置をオフセットして 調整する機能。 あくまでも単純な調整向き。 基本的に単なる加算。 オフセット
- 32. #ue4fest#ue4fest マスク領域の境界に対して グラデーションをつけて 柔らかくする。 計算は単なる割り算な ことが多い。 スムーズ化
- 33. #ue4fest#ue4fest 1枚のテクスチャー内に マスクのバイアスをつけるための グレースケール値を書き込む。 RGBAごとに違うマスクを持つ。 IDマップ（テクスチャーのバイアス）
- 34. #ue4fest#ue4fest IDマップのチャンネルごとにルールを持たせる。 例えば『1.0』が入る時は必ずAddされる。 『0.5～0.0』はマスクの強さを表す。 マスクが必ず入ってほしい部分、 マスクが入ってほしくない部分を作る。 チャンネルごとにルールを作る 鼻の上に必ずハイライトが入ってほしい
- 35. #ue4fest#ue4fest 現状用意しているマスク • シャドウマスク • ハイライトマスク • リムライトマスク • パターンマスク マスクの種類
- 36. #ue4fest#ue4fest 一番基本的なマスク。 単純な陰影付けを行う。 ディレクショナルライトと スカイライトの色と強さを 拾えるようにもなっている。 シャドウマスク
- 37. #ue4fest#ue4fest シャドウマスク ノード基本構成 MF_SmoothFloorは SmoothCeilのFloor版
- 38. #ue4fest#ue4fest シャドウマスクのみの状態
- 39. #ue4fest#ue4fest 艶や光沢感を出すマスク。 反射ベクトルを用いて計算。 最終的にはエミッシブカラーへ 入力することになるので、 ブルームの影響も受ける。 ハイライトマスク
- 40. #ue4fest#ue4fest ハイライトマスク ノード基本構成 SmoothStepで細かく グラデーションを制御
- 41. #ue4fest#ue4fest ハイライトマスクのみの状態
- 42. #ue4fest#ue4fest 縁や輪郭を抽出するマスク。 カメラベクトルを用いて計算。 最終的にはエミッシブカラーへ。 ブルームの影響も受ける。 立体感が強い印象になる。 リムライトマスク
- 43. #ue4fest#ue4fest リムライトマスク ノード基本構成
- 44. #ue4fest#ue4fest リムライトマスクのみの状態
- 45. #ue4fest#ue4fest シャドウとは別にパターンのある テクスチャーを陰影とさせる。 カメラベクトルで計算し、 シャドウマスクと違う印象を 与えられるようにする。 パターンマスク
- 46. #ue4fest#ue4fest パターンマスク ノード基本構成
- 47. #ue4fest#ue4fest ハッチングやドットのパターンをタイリング パターンテクスチャーの適用
- 48. #ue4fest#ue4fest パターンマスクのみの状態
- 49. #ue4fest#ue4fest ライティング
- 50. #ue4fest#ue4fest NPRキャラクターのレンダリングは 影をある程度制御したい。 強すぎる陰影は印象がかなり悪い。 よく使う手はシェーディングモデルを 『Unlit』にすることで完全にフラットな 状態にすることができるが… ライティングの問題 Default Litでレンダリングしてみた状態
- 51. #ue4fest#ue4fest ライトの影響を受けないので 暗い空間で浮く！！！！ Unlitの問題
- 52. #ue4fest#ue4fest 1. エンジン改造をして、独自シェーディングモデルで制御 → 理想ではあるが、メンテナンスコストが高すぎる 2. ライティング計算をBPやマテリアルで全て独自にやる → 可能だが、非常に複雑かつ、制限も多い なんとか『普通』のやり方で出来ないか… 考えられる対策
- 53. #ue4fest#ue4fest 『Subsurface』シェーディングモデルを試す。 ライトの影響を受けるが、光がある程度貫通するため 強い陰影が出づらい！ 『Preintegrated Skin』 『Subsurface Profile』 も試したが、微妙な結果に。 Subsurfaceの活用
- 54. #ue4fest#ue4fest ライティングの影響を しっかりと受ける Subsurfaceでライティング
- 55. #ue4fest#ue4fest ダイレクトな光を受けると メッシュを貫通してしまう。 ライトの上部にメッシュを 配置しても光の影響を受ける。 Subsurfaceの仕様。 Subsurfaceの問題
- 56. #ue4fest#ue4fest ライトベクトルが 上方を向くと透過するライト の存在がなくて上手く陰影の 計算ができなくなる。 別のライトを置くなどの サポートが必要。 Subsurfaceの問題
- 57. #ue4fest#ue4fest Subsurfaceへと入力するのは、 シャドウマスクとパターンマスクのみ。 ハイライトマスクとリムライトマスクは Emissive Colorへと入力するので ライトの影響を受けることがない。 ライトの影響を受けるマスク
- 58. #ue4fest#ue4fest UE4の組み込みライトを そのまま使うとマスクで 作ったシャドウとは 印象が異なってしまう。 もう少しシャープにしたい。 ライトの調整
- 59. #ue4fest#ue4fest ライトのプロパティ設定 『Shadow Bias』を『1.0』 『Shadow Slope Bias』を『0.0』 『Shadow Filter Sharpe』を『1.0』 シャープな陰影に！ ライトの調整
- 60. #ue4fest#ue4fest 顔面は特に陰影が重要。 ツール上でメッシュの法線を 編集し、一定方向を向くよう にしておく。 メッシュの法線
- 61. #ue4fest#ue4fest 左は未調整 右は調整済み 法線編集比較
- 62. #ue4fest#ue4fest ARC SYSTEM WORKSさんの アニメ調キャラモデリング TIPSが非常に参考になる！ 法線についてだけではなく、 考え方そのものが非常に有用。 参考資料 GUILTY GEAR Xrd開発スタッフが送るアニメ調キャラモデリングTIPS https://www.slideshare.net/ASW_Yokohama/guilty-gear-xrdtips-124324946 © ARC SYSTEM WORKS
- 63. #ue4fest#ue4fest 強いハイライトは単にUnlitな マテリアルを割り当て。 眼球には擬似的な異方性反射 を取り入れて、少しだけ立体 感のあるハイライトを追加。 ライトの向きでハイライトが 動くようになっている。 目のライティング
- 64. #ue4fest#ue4fest アウトライン
- 65. #ue4fest#ue4fest 今回のアウトラインはポストプロセスではなく、 最もシンプルな手法の法線反転したメッシュ。 今回はBlenderで反転メッシュを作成し、スケルタルメッシュに 法線反転メッシュが含まれた状態。 『誰でもわかるアウトライン入門』 https://unrealengine.hatenablog.com/entry/2019/12/05/000603 アウトラインは法線反転のメッシュ
- 66. #ue4fest#ue4fest • 頂点カラーベースの太さマスク • アウトラインカラーマスク • カメラ距離ベースの自動調整 • カメラFOVによる自動調整 • テクスチャーインライン アウトライン基本機能
- 67. #ue4fest#ue4fest 頂点カラー上に太さを示す数値を入れる。 UE4のビューポート上で、 『Show』→『Advanced』→ 『Vertex Color』で頂点カラーを表示 0.1未満になると、アウトラインが Opacity Maskにより描画もオフにする。 頂点カラーベースの太さマスク
- 68. #ue4fest#ue4fest 髪の毛先部分に小さいマスクが入っている状態。 頂点カラーベースの太さマスク
- 69. #ue4fest#ue4fest 頂点カラー太さマスクのノード構成 結果を『World Position Offset』へ接続
- 70. #ue4fest#ue4fest メッシュUVとベースカラーテクスチャーに 別途アウトラインカラーを指定することで アウトライン自体への色付けが可能。 イラスト的なニュアンスで言うと色トレス。 色は彩度が低めの方が認識しやすい。 アウトラインカラーマスク
- 71. #ue4fest#ue4fest ノードはたったこれだけ。 反転メッシュ切り替え比較
- 72. #ue4fest#ue4fest カメラから距離が離れると、アウトラインも小さくなってしまう。 アウトラインの存在感を少しでも出すためにカメラが離れても アウトラインを自動調整するようになっている。 マテリアル上で『Absolute World Position』を使って、 ローカル空間をカメラ空間に変換し、オフセット量を計算。 再度カメラ空間からワールド空間に変換してから 『World Position Offset』に渡すようになっている。 カメラ距離ベースの自動調整
- 73. #ue4fest#ue4fest カメラ距離調整 視認性の比較 自動調整なし 自動調整あり元の状態
- 74. #ue4fest#ue4fest カメラ距離自動調整 基本ノード構成 ローカル → カメラ → ワールド変換は含まれていない
- 75. #ue4fest#ue4fest カメラFOVも距離と同じように変更すると、 アウトラインの太さが変動する。 カットシーン作成の際にはFOVの変更が多い。 基本的な考え方はカメラ距離調整と同じ。 調整係数にFOVを考慮するようにするだけ。 カメラFOVの自動調整
- 76. #ue4fest#ue4fest FOV自動調整 視認性の比較 FOV30 自動調整なし FOV30 自動調整ありFOV 90
- 77. #ue4fest#ue4fest FOV自動調整 基本ノード構成 FOVはCustomノード
- 78. #ue4fest#ue4fest 正確にはアウトラインではなく、単なるマ スク。専用にテクスチャーを用意。 アウトラインでは表現しきれないような 描画線を出したい部分で使う。 テクスチャーに描くのとは違い、 色や強さを調整可能になっている。 RGBAチャンネルごとに指定が可能。 テクスチャーインライン
- 79. #ue4fest#ue4fest テクスチャーインライン 基本ノード構成 この先のLerpで合成
- 80. #ue4fest#ue4fest ポストエフェクト
- 81. #ue4fest#ue4fest NPRな効果を生み出すポストプロセスエフェクト。 • パラフィン効果 • Diffusionフィルター • Kuwaharaフィルター • その他 ポストエフェクトの調整
- 82. #ue4fest#ue4fest セルアニメの撮影用語。 色の着いたパラフィン紙を セルの絵の上に重ねることで 光の照り返しや暗闇を 表現する特殊効果。 パラフィン効果 パラフィン紙
- 83. #ue4fest#ue4fest ポストプロセスの『Dirt Mask』に 画面をマスクするテクスチャーを 指定することで擬似的に再現可能。 テクスチャーはモノクロでOK。 UE4上で疑似パラフィン効果
- 84. #ue4fest#ue4fest パラフィン効果ありとなし比較
- 85. #ue4fest#ue4fest カメラの写真用語。 光源や反射光を拡散させて ぼんやりとした印象を与える。 ハイコントラストな絵には 非常に効果的。 Diffusionフィルター
- 86. #ue4fest#ue4fest ポストプロセスマテリアルによる実装は、 以下のもんしょさんのツイートの実装方法が参考に。 ただし、UE4.25現在では一部カスタムノードの書き換え必要あり。 https://twitter.com/monsho1977/status/670634806124920832 エンジン改造が可能なら更にハイクオリティな実装も。 『エンジンを拡張してポストプロセスを実装する PS編』 http://monsho.blog63.fc2.com/blog-entry-209.html Diffusionフィルター
- 87. #ue4fest#ue4fest Diffusionフィルターありとなし比較
- 88. #ue4fest#ue4fest 日本人の桑原道義さんが 考案した平滑化フィルター。 油絵のような効果が出せる。 アニメの背景美術っぽい絵を 作れるように。 Kuwaharaフィルター https://www.raywenderlich.com/100-unreal-engine-4-paint-filter- tutorial#toc-anchor-004
- 89. #ue4fest#ue4fest 検索するとロジックは色々でてくる。 『Kuwahara filterとかいう明らかに日本人の名前な画像フィルターに出会い、試してみたらすごかったので紹介する。』 https://qiita.com/Cartelet/items/5c1c012c132be3aa9608 UE4上での実装は以下の記事で完全に解説されている。 『Unreal Engine 4 Paint Filter Tutorial』 https://www.raywenderlich.com/100-unreal-engine-4-paint-filter- tutorial#toc-anchor-004 Kuwaharaフィルター
- 90. #ue4fest#ue4fest Kuwaharaフィルターありとなし比較
- 91. #ue4fest#ue4fest • Cinematic DoF（被写界深度） • Lens Flares（円形レンズフレア） • Bloom • Exposure • Chromatic Aberration（色収差） • Vignette Intensity（ビネット） • Color Grading LUT • Motion Blur • etc … その他のポストエフェクト
- 92. #ue4fest#ue4fest 総括
- 93. #ue4fest#ue4fest 今のUE4の標準機能は非常に充実しており、 NPRキャラクターレンダリングのための機能は十分！ ポストプロセスマテリアルだけでもNPR表現は可能だが、 キャラクター個別のカスタマイズが必要になった際には、 サーフェースマテリアルの方がより柔軟。 大規模であれば併用していくことも大事。 エンジン改造なしでも十分
- 94. #ue4fest#ue4fest マテリアルだけでも不十分！ 当然ながらモデル側のクオリティが 低ければどれだけマテリアル側で 工夫しても限界が来る。 マテリアル作成者、モデル作成者が しっかりと連携をとることが大事！ モデルが良いことも大前提
- 95. #ue4fest#ue4fest
- 96. #ue4fest#ue4fest ご視聴ありがとうございました！
Seja o primeiro a comentar