Bitmap2Materialで写真から簡単物理マテリアル

Category : CGTips · by 12月 2nd, 2014

今回はUnreal Engine 4 (UE4) Advent Calendar 2014の3日目の記事です。

Bitmap2Materialというツールを使用して、写真から簡単に物理ベースのマテリアルを作成する方法について書きます。

物理ベースのマテリアルとはなにかということについては以下に詳細が書かれています。

Unreal Engine | 物理ベースのマテリアル

物 理ベースのマテリアルとは、簡潔に言えばエネルギー保存の法則に基づき、入射光と出射光とで光のエネルギーの総和が等しくなるように設定されたマテリアル です。物理ベースという言葉を聞く前から、デフューズが明るいマテリアルにはスペキュラの値を入れ過ぎないようにしたり、デフューズの値を0.8以上は入 れないようにしていた方は多いと思います。「入射光と出射光とで光のエネルギーの総和が等しい」というとなんだか難しいですが、リアルな絵をつくろうとし た際にある程度自然にやっていたことなんですね。

物理ベースに基づいたマテリアルを使用すれば上記のサイトのサンプルのようにリアルな反 射 表現を使用した絵を作れるようになることもさることながら、CG屋さんにとっての一番の恩恵はどのようなシーンでもマテリアルの再調整を行うことなくライ トの設定で対応できるということだとおもいます。また物理ベースのマテリアルはすごい勢いで標準化が進んでいるので、UE4などのゲームエンジンにかぎら ず、Maya,Maxなどの統合ソフト、3Dペイントツールなどで全く同じ結果が得られるというありがたい環境が整いつつあります。

しか し 物理ベースのマテリアルは、接続されるテクスチャがかなり整理されているとはいえ、BaseColorとRoughnessが必要で、質感表現には NormalMapも欠かせないので、それだけのテクスチャーを作るとなると結構な作業量なんですよね…。なおかつスタッフがおのおの見た目で明るさを合 わせるのではなく、物理的に正しい値を入れるとなると、これまで陰影もデューズカラーに描きこんでいたCG屋さんにとっては、なかなかハードルが高いので はないかと思います。

そこで今回は写真一枚からBitmap2Materialというツールを使用して、陰影を除去した BaseColor の作成とRoughnessとNormalMapの作成を行い、物理的に正しいマテリアルの計測値に(なんとなく)合わせて、簡単に物理マテリアル(っぽ いもの)を作る方法について書いてみたいと思います。

Bitmap2Materialは以下から購入できます。UE4やMaya,Max等に自動で書き出す機能を制限したインディー版は5000円程度で購入できます。登録が必要ですが体験版を落とす事もできます。

Bitmap2Material | Image to Material Generator | allegorithmic

※ Steamでも時々セールを行っているので、少しでも安く手に入れたいという方はセール期間中に覗いてみるといいでしょう。
では制作方法に入ります。

写真を一枚用意します。
あえてシームレス加工されておらず、陰影も偏っているテクスチャを選びました。20141202-00_sample

Bitmap2Materialで画像の作成

まずはBitmap2Materialでの作業です。

Bitmap2MaterialのUIは以下のようになっています。(ウィンドウの配置はデフォルトとは変えています、すいません…)20141202-01_ui

ファイルメニューからBitMapMaterial_3_UE4を選びます。
マテリアルの見た目が少し変化します。
20141202-02_config

次に画像ファイルを2DViewにドラッグ&ドロップしてLoadInMainInputTweakを選びます。各種マテリアルが生成されます。20141202-03_drag

ま ずはGlobalの設定を見ます。ここで重要なのは画像から奥行き情報を取りだすためのメソッドです。LuminanceBasedは画像の明るさで奥行 きを判断します。SlopeBasedはライトの角度と(それから推測される)画像の傾斜を基準に奥行き情報をつくります。ここではSlopeBased を選びます。20141202-04_slope

つ ぎにLightAngleを設定します。ライトの向きというと矢印の角度をライトの向きに合わせるのを想像しがちですが、ここでは光が差し込んでくる方向 に矢印を向けます。通常の感覚と逆なので注意が必要です。LightEqualizerもいい感じになるように設定します。20141202-05_light

こ の時のコツは2DViewの表示はHightMapにしておくことです。画像の明るさだけ見ると左側面が明るくなっていますが、これは左から光が差し込ん でいるからで一番高い点は明暗の境目であると想像できます。なのでカラーの明暗の境目が白に近く周辺に近づくにしたがって暗くなるHightMapになる ように調整すればいいのです。
20141202-08_hight

 

またShaderの設定をPhysical_Specular_glossinessにしておくことでカラー情報を省き、凹凸を正しく設定することに集中できるのでお勧めです。

次 にBaseColorの設定です。LightCancellationの値をあげます。文字通りライトの効果を除去します。細かい説明は省きますが、シャ ドウ、ハイライト、アンビエントオクルージョンの明暗や彩度の調整を行うことで、陰影をほぼ取り除くことができると思います。

元写真とくらべてみると陰影情報がほとんどなくなっているのが確認できます。すごいですね。
20141202-07_colortex

陰 影が全くついていないテクスチャではつまらない絵になるのでは?と思われるかもしれませんが、BaseColorに陰影がついていると二重に陰影がのって おかしなことになるので、大胆にとってください。下記のサンプルのような素敵な絵でもBaseColorのみではのっぺりとしたつまらない絵です。

Unreal Engine | ビューモード

ページ真ん中あたりのBase Color (基本色)
同様にRoughnessの設定も行います。

詳細は省きます。
元画像がシームレスではないので、シームレスの加工も行っておきます。GlobalParametersのMakeItTileをRandomにし、 Tiling Random Angle Variationで細分化された画像を回転してランダムにします。同時に元画像をランダムに繰り返して大きな画像として出力したいので、 Advanced ParametersのInput Scaleを調整して元画像の繰り返し回数を増やします。20141202-09_tile

Metallicについてはよくわかっていません…。今回はMetallicは出力しないで他のテクスチャを元にPhotoshopで作ることにします。

各種テクスチャが完成しましたのでエクスポートします。

Photoshopで適正な値に調整

各種画像を書き出しましたが、このままでは適正な明るさではありません。理由はいろいろあるのですが一番の要因は写真の露出が統一されていないためです。そこでQuixelで公開しているマテリアルの物理的に正しい値を参考に調整を加えます。

PBR In Practice | Marmoset

こ れによると岩のAlbedo(baseColor)は(155,145,130)で輝度の平均は143、Microsurfaceは(61,62,64) で輝度の平均は62ですが、これは値が大きくなるほどつややかになるGlossinessの設定です。UE4では値は大きくなるほどマットになる Roughtnessの設定を使用するので、逆の数値の193をいれます。

書きだした画像はこのような数値になっていないため、 Photoshopのレベル補正などを使用して画像の輝度の平均値をこの値に近づけます。Photoshopでウィンドウのヒストグラムを表示し三角のプ ルダウンから拡張表示を行うと画像の現在の輝度の平均値の確認ができるようになるので便利です。
20141202-10_photop01

※補足
Bitmap2Materialはグレースケールの画像を出力した場合、グレースケールのTGAとして保存するようです。この画像はUE4では読み込めないので、明るさを編集したついでにRGBになおして保存してください。

UE4でマテリアルを構築

UE4 にBaseColor、Roughness、Normalのテクスチャを読み込み、新規マテリアルに接続します。UE4での作業はこれで終わりです。(今 回の例ではマテリアルを大きな壁に接続しているのでUVCoodinateでUVの繰り返し回数を変更しています)

なかなかいい感じになったと思います。

※ Specularは岩や木材などの基本的なマテリアルでは使用しません。
(入力がない場合、0.5が接続されていますがそのままでOKです)

20141203-11_ue4_2

20141202-14_detail_ue4

…と、せっかくのUE4 Advent CalendarなのにちょっとUE4成分が少なすぎですね…
ついでなのでUE4でディテールマップを追加してみたいと思います。

 

おまけ ディテールマップ

ディテールマップにはこんな画像を使用しました。

20141202-detail

ここからNormalとHightMapを作りたいと思います。Bitmap2Materialでの作業は同じことしかやっていないので省略します。なお画像を単独で出力したい場合は2DViewから右クリックでも可能です。
出力したのはHeightMapとNormalMapです。それぞれBaseColorとNormalMapでのディテールとして追加したいと思います。
20141202-detail2

HightMap はBaseColorにオーバーレイで合成します。NormalMapははディテールのNormalMapのRG情報と、元のNormalMapのRG情 報を乗算合成し、その結果に元のNormalMapのB情報と合成してマテリアルのNormalに接続します。(ディテールマップのB情報(深度)の合成 まで行うとおかしな結果になるためです)。
20141203-11_ue4_detail3

ディ テールマップの繰り返し回数、Normalへの合成の強さ、カラーへの合成の強さはパラメーター化しておきます。作成したマテリアルを元にマテリアルイン スタンスを作成し、壁に作成したマテリアルインスタンスを割り当てて先ほどのパラメーターを調整します。マテリアルインスタンスを作成することでパラメー ターの調整がマテリアルの再ビルドを挟むことなく、リアルタイムで調整が可能になります。

すこし分かりにくいですが、壁の質感が増し、画像がぼけている印象が抑えられたかと思います。
20141202-14_detail_ue4
20141202-15_hikaku

ついでにライティングを変えて夜っぽくしてみました。そこそこ正しいNormalMapや陰影を取り除いたBaseColorを使用しているため、下からのライティングの影響を反映できているように見えます。
20141202-17_night

 

最後にダメな例としてBaseColorに写真そのままの画像を使用し、PhotoshopのNormalMap作成機能で作成したマップをそのまま使用するという例をみてみましょう。(縦横比もシームレス加工もしていないので同じマテリアルにさえ見えませんが…)
20141202-18_wrong

今回行ったような計測値に明るさを合わせるという、ややいい加減な方法ではなく、自分で正確に計測して物理的に正しい値を取りたいという方は、Cedecのカプコンさんの事例が参考になると思います。
カメラ的に正しいフォトリアルグラフィック制作ワークフロー

登録すればドキュメントを読むことが出来ますので、興味のある方はぜひ。
また、UDKのドキュメントですが、スペキュラーハイライトや平行光源を除去し、テクスチャ作成のベースとして使用できる写真を簡単に素早く撮影する手法の説明はこちらも参考になると思います。
テクスチャ用の写真を上手く撮るには

明日はToorsooさん「UE4 + Leapmotionでもっと遊んでみた」です。
なにこれすげえ!!

SHARE :