テクスチャのリアル化

記事作成日 2018/12/16

※注意

各ソフトウェアは、解説に使用されているものと完全に同一のバージョンをダウンロードして使用してください。少しでもバージョンが違うと、相性問題が発生することが多いためです。

1.概要

ステージのフォトリアル化の続きです。

3Dグラフィックスでは、テクスチャを自動的に改変して、よりリアルに見せる仕組みがあります。
特に自然物（木、草、土、岩等）において、テクスチャのリアル化は非常に効果的です。


テクスチャのリアル化には、主に下の4つの手法があります。

1.法線マッピング（Normal Mapping）
凹凸が目立つようにテクスチャの色を変える手法です。平面なのに立体に見える「トリックアート」のテクスチャ版のようなものです。
「ノーマルマップ（Normal Map）」という青と紫が混ざったような画像を使って、テクスチャの色の変化のさせ方を指定します。

2.バンプマッピング（Bump Mapping）
法線マッピングと同様ですが、法線マッピングがxyzの3方向の情報を利用できるのに対し、バンプマッピングは高さの1方向のみの情報しか利用できません。バンプマッピングは、法線マッピング登場前に主に使用されていた古い手法です。
「ハイトマップ（Height Map）」というモノクロ画像を使って、テクスチャの色の変化のさせ方を指定します。
ハイトマップにおいて、50％グレーよりも暗い位置は引っ込んでいるように見えて、明るい位置は出っ張って見えます。

3.視差マッピング（Parallax Mapping）
2000年代後半以降では主流となっている手法で、ノーマルマップとハイトマップの両方を使用し、上2つよりリアルなテクスチャを生成します。ちなみに、日本で発明された手法です。

4.ディスプレイスメントマッピング（Displacement Mapping）
実際にモデル表面の頂点を移動させて細かな凹凸を作り出す手法です。
「ディスプレイスメントマップ（Displacement Map）」というモノクロ画像を使って、各頂点の移動のさせ方を指定します。


また、他に、

5.オクルージョンマッピング（Occlusion Mapping）
影をよりリアルにするマッピングです。（影の暗い部分がより暗くなり、また、影の形が柔らかくなります）
「オクルージョンマップ（Occlusion Map）」というモノクロ画像を使って、各ピクセルにおける間接照明の強弱を指定します。

6.スペキュラマップ（Specular Mapping）
表面の光沢（艶）の度合いを指定し、光の反射に反映させるマッピングです。
「スペキュラマップ（Specular Map）」というモノクロ画像を使って、各ピクセルにおける光沢の強弱を指定します。

等の補助的な手法もあります。


さらに、マッピング手法そのものではありませんが、ディスプレイスメントマッピングのクオリティを上げるための「テッセレーション（Tessellation）」という手法もあります。これは、自動的に頂点を生成して増やし、より細かく凹凸を生成できるようにするものです。
ディスプレイスメントマッピングと組み合わせて使用します。



以下では、視差マッピングとディスプレイスメントマッピングの2つの使い方について解説します。

2.ノーマルマップ等の生成

まず、テクスチャ画像から、ノーマルマップ、ハイトマップ、オクルージョンマップの3つを生成します。

1.Unityの画面左下側のProjectパネルで対象モデルのMaterialフォルダを開き、対象マテリアルを選択して、画面右側のInspectorに表示されたMain Mapsの下のAlbedoの左側にある四角欄をクリック。

2.Projectパネルで1つの画像ファイルのアイコンが黄色くハイライトされるので、それをクリック。

3.Projectパネルのファイル一覧表示の下のステータスバーに対象テクスチャの画像ファイル名が表示されるので、それをメモしておく。

4. Release AwesomeBumpv5.0 for Win7/8 x32 and x64 ・ kmkolasinski/AwesomeBump ・ GitHub から、AwesomeBumpV5.0Bin32x64Win7.zipをダウンロードして解凍し、その中に入っているAwesomeBump.exeを起動。
※注意
AwesomeBump起動中は、マウスのホイールスクロールは一切使用しないでください。（マウスカーソルを合わせてホイールをスクロールさせただけで数値が変わってしまい、元に戻せなくなります）
画面の縦スクロールのためにホイールを使用する人が多いと思いますが、AwesomeBumpではスクロールバーをドラッグして画面をスクロールしてください。

5.AwesomeBumpの画面中央上側の7個横に並んだアイコンのうち、一番左以外の6個をクリックして選択を解除する。（一番左だけがグレーにハイライトされた状態になります）

6.画面左上側の「フロッピーディスク＋上矢印」のアイコンをクリックして、3の画像ファイルを読み込む。

7.画面左側の設定項目のDiffuse to OthersのEnable previewにチェックを入れる。

8.すぐ右側のスクロールバーをドラッグして設定項目を下にスクロールし、Convertボタンをクリック。

9.画面の一番左側に縦に並んだアイコンのうち、小さなNマークが付いたアイコン（小さなアルファベットが付いたアイコン7個のうちの上から2番目）をクリック。

10.画面右側の青紫色の画像を見て、凹凸が逆になっていないかをチェック。もし凹凸が逆になっていたら、画面左側の設定項目のBasic＞Normal stepの右側のバーをドラッグして、数値をマイナスにしてください。（例：元が2.3なら、-2.3に変更等）
※凹凸が逆かどうかは、見た感じで判断してください。

11.画面左上側の「フロッピーディスク＋下矢印」のアイコンをクリックして、生成されたNormal Mapを適当な場所に保存。

12.次に、画面の一番左側に縦に並んだアイコンのうち、小さなHマークが付いたアイコン（小さなアルファベットが付いたアイコン7個のうちの上から4番目）をクリック。

13.10で凹凸を反転させた場合は、画面左上側のRecalculate from normal (output)ボタンをクリック。反転させていない場合はそのままでOK。

14.画面左上側の「フロッピーディスク＋下矢印」のアイコンをクリックして、生成されたHeight Mapを適当な場所に保存。

15.次に、小さなOマークが付いたアイコン（小さなアルファベットが付いたアイコン7個のうちの上から5番目）をクリック。

16.10で凹凸を反転させた場合は、画面左上側のRecalculate From Height and Normal (output)ボタンをクリック。反転させていない場合はそのままでOK。

17.画面左上側の「フロッピーディスク＋下矢印」のアイコンをクリックして、生成されたOcclusion Mapを適当な場所に保存。

3.視差マッピングの有効化

次に、上で生成した3種類のマップを設定して、視差マッピングを有効化します。
これは、単に、3種類のマップをStandard ShaderにセットすればOKです。

1.Windows標準エクスプローラから、3種類のマップ（3つの画像ファイル）を、Unityの画面左下側のProjectパネルのAssetsフォルダの中にドラッグ・アンド・ドロップ。

2.Unityの画面左下側のProjectパネルで対象モデルのMaterialフォルダを開き、対象マテリアルを選択して、画面右側のInspectorの右上の南京錠のアイコンをクリックして画面をロック。

3.画面右側のInspectorの一番上のShaderをStandardに変更。

4.画面右側のInspectorのMain Mapsの下のNormal Mapの左側にある四角欄に、画面左下側のProjectパネルのAssetsフォルダから、Normal Mapの画像ファイルをドラッグ・アンド・ドロップ。すぐ下にFix Nowボタンが表示されるのでクリック。
Height Map、Occlusionも、それぞれ同様に画像ファイルをドラッグ・アンド・ドロップ。
終わったら、必ず、再びInspector右上の南京錠のアイコンをクリックして、ロックを解除しておいてください。（ロックされたままだと他の操作ができません）

5.Sceneの表示を見ながらMetallic、Smoothness、Height Map、Occlusionのスライダーを動かしたり、Main MapsのTilingの数値を変えたりして、適切な表示になるように調整する。

4.ディスプレイスメントマッピング

次に、上で生成した3種類のマップを設定して、ディスプレイスメントマッピングを有効化します。
視差マッピングとディスプレイスメントマッピングのどちらが良いかは、レンダリング結果を見て好みで決めてください。

UnityのStandard AssetsにディスプレイスメントシェーダーであるBumped Specular (displacement)が入っているので、これを利用します。

1.まず、Standard Assetsをインポートします。（既にインポートしてある場合は不要です）
Standard Assets（非公式アーカイブ） を解凍し、Unity起動中にWindows標準エクスプローラからダブルクリックして起動します。
次に、～.cs等が上下に並んだリストが表示されたら、リスト右下のImportボタンをクリックすれば、インポート完了です。

2.画面左下側のProjectパネルで対象モデルのMaterialフォルダを開き、対象マテリアルを選択して、画面右側のInspectorの右上の南京錠のアイコンをクリックして画面をロック。

3.画面右側のInspectorの一番上のShaderをTessellation＞Bumped Specular (displacement)に変更。
また、右上側に3つ縦に並んだ大きめの正方形欄に、画面左下側のProjectパネルのAssetsフォルダから、それぞれ、元のテクスチャファイル、Normal Map、Height Mapの3つをドラッグ・アンド・ドロップ。
終わったら、必ず、再びInspector右上の南京錠のアイコンをクリックして、ロックを解除しておいてください。（ロックされたままだと他の操作ができません）
※Bumped Specular (displacement)では、ノーマルマップとハイトマップの2つを指定すれば、ディスプレイスメントマップを内部で自動的に生成してくれます。

4.Sceneの表示を見ながらShininess、Heightのスライダーを動かしたり、3種類のテクスチャのTilingの数値を変えたりして（3種類とも同じ数値を入力）、適切な表示になるように調整する。

5.写真テクスチャの入手

元々モデルに付属しているテクスチャを、インターネット上で入手可能な写真テクスチャに置き換えると、さらにテクスチャをリアルにすることができます。
写真テクスチャは、以下のウェブサイト等で、フリーで手に入ります。使用するモデルに合うテクスチャを探してみてください。

textures.com（無料会員登録すれば、1日につき15枚までフリーでダウンロード可能です）
テクスチャーのフリー（無料）写真素材-ぱくたそ


ダウンロードしたら、テクスチャをリサイズします。
まず、Windows標準ペイントでテクスチャファイルを開き、メインメニューのファイル＞プロパティをクリックします。
次に、幅と高さに、リサイズ後のサイズを入力します。
なお、テクスチャのサイズは、GPUの負荷を軽減するため、「正方形、かつ、2のべき乗のピクセル数」が基本です。512×512や1024×1024等のサイズが一般的です。（一般に、512だと低画質、1024だと中画質になります）
ちなみに、2048×2048だと、AwesomeBumpやUnityの動作が非常に重くなるので注意してください。
あとは、OKをクリックして別名保存すれば、テクスチャのリサイズは完了です。

リサイズしたテクスチャは、上と同様に、AwesomeBumpでノーマルマップ等を生成し、Windows標準エクスプローラから元ファイル＋ノーマルマップ等をUnityのProjectパネルのAssetsフォルダの中にドラッグ・アンド・ドロップした後、さらにUnityのProjectパネルのAssetsフォルダから対象マテリアルのInspectorのShader設定画面にドラッグ・アンド・ドロップして使用してください。

参考：

テクスチャマップの理解 | 特集 | CGWORLD.jp
【2018/2/20更新】【Unity】3Dモデルの見た目をきれいにする方法 - CrossRoad
Unity シェーダーチュートリアル　　ディスプレイスとテッセレーション - Tsumiki Tech Times|積木製作
オープンソースのテクスチャマップ作成ソフトAwesomeBumpを使ってみる | COREVALE コアベイル ただいまゲーム制作中