VRoidのワンピーススカートに、UnityのClothコンポーネントを適用し、VRChatに持っていくまで

はじめに

はじめまして、ファル・マカです。
無能なので非常に長い記事になってしまいました。申し訳ないです。
ショートカットなどの基本的な操作説明を省いていますので、Blender・Unityを触りだした直後の方は読むのをやめた方が良い他の記事も参考にしながらどうぞ。記事終盤は本当に、一回Cloth触ったことないと分かりづらいです。。。
とはいえ、私のBlender・Unity歴も4カ月なので、専門的知識は少ないです。必要のない作業を行っている可能性もあります。

当記事で制作するアバターは、VRChat上で必ず"Very Poor"と判定されます。(2019年8月時点)
加えて、リップシンク・視線の追従・テクスチャのアトラス化等については割愛させていただきます。(Clothだけで既に内容が長すぎる上、参考になる記事がいくつもあるので。)

VRoidを使っていないアバター自作勢に役立つ記述は少量です。

(個人的)VRChat上でのClothの弱点

1. VRChat内では頻繁にテレポートがあるため、いくつかの数値を0にする必要がある。
2. 計算がローカルで行われるため、自分の画面では綺麗でも、他者視点では崩れている可能性がある。
3. 重い。自分だけでなく他人のPCにも負荷をかける。

1.2.は自己責任で済む話ですが、3.についてはアバターパフォーマンスによる非表示システムがあるとはいえ、十二分に注意を払いましょう。

今回の完成品(動画と写真)

https://twitter.com/falmaka/status/1170629032729165826?s=20
https://twitter.com/falmaka/status/1178694098133237760?s=20
音声なしの動画と、スクショです。
深夜にも関わらず撮影依頼に対応してくださったゆーげんさん、にゃんぱすさん、ありがとうございます...！

ここから先へ進む前に

Unity公式ブログのClothに関する記事を読んでおいてください。
(Clothを根本的に理解するにあたって、必要な情報のほぼ全てがここから得られます...ありがてぇ...)

環境

• VRoid 0.7.2
• Blender 2.8
• Unity2017 4.28 f1
• VRCSDK 2019.08.23
• VRM Converter for VRChat-15.0.1 + UniVRM-0.53.0

VRoid編

キャラクターを書き出すだけです。スカートの広がりや長さはお好みで。
ただし、後でClothコンポーネントを適用し、重力の影響を受けてすぼむため、それを考慮しておくと良いかもしれません。

Blender編

日本語化については省略します。

VRM Importer/Cats Blender Pluginの導入

画面左上の「編集」から「プリファレンス」を開きます。
出てきたウィンドウでアドオンを選択し、画面上部の「公式・コミュニティ・テスト中」の3つ全てを、選択された状態にして下さい。
その後検索ボックスに「vrm」と入力し、VRM_IMPORTERを有効にしてください。(チェックがついていればOK)

同様に検索ボックスに「cats」と入力し、Cats Blender Pluginを有効にしてください。

アバターの読み込み

コレクションを空に(キューブとかを消)した後、
Cats Blender Pluginを表示して、Vroidでエクスポートしたアバターを読み込んでいきます。
適当に画像で載せてるところをポチポチして、ImportModelを押していただき、読み込みたいvrmファイルを指定すれば、読み込めるはずです。

フルトラ対応

そのままCats Blender Pluginを使ってボーンのフルトラ対応を行います。
Fix Modelの右にあるレンチマークを押して、全てにチェックをつけた状態でOKを押します。
その後、Fix Modelボタンを押してください。

Clothを利用するにあたって、不必要なボーンの削除

スカートは物理演算で処理するため、そのために設置されたボーンは不必要です。
Armatureを選択し、編集モードでスカート用のボーン(画像参照)を削除してしまいましょう。

Clothで揺らしたい部分の分離と細分化

オブジェクトモードに戻ってBodyを選択し、編集モードに入ります。
Clothを適用したい面を選択後、「メッシュ＞分離＞選択」で分離してください。
今回、蝶々結び部分は分離してません。(紐が一本ではないなどの説明が面倒なので)

これによってスカート部分がBody.001として分離されたので、このメッシュを細分化します。
編集モードでスカートのメッシュを全選択し、辺→細分化を行います。
私は分割数2で行いました。(個人的にはこれ以上細分化すると、存在が迷惑なレベルの負荷になるかと思われます)

不必要な頂点グループの削除

オブジェクトモードで「Body.001(スカート)」を選択し、頂点グループからChestとSpineを除くすべてを削除してください。
「Body」の頂点グループは触りません。

余談ですが、実は今回腰紐部分でスカートを固定し、それ以下はClothで処理することを目標としています。

不必要なウェイトの削除

腰紐部分で固定するため、スカートのウェイトは腰紐にだけ残します。
下記4枚の画像を参考に、Chest・Spineそれぞれの頂点グループから、ウェイトを一部消してください。

①Chest編集前　

②Chest編集後

③Spine編集前

④Spine編集後

スカートの座標系

この確認をすっ飛ばすと、UnityでClothを適用した瞬間布が大爆発する可能性があります。
オブジェクトモードでスカートを選択し、拡大縮小が1：1：1になっているかを必ずチェックしてください。
もしなっていない場合は「オブジェクト>適用>拡大縮小」を行ってください。

服・アバター自作勢向けの余談ですが、Blenderのアーマチュアが適用された状態でUnityのClothを適用すると崩壊・大爆発し、ボーンとClothの共存を諦めた方は、拡大率1：1：1じゃないと崩壊するかもって公式ブログがちゃんと教えてくれています。
私みたいにClothで服作った後、8時間もUnityにブン殴られた挙句ふて寝しないように。
本当に言いたいことは、意図しないClothの変形をボーンによって抑えることができる(はず)ということです。勉強中。

FBXファイルの出力

下記画像を参考に出力してください。Blenderから一旦解放されます。

Unity編

プラグイン(アセット)のインポート

VRCSDKを入れた後、100の人さんが提供してくださっている、最新版のVRM Converter for VRChatをダウンロードし、
「VRM Converter for VRChat-〇.〇.〇 + UniVRM-〇.〇.〇」をインポートしてください。
(今回はダイナミックボーンについて触れませんが、使用する方はVRCSDK→Dynamic Bone→VRM Converterの順でのインポートを推奨します。)

VRMのインポート(によるマテリアル生成)

一番最初にVroidで書き出したモデルを読み込み、VRM Converterで変換を行うことで、VRChat向けのマテリアルを生成していきます。
先ほどBlenderで書き出した.fbxファイルは、まだ使用しません。

まずは下記画像の方法で、.vrmアバターを読み込んでください。

Assetsに「アバター名.prefab」が生成されたら、それをシーンにドラッグ&ドロップしてください。
その後、そのアバターを選択した状態で、画像のように「Duplicate and Convert for VRChat」を実行します。

これによって「アバター名(VRchat).Material」というフォルダが生成されたら成功です。
確認したら、シーンに居るアバター2体は削除してください。

FBXのインポート

AssetsにBlenderから書き出したfbxファイルをドラッグ&ドロップし、生成されたfbxファイルを選択します。
InspectorビューでRigタブをクリックし、AnimationTypeをHumanoidに変更してApplyボタンを押してください。

Applyを押して処理が終わったら、そのfbxファイルをドラッグ＆ドロップしてシーンに読み込んでください。
おそらく酷い見た目になっていますが、次項で直すので気にしないで大丈夫です。
スカート部分である「Body.001」を「Cloth」という名前に変更しています。(説明の為なので、しなくてもいいです。)

マテリアルの差し替え

Bodyを選択し、Inspectorに表示されたマテリアルを「アバター名(VRchat).Material」内にある同名のマテリアルへと全て差し替えてください。
Clothにも同様の作業を行います。(こっちは一つだけでいいはず)

Clothコンポーネントの適用

ここまでの作業で疲れている方には申し訳ないのですが、ここからが地獄です。
手を動かす量が多いので、一度保存して休憩を挟むことを推奨します。

シーンからClothを選択し、InspectorビューのAdd Componentボタンから、Clothを適用します。

Constrainsの設定

Max DistanceとSurface Penetrationの2項目があり、ウェイトを塗る感覚で扱えます。(今回はSelectだけで塗っています。)
Constrains(制限)とある通り、どれぐらい変形できるかを決めるための項目であり、どのように変形するかを決める項目ではないです。
今回、この2項目を設定している間は、アバターのScaleを5:5:5程度に拡大することを推奨します。
1:1:1だと非常に見ずらく、設定しづらいです。
以下2項目の設定が出来たら、次の項目に進む前に必ずScaleを1:1:1に戻してください。

・Max Distance(0~1)
頂点が初期地点からどれぐらいの距離動けるか、上限を決めます。
Blender編で記述した通り、今回は腰紐部分で固定するので、その部分を0(Clothの影響を受けなくし、ボーンで制御)にするのは絶対です。さもなくば重力に従ってスカートが落下します。
膝がスカートに衝突する部分から下は、比較的大きめの値を取ると良いと思われます。

・Surface Penetration(0~1)
間違った説明をします。
今回のロングスカートに限って言えば、面がどれぐらい変形できるか、上限を決めます。
参考画像を以下に記載しますので、お好みで設定しましょう。(後述するStreching Stiffnessは1、Bending Stiffnessは0.7かつ、Self CollisionとInter Collisonが設定済みの状態で撮影しています)

▶Surface Penetration=0(全部赤)

▶Surface Penetration=1(全部緑)

• 私の設定
  赤=0、黄=0.7、緑=1です。
  

SelfCollisionとInterColision

Constrains設定時にアバターを拡大した方は、必ずScaleを1：1：1に戻してください。
物理演算の結果、布を貫通する布が生まれます。ここではそれを改善します。
結構重くなってしまう項目ですが、特にロングスカートでは設定せざるを得ないです。
※やり直しが効かないことが多いため、設定前にアバターを複製し、バックアップとしておきましょう。

まず、ここまでと同じ要領で、下記画像のように一定の高さ以下にSelfCollisionとInterCollisionを設定します。
Selectで選択し、"Self Collision and Inter Collision"にチェックしたら、続けて必ず次の項目を設定してください。

画面右下にあるSelf Collision Distanceを0.15に設定します。
設定するためのボックスが見えない場合は、Sceneビューで緑色になっているスカートのパーティクルを、適当に選択してください。
この項目を設定しないとスカートが大爆発します。
衣服自作勢向けにですが、数値の基準は画像のように、SelfCollisionとInterCollisionの設定された衝突判定用のパーティクルが重ならないサイズです。

Clothコンポーネントの各値について

各値について認識や、個人的な所感を書きつつ、設定は最後にまとめて公開します。

・Streching Stiffness(0~1)
0に近づくほど「縮みやすく、伸びやすい布」になるイメージです
伸びも縮みも必要ないと思うので、0.9～1を推奨します。

・Bending Stiffness(0~1)
0に近づくほど「ねじることができるようになります」
今回のスカートでは、皺の数にかなり影響を及ぼします。(0に近づくほど、皺が細かく多くなる。)

・Use Tethers
公式マニュアルでは、「動いているクロスのパーティクルが固定されたパーティクルから、遠くに離れ過ぎるのを防ぐ制限を適用します。」とあり、固定された頂点の周囲の頂点を、少し控えめな挙動にしてくれるようです。今回はチェックをつけていますが、おそらくMax Distanceを完璧にに設定できる方は必要ないです。私は無理。(要検証)

・Use Gravity
重力の影響をうけるかどうかです。今回はチェックをつけます。

・Damping(0~1)
1に近づくほど、動きが強く減衰されるようになります。

・External Acceleration / Random Acceleration(0~∞)
布に一定、もしくはランダムに風を当て続けるための項目です。
今回は0に設定しますが、一定であれば旗とか、ランダムであれば嵐の表現などに使えるかと。

・World Velocity Scale / World Acceleration Scale(0~1)
キャラクターの動きに合わせて布を変化させる項目です。
Velocityはその時点での速度、Accelerationはその時点での加速度を参照して、布の動きを計算します。
※VRChatでは頻繁にテレポートという名の超高速移動をするため、この2項目は0を推奨します。

・Friction(0~1)
摩擦係数です。0にしてます。

・Collision Mass Scale(よくわからん)
Clothの頂点に付いた判定用パーティクルのサイズを変えてくれるのだと思いますが、特に触ってないです。

・Use Continuous Collision
チェック必須だと考えています。判定の安定性が向上します。

・Solver Frequency(1~∞)
秒間あたりにどれぐらいClothの計算を行うかです。
Unityで上げすぎると負荷が高くなり、下げすぎるとCloth周囲に変な三角メッシュが現れます。
ただVRChat上だと変化がないように感じたため、120とかで固定されてるかもです(要検証)
120でゆっくりした動きには十分対応できます。素早い動作をする場合には480以上が妥当とのこと。

・Sleep Threshold(よくわからん)
この値以下の細かすぎる動きを無かったことにできます。裾とかが小刻みにプルプルし続けるのを防いでくれるはずです。

・今回の設定

コライダーの設定について

この項目については、身長・体のパーツの大きさに大きく影響されるため、
本当は動画にしてイメージを共有したいところなのですが、スペック不足の為申し訳ないです...！

代わりにパンツが見えないよう全身黒タイツにされた我が子と、
数枚の写真がヒントになればと思います。
お腹周りのテクスチャについては貫通に勝てなかった為、テクスチャを消去し Shader の Rendering Type を Cut out にしています。

・正面

・側面

・階層
全てSphere Colliderで、[Cloth]と名前に書いてあるものがそれです。
このように必ず空のオブジェクトを作り、その中にSphere Colliderを加えましょう。
後にも記載しますが、この空のオブジェクトは、Colliderの設定後必ずオフにしてください。

・Clotht上での設定
Element10と11は、後ほど記載するためここでは隠しています。

・各コライダーの数値

近い体型であればある程度流用できるかもです。
先ほど「階層」で紹介した画像と一緒に見ていただけると幸いです。

|名前(何の階層内にいるか)|Radius|x|y|z|
|-----|-----|-----|-----|-----|-----|
|HipL(Hip)|0.092|-0.03|0.536|0.0192|
|HipR(Hip)|0.092|0.03|0.536|0.0192|
|SpineL(Spine)|0.085|-0.03|0|0.01|
|SpineR(Spine)|0.085|0.03|0|0.01|
|Chest(Chest)|0.073|0|-0.001|0.0123|
|UpperLegL(Left Leg)|0.085|0.0134|0.0008|-0.0042|
|LowerLegL(Left knee)|0.1|0|0|0|
|FootL(Left ankle)|0.08|0.01|0.0265|0.136|
|UpperLegR(Right Leg)|0.085|-0.0134|0.0008|-0.0042|
|LowerLegR(Right knee)|0.1|0|0|0|
|FootR(Right ankle)|0.08|-0.01|0.0265|0.136|

スカートを手で持つためのコライダー

だいたいこんな感じで、中指の先にあるボーンに設定します。
普段は赤く囲ってある部分を(0,0,0)にしておき、
アニメーションオーバライドで(1,1,1)になるように設定すると、
トリガーを引いている間(FIST)のみ、スカートを持つことが出来るようになります。
※ColliderそのもののON/OFFは、何故かClothに関連付いていると効かないため、
このように親オブジェクトのScaleを変化させることでしか対応できないかと思われます。
何を言っているかわからない方は、「VRChat アニメーションオーバーライド」などで検索すると良い記事がいくつか出ると思います。

親オブジェクトのチェックを外したり、

Cloth側にコライダーを設定してあげることも忘れずにしましょう。

手動でのClothリセット機構

最初に紹介した弱点にて、
「計算がローカルで行われるため、自分の画面では綺麗でも、他者視点では崩れている可能性がある。」としましたが、
このような、スカート(Cloth)を1フレームの間OFFにするアニメーションを作り、それをアニメーションオーバーライドでEmoteに設定することで、Emoteによるリセットが可能になります。
ちなみにこちらも何故か、Cloth Componentを切るアニメーションは効かなかった為、親オブジェクトをOFFにしましょう。

(番外編)Clothリセット機構

今回のスカートに適用すると重すぎるので使っていませんが、最初に記載した弱点のうち２つは、せしおんさんの機構がかなり改善して下さるため、負荷の低いClothであれば導入を推奨します。(念のためDropBoxのリンク)

さいごに

上手くいかなかった方・あまりにも面倒になった方へ

Twitter(@falmaka)か、Discord(ファル・マカ #1965)までご連絡下さい。
Discord使って画面共有して頂きつつであれば、記事よりは分かりやすく説明できるかと思われます。(暇があればですが...！)

上手くいった方へ

お疲れさまでした！！！
存分にVRChat内で清楚ムーヴを楽しんでください◎◎◎
もしもこんな記事に感謝をして頂けるのであれば、欲しいものリストがあるので、何卒...！