【vrchat】非専用服をアバターに違和感なく着せる【blender】

最終更新 2024/8/31: markdownがぶっ壊れていたので直した
内容は古いので鵜呑みにしないよう


## この記事について
### 目的
非専用服のモデルを、着せたいモデル専用に調整する。
体形にフィットさせ、かつ関節を曲げた時に破綻を起こさないように調整する。

### 想定する読者
- vrchatのアバターをアップロードしたことがある
- blenderで簡易なモデリングができる。ウェイトペイントやアーマチュアがわかる。
- 揺れ物を含まない非専用服をアバターに着せたい

今回はスカート等のダイナミックボーンについては無視します。


## 御託

### 服を着せたい

boothなんかでかわいい服を見つけると「うちの子に着せてやりてぇ...」ってなったりしますよね。「専用じゃないけどボーンで合わせてワンチャンいけるやろ...」と希望的観測でポチるんですが当然うまく行きません。
### 問題
専用じゃないだけあって無理やり着せるとなんだかんだ問題が起きます。
 
例:屈むとケツが出るの図
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1199046/d7550045-7ebc-db88-a523-b77e0ccff025.jpeg" width=70%>


### 何がいけないのか
#### ボーン

第一の原因としてボーンの位置があります。メッシュの位置を合わせたつもりでも大体の場合はボーンの位置があっていないため、関節を曲げた時に破綻します。

<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1199046/d94aebbb-bdde-95a7-2963-ed62e030cb00.jpeg width=70%>

unityでボーンの位置のみで服を合わせたのと同じ状態です。脚ボーンの支点の位置が合っていません。この状態だとアバターの足ボーンを支点として服の足ボーンが回るためだいぶ変な感じになります。


#### ウェイト
非専用ゆえ当然ウェイトも違います。
<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1199046/0100fa2f-8748-e6b2-9c7a-34e0cc32f91d.jpeg width=50%><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1199046/dcf29901-558a-6da4-d346-25dfeff59137.jpeg" width=50%>

同じ位置のウェイトですが若干違います。ボーンを無理やり動かして合わせているので尚更です。



### 結論
非専用服を着せる時はウェイトやボーンごと調整しないといけない






## 服を着せる

### 事前準備

- unity
 -  追加パッケージ univrm https://github.com/vrm-c/UniVRM/releases
 -  最新のアバター用vrcsdk　(2,3両方可) https://vrchat.com/home/download
- blender
- 服を着せるアバター及び服のモデルのfbx

    -今回使用するモデル　アングラの子　https://booth.pm/ja/items/2313554

    -今回使用するモデル2 JK制服！！（現在非公開）https://booth.pm/ja/items/2515352

### 大まかな流れ

1. unity上でunitypackageからfbx(glb)を抽出し、blenderでインポート
2. 服のモデルをアバターに合わせる
    2.1. 服のメッシュ形状をアバターの体形に合わせる
    2.2. 身体から服へウェイトを転送する
3. blenderからfbxをエクスポートし、unityでインポート
4. unity内でmaterial等を調整して完了

# 1. unity上でunitypackageからfbx(glb)を抽出し、blenderでインポート
まずいつも通りunityプロジェクトを作成します。
shaderなりdynamicboneなり必要になるものを各自インポートしてください。
加えて[こちら](https://github.com/vrm-c/UniVRM/releases)のunivrmも入れておいてください。モデルをglbにしてエクスポートするのに使います。fbxでもいいのですが、blenderでインポートする時にfbxだとなんか座標とかがガバガバになりがち(体感)なので違うフォーマットでエクスポートします。


plefabを設置しそれを選択した状態で画像の項目をクリックすることでエクスポートできます。

<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1199046/799345a1-424e-9fb0-b1ca-8c6248513080.jpeg width=70%>

エクスポートしたモデルをblenderにインポートしました

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1199046/eea4caa6-ce3d-2236-9819-20afdd1dacba.jpeg" width=70%>

colliderの類は今回必要なくなるので削除してしまいます。

アングラの子の方は作者さんがblenderファイルを同梱してくれているのでそちらの方をありがたく使わせていただきます。blenderファイルのないアバターを使う方は服と同様の方法でエクスポートできます。


アングラの子のblenderファイルに服をインポートしました。
<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1199046/22e2fd9b-e53c-0361-219e-607609b75dd0.jpeg width=70%>

## 2.服のモデルをアバターに合わせる
### 1.洋服をアバターの体形に合わせる

位置をざっくり合わせ、見た目のためにテクスチャを付けました。ここから形状を体形に合わせていきます。
<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1199046/4edabd9a-85c7-d941-12b5-6466910be08e.jpeg width=70%>

#### ポーズモードでボーンを動かす

やることは、今までunityで力技で服を着せようとしていた時の方法と同じです。ポーズモードでボーンをちまちま動かしていい感じの形にします。
<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1199046/35e66c7f-5d61-f0b1-d0a8-5b004f25c5a9.jpeg width=70%>

このボーンは形を変えるためだけに使われて後で削除されるので、好き放題動かして構いません。
また、ウェイトを編集してボーンによるメッシュの変化をなめらかにしたり、メッシュを編集したりしてもかまいません。己の持つblender力をここで発揮してください。

#### 貫通防止シェイプキーを作る
※飛び出したメッシュを削除する予定の方は読み飛ばしてください。

頑張って体形に添わせたところで、どうしても多少のメッシュは貫通してしまいます。
なので、アバターのモデルに貫通防止用のシェイプキーを追加しましょう。

アバターの体のメッシュを選択し、新しいシェイプキーを追加します。
追加したシェイプキーを選択した状態にし、ウェイトを1.00まで上げてください。
![スクリーンショット 2021-03-12 202601.JPEG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1199046/0e475697-ff16-e587-ecbe-ac54e7a5a3b7.jpeg)


両腕　胴体　右足　左足　ごとに飛び出したメッシュを隠していきます。

飛び出した部分を選択してください。矩形選択すると隠れている部分も選択されるので気を付けてください。
<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1199046/3ec53d2d-69c1-7e3b-920e-2ae56365df25.jpeg width=70%>

今回は腕ごと要らなくなりそうなのですべて選択します。
<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1199046/ed508177-ea9c-0ab6-7434-ceabd044626e.jpeg width=70%>

選択したら、X軸に添ってサイズを0にします
S shift+X 0 の順にキーを押してください
<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1199046/ff45adc8-fdad-ed15-c26b-be2e30dfbaeb.jpeg width=70%>

こんな風になります。
胴体や足の場合はZ軸に添っているので、押すキーはS shift+Z 0になります。

服を脱がす予定のない方やポリゴン数を減らしたい方はシェイプキーを作る代わりにメッシュを削除してもかまいませんが、ウェイトの転送があるのでまだ待ってください。

![スクリーンショット 2021-03-12 204103.JPEG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1199046/e7d1eb6c-29e8-4699-2461-3e222233f541.jpeg)

最終的にこうなりました。

服が納得のいく形になったら、armatureモディファイアーを適用してください。
適用するとメッシュがその形に変形します。

![スクリーンショット 2021-03-12 204231.JPEG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1199046/3f27dbd4-90d2-9a46-7632-67cc3eea780b.jpeg)


これでメッシュの形を変える作業は終わりです。

### 2. 身体から服へウェイトを転送する

次に体から服へウェイトを転送します。

その前に服のメッシュと体のメッシュの頂点グループを確認してください。
![スクリーンショット 2021-03-12 204550.JPEG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1199046/e1a9b826-4d63-b365-f9ee-766829f92650.jpeg)
大体の場合同じ名前だと思いますが、もし命名規則が異なる場合は同じ名前に変えておいてください。また、体のメッシュに補助ボーン等がある場合は同じ名前の頂点グループを服の方に追加しておいてください。


確認出来たら服のメッシュにデータ転送モディファイアーを追加します。
頂点データにチェックを入れ、元オブジェクトを体のメッシュに設定し、適用します。
![スクリーンショット 2021-03-12 205119.JPEG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1199046/3ee2eb1a-5f4c-7800-0d8b-852ffcf7b9e9.jpeg)

これでウェイトのデータが服に転送されました。

隠れるメッシュを削除する方はここで削除して構いません。

次に、服のメッシュにアーマチュアモディファイアーを追加します。
オブジェクトは**身体**の方のアーマチュアを設定してください
![スクリーンショット 2021-03-12 205427.JPEG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1199046/de3cc052-9272-2ce0-5161-667904ed6ba9.jpeg)

これでボーンを動かすと服も動くようになりました。
ポーズモードでボーンを動かして自然な動きをするか確認してください。

<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1199046/f398b390-0565-be47-549d-8cb1675ff530.jpeg width=70%>

いい感じですね。

<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1199046/798eb508-881b-aefa-3e3b-e43dae91a82f.jpeg width=70%>

と思ったらスカートが飛び出ていました。
この衣装はカーディガンとスカートの2つのメッシュオブジェクトがあるのですが、現在衣装側で意図されていないウェイトを無理矢理適用しているので、複数のメッシュ間でこういうのが起きてしまうのは避けられません。

<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1199046/20a2def3-07d1-2e62-bd80-e51bbd3b18c5.jpeg width=70%>

こういう場合はウェイトペイントでいい感じにしましょう。

<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1199046/f6d40fb3-f461-5d0a-8973-4d5479328fe6.jpeg width=70%>

少なくとも右は飛び出なくなりました。

後はこの要領でひたすら不自然なところを消していきます。
服のメッシュが単一（ワンピースなど）であっても、一応それぞれの関節をポーズモードでぐりぐり動かして、変なところがないか見ときましょう。

終わったら服のメッシュを体のアーマチュアの下に入れましょう（最初にやった方がよかったかも）

<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1199046/9647c2f6-051e-1ec0-5f6f-5180c6bfed48.jpeg width=70%>

これで自然に着せ替えのできたモデルの完成です。

## 3. blenderからfbxをエクスポートし、unityでインポート

作成したモデルをfbxにしてエクスポートしてください。glbでエクスポートしても良いですが、unityはそのままではglbをインポートできず、uniVRMをインポートしたプロジェクトでしか使えなくなるので、他のプロジェクトにも持っていきたい場合はfbxにしたほうが良いです。
<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1199046/891d887f-ce74-8c39-9fc5-314aec915aa4.jpeg width=70%>


armatureと服のみをエクスポートすれば専用服になりますし、armature以下全部エクスポートすれば服こみこみの新アバターの完成です。(ダイナミックボーンの設定やコンポーネントのつけなおしが面倒な方は前者、シェイプキーを作った方やボーンの数を気にする方は後者をお勧めします)

unityでfbxをインポートした様子です。マテリアルが何もないので恐ろしい感じになっていますね。
<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1199046/7d22452d-1425-5e6e-8071-480034191d9a.jpeg width=70%>

## 4. unity内でmaterial等を調整して完了

もともとアバターに適用されていたマテリアルを適用してください。
<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1199046/f3c307db-8c26-1d50-77f4-62d3730f3cde.jpeg width=70%>

おそらくダイナミックボーンやavater desctiptorなどを追加する必要が出てくると思います。各々自分のアバターに必要なコンポーネントを追加してください。

これで完了です。




初めての記事+vrc初心者なため間違った情報などあると思います
大昔に書いた記事なので、今質問をいただいても一緒に悩むことしか出来ませんが、聞きはします
お問い合わせはtwitterかこちらまでお願いします discord: tokagelove01