O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
#ue4fest#ue4fest
NPRキャラクターレンダリング総結集!
今こそ更なる高みを目指して
株式会社Indie-us Games
代表&クリエイター
中村 匡彦
#ue4fest#ue4fest
中村 匡彦
株式会社Indie-us Games 代表&クリエイター
自称Unreal Engineの何でも屋。
Unreal Fest登壇過去最多。
初の自社開発インディーゲーム
TrinitySを絶賛開発中...
#ue4fest#ue4fest
• NPRとは?
• エンジン改造
• ベクトル
• マスク
• ライティング
• アウトライン
• ポストエフェクト
• 総括
アジェンダ
#ue4fest#ue4fest
NPRとは?
#ue4fest#ue4fest
Non-Photorealistic Rendering(非写実的レンダリング)
漫画、イラスト、スケッチ、セルアニメ、テクニカルイラストレーション、
水彩、油絵、水墨画、日本画、点描、ドット絵など
現実では起...
#ue4fest#ue4fest
これらの用語も似た意味で使われやすい。
セルシェーダー(セルアニメ調)
トゥーンレンダリング(セルアニメ調以外も含む)
この講演ではこれら全てを総称してNPRと呼ぶことにする。
とはいえ、厳密な定義はないのでこ...
#ue4fest#ue4fest
まずは出来上がったものを
ご覧ください
#ue4fest#ue4fest
#ue4fest#ue4fest
#ue4fest#ue4fest
名前:齋藤胡桃
元々はマーケットプレイスで
販売するために作ったキャラ。
今回のために再デザインし、
全て作り直した。
今回制作したキャラ
#ue4fest#ue4fest
2Dでのキャラデザイン
#ue4fest#ue4fest
単純なセルシェーダーではなく、イラスト表現に
使われる手法を色々と取り入れたい。
イラストのタッチも取り入れるために試行錯誤。
ライティングが映えるような暗い空間で
コントラストをハッキリとさせてカッコいい表現...
#ue4fest#ue4fest
エンジン改造
#ue4fest#ue4fest
なにかあればエンジン改造すれば実現可能。
でも本当にそのエンジン改造って必要?
実は改造しなくても実現できるのでは?
エンジン改造のメリットデメリットを考える。
エンジン改造する?
#ue4fest#ue4fest
シェーディングモデルを独自に定義できる。
UE4既存ライティングに組み込み可能。
ネットにも拡張方法についての記事があるので比較的容易。
『UE4のShading Modelを拡張する』
https://qii...
#ue4fest#ue4fest
https://forums.unrealengine.com/community/work-in-
progress/41288-toon-shading-model
エンジン改造でNPRを実現したもの
#ue4fest#ue4fest
https://forums.unrealengine.com/development-
discussion/rendering/1537277-toon-shading-models-
stylized-r...
#ue4fest#ue4fest
https://forums.unrealengine.com/development-
discussion/rendering/1704696-wip-anime-toon-stylized-
shadin...
#ue4fest#ue4fest
エンジンの共有が大変。(50GB以上のデータ)
C++コードとHLSLをメンテナンスする必要がある。
ノウハウが独自のものとなりがちで、公開する場合には不向き。
内向けはともかく、外向けであれば避けたい。
エン...
#ue4fest#ue4fest
エンジン改造は一切なし!
全てUE4標準の機能のみで実現できる手法を用いている。
多少強引なところはあるものの、概ね問題はなし。
出来る範囲で良い表現を目指す!
今回は全てUE4.25.4で作成。
本プロジェク...
#ue4fest#ue4fest
ベクトル
#ue4fest#ue4fest
様々な表現を実現するために、BPとマテリアルを駆使して
ベクトルから表現を作り出す。
最も基本的な考え方は以下の記事を参考に。
『誰でもわかるセルシェーダー入門』
https://unrealengine.ha...
#ue4fest#ue4fest
ベクトルと内積は非常に密接な関係。
考え方を理解するとベクトルと
そのなす角から表現を加えたい
領域を制御できるようになる。
内積は表現を作る上で
最も重要な『ツール』となる!
ベクトルと内積
『誰でもわかるセ...
#ue4fest#ue4fest
ディレクショナルライトのRotationを使う。
マテリアルにも『Light Vector』ノードがあるが
これはフォワードオンリーなのでBPから
取得する方法が一般的。
Material Parameter ...
#ue4fest#ue4fest
保存したパラメーターをマテリアルから参照し、
あとは頂点法線などで内積をとることで
最も簡単な光源の当たった位置を
マテリアルで取得することができる。
ライトベクトル
#ue4fest#ue4fest
ワールド空間上でメッシュの面法線から
カメラ方向へのベクトルを取得。
フレネル表現などを作りやすい。
カメラベクトル
#ue4fest#ue4fest
ワールド空間上でのメッシュの面法線に対してカメラベクトル
が反射するベクトルを取得。
環境マッピングなどで使われる。
反射ベクトル
#ue4fest#ue4fest
マスク
#ue4fest#ue4fest
ベクトルと内積で
プロシージャルな領域を作成。
完全なグレースケールで
影響範囲を決めるようにする。
マスクの作成
#ue4fest#ue4fest
大体どのマスクにもある基本機能。
• オフセット
• スムーズ化
• IDマップ(テクスチャーのバイアス)
マスク基本機能
#ue4fest#ue4fest
マスク位置をオフセットして
調整する機能。
あくまでも単純な調整向き。
基本的に単なる加算。
オフセット
#ue4fest#ue4fest
マスク領域の境界に対して
グラデーションをつけて
柔らかくする。
計算は単なる割り算な
ことが多い。
スムーズ化
#ue4fest#ue4fest
1枚のテクスチャー内に
マスクのバイアスをつけるための
グレースケール値を書き込む。
RGBAごとに違うマスクを持つ。
IDマップ(テクスチャーのバイアス)
#ue4fest#ue4fest
IDマップのチャンネルごとにルールを持たせる。
例えば『1.0』が入る時は必ずAddされる。
『0.5~0.0』はマスクの強さを表す。
マスクが必ず入ってほしい部分、
マスクが入ってほしくない部分を作る。
チャ...
#ue4fest#ue4fest
現状用意しているマスク
• シャドウマスク
• ハイライトマスク
• リムライトマスク
• パターンマスク
マスクの種類
#ue4fest#ue4fest
一番基本的なマスク。
単純な陰影付けを行う。
ディレクショナルライトと
スカイライトの色と強さを
拾えるようにもなっている。
シャドウマスク
#ue4fest#ue4fest
シャドウマスク ノード基本構成
MF_SmoothFloorは
SmoothCeilのFloor版
#ue4fest#ue4fest
シャドウマスクのみの状態
#ue4fest#ue4fest
艶や光沢感を出すマスク。
反射ベクトルを用いて計算。
最終的にはエミッシブカラーへ
入力することになるので、
ブルームの影響も受ける。
ハイライトマスク
#ue4fest#ue4fest
ハイライトマスク ノード基本構成
SmoothStepで細かく
グラデーションを制御
#ue4fest#ue4fest
ハイライトマスクのみの状態
#ue4fest#ue4fest
縁や輪郭を抽出するマスク。
カメラベクトルを用いて計算。
最終的にはエミッシブカラーへ。
ブルームの影響も受ける。
立体感が強い印象になる。
リムライトマスク
#ue4fest#ue4fest
リムライトマスク ノード基本構成
#ue4fest#ue4fest
リムライトマスクのみの状態
#ue4fest#ue4fest
シャドウとは別にパターンのある
テクスチャーを陰影とさせる。
カメラベクトルで計算し、
シャドウマスクと違う印象を
与えられるようにする。
パターンマスク
#ue4fest#ue4fest
パターンマスク ノード基本構成
#ue4fest#ue4fest
ハッチングやドットのパターンをタイリング
パターンテクスチャーの適用
#ue4fest#ue4fest
パターンマスクのみの状態
#ue4fest#ue4fest
ライティング
#ue4fest#ue4fest
NPRキャラクターのレンダリングは
影をある程度制御したい。
強すぎる陰影は印象がかなり悪い。
よく使う手はシェーディングモデルを
『Unlit』にすることで完全にフラットな
状態にすることができるが…
ライテ...
#ue4fest#ue4fest
ライトの影響を受けないので
暗い空間で浮く!!!!
Unlitの問題
#ue4fest#ue4fest
1. エンジン改造をして、独自シェーディングモデルで制御
→ 理想ではあるが、メンテナンスコストが高すぎる
2. ライティング計算をBPやマテリアルで全て独自にやる
→ 可能だが、非常に複雑かつ、制限も多い
な...
#ue4fest#ue4fest
『Subsurface』シェーディングモデルを試す。
ライトの影響を受けるが、光がある程度貫通するため
強い陰影が出づらい!
『Preintegrated Skin』
『Subsurface Profile』
...
#ue4fest#ue4fest
ライティングの影響を
しっかりと受ける
Subsurfaceでライティング
#ue4fest#ue4fest
ダイレクトな光を受けると
メッシュを貫通してしまう。
ライトの上部にメッシュを
配置しても光の影響を受ける。
Subsurfaceの仕様。
Subsurfaceの問題
#ue4fest#ue4fest
ライトベクトルが
上方を向くと透過するライト
の存在がなくて上手く陰影の
計算ができなくなる。
別のライトを置くなどの
サポートが必要。
Subsurfaceの問題
#ue4fest#ue4fest
Subsurfaceへと入力するのは、
シャドウマスクとパターンマスクのみ。
ハイライトマスクとリムライトマスクは
Emissive Colorへと入力するので
ライトの影響を受けることがない。
ライトの影響を...
#ue4fest#ue4fest
UE4の組み込みライトを
そのまま使うとマスクで
作ったシャドウとは
印象が異なってしまう。
もう少しシャープにしたい。
ライトの調整
#ue4fest#ue4fest
ライトのプロパティ設定
『Shadow Bias』を『1.0』
『Shadow Slope Bias』を『0.0』
『Shadow Filter Sharpe』を『1.0』
シャープな陰影に!
ライトの調整
#ue4fest#ue4fest
顔面は特に陰影が重要。
ツール上でメッシュの法線を
編集し、一定方向を向くよう
にしておく。
メッシュの法線
#ue4fest#ue4fest
左は未調整
右は調整済み
法線編集比較
#ue4fest#ue4fest
ARC SYSTEM WORKSさんの
アニメ調キャラモデリング
TIPSが非常に参考になる!
法線についてだけではなく、
考え方そのものが非常に有用。
参考資料
GUILTY GEAR Xrd開発スタッフが送...
#ue4fest#ue4fest
強いハイライトは単にUnlitな
マテリアルを割り当て。
眼球には擬似的な異方性反射
を取り入れて、少しだけ立体
感のあるハイライトを追加。
ライトの向きでハイライトが
動くようになっている。
目のライティング
#ue4fest#ue4fest
アウトライン
#ue4fest#ue4fest
今回のアウトラインはポストプロセスではなく、
最もシンプルな手法の法線反転したメッシュ。
今回はBlenderで反転メッシュを作成し、スケルタルメッシュに
法線反転メッシュが含まれた状態。
『誰でもわかるアウト...
#ue4fest#ue4fest
• 頂点カラーベースの太さマスク
• アウトラインカラーマスク
• カメラ距離ベースの自動調整
• カメラFOVによる自動調整
• テクスチャーインライン
アウトライン基本機能
#ue4fest#ue4fest
頂点カラー上に太さを示す数値を入れる。
UE4のビューポート上で、
『Show』→『Advanced』→
『Vertex Color』で頂点カラーを表示
0.1未満になると、アウトラインが
Opacity Ma...
#ue4fest#ue4fest
髪の毛先部分に小さいマスクが入っている状態。
頂点カラーベースの太さマスク
#ue4fest#ue4fest
頂点カラー太さマスクのノード構成
結果を『World Position Offset』へ接続
#ue4fest#ue4fest
メッシュUVとベースカラーテクスチャーに
別途アウトラインカラーを指定することで
アウトライン自体への色付けが可能。
イラスト的なニュアンスで言うと色トレス。
色は彩度が低めの方が認識しやすい。
アウトラインカ...
#ue4fest#ue4fest
ノードはたったこれだけ。
反転メッシュ切り替え比較
#ue4fest#ue4fest
カメラから距離が離れると、アウトラインも小さくなってしまう。
アウトラインの存在感を少しでも出すためにカメラが離れても
アウトラインを自動調整するようになっている。
マテリアル上で『Absolute World...
#ue4fest#ue4fest
カメラ距離調整 視認性の比較
自動調整なし 自動調整あり元の状態
#ue4fest#ue4fest
カメラ距離自動調整 基本ノード構成
ローカル → カメラ → ワールド変換は含まれていない
#ue4fest#ue4fest
カメラFOVも距離と同じように変更すると、
アウトラインの太さが変動する。
カットシーン作成の際にはFOVの変更が多い。
基本的な考え方はカメラ距離調整と同じ。
調整係数にFOVを考慮するようにするだけ。
カメ...
#ue4fest#ue4fest
FOV自動調整 視認性の比較
FOV30 自動調整なし FOV30 自動調整ありFOV 90
#ue4fest#ue4fest
FOV自動調整 基本ノード構成
FOVはCustomノード
#ue4fest#ue4fest
正確にはアウトラインではなく、単なるマ
スク。専用にテクスチャーを用意。
アウトラインでは表現しきれないような
描画線を出したい部分で使う。
テクスチャーに描くのとは違い、
色や強さを調整可能になっている。
R...
#ue4fest#ue4fest
テクスチャーインライン 基本ノード構成
この先のLerpで合成
#ue4fest#ue4fest
ポストエフェクト
#ue4fest#ue4fest
NPRな効果を生み出すポストプロセスエフェクト。
• パラフィン効果
• Diffusionフィルター
• Kuwaharaフィルター
• その他
ポストエフェクトの調整
#ue4fest#ue4fest
セルアニメの撮影用語。
色の着いたパラフィン紙を
セルの絵の上に重ねることで
光の照り返しや暗闇を
表現する特殊効果。
パラフィン効果
パラフィン紙
#ue4fest#ue4fest
ポストプロセスの『Dirt Mask』に
画面をマスクするテクスチャーを
指定することで擬似的に再現可能。
テクスチャーはモノクロでOK。
UE4上で疑似パラフィン効果
#ue4fest#ue4fest
パラフィン効果ありとなし比較
#ue4fest#ue4fest
カメラの写真用語。
光源や反射光を拡散させて
ぼんやりとした印象を与える。
ハイコントラストな絵には
非常に効果的。
Diffusionフィルター
#ue4fest#ue4fest
ポストプロセスマテリアルによる実装は、
以下のもんしょさんのツイートの実装方法が参考に。
ただし、UE4.25現在では一部カスタムノードの書き換え必要あり。
https://twitter.com/monsho...
#ue4fest#ue4fest
Diffusionフィルターありとなし比較
#ue4fest#ue4fest
日本人の桑原道義さんが
考案した平滑化フィルター。
油絵のような効果が出せる。
アニメの背景美術っぽい絵を
作れるように。
Kuwaharaフィルター
https://www.raywenderlich.com...
#ue4fest#ue4fest
検索するとロジックは色々でてくる。
『Kuwahara filterとかいう明らかに日本人の名前な画像フィルターに出会い、試してみたらすごかったので紹介する。』
https://qiita.com/Cartel...
#ue4fest#ue4fest
Kuwaharaフィルターありとなし比較
#ue4fest#ue4fest
• Cinematic DoF(被写界深度)
• Lens Flares(円形レンズフレア)
• Bloom
• Exposure
• Chromatic Aberration(色収差)
• Vignette ...
#ue4fest#ue4fest
総括
#ue4fest#ue4fest
今のUE4の標準機能は非常に充実しており、
NPRキャラクターレンダリングのための機能は十分!
ポストプロセスマテリアルだけでもNPR表現は可能だが、
キャラクター個別のカスタマイズが必要になった際には、
サー...
#ue4fest#ue4fest
マテリアルだけでも不十分!
当然ながらモデル側のクオリティが
低ければどれだけマテリアル側で
工夫しても限界が来る。
マテリアル作成者、モデル作成者が
しっかりと連携をとることが大事!
モデルが良いことも大前提
#ue4fest#ue4fest
#ue4fest#ue4fest
ご視聴ありがとうございました!
Próximos SlideShares
Carregando em…5
×

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

2.367 visualizações

Publicada em

講演アーカイブ: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

Publicada em: Engenharia
  • Seja o primeiro a comentar

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

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

×