Cross Road

Unity、VR、MR、ARを中心とした技術ブログ

Unityモデルの見た目を調整する方法をまとめました

3Dモデルのアセットを使うとき、見た目をもう少し整えたいなと思うことがあります。

「Unity きれいな表現」、「Unity 見た目」などで調べると色々と情報が出てくるのですが、自分の持っているモデルに直接適用できるかがよくわかりませんでした。

そこで、Shader周りの実践も兼ねて検討したことをまとめてみました。

「Asset Storeで買ったモデルの見た目を変える」が今回の目的なので、Asset Storeでモデルを買いました。

使ったモデルは、Urban City Sceneというアセットです。

タイトル通り、都会の街のようなシーンが得られます。
(2018/2/20追記 このアセットはdeperecatedになっていました)

f:id:Takyu:20180711002223j:plain


このアセットの中にあるコンビニ?のようなモデルを使って見た目を変えてみました。


================================
以後、今回使ったモデルを「コンビニ」と呼びます。
================================


まず、Slow_Mart_Area_WHOLEというコンビニモデルだけを表示させます。

f:id:Takyu:20180711002237j:plain


色々と調整して、最終的にこうしました。

f:id:Takyu:20180711002251j:plain


(見た目の表現については好みもあるので、最初の方がよいということもあると思います)


以下、段階的に紹介します。

1. ShaderをStandardに変更

このアセットはUnity5以前に公開されており、Unity5で開くと、ShaderがLegacyに分類されています。

まず、ShaderをStandardにします。

ShaderのAlbedoの横にある色を適当に変更し、さらにその下のEmissionの色を指定すると、このように見た目を多少変更できます。

f:id:Takyu:20180711002305j:plain

2. 駐車用ポールを金属に変更

Unity5のStandard Shaderを使って、見た目を金属にします。

Unity社から、色々な見た目にするためのMaterialがセットになったサンプルアセット「Shader Calibration Scene」が出ているので、これを使います。


このアセットには、Shaderを使った表現に関するサンプルが多数入っています。
今回は、インポートするとAssets/PBSMetallic/Material の中にある、金属マテリアルのCopper(銅)を使いました。

このマテリアルをGround_Post51〜62のオブジェクトに適用するとこうなります。

f:id:Takyu:20180711002514j:plain


ちなみに、CopperのマテリアルはShader Calibration Scene がなければ使えないということはなく、Standard Shaderの調整でも同じものが作れます。

同じものを作る場合、下記のようにマテリアルを設定してください。

f:id:Takyu:20180711002558j:plain

3, 店舗外観にNormal Mapを割り当て

Normal Mapとは、Unity公式ページによると、モデル表面に凹凸、傷などを表現できる特殊なテクスチャです。

法線マップ(Normal Map)(Bump mapping) - Unity マニュアル


もう少しわかりやすく説明すると、テクスチャの面に対して垂直な(法線)ベクトルの情報であり、ポリゴンの頂点数を増やすことなく、テクスチャにより細かい表現力を与えることができます。


ここに、よりわかりやすい解説がありましたのでご参照ください。


Normal Mapは通常のテクスチャから作成可能です。作成方法は2種類あります。

(1) Photoshop で作成

(2) Webサービスを使う


(1)の場合は、下記に簡潔に書かれていましたのでご参照ください。

PhotoshopCC 2015を使い法線Map作成


(2)の場合、例えば以下を使うことでNormal Mapを取得できます。

NormalMap-Online

使い方はシンプルで、①の場所に画像(jpg,png,tiffなど)をドロップし、②のDownloadをクリックするだけです。

f:id:Takyu:20180711002637j:plain

作成したNormalmapについて、私の場合はpng形式で保存しました。(他の形式でよいかは未確認です)

次に、Normal mapを該当するShaderのオプションで指定します。

f:id:Takyu:20180711002652j:plain

すると、このような警告が出るので、Fix Nowをクリックします。

f:id:Takyu:20180711002705j:plain

そうすると、NormalmapがShaderに反映され、このようになります。

f:id:Takyu:20180711002720j:plain


冒頭で紹介した初期状態の画像と比較すると、壁や窓の部分の精細さが増しているのが判別できます。

4. 地面にNormal Mapを割り当て

コンビニの構成オブジェクトにあるCar_Parkというオブジェクトを選択します。これについているテクスチャ"Car_Park_COL"を使って、同じように法線マップを作成し、設定します。

ここまで実行すると、このようになります。

f:id:Takyu:20180711002742j:plain

地面に凹凸がついたことで、地面とお店部分に遠近感を感じられるようになりました。

5. 屋根部分にテクスチャを割り当て

4までで終わってもよかったのですが、この状態だと「Slow Mart」と書かれた屋根部分だけがのっぺりした印象だったので、ここも少し変えてみることにしました。


まず、前提としてこのアセットはほぼ全てのテクスチャがpsd形式のため、PhotoShopがあると色々編集しやすくなります。屋根部分のテクスチャもpsd形式のファイルであり、PhotoShopで開くとこのように見えます。

f:id:Takyu:20180711002814j:plain

今回は、このpsdファイルを使って、一番左の赤とその隣の青の見た目を変えました。

まず、①選択ツールを選んでから、赤い部分をマウスで選択します。選択した箇所で右クリックし、②「選択範囲をコピーしたレイヤー」を選択します。

f:id:Takyu:20180711002836j:plain

すると、右下の「レイヤー」というタブに新しくレイヤーが追加されます。同様に赤の右隣の青でも同じ処理を実行して青の部分だけ別レイヤーにします。

すると、このように元のレイヤーに対して2つのレイヤーが追加されます。

f:id:Takyu:20180711002856j:plain

ここで、上記画像の「レイヤー2」、「レイヤー3」のそれぞれで右端をダブルクリックすると、このようなメニューが出てきます。

f:id:Takyu:20180711002912j:plain

順番の通り、①テクスチャオプションにチェックを入れ、②任意のテクスチャを選び、③OKをクリック、と進めると、レイヤー全体に選択したテクスチャの模様がつきます。

これを赤と青のレイヤーの両方で実施すると、このようになります。

f:id:Takyu:20180711002928j:plain

このテクスチャを屋根部分のオブジェクト"Mart_TOP"に割り当てると、このようになります。

f:id:Takyu:20180711002944j:plain

これは、冒頭紹介した画像と同一です。

なお、先ほどPhotoShopで加工したテクスチャからNormalMapを作成し、"Mart_TOP"に割り当てると、このようになります。

f:id:Takyu:20180711003002j:plain

屋根部分の色調整が間に合ってないので元の赤っぽい色から変わってしまっていますが、どちらがよいか、は好みになりそうです。

補足

モデル単体を変える以外にも、Skyboxで全体を変える方法もあります。

今回初めて知ったのですが、Materialを作って、SkyBox/ProceduralというShaderを指定すると、このMaterialをSkyboxに割り当てることができます。

たとえば、このような見た目を簡単に作ることができます。

f:id:Takyu:20180711003023j:plain

設定画面は下記の通りです。

f:id:Takyu:20180711003041j:plain

SkyTintとGroundの色を調整することで、見た目をかなり変化させることができます。

終わりに


見た目の調整は、PC・スマホ向けゲームやVR向けコンテンツの開発時に必要となります。

見た目の調整方法を紹介する記事はなかなか見つからず、あってもCubeやSphereベースの解説だったので、実際に試してみました。

色々試した結果、金属マテリアルとNormal Mapの調整が最も影響があることがわかりましたが、模様の少ないテクスチャにはNormal Mapは効きづらいはずなので、その場合にどうするか、なども考える必要があると思いました。

他にどんな方法があるか、についても体型的に整理してみようと思います。また、金属マテリアルはモバイルで使うとどれくらいの負荷なのかは気になります。

その辺りは別の機会で検討してみたいと思います。