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