【Blender, Unity】車体各部の材質の違いによるツヤ・反射の具合をテクスチャでコントロールする
前回はテクスチャマッピングでCR-Xのボディやタイヤ・ホイールの色の塗り分けをしました。
テクスチャマッピングで色をつけるとマテリアルを分ける必要がないのでドローコールが減ってUnityでの表示処理が軽くなるはずですが、そのままだと全体に同じ質感が適用されてしまいます。
そのため、BlenderやUnityのマテリアルのパラメーターでボディのツヤや映り込みを適切に設定するとタイヤやボディパネルの隙間まで万遍なく艶やかになってしまいます。
これではリアリティが無さすぎるので、今回はスペキュラーマッピングを施して車体の部位や材質によって適切な質感になるように改良してみました。
まずは結果から。
Blenderで普通にSpecular、Mirrorの設定をした状態です。
向かって左のライトに光が当たるようにしていますが、ライトの周囲の本来隙間になっている部分まで光を反射してしまっています。また、タイヤの側面が周囲の色を反射してまるで硬いプラスチックでできているように見えます。
スペキュラーマップのテクスチャを適用してみました。
ライト周囲の隙間の部分の反射が抑えられているのがわかりますか?
この状態ではまだタイヤの質感はそのままなので、ボディの映り込み(Mirror)にもテクスチャを設定します。
タイヤやドアモールの反射が抑えられました。ちょっと抑えすぎな気もしますがまあいいでしょう。
また、ドアとボディの隙間がつや消しになり、ちゃんと分離しているように見えます。
お次はUnityです。
UnityのスタンダードシェーダーではBlenderとは違い、1つのテクスチャで反射と環境マップの映り込みがコントロールされるので設定するテクスチャは1つだけです。
スペキュラーマップ適用前
適用後
タイヤの質感が変わっているのがわかりますか?
また、タイヤハウスの内側やバンパーの空気取り入れ口の反射も抑えられています。
さて、これらの質感の設定を実現するテクスチャの作り方ですが、私の場合は例によってこのソフトを使いました。
多分他のペイントソフトにも同じような機能はあると思います。
塗る場所を決めるために前回色付け用に作ったUVレイアウトを引き続き使用します。
表現したい材質に合わせてグレースケールで色をつけます。
よく反射する材質は白、全く反射しない材質は黒、その中間の材質は反射率に合わせた灰色といった感じです。
こうなりました。
まずは、BlenderのMirror用のマップとしてUVレイアウトの線画のレイヤーを非表示にして書き出します。
次に、これをベースにBlender、Unity用のスペキュラーマップを作りたいので、レイヤーをコピーします。
複数レイヤーに分けて作っていた場合は、それらのレイヤーをコピーしてから統合します。
次に、編集→色調補正→階調反転で白黒の階調を反転します。
最後に、編集→輝度を透明度に変換で白黒をアルファ値に変換します。
ソフトによっては輝度を透明度に変換する時の扱いが逆(輝度=不透明度)だったり、変換した後のベースの色が白だったりするかもしれません。その時は階調反転と輝度の変換の順番を逆にするなど手順の調整が必要かもしれません。
いずれにしましても、必要なのは黒ベースにアルファチャネルが乗った画像です。
Blenderのスペキュラー設定ではアルファチャネルしか見てないようで、白ベースでも黒ベースでも同じ結果になりますが、Unityではベースの色(RGBチャネル)がStandard ShaderのMetallic設定、アルファチャネルがSmoothness設定に対応するので、ベースの色で表示結果が変わります。
ちなみに白ベースのテクスチャーだとこのようにメッキをかけたような質感になります。
Zガンダムに出てくる百式を再現する時にはいいかも知れませんね。
UnityのStandardシェーダーにスペキュラーマップを設定するにはMetallicのテクスチャ用スロットにプロジェクトファイルにコピーしたテクスチャーファイルをドラッグ&ドロップします。
Standard(Specular setup)シェーダーの場合はSpecularのテクスチャスロットにドラッグします。
私は環境マッピングによる映り込みがよりはっきりしているStandardシェーダーの方が良いと思いました。
先ほど書いた通り、Unityではスペキュラーと環境マップの映り込みは1つのテクスチャ(アルファチャネルによるSmoothnessの値)で制御されます。
アルファ値が高ければ表面がなめらかになり周囲の景色がはっきりと映り込みます。また、スペキュラーはより鋭く小さくなります。
これが結構厄介で、アルファ値が最大だとスペキュラーが小さくなりすぎて逆に見えなくなり、ツヤ感が下がってしまいます。
ペイントソフトでアルファ値を変更したテクスチャをいくつか作って比べてみました。
アルファ値が100%の場合
98%に下げた場合
95%に下げた場合
フェンダーのあたりのスペキュラーの大きさとボディに映る景色を比べてみてください。100%の場合はスペキュラーが全く見えません。95%に下げたくらいがちょうどいい感じですが、景色の映り込みが弱いので、私は間をとって98%に設定しました。
Blenderの場合はまずMaterialのパネルを開いてからTextureのパネルを開き、テクスチャのスロットを一つ選び、Newをクリックします。
まだ色のテクスチャを設定していない場合はImageのOpen Imageアイコンをクリックして前回作った色分け用のテクスチャを設定します。
同様にSpecular用とMirror用のテクスチャも開きます。
Specularのテクスチャを設定する場合はマテリアルパネルのSpecularのIntensityは0.000に設定し、テクスチャパネルのSpecular: Intensityにチェックを入れます。一方、MirrorのテクスチャはShading:Mirrorにチェックを入れます。
以上の設定でBlender上でいい感じに表示されると思います。
さて、ここで残念なお知らせがあります。
秋葉原を舞台にしたオープンワールドなレースゲームというコンセプトでこれまで開発してきましたこのゲームですが、モバイルデバイスでは満足できる処理速度が出ないことが判明しました。
最近開発機としてiPhone 6を使い始めましたが、目標としてきた30フレームには届きませんでした。
もしかするとiPhone 6sだと行けるかもしれませんが、最新機でしか満足に遊べないゲームというのも考えものです。
また、アプリのサイズも問題で、現状200Mバイト以上あります。
これではストレージの空き領域が厳しい16GBのiPhoneからは真っ先に消される運命でしょう。
そこで、少しコンセプトをねじ曲げようかと考えています。
舞台を秋葉原ではないもう少しシンプルな景色の場所にして処理速度を稼ぎやアプリサイズを小さくするという目論見です。
もしかするとオープンワールドという要素も置き去りになる可能性があります。
と、いう訳で、完成がいつになるのか全く目処がつきませんが、コンセプトをリニューアルしてさらに開発を進めていきたいと思います。
https://itunes.apple.com/jp/app/toraberushutingu-retorona/id917570972?mt=8&uo=4&at=10laCt
https://itunes.apple.com/jp/app/beecluster-wu-liaono-zongsukurorushutingugemu/id663801586?mt=8&uo=4&at=10laCt
【Blender】線がガタガタにならないようにテクスチャマッピング
テクスチャマッピングという言葉を初めて聞いたのは確かバーチャファイター2が出た時だったと重います。
前作のバーチャファイターはいかにも「ポリゴンでできています」という見た目が特徴的でしたが、2では一気にポリゴン感が薄れリアル感がアップして興奮させられました。
さて、今回は自分にとって初めてのテクスチャマッピングということで喜び勇んでCR-XをUV展開します。
Export UV LayoutでUVレイアウトの図をPNGファイルとして出力しますが、この時Fill Opacityの値を0.00にして出力することをお勧めします。
そうしないとレイアウトのポリゴン部分に薄い色がついてしまい、後でテクスチャを書き込む時に正しい色が分かりにくくなってしまいます。
テクスチャの書き込みはレイヤー操作が可能なペイントソフトを使用し、Blenderで出力したUVレイアウトを上に重ね、別のレイヤーにテクスチャを書き込んで行きます。
書き込み終わったらUVレイアウトのレイヤーをを非表示にした状態でPNGファイルを出力します。
早速Blenderにテクスチャーを取り込み表示してみると、なんだこりゃ!
線がガタガタでプレステ1のグランツーリスモみたくなっているじゃないですか!
テクスチャのサイズは1024 x 1024ピクセルにしましたが、ボディパネルの隙間を表現した黒い線は明らかに解像度が不足しています。
ただ、良く見るとポリゴンで境界が区切られている窓枠やライトの周囲はガタガタにはなっていないので、ライトのような細かい書き込みが必要な部分以外はポリゴン単位で色付けすればプレステのようにならずに済みそうです。
わざわざ色毎にポリゴンを分割するのはポリゴン数の無駄に思えますが、ガタガタになるよりは良いでしょう。
色毎にポリゴンを分けたらそのエッジをMark Seamでをつけていきます。Mark Seamで印をつけたエッジはUV展開の時に切り離されるので、同じ色に塗るポリゴンを近くに配置します。こうすると後からあまり考えずに色を塗ることができます。
また、ライトのように書き込みする部分はUV展開する時に大きめにしておくと解像度を稼げます。
完成したUVレイアウトがこちら。なお、サイズは先ほどの例の1/4の512 x 512ピクセルにしました。
試しに塗ってみたテクスチャがこちら。
なお、テールランプの赤い部分はまだ細かく書き込んでいません。
細かく書き込みたい部位は大きめになっているのがわかると思います。
なお、タイヤ・ホイールは一旦ボディのオブジェクトにCtrl-Jで統合し、UV展開後再び切り離しました。
これは、複数のオブジェクトで1つのテクスチャを共有するために、一旦1つのオブジェクトに統合した状態でUV展開し、レイアウトを調整する必要があるためです。
他にもっと良い方法があるかも知れませんが。
Blenderにテクスチャを取り込んで表示した結果がこちら。
最初の絵と比べるとボディパネルの線がくっきりしているのがわかると思います。
残念ながら、ヘッドライトの反射は上手く描けませんでした。
また、平面に描いただけだと斜めから見ると不自然に見えますね。
これは別の表現方法を考えたいと思います。
ちなみにテクスチャ描き込みにはこちらのツールを使っています。
https://itunes.apple.com/jp/app/toraberushutingu-retorona/id917570972?mt=8&uo=4&at=10laCt
https://itunes.apple.com/jp/app/beecluster-wu-liaono-zongsukurorushutingugemu/id663801586?mt=8&uo=4&at=10laCt