Blenderで作ったモデルをVRChatなどに持っていく際、処理を軽くするために、複数のテクスチャ画像を１枚にまとめることがあります。これをアトラス化といい、１枚にまとめられた大きなテクスチャをテクスチャアトラスと呼んだりします。
BlenderアドオンやUnityでテクスチャをまとめてくれるツールもありますが、今回はBlenderで自分でUVを新しく作り、テクスチャアトラスを作る方法を解説します。楽にやりたい、という方用ではありません。アトラス化を自分でやってみる基礎学習用と思ってください。（無料ツールなどを使う場合なら、手間はあまり変わらないような気もします）
また、テクスチャをアトラス化したあと、マテリアルを１つにする方法も解説しています。
この記事は、Blenderのテクスチャをアトラス化する方法を解説した中級者向けの記事です。
難易度
テクスチャのアトラス化とは
モデルに使用しているテクスチャを、１枚の大きなテクスチャにまとめることです。
顔や服、靴、ズボンなどに個別に使用しているテクスチャを１枚のテクスチャにまとめることで処理が軽くなります。VRChatなどゲームにモデルを持っていく場合は、なるべくテクスチャをまとめることが必要になってきます。
アトラス化のメリット
VRAM（GPUの画像処理専用のメモリ）消費を抑え、ドローコールを削減できます。
VRAMの節約
本来なら 10枚のテクスチャ（例：それぞれ 1024×1024）を読み込む必要があるところを、1枚の大きなテクスチャ（例：4096×4096）にまとめられる。
→ 読み込み枚数が減り、GPUメモリ使用量が軽減するケースがある。
ドローコール削減
それぞれのマテリアルごとに描画コールが発生するところを、アトラス化で1つのマテリアルにできるため、描画負荷が減る。
→ VRChatなどリアルタイム環境では特に効果が大きい。
アトラス化で注意するポイント
- アトラスが大きすぎると逆にVRAMに負担がかかる（例：8192×8192を無理に作ると重い）。
- 解像度が合わなくなり、まとめられた画像が荒くなってしまうことも（元のマテリアルの解像度に合わせてUVを並べる）
- ミップマップ（GPUがテクスチャを 遠くから描画するときに自動で縮小版を使う仕組み）の効率が悪くなることもある（大きな画像の一部しか使わない場合）。
- アトラス化するツールによっては、同じUVを再利用していた部分（左右対称部分を重ねてた場合など）が壊れることがある。
- ミラーモディファイアはアトラス化してから適用する
- 今回は自分でやるので気にしなくて大丈夫です。
また、なんでもかんでも１枚にアトラス化すればいいわけではなく、用途などを考えてまとめる画像を選ぶ必要があります。（小さいアクセサリパーツはまとめておいたり、透明マスクを使うものは別にまとめておいたり）
アトラス化しない方がいいもの
VRChat用に作るとして、アトラス化しない部品の例
- 小さく、細かいもの、こだわってるもの…テクスチャの解像度が必要になるため別にした方がいい場合もあります。
- 透過しているもの…透明部分のアルファマスクを作成するため、別テクスチャにした方が良い場合があります。
- 色変したいパーツ…服・靴・帽子、髪色、瞳など、色変更できるようにしたい場合
今回自分はテストで、特定のパーツをアトラス化から外してますが、後から思うと全部アトラス化すればよかったと思ってるので、各自の都合によって決めてください。
アトラス化前にやること
マテリアルの作り込み
前提として、すでにマテリアルは作っていて、必要最低限のUV展開をしてあるものとします。基本的にテクスチャのアトラス化は、テクスチャなど全部作ったあとに、最適化・軽量化のために行うものです。
マテリアルなどまだ作り込みたい、変更があるかもしれない、という場合のためにバックアップをとっておくと安心です。
テクスチャをアトラス化する
テクスチャアトラスのためのUVを作る
今回、以下の３つのテクスチャを作っていこうと思います。
- Diffuse（カラー）
- Normal（ノーマル、凹凸）
- roughness（ラフネス、粗さ）
この３つのテクスチャを作るために、１つアトラス用のUVを作ります。UVは、テクスチャを焼く型・設計図のようなものだと思ってください。（柄やデータの位置を決めてます。）この型を使いまわして３種類のテクスチャを焼いていくわけです。
いつもはオブジェクト１つに専用のUVがついてたわけですが、アトラス化すると、複数のオブジェクトが共有するUVを作るというイメージです。
オブジェクトにUVは１つだけ
Blenderでの使用を考えれば、Diffuse_atlasUV, Normal_atlasUV…みたいに複数のUVを作ることもできますが、VRChatなどでは扱いが難しい、または不可能になります。VRChat用モデルの場合は、１つのオブジェクトには必ずUVを１つだけをつけるようにしましょう。
アトラス用のUVMapを追加
オブジェクトデータプロパティ > UV Mapsのメニューの＋ボタンを押してアトラス用のUVを作成します。（atlasと名付けています）
例えば、今まで使ってたのはその上のUVMapという名前のUVでした。新しくアトラス用のUVとしてatlasというUVをベイクに使うよ、ということを知らせるために、クリックして青い表示にしておいてください。
新しいatlasのUVを選択しておかないと、変更によって今までのマテリアルのUVも壊れてしまうので注意してください。（ファイルのバックアップ推奨です。）
これを、まとめたいすべてのオブジェクトに行い、同名のUVを作成してください。（この場合なら全てのオブジェクトにatlasという名前のUVを追加します。）
右のカメラアイコンが白くなってる方が、現在表示されてるテクスチャ・マテリアルに使われているUVということです。
複数オブジェクトのUV展開
ミラーモディファイアはつけたままで大丈夫ですが、サブディビジョンサーフェス、ソリッド化（Solidify）などは適用しておいてください。左右で違う柄にしたい場合はミラーモディファイアも適用する必要があります。
まとめたいオブジェクトを複数選択してTabキーで編集モードにして、UV Editing画面に行きます。（自分は今回発光マテリアルなどをアトラス化から除外してますが、こうしろというわけではありません。むしろまとめた方が良かったなと後で思ってますので、何をアトラス化するかはみなさんのモデルに適した形で決めてください。）
Aで全てを選択すると、各オブジェクトのUVが全て重なってしまっています。ここから、UVを縮小し、全部が重ならず入るように並べていきます。
並べるコツ
今回、大きく４つのテクスチャ（髪、顔、上半身、下半身）の部品があったので、１つの部品のUVを1/4に縮小してみました。１つのテクスチャがサイズ1024だった場合、アトラス化して４つ並べてサイズ2048にすればいいですよね。（テクスチャアトラス画像のサイズは後で設定するので、とりあえず１つにまとめればOKです。）
上半身部分だけ選択すると、そこでUVがいっぱいに広がっています。
上半身のUV全てを選択し、1/4に縮小して、右上部分に収納しました。
同様に他のパーツもその部分だけ選択し、UVを縮小して並べました。
左図のように全体のアトラスUVを並べました。
これでアトラス化のためのUVが出来ました！
あとで気づいたんですが、顔のテクスチャだけサイズ2048で、他は1024でした…。でもとりあえずこれでベイクします。こういうこともあるので、各テクスチャの解像度が同じかどうかはチェックした方がいいです。同じだったらシンプルに並べればいいけど、解像度違うと、解像度が大きいパーツは大きめに並べた方がいいですね。（この場合は結局顔のテクスチャも結局1024くらいで良かったということなんですが…）
オブジェクトの選択ミスがありそうなので、アトラス化したいオブジェクトをコレクションにまとめとくとよいかもしれません。
テクスチャアトラスをベイクする
アトラス化のためのUVができましたので、さっそくカラー情報をベイクしてテクスチャアトラスを作ってみましょう。
ベイクの方法は基本的な方法と変わりません。複数のマテリアルに対して行うだけです。以下に手順を説明します。
カラーのテクスチャアトラスをベイクする
アトラス化するマテリアルにImage Textureノードを配置
例えばこれは瞳のマテリアルですが、アトラス化でまとめたいので、そこにImage Textureノードを追加します。
イメージテクスチャノードにアトラス用の画像を新規作成する
アトラス用のカラーテクスチャなので「atlas_color」とつけてサイズは2048～4096pxくらいにします
Alphaのチェックは外します。
どこにもつながず放置します。
サイズはVRChatでQuest対応したいなら2048、PCなどでアバターを綺麗に見せたいなら4096pxくらいが目安
さっき作ったImage Textureノードをコピーして、他にもカラーのテクスチャアトラスでまとめたいマテリアルのところにペーストして置いておきます。（カラーテクスチャを焼く必要がないマテリアルはスルーでいいです。）
例えば左図でいうと、上半身のオブジェクトには５個のマテリアルがついてて、そのうち、発光を除いた４つのマテリアルの中にImage Textureノードをコピーして置いておく必要があります。
これを顔とか下半身の部分とか、全部やっていきます。この作業が少しめんどいです…。
ベイクの選択をする
ベイク設定をする前に、ベイクするマテリアルの中のImage Textureノードを全部選択していく必要があります。
まずアトラス化するオブジェクトを全部選択して、そこについてるマテリアルを１つ１つ内容を見て、上で追加したImage Textureノードを選択していきます。選択すると白枠が出るようになります。
Shift を押しながら別のオブジェクトを選択して、またマテリアル１つ１つチェックして、Image Textureを選択…という作業を繰り返して、全部ちゃんと選択します。
選択忘れがないように気を付けてください。
ベイク設定
レンダーエンジンをCyclesにして、レンダープロパティのBakeのセクションを開きます。
ベイクの設定をします。
- Bake Type…Diffuse（色を焼きます）
- Contribustions…Direct, Indirectのチェックを外して光の影響を受けないようにします。
- Margin > Size…一回焼いて見ないとわかんないですが、はみ出す部分があったら調整します。
設定できたらBakeを押してベイクします。
こんな感じで焼けました。
色のはみ出しがないかチェックしてみてください。たまにはみ出します。
はみ出してたら、ベイク設定のMargin > Sizeを調整してもう一回やいてください。
テクスチャを保存
テクスチャが出来たら、上部メニューのImageから
Save
Save As…
などで保存しておきます。
保存しないと消えます。
これでカラーのテクスチャはできたので、ラフネス、ノーマルも焼いていきます。
ラフネスのテクスチャアトラスをベイク
ラフネステクスチャを焼くときも、カラーと同じで、まとめたいマテリアルにImage Textureノードを追加して画像を新規作成します。
サイズなんですが、ラフネスは大体カラーより解像度を落としても大丈夫なので、1024pxにしました。
ベイク設定
今度はBake TypeをRoughnessに設定します。
また全部のRoughness用に作ったImage Textureノードを選択してからベイクしてください。
左図のように焼けました。
焼けたら保存を忘れないでください。
ノーマルのテクスチャアトラスをベイク
ノーマルテクスチャを焼くときも、カラー、ラフネスと同じで、まとめたいマテリアルにImage Textureノードを追加して画像を新規作成します。
サイズ：ノーマルは細かくしたい場合はカラーと同じくらい。大雑把でいい場合はラフネスくらいで構いません。自分は凹凸はちゃんと出てほしいので2048にしました。（入力するとき1024＊2と入力すると2048と計算してくれます）
ベイク設定
今度はBake TypeをNormalに設定します。
また全部のRoughness用に作ったImage Textureノードを選択してからベイクしてください。
左図のように焼けました。
焼けたら保存を忘れないでください。
アトラス用のマテリアルをセットする
カラー、ラフネス、ノーマルのテクスチャアトラスが出来たので、マテリアルを作ってセットしていきます。アトラス用のマテリアルを作ることでマテリアルの数も削減できます。ドローコールを減らすためになるべくマテリアルの数も削減することが望ましいとされています。
例えば髪のマテリアル画面ですが、ここにアトラス用のマテリアルを新規で作成します。
名前は分かりやすいように「atlasMaterial」にしました。
マテリアルの内容は、今まで作成した、カラー、ラフネス、ノーマルのImage Textureノードをコピペしてきて、それをPrincipled BSDFにつないで作成します。
ノーマルテクスチャをつなぐときは、Normal Mapノードを介してつないでください。
ラフネス、ノーマルテクスチャは、読み込むときに色ではなく値として読み込むので、Color SpaceをNon-Colorに設定してください。
今まで使っていた髪のマテリアルを削除してアトラス用マテリアルのみにします。（今まで作ったマテリアルやUVを削除するので、ファイルのバックアップ保存をしておいてください。）
すると、テクスチャが崩れたように見えますが、それは以前のUVを使って表示しているからです。
オブジェクトデータプロパティのUV Mapsのスロットの中から、アトラス用のUVを表示させるために、カメラアイコンをクリックします。
使わないUVは削除してしまいます。
これできちんとテクスチャが表示されます。
※VRChatなどに持っていく前提なので、いらないデータは極力捨てます。
まとめたいマテリアルはすべてアトラス用のマテリアルに変更してください。（部分的に発光とか透明とか別マテリアルをつけたい場合はもう一回付け直してください。）
発光や透明など以外のマテリアルはアトラス用マテリアルに変更しました。
つまり、ほとんどのオブジェクトのマテリアルが「atlasMaterial」１個になったということです。
マテリアルをつけたら、おかしいところがないかチェックしてみてください。
マテリアルをつけてみると、ちゃんとベイクできてない部分に気づいたりして…
細い線などは、解像度が低いと潰れてしまいますね…。
やり直す場合は、
- UVを並べ直して潰れたUVエリアを大きくとる
- 元のマテリアルで線・柄・パターンを太くする
- ベイクするテクスチャの解像度を上げる
などしてまたベイクし直してみてください。
おまけ：マットキャップ用マスクテクスチャを作る
ここからは余談なんですが、UnityのlilToonシェーダーなどを使う場合、マットキャップといういい感じの質感を出してくれる機能があります。この機能はマテリアルごとに適用するため、テクスチャアトラスを作ってマテリアルを統合してしまった場合、服、ズボンのみに質感を当てることができません。
そんなときはマスク用のテクスチャを使って、マットキャップを使う場所を限定させることができます。
アトラス用マテリアルの中にImageTextureノードを追加し、matcap用の画像を新規追加します。
マスクなので、解像度はそんなに高くなくていいです。
一時的にそれをBase Colorにつなぎ、
テクスチャペイントで質感をつけたい部分のみ白で塗ります。
つけたくない部分は黒く塗ってください。（グレーでグラデーションもつけることができます。）
これで画像を保存して、マットキャップ用のテクスチャを作ることができました。他にも部品ごとにマスクしたい場合はこうしてマスク用テクスチャを作ることができます。（photoshopなどの画像編集ソフトを使って画像を直接編集することもできます。）
まとめ
とりあえずこれでアトラス化は完成です。
軽量化のために必要になってくる場面も多いかと思いますので、基礎的なことを理解してツールなどを使ってみると、より理解が深まるのではないでしょうか。
何より、自分でできるようになると、細かい調整もできますし、Blenderのバージョンによってはツールなどが使えないときもありますので、できるようになって損はないと思います。
テクスチャもマテリアルもまとめておくと、処理が軽くなる＋Unityでのセッティングが楽！
めんどくさがりの方にもオススメです。
ベイクについてのガイド記事
ベイクに関する記事をまとめたガイドです。基礎から応用まで
コメント