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

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

###**■■ここで出来るようになること**
・HoloLens上で動くホログラフィックアプリケーションを作成します。ゴールとしてはHoloLensを通して見た空間の中にミクさんを出現させます
**［実行イメージ］**
<img width="700" alt="［実現イメージ］" src="https://qiita-image-store.s3.amazonaws.com/0/224568/25c91de7-d28f-45dc-3e23-2722f01eda60.jpeg">

▲初投稿：2018-02-16


##**■開発環境**
・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)

**※上記の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フォルダの作成］**
<img src="https://qiita-image-store.s3.amazonaws.com/0/224568/0c66cd79-cb8e-af59-8fc7-782835be09e0.png">

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

**［MMD Model データを”Modelｓ”フォルダにドラッグ＆ドロップ］**
<img src="https://qiita-image-store.s3.amazonaws.com/0/224568/bbe25c88-f946-d428-8322-899fdcda2488.png">

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

**［Modelフォルダ］**
<img src="https://qiita-image-store.s3.amazonaws.com/0/224568/4320fdf1-c3fc-9233-87ec-df2ee98cfba4.png">

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

**［利用規約の確認］**
<img src="https://qiita-image-store.s3.amazonaws.com/0/224568/44142440-5e7f-27c2-26a7-906b72b4bf53.png">

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

**［ｆｂｘ変換実行］**
<img src="https://qiita-image-store.s3.amazonaws.com/0/224568/4be38dca-9548-946e-4805-8397c36c2022.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/4cd5597a-9235-5575-dc8f-83c1584dea68.png">

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

**［MMDモデル召喚＆MMD4Mecanim設定］**
<img src="https://qiita-image-store.s3.amazonaws.com/0/224568/89062663-21bd-8cb3-41fb-796a878c48c8.png">

・"フォルダ名.fbx" ファイルをHierarchyウィンドウ内にドラッグ＆ドロップします。Hierarchyウィンドウ内の"フォルダ名.fbx"をクリックするとInspectorウィンドウ内にMMD　4　Mecanim　Modelが出て来ると思います
”Model”ボタンを押して、"Physics Engine"のドロップダウンリストの中から”Bullet Physics”を選択します

**［MMD4Mecanim設定］**
<img src="https://qiita-image-store.s3.amazonaws.com/0/224568/4f1d0563-7159-9699-872e-03c5024580dc.png">

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

**［立ち位置設定］**
<img src="https://qiita-image-store.s3.amazonaws.com/0/224568/5f619632-431d-0810-0258-d5a1e696e4c0.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側で作成したアプリケーションが自動的に起動します

**［ミクさん召喚］**
<img src="https://qiita-image-store.s3.amazonaws.com/0/224568/ed175f49-e0ae-7891-f0e8-1395f7edfe6f.png">

・等身大のミクさんがHoloLensをかけた目の前に召喚されたと思います。色んな方向から眺められますよね...

##**■あとがき**
・でも、違う！！動いているミクさんみたい！！ ですよね。と言うことで踊ってもらいましょう。次回”舞踏編”に続く... 多分

・今回下記のものをお借りいたしました
　・[Model]【Tda式初音ミク・アペンドVer1.10 】by Tda　ダウンロードは[こちら](https://bowlroll.net/file/4576)
　作成者の方々に感謝致します。ありがとうございました。

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

##**■参考**
 ・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)

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