Cubism MotionSync Plugin for Unity WebGLでの動作について
最終更新： 2024年5月30日
Cubism MotionSync Plugin for Unityを利用してWebGL 向けに開発を行う場合、Unity WebGL のオーディオ機能の制限を受けます。
例えば、Cubism MotionSync Plugin for Unity の Microphone サンプルシーンは、Unity 標準の Microphone クラスが WebGLでの動作に対応していないため、正常な動作を行うことが出来ません。
Unity WebGL におけるオーディオ機能の制限については Unity 公式のドキュメントをご確認ください。
WebGL のオーディオの使用 (Unity公式マニュアル)
WebGLで利用する場合のサンプル
Cubism MotionSync Plugin for Unity では、Unity WebGL のオーディオ機能の制限の範囲内でモーションシンクを動作させるサンプルを提供しています。
MotionSync For WebGL サンプルシーン
このサンプルシーンは WebGLにおいて MotionSync サンプルシーンと同様の操作で利用することが出来ます。
ただし MotionSync サンプルシーンと異なり、以下のアセットやスクリプトを利用しています。
- CubismMotionSyncCriAudioInput クラスを継承する CubismMotionSyncCriAudioInputWebGL クラス
- CubismMotionSyncAudioDataList アセット
- CubismMotionSyncAudioData アセット
CubismMotionSyncCriAudioInputWebGL
このクラスは、CubismMotionSyncCriAudioInput クラスを継承したクラスです。MonoBehaviour スクリプトとして利用します。
CubismMotionSyncCriAudioInput としても扱うことが出来ますが、以下の拡張を行っています。
- CubismMotionSyncAudioDataList アセットへの参照を保持する。
- Unity標準の Awake 関数内で同階層にあるAudioSourceを取得する。
- Unity標準の Update 関数内で現在再生中の AudioClip の名称と、CubismMotionSyncAudioDataList アセット内で参照を持つ CubismMotionSyncAudioData アセットで保持している AudioClip の名称が一致するかを調べる。
- 一致した場合、現在の再生時間をPCMサンプル単位で取得し、前のフレームの差分だけ音声のデータをモーションシンク処理用のバッファへ格納する。
CubismMotionSyncAudioDataList
このクラスは、ScriptableObject として定義されており、内部では以下のデータを保持することが可能です。
- CubismMotionSyncAudioData アセットへの参照とインスタンスID を保持する構造体の配列
CubismMotionSyncCriAudioInputWebGL クラスはこのアセットを参照することで、CubismMotionSyncAudioData アセットで保持しているデータにランタイムでアクセスします。
CubismMotionSyncAudioData
このクラスは、ScriptableObject として定義されており、内部では以下のデータを保持することが可能です。
- AudioClip から GetData 関数で取得したサンプルデータの配列
- AudioClip の名称
利用方法
シーンでの利用の前に、事前に各 ScriptableObject の生成が必要です。
各 ScriptableObject の生成を行うメニューを呼び出すには、事前に Platform を WebGL に変更する必要があります。
CubismMotionSyncAudioData アセットやCubismMotionSyncAudioDataList アセットの生成は、Projectウィンドウで右クリックすることで現れる Assets/Create サブメニューから行えます。
Create/Live2D Cubism/MotionSync/Audio Data List メニューから、空のCubismMotionSyncAudioDataList アセットを生成することが出来ます。
CubismMotionSyncAudioData アセットの生成は AudioClip を選択している状態で Assets/Create サブメニューを開くことで選択できるようになります。
CubismMotionSyncAudioDataList アセットのインスペクタは画像のようになっております。
CubismMotionSyncAudioData アセットを「Drag & Drop」と書かれた領域にドラッグアンドドロップすることで登録することが出来ます。
登録後は以下のような表示になります。
必要なアセットを生成して設定を終えたら、任意のシーン上のオブジェクトに CubismMotionSyncCriAudioInputWebGL クラスをコンポーネントとして設定します。
設定したのち、生成した CubismMotionSyncAudioDataList アセットをインスペクタからアタッチします。
この CubismMotionSyncCriAudioInputWebGL コンポーネントをモーションシンクを利用したいモデルの CubismMotionSyncCriProcessorにインスペクタからアタッチすれば動作するようになります。
