Substance Painterでタトゥーを入れる方法とコツ【VRChatアバター改変】【VRChat】

VRChatアバターにタトゥーを入れたい人向けのチュートリアルです。Blenderやシェーダー側のデカール機能でもできますが、テクスチャを直接焼き込んでしまって、位置の調整やサイズの調整などができなかったり、扱える枚数が限られていたり、複雑な重ねがけができません。それに対して、Substance Painterは非破壊であるため、位置調整やサイズの調整など、やり直しがいくらでも効きます。しかし有料です。

この記事では、Unity側での準備からSubstance Painterでの下ごしらえ・位置合わせ・マスク処理、Unityへの反映までを、操作順にすべて解説します。

用意するもの

• VRChat Creator Companion(VCC)で管理しているアバターのUnityプロジェクト(あらかじめVCCから開いておきます)
• Substance Painter
• タトゥーにしたい画像素材(Photoshop、Krita、GIMPなどで、あらかじめ背景を透過しておきます)

全体の流れ

手順１: アバターのFBXとテクスチャを取り出す

1. VCCで開いたUnityプロジェクトの「Hierarchy」(シーン内のオブジェクト一覧が表示されるウィンドウ)で、タトゥーを入れたい部位を含むメッシュ(Body、Skinなど)を選択します
2. 右側の「Inspector」(選択したオブジェクトの詳細設定が表示されるパネル)で、Materials欄にあるマテリアルをクリックします
3. マテリアルの設定項目の中から、主要なテクスチャが割り当てられているスロットを探します。「Base Map」「Main Texture」「Albedo」といった名称になっていることが多いです
4. そのテクスチャ画像をクリックします。Unity下部の「Project」ウィンドウ内で、該当するテクスチャファイルがハイライト表示されます
5. ハイライトされたファイルを右クリックし、「エクスプローラーで表示」を選びます
6. 開いたエクスプローラー上でテクスチャのパスを確認します
7. FBX本体も同様の手順で取り出します。Projectウィンドウ内のアバター用フォルダ(Assets以下の、アバター名などのフォルダ)からFBXファイルを探し、右クリック→「エクスプローラーで表示」でファイルの場所を開き、確認します

元データをいじりたくない場合は新しいディレクトリを作成し、Unityプロジェクト内の元ファイルとは別に、作業用フォルダにコピーしたものを使用してください。そうすれば元のファイルは直接編集されません。

テクスチャ

(この記事内の画像は、クリックすると拡大できます)

fbx

手順２: Substance Painterで新規プロジェクトを作成する

1. Substance Painterを起動し、「File」→「New」を選びます
2. 「Select mesh」で、手順1で確認したFBXファイルのパスを指定します
3. Texture Set Resolution(テクスチャの解像度)を、元のテクスチャと同じ数値「4096×4096」に設定します
4. テンプレートは既定の「Default (OpenPBR)」のままにします
5. 「Create」を押してプロジェクトを作成します

手順３: テクスチャセットリストで、編集する部位以外を非表示にする

アバターのFBXには、体・服・髪・アクセサリーなど、部位ごとに複数のテクスチャセット(マテリアル単位のテクスチャの組)が存在します。まずタトゥーを入れる対象のテクスチャセットだけに絞り込みます。

1. 画面上部のタブから「TEXTURE SET LIST」を開きます(「PROPERTIES – FILL」タブの隣にあります)
2. 一覧の中から、タトゥーを入れたい部位に対応するテクスチャセットを探します。名称はアバターによって異なりますが、体・肌に関するもの(body、skinなど)であることが多いです
3. 各テクスチャセットの左端にあるアイコンをクリックし、編集対象以外のテクスチャセットをすべて非表示にします
4. 編集対象のテクスチャセットの行をクリックし、選択状態(ハイライト表示)にします

非表示にすることで、以降の手順でレイヤーを追加・編集する際に、意図しないテクスチャセットを誤って操作することを防げます。

手順４: 元のスキンテクスチャをFBXに貼る

新規プロジェクトを作成した直後は、対象のテクスチャセットに何も設定されていない初期レイヤーが1つある状態になっています。ここに、手順1で取り出したスキンテクスチャを読み込み、実際の見た目を復元します。

1. レイヤーパネルにある初期レイヤーを選択し、削除します
2. レイヤーパネルの「Fillレイヤーを追加」ボタン(バケツのアイコン)をクリックします
3. 右側のPropertiesパネルで「Base Color」を表示し、手順1で取り出した元のスキンテクスチャの画像ファイルを、エクスプローラーから直接ドラッグ&ドロップします。Assetsパネルへの事前読み込みは不要です
4. Projection(投影方式)は初期値の「UV Projection」のまま変更しません。元のUV配置どおりにテクスチャがそのまま貼り付きます
5. 好みになりますが、ビューモードを「Material」から「Base Color」に変えます。「Base Color」に変えることによってUnityと同じように見えるようになります。

➀:初期レイヤー削除

③:テクスチャの適用

手順５: タトゥー用のFillレイヤーを作成し、投影方式を切り替える

手順4で追加した「元のスキンテクスチャ用」のFillレイヤーとは別に、タトゥー専用のFillレイヤーをもう1つ作成します。

1. レイヤーパネルの「Fillレイヤーを追加」ボタン(バケツのアイコン)をクリックし、任意の名前に変更します
2. 右側のPropertiesパネルで「Base Color」を表示し、透過処理済みのタトゥー画像ファイルを、エクスプローラーから「Base Color」に直接ドラッグ&ドロップします。
3. 同じくPropertiesパネルにある「Projection」の項目を確認します。初期値は「UV Projection」になっています
4. 「UV Projection」を、「Planar」(平面投影)または「Warp」(ワープ投影)に切り替えます

PlanarとWarpはどちらも移動・回転・拡大縮小の３つのツール操作とProjection Depth設定を持っています。Planarは画像を1枚の平面として投影する方式で、Warpは投影する面をグリッド状に分割し、曲面に細かくフィットさせられる方式です。平らに近い部位ではPlanar、腕の付け根や指のような複雑な曲面ではWarpが向いています。

②:タトゥー画像の読み込み

④:ワープ投影に切り替え

手順６: 視点を操作しながら、移動・回転・拡大縮小で位置を合わせる

タトゥーの位置合わせは、タトゥー自体を操作する「３つのツール」と、確認のために画面側を動かす「視点操作」の2つを組み合わせて行います。

ツールでタトゥーを動かす

3Dビューポート上に、位置調整用の３つのツールが表示されます。使用するツールは次の3つです。

拡大縮小ツールは、縦横均等の拡大・縮小に加え、片方向にのみドラッグすることで縦横比を変えて伸ばすこともできます。ギズモをドラッグする際にShiftキーを押しながら操作すると、一定間隔でスナップしながら動かせるため、細かい位置合わせがしやすくなります。

視点を動かして確認する

タトゥーの向きや大きさは、1つの角度だけで判断すると歪みに気づきにくくなります。ギズモを操作するのと並行して、以下の視点操作でモデルを様々な角度から確認しながら位置を追い込みます。

視点を大きく動かして見失った場合は、対象を選択した状態でFキーを押すと、選択中のオブジェクトに視点が合わせ直されます。他のショートカットキーの確認や変更は「Edit」→「Settings」→「Shortcuts」で可能です。

(この記事内の動画は、カーソルを合わせると再生されます)

手順７: 投影深度で薄れ・ぼやけを直す

縮小直後にタトゥーが薄く・ぼやけて表示される場合があります。これは投影の奥行き(投影深度)が不足し、画像の一部が正しく届いていないために起こります。Propertiesパネルの「投影深度」の値を上げると、タトゥー全体が表示されるようになります。

手順8: 体の面にしっかり向くよう調整する

この投影方式は、平面を体に向けて画像を投影する仕組みのため、平面が体の表面を向いていないとタトゥーが歪んだり潰れたりして表示されます。特に腕のような部位では初期状態でおかしな角度になりやすいため、回転ツールで板を体の表面に向け直します。まだぼやけている場合は手順7の投影深度を再調整します。

手順9:マスクで表示範囲を絞り、馴染ませる

位置・大きさ・角度が決まった段階でも、投影が意図しない面(腕の裏側など)にまで回り込んでいたり、タトゥーの輪郭が肌から浮いて見えたりすることがあります。この調整にマスクを使用します。

1. 手順5で追加したタトゥー用Fillレイヤーを選択した状態で、レイヤーパネル上部の「マスクを追加」ボタン(四角いアイコン)をクリックし、白マスクまたは黒マスクを選択します。
2. 白のブラシで表示したい範囲を、黒のブラシで隠したい範囲を塗ります。Xキーを入力することで反転します。
3. 輪郭を自然に馴染ませたい場合はブラシのハードネスの値を下げ、輪郭をはっきりさせたい場合は上げます

手順１０: 透過PNGとして書き出し、Unityに反映する

1. 「File」→「Export Textures」を開きます
2. グローバル設定で元のテクスチャファイルと同じディレクトリまたは任意のパスを指定します。
3. 書き出しテンプレートの設定項目で「ドキュメントチャンネル＋ノーマル＋AO(アルファチャンネル)」を選びます
4. ファイルタイプを「.png」「16bits」にします
5. Paddingで「拡張＋透過」を選択します
6. 次に、書き出したいシェーダー以外のチェックを外し、書き出したいシェーダーを選択します
7. 出力マップ項目のBase_color以外のチェックをすべて外します
8. 「Export」を押して書き出します
9. Unityに戻り、プロジェクト→テクスチャに書き出したテクスチャ画像をドラッグ&ドロップします。元のテクスチャファイルと同じディレクトリを指定している場合はこのステップは不要です
10. アバターの見た目にタトゥーが反映されていることが確認できたら完了です

エクスポート画面

グローバル設定

任意のシェーダー設定

タトゥーの適用

+α:覚えておくと便利なTips・ショートカット

素材が多すぎて分からなくなる： フォルダー分け

スリーブやボディースーツギャップなど広範囲のタトゥーを入れようとするとどうしてもpng画像が多くなり、何がなんだかわからなくなります。なので前述のような範囲でタトゥーを入れたい場合はあらかじめ、フォルダーを作成し、グループ分けしておくと楽になります。

単一だと存在感が薄い： タトゥー素材の重ねがけ

虎のバックピースに注目してください。私には薄いように思えます。そんな時は。

タトゥー素材を重ねることによって、より輪郭がはっきりし、色が濃くなり、存在感を増すことができます。

タトゥーが重なる： マスクを活用

スリーブのタトゥーを入れるには画像を重ねる必要があります。重複部分に違和感を持たせないためにマスクが有用です。下記の画像の骸骨に注目してください。後面のタトゥー素材と前面の骸骨が重なっています。

そこでこのようにマスクを書けば（黒の箇所が透過箇所）

きれいなスリーブに仕上がります

曲面にフィットしない場合:Warp to Geometry

Warp Projectionには「Warp to Geometry」という機能があり、投影用のグリッドを体の凹凸に沿ってリアルタイムに自動変形させられます。手順8の回転による手動調整で合わせづらい、腕の付け根や指のような部位ではこちらを使います。

Warpモードのグリッド編集ショートカット

Warp Projectionでグリッドの頂点(Edit Vertices)を個別に動かす場合、頂点は直接ドラッグせず、選択してから次のショートカットでツールを切り替えて操作します。

グリッドを「Split warp crosswise」などで分割すると、制御点が増えて細部までフィットさせやすくなります。

キー割り当てはバージョン・環境設定によって変わる場合があります。正確な一覧は「Edit」→「Settings」→「Shortcuts」で確認できます。

タトゥーの画像素材が欲しい: ArtStation

私はArt Stationでタトゥーの画像素材を購入しています。ネットに無料で転がっているのですが、やはり粗悪で解像度が低かったりします。何よりこれらを購入すると大量のタトゥーpng素材が手に入るので気に入るデザインを見つけやすく使い勝手が良いです。

まとめ

以上、Substance Painterアバターにタトゥーを入れる方法でした。BlenderやUnityで済ますよりステップが多く、何しろお金が掛かりますが良いものに仕上げる事ができます。良いタトゥーを入れて、パブリックで見かけたら見せ合いましょう。私がパブリックにでることはそうそうないと思いますが。