追記.こちらは『Magica Cloth』をWebGLで動かす方法です
『Magica Cloth 2』をWebGLで動かす場合は、こちらを確認してください
追記終わり
ソースコードを改造して、Magica Clothを無理矢理WebGL環境で動作させる方法を解説していきます。
ソースコードを改造する際は、自己責任でお願いします。
本内容はMagica Cloth v1.12.10時点での内容となります。
『chrome v108.0.5359.125』『firefox v108』『Microsoft Edge v108.0.1462.54』で動作確認済
『IE』で動作しない事を確認済、Macは未所持につき『Safari』での動作は不明
バージョンアップによって変更箇所が変わる可能性が大いにあるため、この記事では変更するスクリプトの名称、変更するコードの行数等といったバージョンに依存する部分には触れず、大まかなやり方の説明だけいたします。
目次
結論
・動かない原因は『Compute Shader』
・Unity2021.1以前なら普通に動く(多分)
・Unity2021.2以降なら、Compute Shaderに関連する内容を探して
コメントアウト or #if !UNITY_WEBGLを追記する
・自己責任で！
Magica Clothとは
スカートや髪の毛などを自然に揺らすことが出来る揺れものアセットです。
競合としてDynamic Boneが存在しますが、Magica Clothではボーンを揺らすだけではなく、ボーンが存在しないメッシュも動かすことが出来ます。
また開発者が日本人なので、日本語ドキュメントが存在する等の利点があり、私みたく英語が読めない人でも簡単にセットアップすることが出来ます。
Asset Store
https://assetstore.unity.com/packages/tools/physics/magica-cloth-160144
公式サイト
・WebGLを除くすべてのプラットフォームで動作可能
https://magicasoft.jp/magica-cloth/
と記載されており、実際にUnity2021.2でWebGLルドを行うと、エラーログが大量に出現して動きません。
という事で、そのままだとWebGLでは動きません。
原因
動かない原因はUnity2021.2以降でのみMagica Clothで採用されている『Compute Shader』が原因です。
より具体的に言えば『Compute Shader』の『SetInt』や『SetBuffer』などを実行しようとしたタイミングでエラーが発生します。
ちなみに、上のTwitterではマルチスレッドを行うJobsが原因で動かないのかなと推測していたのですが、どうやら最新のブラウザ環境であれば(マルチスレッド対応しているのかはさておいて)Jobs等も動かすことが出来るようです。
対応
Unity2021.1以前
2019.4~2021.1なら多分、何もせずともWebGLビルドすれば動きます。
(使用したモデルはこちら)
Unity2021.2以降
『Compute Shader』のSetIntやSetBuffer等を使用している部分をコードから探して、コメントアウトするなり『#if !UNITY_WEBGL』を追加していく必要があります。
なお、Compute Shaderが使用されている部分は『if UNITY_2021_2_OR_NEWER』で囲われているので、『UNITY_2021_2_OR_NEWER』で検索すれば該当箇所を見つけられるハズです。
その中からCompute Shaderに関連する内容を探して
コメントアウトで消す、または #if !UNITY_WEBGLを追記していきます。
上手くいけばWebGLでビルドした時に、エラーが表示されずにMagica Clothが動作するようになります
上記対応で(エラーは出てないけど)動かない場合
WebGLの時だけJobsのマルチスレッドで実行するコア部分を強制的に横取りして、シングルスレッドで動かすゴリ押しもあります。
旧版のブラウザなら効果があるかもしれませんが、最新版だとこの対応は必要ないと思います。
Jobsの理解が必要・処理が重い・修正箇所が多い・エラー対応が辛い、等のデメリットが多々ありますが、シングルスレッドで(無理矢理)動作させているのでWebGLでも確実に動作します。
注意
上記対応を行ってエラーが出たからと言って、公式にDMやバグレポートを送らない様に！
コード改造して出現したエラーは、自己責任で対応しましょう。
実際に対応させた例
unityroomにて、Magica Clothを対応させたゲームを投稿しています。
WebGL対応したことによる処理速度や負荷が気になる場合は、それぞれ参考にしてみてください
・Compute Shader無効化 ＆ シングルスレッド化対応
・Compute Shader無効化のみ