夏までにiPhone アプリつくってみっか!

趣味でiPhone/Androidアプリを開発し、日々勉強した事を書いています。オープンワールド系レースゲームをUnityで開発中です。

【Blender】線がガタガタにならないようにテクスチャマッピング

テクスチャマッピングという言葉を初めて聞いたのは確かバーチャファイター2が出た時だったと重います。
前作のバーチャファイターはいかにも「ポリゴンでできています」という見た目が特徴的でしたが、2では一気にポリゴン感が薄れリアル感がアップして興奮させられました。

さて、今回は自分にとって初めてのテクスチャマッピングということで喜び勇んでCR-XをUV展開します。
Export UV LayoutでUVレイアウトの図をPNGファイルとして出力しますが、この時Fill Opacityの値を0.00にして出力することをお勧めします。
そうしないとレイアウトのポリゴン部分に薄い色がついてしまい、後でテクスチャを書き込む時に正しい色が分かりにくくなってしまいます。

テクスチャの書き込みはレイヤー操作が可能なペイントソフトを使用し、Blenderで出力したUVレイアウトを上に重ね、別のレイヤーにテクスチャを書き込んで行きます。
書き込み終わったらUVレイアウトのレイヤーをを非表示にした状態でPNGファイルを出力します。

早速Blenderにテクスチャーを取り込み表示してみると、なんだこりゃ!
f:id:takujidev:20151015215014j:plain

線がガタガタでプレステ1のグランツーリスモみたくなっているじゃないですか!
テクスチャのサイズは1024 x 1024ピクセルにしましたが、ボディパネルの隙間を表現した黒い線は明らかに解像度が不足しています。
ただ、良く見るとポリゴンで境界が区切られている窓枠やライトの周囲はガタガタにはなっていないので、ライトのような細かい書き込みが必要な部分以外はポリゴン単位で色付けすればプレステのようにならずに済みそうです。
わざわざ色毎にポリゴンを分割するのはポリゴン数の無駄に思えますが、ガタガタになるよりは良いでしょう。

色毎にポリゴンを分けたらそのエッジをMark Seamでをつけていきます。Mark Seamで印をつけたエッジはUV展開の時に切り離されるので、同じ色に塗るポリゴンを近くに配置します。こうすると後からあまり考えずに色を塗ることができます。
また、ライトのように書き込みする部分はUV展開する時に大きめにしておくと解像度を稼げます。

完成したUVレイアウトがこちら。なお、サイズは先ほどの例の1/4の512 x 512ピクセルにしました。
f:id:takujidev:20151015221102p:plain

試しに塗ってみたテクスチャがこちら。
なお、テールランプの赤い部分はまだ細かく書き込んでいません。
f:id:takujidev:20151015221326p:plain

細かく書き込みたい部位は大きめになっているのがわかると思います。

なお、タイヤ・ホイールは一旦ボディのオブジェクトにCtrl-Jで統合し、UV展開後再び切り離しました。
これは、複数のオブジェクトで1つのテクスチャを共有するために、一旦1つのオブジェクトに統合した状態でUV展開し、レイアウトを調整する必要があるためです。
他にもっと良い方法があるかも知れませんが。

Blenderにテクスチャを取り込んで表示した結果がこちら。
f:id:takujidev:20151015222118j:plain

最初の絵と比べるとボディパネルの線がくっきりしているのがわかると思います。

残念ながら、ヘッドライトの反射は上手く描けませんでした。
また、平面に描いただけだと斜めから見ると不自然に見えますね。
これは別の表現方法を考えたいと思います。

ちなみにテクスチャ描き込みにはこちらのツールを使っています。

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