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

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