今回はVTuberの3Dモデル(FBXやVRM)に動きを付けて、STYLYにアップロードする方法を紹介します。 STYLYのUnityプラグインを使えば、3Dモデルの質感や動きを保ちつつ、Unityから簡単にアップロードできます。 自作モデルのVR展示会など色々なことに応用できるので、ぜひ活用してみてください☺️ ※「STYLY Plugin for Unity」は現在「Unity 2019.3.x」以下をサポートしています。 Unityの過去のバージョンはこちらからダウンロードできます。
![thumbnail_large - STYLY 完成イメージ](https://styly.cc/wp-content/uploads/2018/09/thumbnail_large.gif)
完成イメージ
FBXモデルを使う
Unityを起動して新規プロジェクトを作成します。
![- STYLY 新規プロジェクトを作成](https://styly.cc/wp-content/uploads/2018/09/0.png)
新規プロジェクトを作成
FBX形式のモデルデータをUnityに配置します。 プロジェクトのAssetsフォルダー内に配置するか、UnityのProjectエリアへドラッグ&ドロップしてください。 今回は「model」という新規フォルダーを作ってその中に配置しました。
![1a - STYLY FBX形式のモデルデータをProjectに配置](https://styly.cc/wp-content/uploads/2018/09/1a.png)
FBX形式のモデルデータをProjectに配置
配置したモデルデータをクリックで選択して、画面右側のInspectorの①「Rig」タブを選択し、Animation Typeを②「Humanoid」に変更して③「Apply」をクリックしてください。
![1b - STYLY RigをHumanoidに変更](https://styly.cc/wp-content/uploads/2018/09/1b.png)
RigをHumanoidに変更
次にモデルのマテリアル(質感)を設定します。 タブを①「Materials」に変更して、②「Extract Materials…」をクリックします。 表示されたフォルダー選択画面内で右クリックし、③「Materials」フォルダーを新規作成して、④「フォルダーの選択」をクリックします。
![1c - STYLY マテリアルを変更できるようにする](https://styly.cc/wp-content/uploads/2018/09/1c.png)
マテリアルを変更できるようにする
作成したMaterialsフォルダー内にモデルのマテリアルが保存されるので、選択してお好みのShaderに変更してください。
![1d - STYLY マテリアルを変更](https://styly.cc/wp-content/uploads/2018/09/1d.png)
マテリアルを変更
ProjectエリアのモデルデータをHierarchyエリアにドラッグ&ドロップします。
![1e - STYLY Hierarchyにドラッグ&ドロップ](https://styly.cc/wp-content/uploads/2018/09/1e.png)
Hierarchyにドラッグ&ドロップ
モデルに揺れものやリップシンクなどのScriptが設定されている場合は、右クリックして「Remove Component」で削除してください。 (「Animator」は削除しないでください)
![1f - STYLY 不要なスクリプトを削除](https://styly.cc/wp-content/uploads/2018/09/1f.png)
不要なスクリプトを削除
モデルの設定が完了しました。 こちらから「モーションを付ける」解説に進んでください。
VRMモデルを使う
Unityを起動して新規プロジェクトを作成します。
![- STYLY 新規プロジェクトを作成](https://styly.cc/wp-content/uploads/2018/09/0.png)
新規プロジェクトを作成
UniVRMを入手
VRM公式サイトのDownload(https://github.com/dwango/UniVRM/releases)から最新のUniVRMを入手してください。
![2a - STYLY UniVRMをダウンロード](https://styly.cc/wp-content/uploads/2018/09/2a.png)
UniVRMをダウンロード
ダウンロードしたunitypackageファイルをダブルクリックして、Unityへ「Import」してください。
![2b - STYLY UniVRMをUnityへインポート](https://styly.cc/wp-content/uploads/2018/09/2b-1.png)
UniVRMをUnityへインポート
VRMをUnityへインポート
VRM形式のモデルデータをUnityに配置します。 プロジェクトのAssetsフォルダー内に配置するか、UnityのProjectエリアへドラッグ&ドロップしてください。 今回は「model_vrm」という新規フォルダーを作ってその中に配置しました。 配置するとUnityのPrefabが自動生成されます。 生成されたPrefabを選択して、画面右側の「License」がSTYLYで使用可能かどうかを確認してください。 使用許諾・ライセンス情報の詳細はこちらに記載されています。
![2c - STYLY VRM形式のモデルデータをProjectに配置](https://styly.cc/wp-content/uploads/2018/09/2c.png)
VRM形式のモデルデータをProjectに配置
生成されたPrefabをHierarchyエリアにドラッグ&ドロップします。
![2d - STYLY PrefabをHierarchyにドラッグ&ドロップ](https://styly.cc/wp-content/uploads/2018/09/2d.png)
PrefabをHierarchyにドラッグ&ドロップ
モデルに設定されている「Animator」以外のScriptを右クリックして「Remove Component」で削除してください。 VRoid Studio製のVRMモデルの場合は、「▷」をクリックすると表示される「secondary」も削除してください。
![2e - STYLY 不要なスクリプト等を削除](https://styly.cc/wp-content/uploads/2018/09/2e.png)
不要なスクリプト等を削除
モデルの設定が完了しました。
モーションを付ける
今回はMixamoを使ってモデルにモーション(動き)を付ける方法を紹介します。
Mixamoでモーションを入手
Adobe社のMixamoは豊富なモーションや3Dモデルを無料でダウンロードすることができます。 MixamoのWebサイト(https://www.mixamo.com)を開いて、Adobe IDをお持ちの方は「LOG IN」、お持ちでない方は「SIGN UP FOR FREE」で新規登録してください。
![3c - STYLY Mixamoトップページ](https://styly.cc/wp-content/uploads/2018/09/3c.png)
Mixamoトップページ
Mixamoにログインすると様々なモーションが表示されます。 お好みのモーションを選択して「DOWNLOAD」をクリックしてください。
![3d - STYLY モーションを選んでダウンロード](https://styly.cc/wp-content/uploads/2018/09/3d.png)
モーションを選んでダウンロード
ダウンロード設定はモデルに合わせて以下の画像のように設定しました。
![3e - STYLY ダウンロード設定](https://styly.cc/wp-content/uploads/2018/09/3e.png)
ダウンロード設定
モーションの設定を変更
ダウンロードしたFBXファイルををUnityに配置します。 プロジェクトのAssetsフォルダー内に配置するか、UnityのProjectエリアへドラッグ&ドロップしてください。 次に、配置したファイルを選択して①「Rig」タブを選択し、Animation Typeを②「Humanoid」にして③「Apply」をクリックしてください。
![3f - STYLY MixamoのFBXファイルをProjectに配置](https://styly.cc/wp-content/uploads/2018/09/3f.png)
MixamoのFBXファイルをProjectに配置
次に、①「Animation」タブを選択し、②「Loop Time」にチェックを入れて、③「Apply」をクリックしてください。 この設定を行うことで、動きがループするようになります。
![3g - STYLY Animationをループさせる](https://styly.cc/wp-content/uploads/2018/09/3g.png)
Animationをループさせる
モーションをモデルに反映
まず、Projectエリアを右クリックして、「Animator Controller」を新規作成してください。 名前は「motion」としました。
![3a - STYLY Animator Controllerを新規作成](https://styly.cc/wp-content/uploads/2018/09/3a.png)
Animator Controllerを新規作成
Hierarchyエリアのモデルを選択して、画面右側のInspectorに表示されるAnimatorの「Controller」へ、作成した「motion」をドラッグ&ドロップしてください。
![3b - STYLY Animator Controllerをモデルに設定](https://styly.cc/wp-content/uploads/2018/09/3b.png)
Animator Controllerをモデルに設定
Projectエリアの①「motion」をダブルクリックしてAnimatorウィンドウを表示します。 MixamoのFBXファイルの②「▷」を押すと表示される③「映像の再生アイコン」をAnimatorエリアにドラッグ&ドロップしてください。
![3h - STYLY AnimationをAnimator Controllerに配置](https://styly.cc/wp-content/uploads/2018/09/3h-1.png)
AnimationをAnimator Controllerに配置
最後にモーションの動作確認を行います。 Sceneタブを選択してプレビューを表示し、画面上側の「再生アイコン」をクリックしてモーションが再生されれば完了です。
![3i - STYLY モーションの確認](https://styly.cc/wp-content/uploads/2018/09/3i.png)
モーションの確認
自作のモーションを使う
Blenderなどで作った自作のモーションを使用することもできます。 自作のモーションが含まれているモデルは、「▷」を押すと「映像の再生アイコン」が表示されます。 こちらを、前述したMixamoの解説と同じ方法で使用してください。
![3j - STYLY 自作のAnimationを使う](https://styly.cc/wp-content/uploads/2018/09/3j.png)
自作のAnimationを使う
まばたきさせる
キャラクターに「まばたき」させると、キャラクターの魅力がグッと増します。 まばたきさせるには、表情を制御するBlendShapeがモデルに設定されている必要があります。 (VRMにはあらかじめ設定されています)
新規Animationを作成
画面上側の「Window>Animation」をクリックしてAnimationウィンドウを表示します。
![4a - STYLY Animationウィンドウを表示](https://styly.cc/wp-content/uploads/2018/09/4a-1.png)
Animationウィンドウを表示
Hierarchyエリアのモデルを選択した状態で、Animationウィンドウの①「プルダウン」をクリックし、②「Create New Clip…」を選択して、新規animファイルを③「保存」してください。 名前は「mabataki.anim」としました。
![4b - STYLY 新規Animationを作成](https://styly.cc/wp-content/uploads/2018/09/4b.png)
新規Animationを作成
まばたきを録画
Animationウィンドウのプルダウンで「mabataki」を選択した状態で、①「録画アイコン」をクリックして、②に「0」を入力し、③表情のMeshを選択して、④まばたきを制御するBlendShapeの数値を「0」にしてください。 まばたきの数値を入力すると、タイムラインに青色の◆が表示されます。 ◆が表示されない場合は④の数値を0以外に変えて、再び0に戻してみてください。
![4c - STYLY まばたきの動きを録画1](https://styly.cc/wp-content/uploads/2018/09/4c.png)
まばたきの動きを録画1
同じ要領で、①に「230」、③に「0」を入力してください。
![4d - STYLY まばたきの動きを録画2](https://styly.cc/wp-content/uploads/2018/09/4d.png)
まばたきの動きを録画2
同じ要領で、①に「235」、③に「80」を入力してください。
![4e - STYLY まばたきの動きを録画3](https://styly.cc/wp-content/uploads/2018/09/4e.png)
まばたきの動きを録画3
最後に①に「240」、③に「0」を入力し、④「録画アイコン」をクリックして録画を停止してください。
![4f - STYLY まばたきの動きを録画4](https://styly.cc/wp-content/uploads/2018/09/4f.png)
まばたきの動きを録画4
VRoid Studio製のVRMモデルは、「UMARenderer」の「Face.M_F00_000_Fcl_EYE_Close」でまばたきのBlendShapeを設定できます。
![4g - STYLY VRoid Studio製のVRMモデルにまばたきさせる](https://styly.cc/wp-content/uploads/2018/09/4g.png)
VRoid Studio製のVRMモデルにまばたきさせる
まばたきをモデルに反映
作成したまばたきをモデルに反映します。 まず、①「motion」をダブルクリックしてAnimatorウィンドウを表示し、②「+」アイコンをクリックして、③「mabataki」レイヤーを新規作成します。 そこに先ほど作成した④「mabataki」をドラッグ&ドロップしてください。
![4h - STYLY まばたきのAnimationをAnimator Controllerに配置](https://styly.cc/wp-content/uploads/2018/09/4h.png)
まばたきのAnimationをAnimator Controllerに配置
①「歯車アイコン」をクリックして、②「Weight」の数値を「1」に設定してください。
![4i - STYLY Weightを1に設定](https://styly.cc/wp-content/uploads/2018/09/4i.png)
Weightを1に設定
最後にまばたきの動作確認を行います。 Sceneタブを選択してプレビューを表示し、画面上側の「再生アイコン」をクリックしてまばたきが再生されれば完了です。 まばたき以外のBlendShapeを変更すれば別の表情を付けることもできるので、お好みの表情を付けてみてください。
![3i - STYLY まばたきの確認](https://styly.cc/wp-content/uploads/2018/09/3i.png)
まばたきの確認
STYLYにアップロード
作成したモーション付きモデルをSTYLYにアップロードします。
STYLY Plugin for Unityを入手
まず、STYLY公式サイト(https://styly.cc/)を開いて①「DOWNLOAD」を選択し、ページを以下の画像の所までスクロールして、緑色の②「DOWNLOAD」をクリックしてください。
![5a - STYLY UNITY PLUGIN FOR STYLYをダウンロード](https://styly.cc/wp-content/uploads/2018/09/5a.png)
STYLY Plugin for Unityをダウンロード
ダウンロードしたunitypackageファイルをダブルクリックして、Unityへインポートしてください。
![5b - STYLY UNITY PLUGIN FOR STYLYをUnityへインポート](https://styly.cc/wp-content/uploads/2018/09/5b-1.png)
STYLY Plugin for UnityをUnityへインポート
Unityに戻り、画面上側の①「STYLY>Asset Uploader Settings」をクリックして、②「Get STYLY API Key」をクリックするとブラウザでAPI KeyとEmailが表示されるので、③の入力欄にコピー&ペーストしてください。
![5c - STYLY API KeyとEmailを設定](https://styly.cc/wp-content/uploads/2018/09/5c.png)
API KeyとEmailを設定
モデルをSTYLYにアップロード
モデルをSTYLYにアップロードするには、モデルをPrefab化する必要があります。 HierarchyエリアのモデルをProjectエリアにドラッグ&ドロップすると、Projectエリアに同名のPrefabが生成されます。
![6a - STYLY HierarchyからProjectへドラッグ&ドロップしてPrefab化](https://styly.cc/wp-content/uploads/2018/09/6a.png)
HierarchyからProjectへドラッグ&ドロップしてPrefab化
生成されたPrefabを右クリックして、「STYLY>Upload Prefab or scene to STYLY」を選択すると、アップロードが開始されます。
![6b - STYLY PrefabをSTYLYへアップロード](https://styly.cc/wp-content/uploads/2018/09/6b.png)
PrefabをSTYLYにアップロード
しばらくするとアップロードが完了して以下の画面が表示されます。
![6c - STYLY アップロード完了](https://styly.cc/wp-content/uploads/2018/09/6c-1.png)
アップロード完了
モデルをSTYLYに配置
アップロードしたモデルをSTYLYに配置します。 STYLY Studioを開いて、画面左上の「写真アイコン」(Assets)をクリックします。
![6d - STYLY Assetsを選択](https://styly.cc/wp-content/uploads/2018/09/6d.png)
Assetsを選択
次に「3D Model」を選択します。
![6e - STYLY 3D Modelを選択](https://styly.cc/wp-content/uploads/2018/09/6e.png)
3D Modelを選択
「My Models」タブにアップロードしたモデルが追加されているのでクリックします。
![6f - STYLY アップロードしたモデルを選択](https://styly.cc/wp-content/uploads/2018/09/6f.png)
アップロードしたモデルを選択
モデルが配置されるので位置などを調整して完成です。 お疲れさまでした。
![thumbnail_large - STYLY 完成イメージ](https://styly.cc/wp-content/uploads/2018/09/thumbnail_large.gif)
完成イメージ
今回はVTuberの3Dモデルに動きを付けて、STYLYにアップロードする方法を紹介させていただきました。 この方法を使えば、人に限らず動物やロボットなど様々なモデルをアップロードできます。 ぜひ、色々なモデルを飾った楽しいVR空間を作ってみてくださいね。