CrossRoadスマートフォン用の表示で見るCrossRoadAR、MR、VR、Babylon.jsを中心とした技術ブログ。Asset3Dモデルのアセットを使うとき、見た目をもう少し整えたいなと思うことがあります。見た目」などで調べると色々と情報が出てくるのですが、自分の持っているモデルに直接適用できるかがよくわかりませんでした。そこで、Shader周りの実践も兼ねて検討したことをまとめてみました。Storeでモデルを買いました。Sceneというアセットです。タイトル通り、都会の街のようなシーンが得られます。このアセットはdeperecatedになっていました)このアセットの中にあるコンビニ?のようなモデルを使って見た目を変えてみました。================================以後、今回使ったモデルを「コンビニ」と呼びます。はじめにまず、Slow_Mart_Area_WHOLEというコンビニモデルだけを表示させます。調整して、最終的にこうしました。(見た目の表現については好みもあるので、最初の方がよいということもあると思います)調整方法を紹介していきます。ShaderをStandardに変更このアセットはUnity5以前に公開されており、Unity5で開くと、ShaderがLegacyに分類されています。ShaderをStandardにします。ShaderのAlbedoの横にある色を適当に変更し、さらにその下のEmissionの色を指定すると、このように見た目を多少変更できます。Shaderを使って、見た目を金属にします。Scene」が出ているので、これを使います。このアセットには、Shaderを使った表現に関するサンプルが多数入っています。中にある、金属マテリアルのCopper(銅)を使いました。このマテリアルをGround_Post51〜62のオブジェクトに適用するとこうなります。Shaderの調整でも同じものが作れます。同じものを作る場合、下記のようにマテリアルを設定してください。Mapとは、モデル表面に凹凸、傷などを表現できる特殊なテクスチャです。マニュアルもう少しわかりやすく説明すると、テクスチャの面に対して垂直な(法線)ベクトルの情報であり、ポリゴンの頂点数を増やすことなく、テクスチャにより細かい表現力を与えることができます。ここに、よりわかりやすい解説がありましたのでご参照ください。Mapは通常のテクスチャから作成可能です。作成方法は2種類あります。Webサービスを使う(1)の場合は、下記に簡潔に書かれていましたのでご参照ください。Mapを取得できます。NormalMap-Online使い方はシンプルで、1の場所に画像(jpg,png,tiffなど)をドロップし、2のDownloadをクリックするだけです。作成したNormalmapについて、私の場合はpng形式で保存しました。mapを該当するShaderのオプションで指定します。Nowをクリックします。すると、NormalmapがShaderに反映され、このようになります。冒頭で紹介した初期状態の画像と比較すると、壁や窓の部分の精細さが増しているのが判別できます。Mapを割り当てるコンビニの構成オブジェクトにあるCar_Parkというオブジェクトを選択します。これについているテクスチャ"Car_Park_COL"を使って、同じように法線マップを作成し、設定します。ここまで実行すると、このようになります。地面に凹凸がついたことで、地面とお店部分に遠近感を感じられるようになりました。Mart」と書かれた屋根部分だけがのっぺりした印象だったので、ここも少し変えてみることにしました。前提としてこのアセットはほぼ全てのテクスチャがpsd形式のため、PhotoShopがあると色々編集しやすくなります。屋根部分のテクスチャもpsd形式のファイルであり、PhotoShopで開くとこのように見えます。今回は、このpsdファイルを使って、一番左の赤とその隣の青の見た目を変えました。1選択ツールを選んでから、赤い部分をマウスで選択します。選択した箇所で右クリックし、2「選択範囲をコピーしたレイヤー」を選択します。すると、右下の「レイヤー」というタブに新しくレイヤーが追加されます。同様に赤の右隣の青でも同じ処理を実行して青の部分だけ別レイヤーにします。すると、このように元のレイヤーに対して2つのレイヤーが追加されます。ここで、上記画像の「レイヤー2」、「レイヤー3」のそれぞれで右端をダブルクリックすると、このようなメニューが出てきます。順番の通り、1テクスチャオプションにチェックを入れ、2任意のテクスチャを選び、3OKをクリック、と進めると、レイヤー全体に選択したテクスチャの模様がつきます。これを赤と青のレイヤーの両方で実施すると、このようになります。このテクスチャを屋根部分のオブジェクト"Mart_TOP"に割り当てると、このようになります。これは、冒頭紹介した画像と同一です。先ほどPhotoShopで加工したテクスチャからNormalMapを作成し、"Mart_TOP"に割り当てると、このようになります。屋根部分の色調整が間に合ってないので元の赤っぽい色から変わってしまっていますが、どちらがよいか、は好みになりそうです。Tipsモデル単体を変える以外にも、Skyboxで全体を変える方法もあります。今回初めて知ったのですが、Materialを作って、SkyBox/ProceduralというShaderを指定すると、このMaterialをSkyboxに割り当てることができます。このような見た目を簡単に作ることができます。設定画面は下記の通りです。SkyTintとGroundの色を調整することで、見た目をかなり変化させることができます。終わりに見た目の調整は、PC・スマホ向けゲームやVR向けコンテンツの開発時に必要となります。見た目の調整方法を紹介する記事はなかなか見つからず、あってもCubeやSphereベースの解説だったので、実際に試してみました。Mapは効きづらいはずなので、その場合にどうするか、なども考える必要があると思いました。他にどんな方法があるか、についても体型的に整理してみようと思います。金属マテリアルはモバイルで使うとどれくらいの負荷なのかは気になります。その辺りは別の機会で検討してみたいと思います。»ProfileAR、MR、VR、Babylon.jsを中心とした技術ブログです。広く色々な技術を勉強するのが好きで、あれこれ書いています。詳細なプロフィールはこちらをご確認ください。2020)■プライバシーポリシー■こちらに記載しておりますのでご確認ください。■お問い合わせ■こちらよりお願いいたします。月別アーカイブスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。