2015年3月30日月曜日

【UE4】セルっぽいルックを頑張ってみる その3(ハイライト)

ハイライトについてです。

ハイライトは、リムライトとヘアスペキュラを合成してやってみました。

【最終ルック】

●リムライト

【リムライト】
 リムライトはカメラのベクトルとピクセル法線の内積から角度を判定し、90度に近い部分を白くする処理をしています。

【リムライトマテリアルBP】
"Range" でリムライトの範囲、"RimLight_Power"で色の強みを調整し、"RimLight_Alpha"でブレンドの調整ができるようにしています。
今回はセルルックに合わせるために"RimLight_Power"をかなり強めにしています。

 リムライトはセルルック以外でもモデルの強調につかったり、柔らかい表現にも使えるので覚えておくとなにかと便利だと思います。


●ヘアスペキュラ


【ヘアスペキュラ】
ヘアスペキュラも計算的にはリムライトとあまり変わらず、擬似光源のベクトルとピクセル法線の内積から角度を判定し、光沢となるしきい値に近いほど白くなるようにしています。

【ヘアスペキュラマテリアルBP】
"HairSpec_LightDir"で擬似ライトのベクトル、"HairSpec_TargetDot"でスペキュラの角度、"HairSpec_TargetDotRange"でスペキュラの掛かる幅を調整できます。

 BP右側では、髪以外の部位にスペキュラが出ないようにするためにマスク用テクスチャを使ってスペキュラが掛かる部位を制限しています。
 髪用に別のマテリアルに分離してもよかったのですが、モバイル/HTML5表示で試した時に正常に表示されなかった(マテリアル数の制限?)ので単一のマテリアルでできるようにしました。

 BP左下ではカメラと正対するほどスペキュラの幅を小さくする処理を行っていおり、"HairSpec_FadeoutAdjust"の調整をすることでバリエーションをつけることが出来ます。
【ヘアスペキュラ比較】

2015年3月22日日曜日

【UE4】セルっぽいルックを頑張ってみる その2(カラー)

カラーについてです。


比較しやすいように最終ルックを最初に載せておきます。

【最終描画】

次に、今回説明するカラーの部分だけを抜き出してみました。
【カラー】
見ての通り、セルルックのベースとなる部分です。
キャラの方にエッジが入っているのはキャラのモデルとして線をポリゴンで描画しているためです。

そして以下がオブジェクトに使用しているマテリアルの全体図です。
UE4側のライティングによる陰の生成は不要なので、エミッシブに接続します。
赤枠で囲っている部分がカラーの処理部分となります。
【マテリアル全体図】

セルルックにはポストプロセスでやるやり方もありますが今回はオブジェクトごとのマテリアルで処理するやり方を採りました。

理由としては、
 ・カスタム仕様のポストプロセスが使えないスマフォなどでもセルルック表現ができる
 ・光源の方向と色を個別に指定できるのでワールドに配置した光源に左右されない画作りが可能
ということです。

 デメリットとして、エミッシブを使う関係でセルフシャドウが使えないことが挙げられますが、セル調でやる分には変な影が落ちないのでそれはそれで良いのではないかと思います。キャラモノではよくあるような頭が大きかったり髪型が大きかったりして体の大半が影になるのも見た目上はあまり良くないですし。
 それでもまったく影が落ちないのも不自然なので影ができやすい首元などは影用のマスクテクスチャをつかって処理しています。


具体的な処理手順は
  1. 光のベクトルとピクセルの法線から内積を使って角度差を算出
  2. ルックアップ画像を元に光か陰かを判別
  3. 固定陰用のマスク画像を元に光か陰かを判別
  4. 判別した数値を元に、指定された光と陰の色に線形補間
以上の手順を実装したマテリアル関数です。
【カラー生成マテリアル関数】
【ルックアップ画像】
陰の範囲を調整するルックアップ画像はShadowRangeの値が0.5のときに90度になるようになってます。
 陰の色味についてはGGXrd方式のテクスチャで指定するようにしようかとも考えたのですが、素材を用意できる自信がなかったのと、お手軽さを優先して単色で指定するようにしました。

 固定陰画像についてはマスク用の画像を用意し、画像のRチャンネルを陰、Gチャンネルを髪スペキュラ用のマスクとして使用しました。スペキュラについては次の記事で触れるつもりです。
【マスク画像の例】
R=陰、G=髪スペキュラ


以上がカラーについての解説になります。
次回はハイライトについて書こうかと思います。


前: 【UE4】セルっぽいルックを頑張ってみる その1(概要)
次: 【UE4】セルっぽいルックを頑張ってみる その3(ハイライト)

2015年3月21日土曜日

【UE4】セルっぽいルックを頑張ってみる その1(概要)

---------------------------------------------------------------------------------
【2015/11/22追記】
Epicのシモダさんがトゥーン用マテリアルを公開してくださっています!
https://forums.unrealengine.com/showthread.php?88581-%E3%82%A2%E3%83%B3%E3%83%AA%E3%82%A2%E3%83%AB%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%B34%E3%81%A7%E3%83%8E%E3%83%B3%E3%83%95%E3%82%A9%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB%E6%8F%8F%E7%94%BB%E3%81%97%E3%82%88%E3%81%86%EF%BC%81
---------------------------------------------------------------------------------

時間が開いてしまいました。
UE4が無料化されて使う人も増えそうですし、自分が試したセルルックに関するノウハウを記事にしてみようかとおもいます。


僕はマテリアルに関してもルックに関してもそれほど詳しいわけではないですが、自分の勉強も兼ねてセルルックに挑戦してみました。
セルルックに関してはほかのサイトなどでも解説されており、僕も参考にしてる部分があるのでかぶる部分が多々あるとおもいます。


今回は概要のみですが、次回以降からそれぞれの具体的な説明をしていくつもりです。


●最終描画


【最終描画】
ここ最近で作ったマテリアルを大体詰め込んでみました。
まだ発展途上ですがだいぶそれっぽくなったのではないかと思います。

●カラー


【カラー】
光の部分はテクスチャに指定の色をまぜて処理。
陰にポストプロセスは使わず、オブジェクトごとのマテリアル内で計算し生成。
キャラの首元など陰になりやすい部分に対しては固定陰として処理している。
各オブジェクトのマテリアル内で光源から陰の範囲を計算しています。
ポストプロセスを使っていないので見た目を維持したままモバイル環境へ持って行くことが可能です。
個人的にはセルルックに関してはポストプロセスでやるよりオブジェクトのマテリアルで計算するほうが融通がきいて向いてるのではないかとおもいます。

【UE4】セルっぽいルックを頑張ってみる その2(カラー)

●ハイライト

 
【ハイライト】
リムライト、カメラの角度から生成。
髪用スペキュラ、仮想光源の方向から計算
リムライトはもともとセルルックに使うつもりじゃなかったのですが、やってみたら意外に良い感じだったのでつけてみました。
髪用スペキュラ(いわゆる天使の輪)は光源の方向とハイライトとなる角度を設定して描画しているのでキャラの動きに合わせて変化します。

【UE4】セルっぽいルックを頑張ってみる その3(ハイライト)

●エッジ

【エッジ】
キャラのエッジはポリゴンによるバックフェース法で、
ほかの部分はデプスと法線を元にポストプロセスで生成
画像のキャラはモバイルも想定して作成したのでポリゴンの法線を反転させて描画するバックフェース法式でエッジを作っています。
その他のラインは深度、と法線を判定する方法でポストプロセスを使って描画しています。

【UE4】セルっぽいルックを頑張ってみる その4(エッジ)

●その他

・眉が髪に隠れても髪の上に描画されるように処理しています。
・背景の色を単純化し、白みを加えています。
・モバイル環境では地面に影が落ちないので板ポリを利用した丸影にしています。
・キャラの髪と顔は法線を単純化してあります(モデリングソフト側での処理)


--------------------------------------------------------------------------
今回はこのへんで。
次回は、「カラー」部分の記事を書く予定です

次: 【UE4】セルっぽいルックを頑張ってみる その2(カラー)