UnrealEngineでStyle3Dクロスシミュレーションを使う

# Style3D概要
Clothシミュレーションの一種です。UnrealEngine用のプラグインがあります。




![NewLevelSequence.3575.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638047/1a2b3826-c8f7-ee2a-1a88-eb9cdf13f94d.jpeg)

<iframe width="560" height="315" src="https://www.youtube.com/embed/dkc3YNNxenw?si=9iLFF83FpbV9srwA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

## 使用例

https://80.lv/articles/hirokazu-yokohara-tries-out-style3d-s-digital-clothing-solutions/


色々ソフトが出ていますがAteilerとSimulatorを使います。
Ateilerで服を編集しUE内でSimulatorを使います。

https://simulator.style3d.com/en/home

https://atelier.style3d.com/en/home


## 料金
30日間無料
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638047/d825f5ff-9373-f905-7434-8c08440bf889.png)

## 公式
サンプル

https://meiguoshiyous-organization.gitbook.io/untitled/demo-project/demo-project

ドキュメント

https://meiguoshiyous-organization.gitbook.io/untitled

https://linctex.yuque.com/zyh9wg/piapgr/gtrxy8umh48svn59


## いいところ
- 服のサンプルが多い。これをベースに加工してUEに持っていける。

https://sketchfab.com/Style3DMeta/models

- UE上でAnimationのキャッシュが取れる。要求スペックに多少満たなくてもまぁ動く。メモリ32GB＋RTX2060では動いた。リアルタイムでも動くがこれにはスペックが必要。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638047/00f2621f-a291-2a77-d6d8-12a19159778d.png)
 
- パーツごとに当たり判定を調整できる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638047/c9e815f0-cc89-2c5d-7463-2f135956be3e.png)

- 公式Discordが丁寧
聞くと結構答えてくれる(要英語)。

# 導入手順
アバターに服を着せてアニメーションを設定する手順を説明します。

動画

## 環境
- Windows11
- Unreal Engine 5.4
- メモリ32GB
- GPU RTX 2060

## 環境構築

公式ドキュメント(英語)があるのでこちらを参照しつつ補足していきます。
公式ドキュメントの該当する項のリンクを貼っています。

https://simulator.style3d.com/en/home


公式ドキュメントに従いStyle3D Simulator Pluginを追加します。

https://meiguoshiyous-organization.gitbook.io/untitled/quick-start

https://simulator.style3d.com/en/home

Free TrialよりPluginをDownloadして該当のバージョンの物をPluginフォルダ以下に配置します。
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638047/bf17ab37-cf38-5915-7e23-4a69a89894d0.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638047/0879e5e2-10a6-3383-851a-3d3947cd8b7c.png)

Style3D Ateilerをインストールします。
    https://atelier.style3d.com/en/home
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638047/7b34f978-9e24-e9f3-fb0a-98e53501120e.png)

   
# アニメーション付きのアバター準備
Animation付のアバターを準備します。今回はVRoidを使いました。アバターからは服を外しておきます。VRoidはその辺りの操作が出来るので都合がいいですね。アニメーションは以下のページの概要欄で配布されているものを適応しました。

https://www.youtube.com/watch?v=lUDPjyfmJrs

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638047/22003aa4-e94c-ec0b-b617-ee5cd502cf96.png)

# 服の準備
着せる服を準備します。主に以下の順に進みます。
1. UEからデフォルト姿勢のObjを書き出し
1. Atelier上で服の追加とフィッティング
1. フィッティングした服をUEにインポート

https://meiguoshiyous-organization.gitbook.io/untitled/quick-start

##### 服作成用のアバターの書き出し
Simulator上で服を着せるためのアバターを準備します。Aポーズだと都合がいいです。初期値がAポーズではない場合は、AポーズになるAnimationを準備してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638047/9de23fb8-a04a-6798-00e8-f80985d435c6.png)



ドキュメントに従いStyle3Dコンポーネントを追加します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638047/984f3c3b-8aa3-837d-8f3c-323f89449e83.png)

Export Obstacleを選択すると現在のポーズでObjが出力されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638047/211ead4a-b520-a213-3bbd-73bc6d282ebd.png)


## Ateiler上で服の装着

Ateilerを起動し、使用したい服をインポートします。

このボタンを押すと服のサンプルが開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638047/c73c7cd0-9d30-fa5d-23e0-ca7042d995a2.png)

「Download from Cloud」を押すとWeb上のサンプルを追加することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638047/1c9bf839-a58b-7a61-b8be-40ba31e8c75b.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638047/962a2a34-c942-6d65-b051-a329c3c24af6.png)


今回はアバターとシーンもインポートします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638047/736754b2-c1a7-c0d6-f48e-216580b52103.png)

アバターが表示されていない時はここから切り替えられます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638047/f15540ad-dd4c-3bb0-3501-115b8a0e3899.png)


先ほど書き出したアバターをインポートします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638047/46e95a16-dd84-0c27-a168-618b20225771.png)

デフォルトのアバターを消して、アバターに合うように調整します。
パターンを編集してサイズを調整します。変形はハードル高いですが裾上げたり、ウェスト詰めたりくらいは容易です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638047/9aa3c6c4-d4b4-728d-10a5-a27c9d669efa.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638047/ad3d17d1-b0db-af7b-a2a2-a09b18897180.png)

少し埋まっている、間隔が空いているような状態でも、シミュレーションをOnにするといい感じになります(ここ気持ちいいポイント)。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638047/d59174d0-d21d-fc42-8431-433839c477f8.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638047/7e2fb948-58c7-56f4-784b-c041566cb1e8.png)

画像右上の再生マークがシミュレーションボタンです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638047/9223f92d-2f3c-091c-ba2e-26f92af5def7.png)


ウェストが緩いと下がってきがちなので極力詰めた方がいいです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638047/561cd4d2-f016-a3a1-c3ab-e82646fd269a.png)



上半身を追加します。ここを追加にしないと現在のシーンが消えます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638047/53b56926-c4c4-4f31-efa1-c183cb2e61fd.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638047/6787542a-8b8f-1b9a-31ad-baa0303cc592.png)


UE側で上半身、下半身をそれぞれ読み込むようなプロパティ(Multipl Garment)がありますが、2024年7月時点では正常に動いていなさそうだったので、上半身下半身まとめて1つの服として扱います。

サイズを調整します。半袖で腕を振り回すと、袖口があまり綺麗に見えなかったので肩部分を消してタンクトップにします。場所によってはパーツとパーツを縫い合わせるような処理が入っているので、設定から切り離す作業が必要そうですが現状よくわかっていないので割愛します。今回はDeleteキーだけで消えました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638047/9e37b5f3-8445-0176-236d-6dd5a382410e.png)


サイズを詰めてシミュレーションします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638047/3927f3d2-c4a7-78e7-eb3e-fca04adfd562.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638047/d1b8a1ff-d4a4-a719-70ab-9dc951c95451.png)

いい感じ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638047/ac25755d-ccf3-d0ce-0458-dc7fe49048ca.png)

Aラインっぽい服装好きです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638047/46581eaa-9ae8-6cc7-f731-719cf48c6fd9.png)


## 書き出し
書き出し前にUVを0~1に揃える必要があります。
「ツール/UVエディター」を選択→「配置」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638047/4d8f0d4e-d3c5-72c1-6e8d-1543b7e5d4f2.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638047/9cfd760f-389e-abc8-24fd-731ba2290503.png)


クイックスタートガイドに従って頂点数を減らしたのちに書き出します。クイックスタートには50000以下とありますが、PCのスペックによってはもう少し下げた方がUE上で安定します。

https://meiguoshiyous-organization.gitbook.io/untitled/quick-start#create-or-modify-garment


アバターはいらないのでOFFにします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638047/068b3f4f-9087-c831-3dbb-313ccf6c5d4c.png)


# UEで読み込み

UEで読み込みます。
https://meiguoshiyous-organization.gitbook.io/untitled/quick-start#import-smd-to-unreal-engine

以下の手順です。
1. 服のインポート
1. 当たり判定の設定
1. アバターにアニメーションの適応
1. アニメーションを付けたアバターにフィッティング
1. アニメーションのキャッシュ
1. 服のパラメーターの調整(繰り返し)
1. アニメーションのキャッシュ(繰り返し)
1. キャッシュしたアニメーションの再生

アニメーションをキャッシュせずリアルタイムで動かすこともできますが、PCのスペックの関係上動かなかったので今回はキャッシュしています。

# 当たり判定の設定

多くのアニメーションでは「手がズボンの中に埋まる」「右足がズボンの左裾を貫通する」等の動きが含まれるので当たり判定の設定を行い、服の各パーツが身体のどこと衝突するか設定する必要があります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638047/b9af29a6-d9d8-b7a1-c5b4-dacfcf008c7c.png)



服のパーツと体のパーツにそれぞれ当たり判定を設定して、不必要な干渉が起きないようにします。

ペイントモード(UE標準機能)で身体を塗っていきます。
https://meiguoshiyous-organization.gitbook.io/untitled/collision-filter#tmchz

> Tips : 既にAnimationが適応されていて塗りづらい場合は「UserRef Pose on Init Anim」を押すと初期ポーズになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638047/2c2bc095-72f0-098f-9629-3bdc6e5075b2.png)

> Tips : Erase Colorを上手く使うといいです。Shift Keyでこちらの色で塗られます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638047/3514ef0c-8b82-9887-0902-ed9050e49531.png)

> Tips : Blenderとかで塗った方がいいです。FBXで出力すれば反映されます。Blenderで設定された値と異なる可能性があるので、UE側でも確認してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638047/5161c3b4-b2b0-4180-b483-008b40afe56f.png)


同じ値で塗ってほしいので、Strengthを1、Falloffを0にする必要があります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638047/9be5a526-93c0-a587-a5db-84b315edb049.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638047/12bb13bc-8793-ab40-d8c5-30e5841b6ddd.png)

「2. Automatically set Collision Filters for garments」に従い、当たり判定を設定します。
自動で当たり判定が設定されますが、アバターがAポーズであることが前提となっています。

手動でも設定することができます。「1.Manual adjustment of Collision Filter」以降に記載があります。


## 髪の毛部分のマスクの適応
これだけだと髪の毛が引っかかるのでカスタムでマスクを当てます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638047/11b5bda9-94a9-9a17-2e3b-f2ead6690457.png)

服の「Collision Group」と「Collision Mask」を適応します。先ほどの自動設定で設定された項目もこちらです。

それぞれに対する公式からの説明は以下の通りです。


> A human mesh be set in Collision Group  does not contact the parts of the clothing be set in Collision Group A； A human mesh be set in Collision Mask  contacts the parts of the clothing be set in Collision mask A. Both need to be set manually.

以下の作業を行います。
1. 髪の毛をCustom Collision Groupに追加します。
1. TシャツをCustom Collision Groupに追加します。
1. TシャツをCustom Collision Maskから除外します。


使われていない微妙な色で髪の毛を塗ります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638047/006e3b8f-0abe-ef65-29be-73be1a58f8a1.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638047/feb94af8-1250-3550-e058-18c6fbd08aa5.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638047/412e8bef-571f-cf68-86bb-37f3de8cc83a.png)

Style3DコンポーネントのCollisionGroupにNameを「Hair」、Collision Groupを「Custom」として追加し、先ほど塗った色を設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638047/fbea252a-d6c1-cba2-3ab6-00ec68145294.png)

インポートした服を開き、CollisionGroupの「Custom」にチェックをいれます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638047/96ef0220-4b3f-8e3f-53ee-b8890691c930.png)

Collision Maskから「Custom」のチェックを外します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638047/2c94d412-0a2d-36e0-eb25-23524b6167b5.png)



以上で当たり判定の設定が完了です。

腕、髪の毛、足が引っかかりがちです。後の工程でアニメーションを再生した際に不都合が生じた場合は再度設定しなおす必要があります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638047/96e4ae4a-861f-459e-d296-40e42a7692ef.png)


一度Animationのキャッシュが取れたらこの当たり判定はなくなっても問題ありません。

# ポーズのフィッティング

アバターにAnimationを適応させると服を着せた時とズレるので、服が合わなくなります。そのためPose Fittingを行う必要があります。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638047/01758fb6-344d-046a-f032-cf8d5cb9247d.png)

ドキュメントの以下の部分に従いフィッティングを行います。
https://meiguoshiyous-organization.gitbook.io/untitled/character-posefitting

## ポーズのフィッティングに関する補足
アバターの初期値(Animationをつけていない状態)がAポーズでない場合、以下の位置にAポーズになるようなAnimationを設定します。

VRM4Uプラグインを入れている場合は「A_VRoidSimple_Apose」がPluginに含まれているので使用すると都合がいいです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638047/4c9115b3-8990-898d-e62b-b020a316817d.png)

PoseFittingはLoginされていないと実行されません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638047/0b6e313b-3056-6d75-8a0c-8410c322847a.png)

PoseFitを押すと「A Pose Asset」にアニメーションを適応した場合はその姿勢から、適応していない場合はアバターの初期値から、アニメーションの開始地点まで自動でアニメーションします。

Ateiler上で服を着せた際の姿勢から、アニメーション開始時の姿勢までアニメーションするので、服のズレを相殺することができます。


ここで設定している「Style3DGarmentCapture」に今から保存するクロスシミュレーションのキャプチャが保存されます。これはデフォルトではDerivedDataに保存されているようなので、うっかり消さないよう気を付けた方がいいです(2敗)。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638047/e5453060-3982-b349-2f79-5a714acdafcc.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638047/5ab5e275-3cb1-7544-3116-c4f9a7ad5dab.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638047/87a87f5b-5f67-4134-cf79-d8a7a02573de.png)


> Tips：モデルに対してBindして、Attatch, Freezeをオンにしている箇所はPoseFitting時に当たり判定がマスクされません。そのため、PoseFittin開始時に一部のメッシュが埋まっていると問題になります。髪の毛が身体に埋まっていると問題になりがちなので、次のようなAnimationを準備し、初期姿勢とすると都合がよいです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638047/3d3e8413-be8d-4f2c-9a38-5c23c5cf03a6.png)


# Animationのキャッシュ

ドキュメントに従いアニメーションをキャッシュしていきます。キャッシュファイルの名前を入力します。

https://meiguoshiyous-organization.gitbook.io/untitled/quick-start#garment-simulate

Animation Cacheを押してアニメーションをキャッシュしていきます。
キャッシュが完了するまで待ちます。
途中で崩れるとやり直しです。服のパラメーターを調整してください。

途中にある無理なポーズで崩れて全部推し直しになりがちなので、事前にアニメーションを分割して適切なパラメーターをしてから通しでキャッシュをとる方がいいと思います。

# パラメーターの設定
アニメーション中に崩れないように服のパラメーターを調整します。

https://meiguoshiyous-organization.gitbook.io/untitled/garment-properties


主に触ったのは以下のパラメーターです。

Weight
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638047/18c5f3e2-cb26-aed1-80a3-6fa2101c2495.png)

Tシャツがめくれ上がっていく問題が改善します。最大値まで上げました。

Thickness
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638047/902a0bed-5ceb-0816-b4a3-55832d716054.png)

服を突き抜ける問題が改善しました。いくらか上げました。

Stretch Warp/Weft/Bias

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638047/3b048448-efc0-bf9a-8cff-fef20a8eb013.png)

服が避ける問題が改善しました。いくらか上げました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638047/608069b2-7f2d-647c-be1e-716793a6ac60.png)

パーツごとに設定できるのでそれぞれいい感じにします。

# Animatoionの再生

Animationを再生します。
モードを「Chache Play」に切り替えて、保存時に指定した名前を入力するとロードされます。
「Cache Play」に切り替えずにRecord ModeのままBegin Playすると上書きされます(3敗)。

https://meiguoshiyous-organization.gitbook.io/untitled/quick-start#play-garment-cache


# 結果
服のシワがちゃんと出るのいいですね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638047/2ee6adee-2013-75a6-002c-fc2196092c2e.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638047/bb3a006d-61b7-2035-6264-fc300d35f814.png)


あとウェストと服の間の隙間がちゃんとできるのすごい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638047/3909faea-221a-caa1-94e9-7d8f31e6824d.png)

ライティングとVRMのマテリアルの設定、Kawaii Physicsの調整を詰めればもう少し改善しそうです。


# その他気を付けること

- 服の一部が硬直する不具合がありました。最終的に解消しなかったので別の服でやり直したところ、同じ手順で正常に動作しました。服のSampleの設定の問題か、頂点数が多すぎることが原因ではないかと考えています(未解決)。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638047/c02a1ef3-ce6d-7687-4c4d-a1ff22b7a148.png)


## その他のClothシミュ
使ったことがないので知りたい
- Marvelous Designer
- uDraper
https://www.youtube.com/watch?v=qBJRJvHYS_k