UE4 : 水彩 Post Process Material

大昔に行った FXTree でのコンポジットを、Unreal Engine 4(以下 UE4)で再現しました。肝となるテクニックは、色を塗りたいところにマスク(白黒)を用意し、その領域をズラしたり歪めたりして色を重ねるものです。ほぼ100% Post Process で絵作りを行っています。

まだまだ作りたてのマテリアルで最適化もしておらずパラメータ調整もピーキーで実用性についてはまだまだです。そのあたり興味がある方は改良してお使いください。

用意したもの

モデル

メッシュを2重化したスケルタルメッシュ。1つは実体。1つはアウトライン用。
アウトライン用メッシュは、実体のメッシュをデュプリケートして法線を反転しています。
アウトラインの太さは、マテリアルの押し出しで制御していますので、データの時点では実体用メッシュとアウトライン用メッシュの頂点位置は、完全に重なっています。

テクスチャ

テクスチャは1枚。
RGBのチャンネルに、下記要素を持たせています。

RGB	イメージ	用途	説明
R		Paint Area	色を塗るエリアを、白黒の濃度(今回は16段階)で塗り分けたマップです。決め打ちで14段階目のグレー はアウトライン。16段階名のブラックは背景。として利用しています。
G		Paint Outline	アウトラインを追加するマップです。アウトライン用メッシュは形状が平坦なところではラインが出ません。それを補足するため、テクスチャでラインを追加します。今回はトトロのお腹の三角形の模様部分に使っています。詳細は後述。
B		Push Strength Outline Mesh	アウトライン用のメッシュの押出し強度を追加するマップです。目の周りはアウトラインを細く、お腹のピーク部分は太くなど、場所によるアウトラインの太さを制御します。

マテリアル

カスタムマップ(または計算した値)を、それぞれの Buffer に書き出すマテリアル。
頂点を法線方向に押し出す頂点シェーダを追加したもの。

要素	用途	説明
Buffer : Subsurface Color	Post Process で色を塗る領域を指定	通常は SSS として書き出される Buffer : Subsurface Color を色を塗るマスクとして利用します。
Buffer : Metallic	アウトラインにテクスチャで描いたものを追加	通常は金属・非金属情報を指定する Buffer : Metallic を、アウトラインの追加要素として利用します。
World Position Offset	頂点を法線方向に移動	Material Function : MF_PushVertex を利用し頂点を移動させます。先にゆらぎを与えるため、ノイズのテクスチャで、押し出す距離に強弱を与えます。

ポストエフェクト

• 水彩マテリアル ※後述
• カスタムケラレ・色収差
  水彩マテリアルの後に、処理を行う必要があるため、簡易的な処理を自作。

水彩マテリアル内の処理について (3点)

処理の詳細はサンプルデータを見ていただくのが一番ですが、処理内容を読み解くガイドとして、水彩マテリアルの肝になっている考え方をいくつか解説します。

　1. 「Buffer : Subsurface Color」からマスク領域生成
　2. 1で生成したマスク領域を利用したペイント
　3. アウトライン生成

特に "1" が一般的なUE4の考え方から外れていると思います。ここがすんなり飲み込めれば、あとはよくある系の処理になっています。

1, 「Buffer : Subsurface Color」からマスク領域生成

「Buffer : Subsurface Color」に出力されたテクスチャを、色を塗る領域として利用しています。「Material Function : Separate ID」を利用して特定のマスク領域を抜き出しています。

抜き出された領域をベースにして色を塗っています。 今回はトトロ 1体しか出ないので、16段階で抜き出せる仕様にしていますが、理屈上は1チャンネル256段階までいける(?)と思います。 (若干精度や、処理負荷の心配がありますが)トトロは背景・アウトライン合わせて、下記12領域使用しています。

ID	用途
1	体(薄い緑)
2	お腹(ベージュ)
3	お腹の模様(薄い緑)
4	ひげ(黒)
5	鼻(茶色)
6	爪(黒)
7	歯(白)
8	口(赤)
9	黒目(黒)
10	白目(白)
11	未使用
12	未使用
13	未使用
14	アウトライン(深い紫)
15	未使用
16	背景

2, 1で生成したマスク領域を利用したペイント

1で生成した領域は3Dモデルの形状通りなので、そのまま着色すると、アウトラインからはみ出すような水彩の着彩には見えません。そこで、マスク領域に歪みや滲みを加えていきます。

加えている処理は大きく「歪み」「ノイズ」「塗り位置のズレ(アウトラインから色がはみ出す)」「塗りムラ(塗りの濃さ)」「液溜まり」です。

歪み

UV のオフセットの値を、水面の歪み(上記テクスチャ)の値でズラす。

ノイズ

FxTreeでやっていた時は、ノイズのフィルタを使っていましたが、そのような処理はUE4にないので、事前にノイズをかけたテクスチャで代用しています。今回は2種類使用しました。

塗り位置のズレ

Buffer の UV をオフセットし 3D モデルの位置から色をズラします。

塗りムラ・液溜まり

デイフーズの計算結果に、コントラスト・明度調整したあと、リムライト部分を乗算し、輪郭部分の色を塗らないようにします。また、水彩画の特徴のハイライト部分は、下地を活かし、色を塗らないよう、ハイライト部分のマスクを黒に塗る(色を塗らないよう)処理をしています。

ただ、個人的にはもう少し煮詰めたい処理で、さらに水彩の筆致を詰めるならこの処理の改善が必須だと考えています。

影(セルフシャドウ)

シャドウは ON / OFF できるようにしています。無い方が絵的に見える部分と、ある方が情報量がまして品質が上がっているように見える部分を分けるようにしています。個人的にはセルフシャドウがあると立体感が増し ３D感 が出てきてしますので、極力 OFF で利用しています。

3, アウトライン生成

アウトラインの処理も基本的には上記2と同じ(領域を塗る)です。ただ、いくつか処理が違う点を解説します。

アウトラインは Separate ID で抽出した領域だけではなく「カメラから見たときに直行している面 (Camera Vector・Normal)」「テクスチャで書き込んだアウトライン(カスタムマップ G チャンネル)」の3種類を合成し、色を塗る領域として利用しています。これにより、ディティールが細かい部分や、形状的にアウトライン用メッシュでは線が引かれない部分にもラインを引けるようにしています。

サンプルデータ

記事で説明したポストプロセスを共有します。基本的には好きに分析・改良・改造してもらって構いません。

github.com

注意事項

1. サンプルデータは Unreal Engine 4 (ver 4.17.2) で制作しております。
2. 最適化などを行っていないデータですので、そのあたりを承知のうえでご利用いただける方のみダウンロードください。
3. トトロを配るのはまずいのでシンプルなオブジェクトに置き換えています。
4. データアップが初めてですので、気づいた点や間違っている点などあれば、都度改善していきます。Twitter か 記事へのコメントで教えていただけるとありがたいです。

使い方

1. 上記アドレスの「Clone or Download」から Download ZIP を選択。
2. ダウンロードしたファイルを解凍。
3. \WaterColor-master 内 PJ_WaterColor.uproject を開く。
4. \WaterColor-master\Content\WaterColor\Maps\WaterCOLOR.umap を開く。(軽量版の WaterCOLOR_Light.umap も用意しております。)