How to work with Cubism MotionSync plugin for Unity WebGL
Updated: 05/30/2024
When developing for WebGL using the Cubism MotionSync Plugin for Unity, the audio functionality of Unity WebGL is limited.
For example, the Microphone sample scene in the Cubism MotionSync Plugin for Unity does not work properly because the standard Unity Microphone class does not support WebGL.
Please refer to the official Unity documentation for information on the limitations of audio functionality in Unity WebGL.
Using Audio in WebGL (Official Unity Manual)
Samples for use with WebGL
The Cubism MotionSync Plugin for Unity provides samples that allow Motion-sync to work within the limitations of Unity WebGL’s audio functionality.
MotionSync for WebGL sample scene
This sample scene can be used in WebGL in the same way as the MotionSync sample scene.
However, unlike the MotionSync sample scene, the following assets and scripts are used.
- CubismMotionSyncCriAudioInputWebGL class, which inherits from the CubismMotionSyncCriAudioInput class
- CubismMotionSyncAudioDataList assets
- CubismMotionSyncAudioData assets
CubismMotionSyncCriAudioInputWebGL
This class inherits from the CubismMotionSyncCriAudioInput class. It is used as a MonoBehaviour script.
It can also be handled as CubismMotionSyncCriAudioInput, but the following extensions are made.
- Holds references to the CubismMotionSyncAudioDataList assets.
- Obtains an AudioSource in the same hierarchy within the standard Unity Awake function.
- Checks if the name of the currently playing AudioClip in the standard Unity Update function matches the name of the AudioClip held in the CubismMotionSyncAudioData asset that has a reference in the CubismMotionSyncAudioDataList asset.
- If they match, the current playback time is obtained in PCM sample units, and an amount of audio data equal to the difference of the previous frame is stored in the buffer for motion-sync processing.
CubismMotionSyncAudioDataList
This class is defined as a ScriptableObject and can internally hold the following data.
- Array of structures holding references to CubismMotionSyncAudioData assets and also holding instance IDs
The CubismMotionSyncCriAudioInputWebGL class references this asset to access the data held in the CubismMotionSyncAudioData asset at run-time.
CubismMotionSyncAudioData
This class is defined as a ScriptableObject and can internally hold the following data.
- Array of sample data obtained from AudioClip with the GetData function
- AudioClip name
Usage
Each ScriptableObject must be generated in advance before it can be used in a scene.
To call the menu that generates each ScriptableObject, the Platform must be changed to WebGL in advance.
CubismMotionSyncAudioData assets and CubismMotionSyncAudioDataList assets can be created from the Assets/Create submenu that appears by right-clicking in the Project window.
An empty CubismMotionSyncAudioDataList asset can be generated from the Create/Live2D Cubism/MotionSync/Audio Data List menu.
You can select the generation of a CubismMotionSyncAudioData asset by opening the Assets/Create submenu while an AudioClip is selected.
The inspector for the CubismMotionSyncAudioDataList asset is shown in the image.
CubismMotionSyncAudioData assets can be registered by dragging and dropping them into the area marked “Drag & Drop.”
After registration, the screen will be as shown below.
Once you have generated and configured the necessary assets, set the CubismMotionSyncCriAudioInputWebGL class as a component on any object in the scene.
Then, attach the generated CubismMotionSyncAudioDataList asset from the inspector.
From the inspector, attach this CubismMotionSyncCriAudioInputWebGL component to the CubismMotionSyncCriProcessor of the model for which you want to use motion-sync to make it work.
