【第3回UE4札幌Meetup!!!】 UE4で実装するセル表現

おぎまふ

第３回UNREAL ENGINE 4 札幌 Meetup!!!

UE4で実装するセル表現

UE4非公式キャラGrayちゃん

自己紹介

HN：おぎまふ Twitter：@ogimafu 元ゲームプログラマー。 現在はUE4を中心に個人でゲーム制作 UE4歴は2年位？

おしながき

セルシェーダを使ったサンプル動画 セルシェーダの概要 UE4マテリアルのおさらい セルシェーダの実装

セルシェーダを使ったサンプル動画

セルシェーダ概要

セルシェーダとは

ノンフォトリアルと呼ばれる描画方法の一つ アニメ等で使われる、セル画のようなシェーダ セルルック、トゥーンシェーダと呼ばれることも

（人によって用語の範囲が様々…） ゲームでは、GGXrd などが採用

セルシェーダの要素

ハッキリとした境界の陰影 輪郭線の描画 高めの彩度

UE4マテリアルのおさらい

UE4のマテリアル

大きく分けて二種類 各メッシュの質感、透明 / 不透明などを定義できる「通常マテリアル」

画面全体を処理する「ポストプロセスマテリアル」

Gバッファで取れる情報

エンジン拡張

UE4ではエンジンのソースコードが公開されており、C++での独自拡張が可能です

今回一部の機能では、マテリアルから ポストプロセスマテリアルに対してそのまま値を渡せるGバッファを作成し、使用しています。

エンジン拡張

使用例１R：陰範囲の検出結果G：髪のハイライト用マスクB：未使用A：頂点カラー

使用例２RGB：陰色指定A：頂点カラー

セルシェーダの実装

〜色について〜

色

1. キャラクターの色をテクスチャで指定する2. 陰範囲の検出

方法1：マテリアルによる検出 方法2：ポストプロセスによる検出

3. 陰範囲でテクスチャをマスクし合成

色指定用テクスチャ

色は通常色、陰色共にテクスチャで指定し、 マテリアルで陰領域を判別して使用する

陰範囲の検出①

方法1：マテリアルによる独自実装 法線と光源情報を使って、自前で陰の範囲を

計算する。（セルフシャドウは固定） 実際の法線とは別に自前の法線ブレンドを行うことで陰のデフォルメを行っている

BlueprintComponent で法線のブレンドの座標、光源の位置を随時更新

法線ブレンド動画

比較

陰範囲の検出②

方法2：ポストプロセスによる陰の検出 セルフシャドウが付けられる alweiさんのブログにてやり方が解説されています！http://unrealengine.hatenablog.com/entry/2016/05/29/204545

そのままだと影色の指定が出来ないので、拡張したバッファに影色を渡せるように改造

陰範囲の検出②●今回のようなデフォルメの効いたキャラにはやや陰影がクドくなりがち。

● 頭が大きい関係上、体がセルフシャドウにより影色で埋まってしまう

陰範囲の検出②なので、

巨大ロボとかに使うと良いと思います！

両シェーダの合成

カスタムステンシルを使用して効果範囲の切り分けをしています。

検出比較動画

輪郭線

輪郭線の検出

今回はポストプロセスで行っています 深度による検出 法線による検出 頂点カラーによる検出（エンジン拡張）

深度による検出

深度バッファを元にSobelフィルタで検出

法線による検出

法線バッファを元に、内積で比較して検出

頂点カラーによる検出

拡張バッファのαチャンネルを使い、DCCツールでペイントした頂点カラーを元にSobelフィルタで検出

検出エッジの合成

今回は 「深度エッジ」 + 「頂点カラーエッジ」を使用しています。

+ ＝

その他、キャラ調整

まつげ、眉毛の優先表示

表情がわかりやすくなる

漫画やアニメではよくある表現を再現。

まつげ、眉毛の優先表示

透明マテリアルのオプションで深度テストを無効化すると隠面の深度も取れる！

髪の光沢

いわゆる天使の輪 見た目の印象を優先して、今回は位置固定。

髪の光沢

光沢部分はモデリングをし、拡張バッファの陰マスク（R）と髪マスク（G）で切り抜いてます

髪の光沢（動画）

画面調整

色味調整（LUT）

デフォルトのLUTをスクリーンショットと一緒に画像編集ソフトに持って行き、1. 色味調整を行う。2. UE4のポストプロセスボリュームに作成した3. LUTを読みこませることで一括調整できる。

LUT調整動画

フレア

ディフュージョン

おまけ背景のAO、キャラの陰領域に対してハッチングを追加してみた

ハッチング動画

ご清聴ありがとうございました！