#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(非写実的レンダリング)
漫画、イラスト、スケッチ、セルアニメ、テクニカルイラストレーション、
水彩、油絵、水墨画、日本画、点描、ドット絵など
現実では起こり得ないような表現。
厳密にはセルシェーダー、トゥーンレンダリングなどもNPRの一種。
NPRって?
#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://qiita.com/dgtanaka/items/41f96ef2090820035609
エンジン改造のメリット
#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-rendering-experiments
エンジン改造でNPRを実現したもの
#ue4fest#ue4fest
https://forums.unrealengine.com/development-
discussion/rendering/1704696-wip-anime-toon-stylized-
shading-model
エンジン改造でNPRを実現したもの
#ue4fest#ue4fest
エンジンの共有が大変。(50GB以上のデータ)
C++コードとHLSLをメンテナンスする必要がある。
ノウハウが独自のものとなりがちで、公開する場合には不向き。
内向けはともかく、外向けであれば避けたい。
エンジン改造のデメリット
#ue4fest#ue4fest
エンジン改造は一切なし!
全てUE4標準の機能のみで実現できる手法を用いている。
多少強引なところはあるものの、概ね問題はなし。
出来る範囲で良い表現を目指す!
今回は全てUE4.25.4で作成。
本プロジェクトにおいて
#ue4fest#ue4fest
ベクトル
#ue4fest#ue4fest
様々な表現を実現するために、BPとマテリアルを駆使して
ベクトルから表現を作り出す。
最も基本的な考え方は以下の記事を参考に。
『誰でもわかるセルシェーダー入門』
https://unrealengine.hatenablog.com/entry/2019/12/01/000735
ベクトルの活用
#ue4fest#ue4fest
ベクトルと内積は非常に密接な関係。
考え方を理解するとベクトルと
そのなす角から表現を加えたい
領域を制御できるようになる。
内積は表現を作る上で
最も重要な『ツール』となる!
ベクトルと内積
『誰でもわかるセルシェーダー入門』から抜粋
#ue4fest#ue4fest
ディレクショナルライトのRotationを使う。
マテリアルにも『Light Vector』ノードがあるが
これはフォワードオンリーなのでBPから
取得する方法が一般的。
Material Parameter Collectionで
ベクトルを保存しておく。
ライトベクトル
#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』にすることで完全にフラットな
状態にすることができるが…
ライティングの問題
Default Litでレンダリングしてみた状態
#ue4fest#ue4fest
ライトの影響を受けないので
暗い空間で浮く!!!!
Unlitの問題
#ue4fest#ue4fest
1. エンジン改造をして、独自シェーディングモデルで制御
→ 理想ではあるが、メンテナンスコストが高すぎる
2. ライティング計算をBPやマテリアルで全て独自にやる
→ 可能だが、非常に複雑かつ、制限も多い
なんとか『普通』のやり方で出来ないか…
考えられる対策
#ue4fest#ue4fest
『Subsurface』シェーディングモデルを試す。
ライトの影響を受けるが、光がある程度貫通するため
強い陰影が出づらい!
『Preintegrated Skin』
『Subsurface Profile』
も試したが、微妙な結果に。
Subsurfaceの活用
#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開発スタッフが送るアニメ調キャラモデリングTIPS
https://www.slideshare.net/ASW_Yokohama/guilty-gear-xrdtips-124324946
© ARC SYSTEM WORKS
#ue4fest#ue4fest
強いハイライトは単にUnlitな
マテリアルを割り当て。
眼球には擬似的な異方性反射
を取り入れて、少しだけ立体
感のあるハイライトを追加。
ライトの向きでハイライトが
動くようになっている。
目のライティング
#ue4fest#ue4fest
アウトライン
#ue4fest#ue4fest
今回のアウトラインはポストプロセスではなく、
最もシンプルな手法の法線反転したメッシュ。
今回はBlenderで反転メッシュを作成し、スケルタルメッシュに
法線反転メッシュが含まれた状態。
『誰でもわかるアウトライン入門』
https://unrealengine.hatenablog.com/entry/2019/12/05/000603
アウトラインは法線反転のメッシュ
#ue4fest#ue4fest
• 頂点カラーベースの太さマスク
• アウトラインカラーマスク
• カメラ距離ベースの自動調整
• カメラFOVによる自動調整
• テクスチャーインライン
アウトライン基本機能
#ue4fest#ue4fest
頂点カラー上に太さを示す数値を入れる。
UE4のビューポート上で、
『Show』→『Advanced』→
『Vertex Color』で頂点カラーを表示
0.1未満になると、アウトラインが
Opacity Maskにより描画もオフにする。
頂点カラーベースの太さマスク
#ue4fest#ue4fest
髪の毛先部分に小さいマスクが入っている状態。
頂点カラーベースの太さマスク
#ue4fest#ue4fest
頂点カラー太さマスクのノード構成
結果を『World Position Offset』へ接続
#ue4fest#ue4fest
メッシュUVとベースカラーテクスチャーに
別途アウトラインカラーを指定することで
アウトライン自体への色付けが可能。
イラスト的なニュアンスで言うと色トレス。
色は彩度が低めの方が認識しやすい。
アウトラインカラーマスク
#ue4fest#ue4fest
ノードはたったこれだけ。
反転メッシュ切り替え比較
#ue4fest#ue4fest
カメラから距離が離れると、アウトラインも小さくなってしまう。
アウトラインの存在感を少しでも出すためにカメラが離れても
アウトラインを自動調整するようになっている。
マテリアル上で『Absolute World Position』を使って、
ローカル空間をカメラ空間に変換し、オフセット量を計算。
再度カメラ空間からワールド空間に変換してから
『World Position Offset』に渡すようになっている。
カメラ距離ベースの自動調整
#ue4fest#ue4fest
カメラ距離調整 視認性の比較
自動調整なし 自動調整あり元の状態
#ue4fest#ue4fest
カメラ距離自動調整 基本ノード構成
ローカル → カメラ → ワールド変換は含まれていない
#ue4fest#ue4fest
カメラFOVも距離と同じように変更すると、
アウトラインの太さが変動する。
カットシーン作成の際にはFOVの変更が多い。
基本的な考え方はカメラ距離調整と同じ。
調整係数にFOVを考慮するようにするだけ。
カメラFOVの自動調整
#ue4fest#ue4fest
FOV自動調整 視認性の比較
FOV30 自動調整なし FOV30 自動調整ありFOV 90
#ue4fest#ue4fest
FOV自動調整 基本ノード構成
FOVはCustomノード
#ue4fest#ue4fest
正確にはアウトラインではなく、単なるマ
スク。専用にテクスチャーを用意。
アウトラインでは表現しきれないような
描画線を出したい部分で使う。
テクスチャーに描くのとは違い、
色や強さを調整可能になっている。
RGBAチャンネルごとに指定が可能。
テクスチャーインライン
#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/monsho1977/status/670634806124920832
エンジン改造が可能なら更にハイクオリティな実装も。
『エンジンを拡張してポストプロセスを実装する PS編』
http://monsho.blog63.fc2.com/blog-entry-209.html
Diffusionフィルター
#ue4fest#ue4fest
Diffusionフィルターありとなし比較
#ue4fest#ue4fest
日本人の桑原道義さんが
考案した平滑化フィルター。
油絵のような効果が出せる。
アニメの背景美術っぽい絵を
作れるように。
Kuwaharaフィルター
https://www.raywenderlich.com/100-unreal-engine-4-paint-filter-
tutorial#toc-anchor-004
#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フィルター
#ue4fest#ue4fest
Kuwaharaフィルターありとなし比較
#ue4fest#ue4fest
• Cinematic DoF(被写界深度)
• Lens Flares(円形レンズフレア)
• Bloom
• Exposure
• Chromatic Aberration(色収差)
• Vignette Intensity(ビネット)
• Color Grading LUT
• Motion Blur
• etc …
その他のポストエフェクト
#ue4fest#ue4fest
総括
#ue4fest#ue4fest
今のUE4の標準機能は非常に充実しており、
NPRキャラクターレンダリングのための機能は十分!
ポストプロセスマテリアルだけでもNPR表現は可能だが、
キャラクター個別のカスタマイズが必要になった際には、
サーフェースマテリアルの方がより柔軟。
大規模であれば併用していくことも大事。
エンジン改造なしでも十分
#ue4fest#ue4fest
マテリアルだけでも不十分!
当然ながらモデル側のクオリティが
低ければどれだけマテリアル側で
工夫しても限界が来る。
マテリアル作成者、モデル作成者が
しっかりと連携をとることが大事!
モデルが良いことも大前提
#ue4fest#ue4fest
#ue4fest#ue4fest
ご視聴ありがとうございました!

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