■HoloLens MMD4Mecanimを使ってMR空間にミクさんを召喚してみた件（舞踏編）

##**■はじめに**
・複合現実（Mixed Reality）を実現するデバイスの Microsoft HoloLens これを入手したらまずやってみたくなるのが、キャラクターの召喚じゃないですか？Unityは Unity-Chan が利用な可能なキャラクターとして用意されてますが、やっぱりここはミクさんを召喚したい！と言う事でやってみましょう！と言った感じで忘れないうちに**備忘録**として残します

###**■■ここで出来るようになること**
・[（初級編）](https://qiita.com/KSxRDevelop/private/de050a64de66229a7c7b)ではミクさんを空間の中に召喚させる事はできたので、今度は踊っていただきましょう。それをHoloLensを通して見て堪能しましょう。
**［実行イメージ］**
<img width="700" alt="［実現イメージ］" src="https://qiita-image-store.s3.amazonaws.com/0/224568/b5dbe7ee-bfe4-dbb3-7f16-685e58a407cd.jpeg">

▲初投稿：2018-02-23


##**■開発環境**
・HoloLens Development Edition 詳細はは[こちら](https://www.microsoft.com/ja-jp/hololens)
・開発用パソコン（インストール要アプリケーション）
　・Windows 10 Pro Fall Creators Update
　・Visual Studio 2017 15.4.4 
　・Unity 2017.1.2f1 ダウンロードは[こちら](https://unity3d.com/jp/get-unity/download/archive)
　・HoloToolkit-Unity-v1.2017.1.2.unitypackage ダウンロードは[こちら](https://github.com/Microsoft/MixedRealityToolkit-Unity/releases)
　・MMD4Mecanim_Beta_20170910.zip ダウンロードは[こちら](http://stereoarts.jp/)

・Tda式初音ミク・アペンドVer1.10 ダウンロードは[こちら](https://bowlroll.net/file/4576)
・極楽浄土　モーションデータ　ダウンロードは[こちら](http://www.nicovideo.jp/watch/sm29180863)
・極楽浄土　表情データ　ダウンロードは[こちら](http://www.nicovideo.jp/watch/sm29257304)
※モーションデータ等はご自分の使いたいデータをご用意ください

**※今回は音源素材（極楽浄土）については、特にここでは記載しません。ご自分で調達をお願いします**

**※上記のVersionは現時点（2018/02/13）で動作確認が取れた組み合わせになります。最新の環境の組み合わせについては各自でご確認下さい**

**※環境の構築方法につては下記のMicrosoftのサイト、エバンジェリストの方が公開しているサイトを参考にして作って下さい**

・Windows Developer Center [こちら](https://developer.microsoft.com/ja-jp/windows/mixed-reality/install_the_tools)
・Mixed Reality の開発環境 [こちら](https://blogs.msdn.microsoft.com/shintak/2017/11/16/mrdevtools/)
・Windows Mixed Reality 対応アプリ開発環境構築 [こちら](https://github.com/chomado/WindowsMR_GettingStarted/blob/master/documents/02_InstallationChecklist.md)

##**■やってみよう！**
**※”ミクさん召喚”までは初級編と一緒です**
###**■■Unityに新規プロジェクトを作成**
・Unityを最初に起動するときは、アカウント登録等の手続を実施します。その後初期画面になります

**［初期画面］**
<img src="https://qiita-image-store.s3.amazonaws.com/0/224568/ca898025-4b1f-f89f-c47d-d1216b46892e.jpeg">

・まず画面右上にある New をクリックします。
　・Project Nameに作成するプロジェクトの名前を入力
　・Locationにプロジェクトを保存するパスを指定
　・3D Object を使うので、3Dを選択
　・”Create Project”ボタンを押してプロジェクトを作成します

**［Unity画面］**
<img src="https://qiita-image-store.s3.amazonaws.com/0/224568/4e673575-5b30-c03e-1fe7-93ef1b958952.jpeg">

・Unityが起動すると上記の画面が表示されます

**※ここではUnityの詳しい使い方は説明しませんので、別途UnityのDocumenntサイトで確認して下さい**

■■Mixed Reality Toolkit-UnityのImport 
・HoloLens開発用のライブラリパッケージ（HoloToolkit-Unity-v1.2017.1.2.unitypackage）をImportします。このパッケージはHoloLensを開発する際に便利なツールが多数含まれているので、利用することをお勧めします

**［Package読込］**
<img src="https://qiita-image-store.s3.amazonaws.com/0/224568/506958c9-11f1-a020-9481-25f91baf0ae4.jpeg">

・メニューバーの ”Assets” から ”Import　Package”　→ ”Custom Package” をクリックして事前にダウンロードしておいた”Mixed Reality Toolkit”（HoloToolkit-Unity-v1.2017.1.2.unitypackage）を指定します

**［Package Import］**
<img src="https://qiita-image-store.s3.amazonaws.com/0/224568/512433ed-68ed-ff0f-3d22-ad8b59dda66f.jpeg">

・Import項目の選択画面が表示されますので、全てチェックされていることを確認して”Import”ボタンを押して開始します
・Importに成功したら、メニューバーに”Mixed Reality Toolkit”が表示されます

■■HoloLensアプリ開発環境設定 
・HoloLensで動作するアプリケーションを開発する際には、複数のパラメータを設定する必要がありますが、”Mixed Reality Toolkit” をImportすることにより、その設定をボタンを押すだけで出来るようになります
　（実際に設定する内容についてはMicrosoftのMixed Reality Academy等で確認してください）

**［Mixed Reality Toolkit 環境設定］**
<img src="https://qiita-image-store.s3.amazonaws.com/0/224568/2fa992d9-a658-5856-ed41-7d053c3bddfb.jpeg">

・メニューバーの ”Mixed Reality Toolkit” から ”Configure”　をクリックしてサブメニューの下記３つを行います
　・Apply Mixed Reality Project Settings
　・Apply Mixed Reality Scene Settings
　・Apply UWP Capability Settings

**［Mixed Reality Project Settings］**
<img src="https://qiita-image-store.s3.amazonaws.com/0/224568/063b9342-bb6e-3247-5747-a5184ac9f27a.png">

・メニューバーの ”Mixed Reality Toolkit” から ”Configure”　→ "Apply Mixed Reality Project Settings"をクリックします
・環境設定用のチェック画面が上記の様になっていることを確認して "Apply" ボタンを押しま
**［Mixed Reality Scene Settings］**
<img src="https://qiita-image-store.s3.amazonaws.com/0/224568/7c2bd375-6902-2178-dc48-1144e749a4ae.png">

・メニューバーの ”Mixed Reality Toolkit” から ”Configure”　→ "Apply Mixed Reality Scene Settings"をクリックします
・環境設定用のチェック画面が上記の様になっていることを確認して "Apply" ボタンを押します

**［UWP Capability Settings］**
<img src="https://qiita-image-store.s3.amazonaws.com/0/224568/d12bc81e-0f18-1b01-eedc-9e9972d3e61c.png">

・メニューバーの ”Mixed Reality Toolkit” から ”Configure”　→ "Apply UWP Capability Settings"をクリックします
・環境設定用のチェック画面が上記の様になっていることを確認して "Apply" ボタンを押します

■■MMD4MecanimのImport 
・事前にダウンロードしておいたZIPファイル（MMD4Mecanim_Beta_20170910.zip）を解凍してUnity上で動作可能にするMMD用のライブラリパッケージ（MMD4Mecanim.unitypackage）をImportします。このパッケージはPMX(PMD) + VMD を FBX に変換するツール ＆ Unity (Mecanim) で一通り動作させるためのスクリプトです

**［Package読込］**
<img src="https://qiita-image-store.s3.amazonaws.com/0/224568/506958c9-11f1-a020-9481-25f91baf0ae4.jpeg">

・メニューバーの ”Assets” から ”Import　Package”　→ ”Custom Package” をクリックして事前にダウンロードしておいた”MMD4Mecanim (Beta)”（MMD4Mecanim.unitypackage）を指定します

**［Package Import］**
<img src="https://qiita-image-store.s3.amazonaws.com/0/224568/9f4d1188-756d-ce16-c4f2-db34b60cf34f.png">

・Import項目の選択画面が表示されますので、全てチェックされていることを確認して”Import”ボタンを押して開始します

**［警告メッセージ］**
<img src="https://qiita-image-store.s3.amazonaws.com/0/224568/f4e20a10-97c5-23ff-fc66-7badeb695534.png">

・途中上記メッセージが表示される場合があるかもしれませんが、”I Made aBackup. Go Ahead!”ボタンを押して継続して下さい

■■HoloLensCameraの設定
・ミクさんに近付けるようにカメラの設定を変更します

**［HoloLensCameraの 設定］**
<img src="https://qiita-image-store.s3.amazonaws.com/0/224568/e73a231b-b52d-5588-a671-8097797b1ec0.png">

・Hierarchyウィンドウ内にある”HoloLensCamera”を選択します

**［Near Clipの 設定］**
<img src="https://qiita-image-store.s3.amazonaws.com/0/224568/0793654d-5794-f5ad-9f42-10945405ecce.png">

・Inspectorウィンドウ内のCameraのClipping Planes Near を 0.1 に設定します（0.1は10cm）

###**■■ミクさん召喚（MMD Model読込）**
・ダウンロードしたミクさんの MMD Model データのZIPファイル（Tda式初音ミク・アペンドVer1.10.zip）を解凍しておきます。
・ダウンロードしたモーションデータ、表情データを解凍しておきます。

**［Models、Motionsフォルダの作成］**
<img src="https://qiita-image-store.s3.amazonaws.com/0/224568/0c66cd79-cb8e-af59-8fc7-782835be09e0.png">

・Projectウィンドウ内のAssets配下に”Models”フォルダを作成します。”Assets”を選択してマウスの右クリックから”Create”　→ ”Folder” をクリックして新しいフォルダ”Models”を作成します
・Projectウィンドウ内のAssets配下に”Models”フォルダを作成します。”Assets”を選択してマウスの右クリックから”Create”　→ ”Folder” をクリックして新しいフォルダ”Motions”を作成します

**［Models、Motionsフォルダ］**
<img src="https://qiita-image-store.s3.amazonaws.com/0/224568/8656e0af-1496-3982-b385-a35fb4f5d8c7.png">

**［Model データを”Modelｓ”フォルダにドラッグ＆ドロップ］**
<img src="https://qiita-image-store.s3.amazonaws.com/0/224568/c6bd50c1-f6cf-d86f-0b5b-edf3ba0c580b.png">

・解凍したミクさんの Model データのフォルダ（上記のキャプチャ画面ではフォルダ名を”tdamikuapend”にリネームしています）を上記で作った”Models”フォルダの中にドラッグ＆ドロップします。

**［Motion データを”Motions”フォルダにドラッグ＆ドロップ］**
<img src="https://qiita-image-store.s3.amazonaws.com/0/224568/c0669796-c61a-0619-b22d-4cace9a26fb2.png">

・解凍した Motion データのフォルダ（上記のキャプチャ画面ではフォルダ名を”gokurtakujyoudo”にリネームしています）を上記で作った”Motions”フォルダの中にドラッグ＆ドロップします。
・ここでは、解凍したMotionデータ、表情データ、音源素材もこのフォルダ内に保存しています

**［Modelフォルダ］**
<img src="https://qiita-image-store.s3.amazonaws.com/0/224568/99e8f0b7-9386-1aea-cf00-eeeffd79fd61.png">

・先程ドラッグ＆ドロップしたフォルダの中に "フォルダ名.MMD4Mecanim.asset" と言う名前のファイルが出来ていると思います。そのファイルをクリックするとInspectorウィンドウ内にMMDモデルの利用規約が表示されますので、よく読んで規約違反が無いことを確認して下さい。最後まで行くと利用同意のチェックボックスが表れます

**［利用規約の確認］**
<img src="https://qiita-image-store.s3.amazonaws.com/0/224568/0a8e800b-685e-fa1b-760f-1df02d342a65.png">

・利用同意をするのであれば全てのチェックボックスにチェックを入れます。そして最後に”同意する”ボタンを押します

**［Motionデータの関連付け］**
<img src="https://qiita-image-store.s3.amazonaws.com/0/224568/7f55acb1-2fff-1986-3e20-5bae876106b4.png">

・VMD欄にMotionデータ、表情データのファイルを指定します

**［Motionデータの登録］**
<img src="https://qiita-image-store.s3.amazonaws.com/0/224568/886a6835-1f86-0342-1ed2-0bf7f2b3fc80.png">

・先ほどコピーして作ったMotions配下のMotionファイルをドラッグ＆ドロップでVMD欄に登録します

**［表情データの登録］**
<img src="https://qiita-image-store.s3.amazonaws.com/0/224568/2f2ef8b3-3a23-f6f8-ce4e-16ae06acbfce.png">

・先ほどコピーして作ったMotions配下の表情ファイルをドラッグ＆ドロップでVMD欄に登録します

**［ｆｂｘ変換実行］**
<img src="https://qiita-image-store.s3.amazonaws.com/0/224568/b2d0e16f-d28a-599b-a610-933f758d8c40.png">

・ｆｂｘ変換を実行するには”process”ボタンを押します。押すと下記の実行状況を表示するターミナルウィンドウが表示されます

**［変換実行ウィンドウ］**
<img src="https://qiita-image-store.s3.amazonaws.com/0/224568/6c2c7db5-a650-0d2e-9448-1ab9b3abb2a8.png">

・変換実行中はターミナルウィンドウが表示されます。変換が終了すると自動的にターミナルウィンドウも閉じるので暫く待ちます

**［MMD4Mecanim設定］**
<img src="https://qiita-image-store.s3.amazonaws.com/0/224568/6a13ea00-eb93-9478-563d-809553ba1234.png">

・変換が完了するとドラッグ＆ドロップしたフォルダの中に "フォルダ名.fbx" と言う名前の3Dモデルのファイルが出来ていると思います。そのファイルをクリックしてInspectorウィンドウ内の”Rig”ボタンを押して、"AnimationType"のドロップダウンリストの中から”Humanoid”を選択します。最後に”Apply”ボタンを押します

**［Animator Controller 作成］**
<img src="https://qiita-image-store.s3.amazonaws.com/0/224568/008f40e3-3fc0-a2df-46c1-cc87d7b37711.png">

・Projectウィンドウ内のミクさんのModelデータがあるフォルダを選択してマウスの右クリックから”Create”　→ ”Animator Controller” をクリックして”Animator Controller”を作成します

**［State 作成］**
<img src="https://qiita-image-store.s3.amazonaws.com/0/224568/b08d45aa-96a7-fef9-4b77-929a367d9cae.png">

・作った”Animator Controller”をクリックして”Animator”ウィンドウを表示させます。そのウィンドウ内で右クリックから”Create　State”　→ ”Empty” とクリックして”New State”を作成します

**［Motionデータ登録］**
<img src="https://qiita-image-store.s3.amazonaws.com/0/224568/d38e350d-74f3-f7f4-52cc-0fc39b08006f.png">

・作った”New State”をクリックして”Inspector”ウィンドウを表示させます。そのウィンドウ内のMotion項目のギアアイコンをクリックし、”Select Motion”ウィンドウから変換したMotionデータをダブルクリックして選択します

**［MMDモデル召喚!］**
<img src="https://qiita-image-store.s3.amazonaws.com/0/224568/8540e91b-00f9-9328-0431-d9f69df6395f.png">

・"フォルダ名.fbx" ファイルをHierarchyウィンドウ内にドラッグ＆ドロップします。”Hierarchy”ウィンドウ内の"フォルダ名.fbx"をクリックすると”Inspector”ウィンドウ内にMMD　4　Mecanim　Modelが出て来ます

**［Animator Controller登録!］**
<img src="https://qiita-image-store.s3.amazonaws.com/0/224568/637ad8ae-9382-f524-42a8-55f2b0e386b2.png">

・”Animator Controller”をミクさんのModel（今回の場合、tdamikuapend）にドラッグ＆ドロップします。”Inspector”ウィンドウ内の”Animator”　→ ”Controller” が ”Animator Controller” に変わっている事を確認します。
・”Inspector”ウィンドウ内の”MMD　4　Mecanim　Modelで”Model”ボタンを押して、"Physics Engine"のドロップダウンリストの中から”Bullet Physics”を選択します

**［MMD4Mecanim設定］**
<img src="https://qiita-image-store.s3.amazonaws.com/0/224568/ddcdcba6-9ce9-81bb-db55-b3c821aa038a.png">

・"Hierarchyウィンドウ内の"フォルダ名.fbx"をクリックしてInspectorウィンドウ内にMMD　4　Mecanim　Modelにある”Physics”ボタンを押して、"Colliderｓ"→"General Colliderｓ" の "Process" ボタンを押します

**［MMD4Mecanim設定］**
<img src="https://qiita-image-store.s3.amazonaws.com/0/224568/968822bf-5bf3-55a5-8846-4b97af9927d0.png">

・"Hierarchyウィンドウ内の"フォルダ名.fbx"をクリックして”Inspector”ウィンドウ内にMMD　4　Mecanim　Modelにある”Model”ボタンを押して、"Add Component" から　”ｍｍｄ”　と入力して　"MMD4 Mecanim Anim Mopher Helper(Script)”を選択します

**［MMD4Mecanim設定］**
<img src="https://qiita-image-store.s3.amazonaws.com/0/224568/025407dc-b9af-23a8-81f7-e83bd5987e16.png">

・”Inspector”ウィンドウ内の"MMD4 Mecanim Anim Mopher Helper(Script)”から”Add Animation”のギアアイコンを押します

**［MMD4Mecanim設定］**
<img src="https://qiita-image-store.s3.amazonaws.com/0/224568/65e7c172-2f04-f65e-51fc-71ac1d718308.png">

・”Select TexAsset”ウィンドウから表情データファイルを選択します。選択したら”Animations”に今選択した表情データファイルの名前が入っている事を確認します

**［MMD4Mecanim設定］**
<img src="https://qiita-image-store.s3.amazonaws.com/0/224568/23aba7bb-55f2-e7ec-bf79-d94a264dd288.png">

・”Animations”の項目にある”Audio Clip”のギアアイコンをクリックします。”Select AudioClip”ウィンドウから音源ファイルを選択して、”Audio Clip”に選択したファイルの名前が入っている事を確認します

**［MMD4Mecanim設定］**
<img src="https://qiita-image-store.s3.amazonaws.com/0/224568/224cca53-cb0b-4933-4400-b21dce3112cd.png">

・”Anim　Name”にさっき登録した”Animations”の”Anim　Name”と同じ名前を入力します

**［立ち位置設定］**
<img src="https://qiita-image-store.s3.amazonaws.com/0/224568/3dc267c0-2f5a-8667-2ebb-80e7e25a0689.png">

・"Hierarchyウィンドウ内の"フォルダ名.fbx"をクリックしてInspectorウィンドウ内に
Inspectorウィンドウ内のTransformのPositionをx:0 y:-1.5 z:2 Rotationを x:0 y:180 z:0 に設定します

###**■■Scenesの保存**

**［Scenes Save］**
<img src="https://qiita-image-store.s3.amazonaws.com/0/224568/88dacca7-9625-3f6c-7337-b2ec2384104d.jpeg">

・メニューバーの ”File” から ”Save Scenes”　をクリックします

**［Scenes Save］**
<img src="https://qiita-image-store.s3.amazonaws.com/0/224568/67f96500-7def-2b7b-d189-185639b02ad6.jpeg">

・まだ、Scenesフォルダーを作っていない場合は、”新しいフォルダー”をクリックしてScenesフォルダーを作成します
・Scenesフォルダーを指定します。Sceneファイル名を入力して”保存”ボタンを押します

###**■■UnityでBuildの実行**

**［Build Setting］**
<img src="https://qiita-image-store.s3.amazonaws.com/0/224568/096c87e6-3185-6c77-a436-1f2418f912f4.jpeg">

・メニューバーの ”File” から ”Build Settings”　をクリックします

**［Build Setting］**
<img src="https://qiita-image-store.s3.amazonaws.com/0/224568/13f08189-22b2-1d7c-0ddf-34db9c1af7ba.jpeg">

・最初の場合はBuild Setting画面の”Add Open Scenes”ボタンを押してBuildするSceneファイルを指定します。
・”Unity C# Projects”にチェックします
・”Build”ボタンを押すとBuildが開始されます

**［App 指定］**
<img src="https://qiita-image-store.s3.amazonaws.com/0/224568/4262a24d-0e17-fe34-b240-5db3ea8e5c0e.jpeg">

・初めてのBuildの場合はAppフォルダーを”新しいフォルダー”をクリックして作成します
・Appフォルダーを指定します
・”フォルダーの選択”ボタンを押すとBuildが開始されます

###**■■Visual StudioでBuildの実行**
・今回はVisual StudioからHoloLensに接続してアプリケーションをデプロイします。事前にHoloLensを起動してネットワークに接続した状態にしてください

**［Visual Studio 起動］**
<img src="https://qiita-image-store.s3.amazonaws.com/0/224568/46554694-51a5-f7da-062a-0c684a607d63.jpeg">

・Buildが成功すると、エクスプローラーが起動します
・Appフォルダーの配下に ”Project名.sln” というファイルが作成されているのでダブルクリックします
・Visual Studio が起動して ”Project名.sln” を読み込みます

**［Build 設定］**
<img src="https://qiita-image-store.s3.amazonaws.com/0/224568/f4ecea73-7cb7-ad42-27ba-47ea5ce5d007.jpeg">

・Visual Studioの設定を次のようにします
　・ソリューション構成：Release
　・ソリューションプラットフォーム：x86
　・Device：リモートコンピューター

**［リモート接続 設定］**
<img src="https://qiita-image-store.s3.amazonaws.com/0/224568/76fed5df-a7d7-f213-5331-a987d58acb76.jpeg">

・アドレスに リモートコンピューター（HoloLens）の接続先のIPアドレスを入力します
・”選択”ボタンを押します

**［デバッグ実行］**
<img src="https://qiita-image-store.s3.amazonaws.com/0/224568/c61f84cb-db3a-3dc4-fcdc-4e3c88b3c465.jpeg">

・メニューバーの ”デバッグ” から ”デバッグなしで開始”　をクリックします。これでBuildが開始され、成功したら、リモートコンピューター に指定したHoloLensに接続してデプロイします

・デプロイも成功するとHoloLens側で作成したアプリケーションが自動的に起動します

**［HoloLens：ホログラフィックアプリケーション実行イメージ動画（クリックすると動画が再生します）］**
[![HoloLensアプリケーション実行動画](https://qiita-image-store.s3.amazonaws.com/0/224568/9e225b81-90f5-0746-c853-cc7d7647b969.png)]( https://youtu.be/blzfZzrBAWs)

・等身大のミクさんが華麗に艶やかにHoloLensをかけた目の前で躍っていると思います。じっくり堪能しましょう...（この動画は都合により、音源は抜いています）

##**■あとがき**
・これはこれで良いんだけど。でも、お話ししたい！！ミクさんとおしゃべりしたい！！ ですよね。と言うことでしてもらいましょう。次回”会話編”に続く... 多分

・今回下記のものをお借りいたしました
　・[Model]【Tda式初音ミク・アペンドVer1.10 】by Tdaさん　ダウンロードは[こちら](https://bowlroll.net/file/4576)
　・[ダンスMotion]【極楽浄土】by urieさん　ダウンロードは[こちら](http://www.nicovideo.jp/watch/sm29180863)
　・[表情Motion]【極楽浄土】by ゆきねこさん　ダウンロードは[こちら](http://www.nicovideo.jp/watch/sm29257304)
　・[楽曲]【極楽浄土】/ GARNiDELiA
　作成者の方々に感謝致します。ありがとうございました。

・この記事はピアプロ・キャラクター・ライセンスに基づいてクリプトン・フューチャー・メディア株式会社のキャラクター「初音ミク」を使用したものです。

##**■参考**
 ・Microsoft Mixed Reality Academy [こちら](https://developer.microsoft.com/ja-jp/windows/mixed-reality/academy)
・Unity 2017.1 Document [こちら](https://docs.unity3d.com/ja/2017.1/Manual/AdvancedDevelopment.html)
・MMD4Mecanim コンバートオプション活用のススメ [こちら](https://qiita.com/mkt_/items/cacc93a8ec9d295522ad
)

・HoloLens MMD4Mecanimを使ってMR空間にミクさんを召喚してみた件（初級編） [こちら](https://qiita.com/KSxRDevelop/private/de050a64de66229a7c7b)