CLO/MarvelousLiveSyncを使ってMarvelousDesignerのシミュレーションをUnrealEngine5.4で再生する

株式会社GENEROSITYの丸山です。

MarvelousDesigner(以下MD)の衣装データをMDでシミュレーションして
UnrealEngine5.4(以下UE)に転送し再生する方法です。
まだそこまで日本語文献が多くなく、情報収集が大変だったので備忘録です。

日本語の文献としてはApparelGadget様のサイトとMD公式の解説動画が丁寧
だったので、細かい解説は割愛しざっくりした手順と
UE中級者でMD初心者な私がハマったポイントを補足しつつ書いていきます。UEは英語UIです。
また、これは24年10月時点の手順です。

https://apparel-gadget.com/clo-md-livesync-setting/#google_vignette
<iframe width="560" height="315" src="https://www.youtube.com/embed/Bdw9MUG6Ud0?si=xv-o4BFGCjyus0KR" 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>

## MDLiveSyncをダウンロードする
https://connect.clo-set.com/livesync

ダウンロードページに書いてあるように、
LiveSync/UE/MDのバージョンを<font color="#a12751">**きちんと合わせます。**</font>
横着して適当な組み合わせでやるとUEがクラッシュします。(やった人)

![version.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3901849/0b5306b9-2724-8ada-8d16-83ca34ca75da.png)

私は下記環境で進めていきました。
* UnrealEngine5.4(以下UE)
* MarvelousDesigner1.129.50255(以下MD)
* MDLiveSync1.1.3

## Substance 3D for Unreal Engineを入れる

https://www.unrealengine.com/marketplace/ja/product/substance-plugin?sessionInvalidated=true

マーケットプレイスでSubstance 3D for Unreal Engineを導入。
MDからUEにデータを転送する際に
マテリアルの再現などに必要なようです。
## LiveSyncをUEのディレクトリに移動
ダウンロードしたLiveSyncのzipデータは解凍して
UEのインストールフォルダ配下のMarketPlaceフォルダに
格納しておきます。(パスはインストール先に準ずる)
```
C://Program Files/Epic Games/UE_5.4/Engine/Plugins/MarketPlace
```
## UEの設定をしていく
MDLiveSyncを使用したいプロジェクトを作成し
(試すならBlankが良いと思います。)
デフォルトの設定から<font color="#a12751">**4点**</font>変更を加えます。

1. Edit>PluginsからCLO/Marvelouds Designer LiveSyncをオン
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3901849/66615df7-2d29-34ab-a34a-d7ffe2598bf8.png)
2. Edit>PluginsからSubstance On UE5をオン
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3901849/545fdced-4662-84fb-f2c9-a21663361d91.png)
3. Edit>ProjectSettings>Platforms>Windows>Targetted RHIsのDirectX12をDirectX11に変更
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3901849/da6f62d4-a74c-55a4-3a4a-02f6cfb4ee71.png)
Direct11だと安定して動くようです。
4. Edit>ProjectSetting>Engine>Rendering>Renderign settings>Translucency>Enable Order Independent Transparency (Experimental)をオン
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3901849/cd35375d-3f48-8af2-4b9b-7252db444f4a.png)
深いのでSearchでソートするのがおすすめです。透過処理にまつわる項目のようです。

いずれの項目も、チェックをするとUEを再起動するかときかれるポップアップが出るのですが、
私は全部チェックしてから再起動しています。

## CLO/MarvelousLiveSyncを起動
UEを再起動するとWindows>CLO/MD LiveSync Editorが表示されているはずです。
これで転送準備はできました。UEの設定はおしまいです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3901849/462ea890-ea74-644a-5989-af469e4116f5.png)

## MDで服のシミュレーション
さて、MD側の作業です。
今回はデフォルトで入っているAvator/Garment/Motionで
歩いているサンプルデータを作りました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3901849/0cd74acc-b62c-051c-3072-10bd9c67461f.png)
シミュレーションはRecord済みの状態にしておきます。(赤いバーが出ている状態。)

## UEに転送
Windows>CLO/MD LiveSync Editorをクリックし、エディターを起動させます。
MDの<font color="#a12751">**シミュレーション(Spaceキー)がオフ**</font>になっていることを確認します。(オフにしないとエラーがでます。)
左上のCloのロゴマークを押します。
![cloeditor.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3901849/5835bbfb-105f-eaeb-f532-c4843b9ea439.png)
数秒待つとマテリアルが再現された状態でGarmentとAvatorがエディターに転送されてきます。

## 保存
この状態だとまだマップに出せないので、プロジェクトに保存します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3901849/08c6bacd-ea2d-8723-b8fe-3c206bb78d9a.png)

GamentとAvatorは別々に保存する仕様となっています。
保存したい対象を選択した状態で保存ボタンを押します。

![geometrycache.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3901849/5b5a4270-3b7a-5afc-7798-62c6b6ebeafa.png)

シミュレーションしたGarmentのアニメーションはGeometryCacheとして扱われるので
as GeometryCacheとして保存します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3901849/17bfc17b-d50d-eae6-9513-4a6c9dcd8cdd.png)

Avatorはもう少し保存できる形式が多いようです。
今回はGarmentの動きだけを表示したいのでGarmentのみGeometryCacheで保存します。
GeometryCacheはものによっては保存に少し時間がかかりますが気長に待ちます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3901849/0e4809d1-b99a-ac3e-b223-6c6d88a03061.png)
保存先を聞かれたら任意の場所を選択します。
保存が完了したらCLO/MD LiveSync Editorは閉じても大丈夫です。

## マップに表示
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3901849/87fc7a29-d503-8c78-b489-91a268b6d3b3.png)
GeometryCacheをマップにドラッグ&ドロップすると表示されました。
再生ボタンを押して確認すると動いている様子が確認できます。

## 補足
UEからAvatorとしてモデルをMDに転送することもできるようです。
また、かなり処理負荷が高くUE上で複数体同時に出すと再生時にフレームレートが12くらいまで落ちるため
ゲーム向きではなさそうです。映像として使うのが好ましいと思います。

## その他
CLO/MarvelousLiveSyncがベストだという答えに至るまでに
様々な手法を検証したので書き残しておきます。

### Chaos Panel ClothとMD

https://dev.epicgames.com/community/learning/tutorials/Mpze/unreal-engine-panel-cloth-editor-walkthrough-updates-5-4

シミュレーション自体はUE5のChaos Panel Clothでつけられそうだったので検証してみたものの、
ウェイトペイントが結構骨の折れる作業だったためMDでつけることにしました。

### alembic

<iframe width="560" height="315" src="https://www.youtube.com/embed/vKkzwSFts8Q?si=1Tsk3pEvWZXIvspY" 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>

abcデータで持っていく方法。LiveSyncが出るまでは
重いけど手軽でちょっと使う分にはよさそうな手法でした。

### uDraper

<iframe width="560" height="315" src="https://www.youtube.com/embed/E8ZIWcHTFHw?si=XEjw8PRL3MSyPPVf" 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>

有料プラグインですが処理負荷が軽そうなのと、
ワークフローがシンプルだったので使ってみたいと思いました。

以上です。どなたかのご参考になれば嬉しいです。