UE4:Shell Based Stroke Material


ピッグのアヌシー受賞のお祝いとして制作した映像のマテリアル表現をまとめました。

受賞発表の熱が冷める前にお祝いしたかったので、約1週間で映像を制作しています。まだまだ荒削りなアイデアですが、個人的には発展させると面白そうな、良い匂いのするテクニックだなと思っています。(水彩ポストプロセスとの合わせ技とかも面白そうです。)

ブタくんの表現的な目標

お祝い動画は、下記を目標にしました。

  • Dice氏 の描くコンセプトアートのタッチで、ブタくんを動かしたい。
  • (3Dが苦手とする) キャラと背景の境界をなじませる手法の試作。
  • 水彩ポストプロセスとは、違うアプローチでの NPR を模索。*1

イデアのベース

前回の水彩ポストプロセスがほぼ 100% ポストプロセスで行なっていたのに対し、ブタくんは 80 ~ 90% はオブジェクトのマテリアルでビジュアルを作っています。

f:id:Aqu:20180728050811j:plain f:id:Aqu:20180630235029j:plain

テクニックのベースはポリゴンの積層(通称:Shell法)です。ベースとなるメッシュを複製してノーマル方向に押出し、ストロークのテクスチャを貼っています。これが積層になることで、厚みのある重ね塗り表現にしています。(メッシュの構造としては、ワンダと巨像の Fur と同じと言えば通りが良いでしょうか。)

f:id:Aqu:20180804073704j:plain

また、積層メッシュに割り当てるマテリアルは、輪郭部分のみ表示されるように処理を組んでいて、そこにストロークのマップを合成して、ブラシの見た目にしています。

f:id:Aqu:20180804074159g:plain

※クリックで拡大します。

用意したデータ

モデル

f:id:Aqu:20180803010330j:plain

8層のShell構造を持ったブタくんのスケルタルメッシュ。 ブタくんのメッシュができたあと 7つ 複製し、同じマテリアルを割り当てています。8つのメッシュの違いはマテリアルインスタンスのパラメータのみです。輪郭にストロークを適用すると太って見えるため、メッシュは細く調整しました。

テクスチャ

今回は作業効率優先のため、チャンネルの統合はしていません。1チャンネルしか使わない要素も、テクスチャを1枚使っている贅沢仕様です。

イメージ 用途 説明
f:id:Aqu:20180801070645j:plain:w100 Base Color 通常の ベースカラー です。特殊なことはしていません。
f:id:Aqu:20180801070642j:plain:w100 SSS 通常の SSS です。
f:id:Aqu:20180801070638j:plain:w100 Stroke 重ねるタッチ用のマスクです。今回の絵作りで重要な要素になります。このテクスチャを変えるとタッチも変わるので、模索すると面白そうです。
f:id:Aqu:20180801070634j:plain:w100 Stroke Normal ストロークの凹凸情報です。あまり強いと、立体感が強調され 3Dモデル っぽくなりすぎるので、程々に調整すると良い結果になりました。
f:id:Aqu:20180801070624j:plain:w100 Push Strength アウトライン用のメッシュの押出し強度を追加するマップです。トトロで使ったものと一緒です。
f:id:Aqu:20180801070619j:plain:w100 Push Strength Random アウトライン用メッシュの押出し強度にゆらぎを与えるマップです。Noise に Blur をかけた画像を使っています。
f:id:Aqu:20180801070628j:plain:w100 Ambient Occlusion 通常の手順で焼いた Ambient Occlusion マップ。目指す絵によってはなくても良いです。ブタくんも、ストロークの印象が強いので、あまり効果は出ていません。

 ※Metal・Specular・Roughness はスカラー値で調整するため、テクスチャは用意していません。

マテリアル:Shell Based Stroke

f:id:Aqu:20180801070714g:plain 今回の Shell ベースのペイント表現の手順を解説します。

手順としては、

  1. 頂点シェーダで、メッシュを法線方向に押し出す。
  2. 「カメラベクトル・メッシュの法線」の計算で輪郭部分のみ表示されるように Opacity を調整。
  3. 2 の結果にタッチを追加
  4. UVステップ (テクスチャ・バーテックス)
  5. 着彩 (BaseColor を適用)

となります。

f:id:Aqu:20180802225947g:plain

これを複数レイヤー重ねると、ストロークが重なるわけです。

ポストプロセス:Stroke Bloom

f:id:Aqu:20180801055938j:plain タッチを施した後、輪郭部分の色を飛ばすため、色を加算させるポストプロセスを適用しています。これによって、明るい部分を誇張して白く飛ばす表現をしています。(1階調増えるように見えるため立体感が増します。ですので、目指す絵柄によってはなくても良いと思います。)

  1. Scene Color から、輪郭部分を抽出
  2. Scene Color から、明るい部分を抽出
  3. 1と2から「明るい輪郭部分」を抽出
  4. 3をマスクとして利用し、その部分にある色をブースト。

4の処理を変えることで、絵柄を変えることも出来ます。 f:id:Aqu:20180801070716g:plain

サンプルデータ

f:id:Aqu:20180810012254j:plain github.com

注意事項

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

個人的な振り返り (読まなくていいやつ)

最初に設定した目標が全部達成されたかというと...

  • Dice氏 の描くコンセプトアートのタッチで、ブタくんを動かしたい。
  • (3Dが苦手とする) キャラと背景の境界をなじませる手法の試作。
  • 水彩ポストプロセスとは、違うアプローチでの NPR を模索。

1の Dice氏のタッチは完全再現出来ませんでした。途中でテクニックに踊らされ、ゴールがぶれてしまいました。まだまだ改良の余地ありと考えています。2, 3 については、満点では無いですが、自分としては手応えがあったので、もう少し深掘りしたいなと思っています。

引き続き実験してみます。

*1:水彩のテクニックは、実際にゲームで使うとなった場合は制約が多いので。

UE4 : 水彩 Post Process Material


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

f:id:Aqu:20180702230450j:plain:w700

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

用意したもの

モデル

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

テクスチャ

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

RGB イメージ 用途 説明
R f:id:Aqu:20180704225552j:plain:w100 Paint Area 色を塗るエリアを、白黒の濃度(今回は16段階)で塗り分けたマップです。決め打ちで14段階目のグレー はアウトライン。16段階名のブラックは背景。として利用しています。
G f:id:Aqu:20180704225625j:plain:w100 Paint Outline アウトラインを追加するマップです。アウトライン用メッシュは形状が平坦なところではラインが出ません。それを補足するため、テクスチャでラインを追加します。今回はトトロのお腹の三角形の模様部分に使っています。詳細は後述。
B f:id:Aqu:20180704225640j:plain:w100 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」を利用して特定のマスク領域を抜き出しています。

f:id:Aqu:20180702231930j:plain:w700

抜き出された領域をベースにして色を塗っています。 今回はトトロ 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モデルの形状通りなので、そのまま着色すると、アウトラインからはみ出すような水彩の着彩には見えません。そこで、マスク領域に歪みや滲みを加えていきます。

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

歪み

f:id:Aqu:20180706012751j:plain:w128
UV のオフセットの値を、水面の歪み(上記テクスチャ)の値でズラす。

ノイズ

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

塗り位置のズレ

f:id:Aqu:20180703012813j:plain:w700 Buffer の UV をオフセットし 3D モデルの位置から色をズラします。

塗りムラ・液溜まり

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

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

影(セルフシャドウ)

f:id:Aqu:20180707013938j:plain

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

3, アウトライン生成

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

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

f:id:Aqu:20180703230843j:plain:w700

サンプルデータ

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

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 も用意しております。)