アバター改変において避けて通れない工程の一つが、テクスチャーの改変です。髪や目、衣装など、アバターの一部の色を変更するために、画像編集ソフトを起動することもあるでしょう。
アバターの色は、アイデンティティに関わり、コーデにおいても重要なポイントです。
アバター改変のたびに毎度行われる作業ではありますが、手間がかかり、変更によって元のマテリアル設定が崩れてしまうこともあります。そのような状況を解決するツールが「TexTransTool」です。
本記事では、状況に応じたTexTransToolの使い方を解説します。
- 本記事では、シェーダーとしてlilToonを使用していることを前提とします。
- lilToon、TexTransTool本体、および使用するアバターやテクスチャ素材がUnityプロジェクトにインポート済みであるものとして進めます。導入がお済みでない方は、事前に準備をお願いします。
- 今回紹介する機能の中には、実験的な機能も含まれています。今後のアップデートによって使えなくなるなどの変更が加えられる可能性があります
TexTransToolとは？
TexTransToolとは、Reina_Sakiriaさんが作成したUnityEditor拡張です。非破壊（元のデータを変更しない）でのテクスチャー編集に特化しており、従来 GIMP や Photoshop などの画像編集ソフトで行っていた作業をUnity上で完結させることができます。
- テクスチャのブレンド・差し替え: マテリアル設定を壊さずにテクスチャを合成・変更できます。
- デカールの追加: UVマップを意識せずに、好きな位置にテクスチャ（デカール）を貼り付けられます。
- グラデーションの追加: 髪などに簡単にグラデーションを追加できます。
- アトラス化: 複数のテクスチャを1枚にまとめ、パフォーマンスを向上させます。
- PSDファイルの活用: レイヤー構造を持つPSDファイルをUnity上で扱い、色改変などを行えます。
より詳細について知りたい人はこちら。
瞳や肌テクスチャーを簡単差し替え！「TextureBlender」
「TextureBlender」は、基準となるテクスチャーと差し替えたいテクスチャーを、マテリアルの構造を維持したままブレンド（合成）できる機能です。ここでは瞳テクスチャーの差し替えを例に説明します。
これを使い実際に瞳テクスチャーを差し替える方法を説明します。
Hierarchyでアバターのルートオブジェクトを右クリックし、「TexTransTool」 >「 TTT TextureBlender」を選択します。アバターオブジェクト直下に「 TextureBlender 」が追加されます。
アバターにTextureBlenderが追加されました。追加された TextureBlender をクリックし、Inspectorで設定を行います。
選択したテクスチャーに、差し替えの基準となるテクスチャー（例: 元の顔テクスチャ）を設定します。
今回は選択テクスチャーに顔のテクスチャーを割り当てるのですが、いちいち探すのはめんどくさいですよね？「セレクターを開く」ボタンをクリックすると 「DomainTextureSelector 」が開きます。アバターに使用されているテクスチャーが一覧表示されるので、ここから選択すると簡単です。
選択すると、シーンビューで該当箇所が一時的に白く表示されることがありますが、これは正常な状態です。差し替えたい新しいテクスチャー（例: 新しい瞳テクスチャ）をブレンドテクスチャーに設定します。今回は例として、nanaporiumの「Opalescent Tears Eye」を使用します。
正しく設定できれば、シーンビューのアバターに新しい瞳テクスチャが適用された状態で表示されます。これで差し替えは完了です。
補足：TextureBlenderはあくまでも「基本となる画像に別の画像を載せるだけ」の機能です。そのため、マテリアル内にあるNormalMapやエミッション用のMaskテクスチャの差し替えはこの機能ではできません。テクスチャの差し替えなどが必要な場合は、マテリアルを直接変更、複製するなどの従来の作業になります。
UVに縛られないデカールの追加！「SimpleDecal」
アバターにタトゥーや模様などのワンポイント（デカール）を追加したい場合、通常はUVマップを考慮して画像編集ソフトで調整する必要があります。「SimpleDecal 」機能を使えば、Unity上で直感的にデカールを追加できます。
UVマップは、3Dモデルの表面を平面に展開した図のようなものです。この展開図のどの部分にテクスチャ画像のどの部分を貼り付けるか、という対応情報（座標）を指定するために使われます。「U座標」「V座標」という名前からUVマップと呼ばれています。
では実際に追加していきます。
アバターのルートオブジェクトを右クリックし、「TexTransTool 」>「 TTT SimpleDecal 」を選択します。
追加された SimpleDecal をクリックし、Inspectorで設定します。今回は頬にスペードマークを追加する例で進めます。
デカールテクスチャーに貼り付けたい画像（今回はスペードマーク）を設定します。
シーンビューで「 SimpleDecal 」のオブジェクト自体を移動・回転させて、デカールを貼りたい位置に合わせます。いわば、小物アクセサリーを取り付ける感覚です。
画像の大きさは、Inspector内の 「TTT SimpleDecal 」> 「スケール設定 」で調整します。
顔の方は悪くないですが、このままだと髪型にもデカールの一部が貼り付いてしまいます。
これを防ぐために、デカールを適用するマテリアルを指定してフィルタリングを行います。
Inspectorの「 TTT SimpleDecal 」>「 レンダラー設定 」にある レンダラー選択モード を マテリアルでフィルタリング に変更します。
アバターのマテリアル一覧が表示されるので、デカールを適用したいマテリアル（例: 顔のマテリアル Shinano_face）にチェックを入れます。
シーンビューで確認し、意図しない部分のデカールが消えていれば設定完了です。
髪色グラデーションも楽々追加！「SingleGradationDecal」
人気の髪色改変の中に、髪型にグラデーションを追加するようなものがあります。ですが、実際やるとなると、グラデーション用の画像を別途用意しなければなりません。そこで、TexTransToolにはグラデーションを簡単に実装することができる機能が提供されています。それが「SingleGradationDecal」です。
追加するためには、アバターのルートオブジェクトを右クリックし、「TexTransTool 」> 「TTT SingleGradationDecal 」を選択します。
まず、グラデーションを適用したい箇所（今回は髪）を指定しましょう。
SingleGradationDecal のInspectorを開き、レンダラー設定 > マテリアルでフィルタリング を選択し、髪のマテリアル（例: Shinano_hair）にチェックを入れます。
ですが、今回のしなののような髪のマテリアルが尻尾などの他の部位と共用されている場合、その部位にも影響が出てしまいます。そのこともあり、髪の末端と尻尾が白くなっています。
特定の部位だけに適用したい場合は、「アイランドセレクター」を使って範囲をより詳細に指定します。
アバターのルートを右クリックし、TexTransTool > IslandSelector から、範囲指定に適した形状のセレクターを選択します。機能はさまざまありますが、今回は球状範囲で指定できる 「TTT SphereIslandSelector 」を使用します。
追加した「 SphereIslandSelector 」を、「SingleGradationDecal 」のInspector内にある 「デカール設定 」>「 アイランドセレクター 」の欄にドラッグ＆ドロップします。
シーンビューで「 SphereIslandSelector 」の位置やスケールを調整し、グラデーションを適用したい範囲を決定します。
今回は髪全体を覆うように調整しました。同系統の白で分かりづらいですが、髪の末端が白のベタ塗りになっているのが分かるでしょうか？
あとはお楽しみ、グラデーションの色を決めます。
「SingleGradationDecal 」のInspectorに戻り、グラデーションの設定を行います。
確認する項目は2つ。
- グラデーション: クリックしてグラデーション編集ウィンドウを開き、好みの色や透明度を設定します。
- ブレンドタイプキー: 色の合成方法を選択します。（例: 通常、乗算、焼き込みカラーなど）
調整結果はシーンビューでリアルタイムに確認できます。分からない場合は、一旦手探りで設定しつつ、目指しているものに向けて設定しましょう。
今回は画像のような感じにしました。ブレンドタイプキーには焼き込みカラーを使用。なかなか素敵ではないでしょうか。
Unity上でPSDを使った色改変！？「TexTransTool PSD Importer」と「MultiLayerImageCanvas」
TexTransToolは、レイヤー構造を持つPSDファイルをUnity上で再現し、細かい色改変などを可能にする機能も備えています。「 TexTransTool PSD Importer 」と 「 MultiLayerImageCanvas 」を使用します。今回はその一例として、顔のPSDファイルを読み込み、ちょっとした色改変をしていきます。
注意：この機能は執筆時点で実験的な機能です。お試し版に近い形のため、将来的に変更が加わったり、動作が不安定になる場合があります。
Adobe Photoshopで標準的に使用される画像ファイル形式です。PNGなどの画像と異なり、「レイヤー」と呼ばれる階層構造や編集情報を保持できるため、アバターや衣装のテクスチャ改変用に配布されることも多い形式です。
レイヤーに分かれていることによって、特定部分のみの色を変えるといった作業が行いやすくなります。
通常、PSDファイルを開いて編集するにはPhotoshopや互換性のある画像編集ソフト（GIMP, Clip Studio Paintなど）が必要ですが、TexTransToolを使えばUnity上で扱えるようになります。（※互換ソフトではPhotoshopでの表示と完全には一致しない場合があります）
改変に使用したいPSDファイルを、UnityプロジェクトのAssetsフォルダ内の分かりやすい場所にドラッグ＆ドロップなどでインポートします。
インポートしたPSDファイルを選択し、Inspector上部にある Importer のメニューをクリックし、「 net.rs64.TexTransTool.MultiLayerImage.Importer.TexTransToolPSDImporter 」を選択します。
適用後は、PSDファイルのアイコンがPrefabのアイコンに変わります。
変換されたPSDプレハブを、Hierarchyのアバターのルートオブジェクト配下にドラッグ＆ドロップします。プレハブを配置すると、PSDファイルのレイヤー構造がHierarchy上に再現されていることが確認できます。
追加したPrefab状態であるPSDのオブジェクトを選択し、Inspectorを開きます。
「セレクターを開く」で開き、このPSDで編集したいアバター側の元のテクスチャー（例: 顔テクスチャ）を選択テクスチャーに設定します。
次にこのPSDPrefabのルートをクリックし、設定を開きます。
セレクターを開き、アバター側の顔テクスチャーを選択テクスチャーにいれると、リアルタイムプレビューの様子が変わりました。私の画面は顔面真っ暗ですね。ちょっとこわい。
設定後、プレビュー画面でアバターの顔などが真っ暗になったり、意図しない表示になることがあります。これは、PSDファイル内のマスクレイヤーなどがデフォルトで有効になっている場合があるためです。
「 MultiLayerImageCanvas 」では、Hierarchy上のオブジェクトの有効/無効状態が、そのままPSDレイヤーの表示/非表示に対応します。意図しない表示になっている原因のレイヤー（例: Mask レイヤーオブジェクト）をHierarchy上で選択し、Inspector左上のチェックボックスを外して非表示にします。プレビューを確認し、正しく表示されるように調整しましょう。
お顔がしっかり見えましたね。
あとは目的に合わせて基本的な画像編集ソフトと同様に、フィルターや調整レイヤーを追加して、色改変などを行います。
一例として、今回はまつ毛にグラデーションマップを当てて少し赤みがかった色にしていきます。
PSDPrefabのオブジェクトを右クリックし、「TexTransTool 」>「 MultiLayerImage」から適用したいフィルターやレイヤーの種類を選択します。今回は「 TTT UnityGradationMapLayer 」を選択。
追加された UnityGradationMapLayer オブジェクトを、Hierarchy上で編集対象のレイヤー（今回だとまつ毛部分のEye lash）の直下に移動させます。
すると今度は顔が真っ白になりました。
これはEye lash以下のすべてのレイヤーに対してUnityGradationMapLayerの効果が反映されていることを表します。
このままだと良くないので、「Clipping」のチェックボックスにチェックを入れます。これで1つ下のまつ毛だけに「 UnityGradationMapLayer 」が適用されました。
後は、「 UnityGradationMapLayer 」のInspectorでグラデーションを編集し、好みの色合いに調整します。
TextureBlender など他のTexTransTool機能と併用する場合、Hierarchy上でのオブジェクトの順序が最終的な見た目に影響します。
今回の場合だと、最初に「 TextureBlender 」で瞳を差し替えて「MultiLayerImageCanvas 」 で顔全体の色を調整しました。このときPSDPrefabが TextureBlender よりもHierarchy内で下にあると、瞳の変更が上書きされてしまいます。
そのため先ほど出した画像も、目元を赤くしたのにも関わらずデフォルトのカラーに戻っています。
意図した通りの重ね順になるように、Hierarchy上でPSDプレハブや TextureBlender などのオブジェクトの順番を調整してください。分かりにくいと思った場合は、ひとまずオブジェクトを動かしてみて調整しましょう。Ctrl+Zキーで巻き戻せるため、間違えても大丈夫です。
今回は、差し替えた瞳が見えるように、PSDプレハブを TextureBlender よりも上に配置します。
目も赤くなり、髪と目元を合わせて統一感のあるカラーリングになったのが分かるでしょう。
テクスチャーメモリーのムダを簡単削減！「AtlasTexture」
複数の衣装やアクセサリーを組み合わせると、使用しているテクスチャの枚数が増え、アバターのパフォーマンス（特にテクスチャーメモリ使用量）に影響が出ることがあります。
そこで使う「 AtlasTexture 」は、複数のテクスチャを1枚の画像（アトラス画像）にまとめる「アトラス化」を行い、この問題を軽減する機能です。元のテクスチャファイルを変更することなく実行できます。
今回は、『Natelier -ﾅﾄﾘｴ-』から販売されている『ポロワンピース』に、どうしてもデフォルト衣装のタイツも一緒に使いたいというシチュエーションのもと、テクスチャーのアトラス化をしていきます。
複数の画像を、タイル状に並べて1枚の大きな画像にまとめる処理のことです。これにより、GPUが読み込むテクスチャの枚数を減らし、描画負荷の軽減やメモリ使用量の削減につながります。まとめられた画像を「テクスチャアトラス」や「アトラス画像」と呼びます。
アバターのルートオブジェクトを右クリックし、「 TexTransTool 」>「 TTT AtlasTexture」を選択します。
追加された「 AtlasTexture 」を選択し、Inspectorを開きます。アバターが使用しているマテリアルの一覧が表示されます。
アトラス化に含めたいテクスチャが使用されているマテリアルに、チェックを入れます。今回は、デフォルト衣装のタイツと、新たに着せたワンピースのマテリアルを選択。選択されたマテリアルは「選択済みマテリアル」のリストに表示されます。
基本的な設定はこれだけです。Unityの再生ボタンを押して実行すると、アトラス化の処理を確認できます。ビルド時に表示されるNDMFのコンソールログで、アトラス化の結果や詳細を確認できます。ここで表示がおかしくないか確認しましょう。
アトラス化されたマテリアルに設定されているテクスチャを確認すると、1枚にまとめられていることがわかります。
TexTransToolの主要な機能について、具体的な使い方を交えながら解説しました。
TexTransToolを活用することで、これまで外部ツールが必要だったテクスチャ編集作業の多くをUnity上で、しかも非破壊で行うことができます。
今回紹介しきれなかった機能やレイヤーオブジェクトも多数存在します。また、実験的な機能も含まれるため、常に最新の情報を得るためにも、ぜひ公式ドキュメントも合わせてご確認ください。
この記事が、皆様の快適なアバター改変ライフの一助となれば幸いです。
