■HoloLens 全身３Dスキャンデータ→Mixamo（リギング、モーション）→ HoloLens で動かしてみた件

##**■はじめに**
・"Psychic VR Lab"さんの所で自分の全身3Dスキャンデータを撮って貰ったので、そのデータをMixamoでリギング、モーションを付加してHoloLensで見るアプリケーションにするまでの手順を忘れないうちに**備忘録**として残します

###**■■ここで出来るようになること**
・"Blender"を使ったfbxフォーマット変換方法
・"Mixamo"を使ったリギングとモーション割当方法
・"Unity"を使ってHoloLensで動くUWPアプリケーションを作る方法

**［実行イメージ（クリックすると動画が再生します）］**
[![STYLY実行動画](https://qiita-image-store.s3.amazonaws.com/0/224568/1f65a1b9-4386-77e7-3050-e80f6d973128.png)](https://youtu.be/aPHWGcTsJ6c)

▲初投稿：2018-04-30


##**■開発環境**
・開発用パソコン（インストール要アプリケーション）
　・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)
　・Blender 2.7.9b・・・3DCGアニメーションを作成するための統合環境アプリケーション ダウンロードは[こちら](https://www.blender.org/download/)

・Mixamo・・・3Dキャラクターやアニメーション制作やカスタマイズを行うことができるWEBサービス 詳細は[こちら](https://www.mixamo.com)
**※上記のサイトには事前にアカウント登録を行っておく必要あり**

##**■やってみよう！**
###**■■全身３Dスキャンデータを入手**
・自分の場合は"Psychic VR Lab"さんの所で全身３Dスキャンデータを撮って貰いました。ファイルには
　　・mesh.mtl
　　・mesh.obj
　　・mesh_u1_v1.jpg
　が入っており、このままだと、mesh.objのサイズが大きいので、"Mixamo" にアップロードすると
　エラーになります。と言う事で、サイズを小さくするため、"Blender" を使ってobjからfbxファイル
　に変換します

###**■■"Blender"を使ってobjからfbxファイルに変換**
**［Blender：初期画面］**
<img src="https://qiita-image-store.s3.amazonaws.com/0/224568/e9cada9f-3e67-31d0-5595-70e6cc886ad0.png">

・”Blender” を起動。初期画面にある”Cube”を削除する
・画面右側に出ている”アウトライナー”に出ている”Cube”の所で右クリックします
・表示されるメニュー内から”削除”を選択して押します

**［Blender：objファイルをインポート］**
<img src="https://qiita-image-store.s3.amazonaws.com/0/224568/97740f10-95bf-1e58-1ebd-bdc44856d8e5.png">

・メニューバーの ”ファイル” から ”インポート”　→ ”Wavefront(.obj)” をクリックします

**［Blender：objファイル指定］**
<img src="https://qiita-image-store.s3.amazonaws.com/0/224568/576fb060-4e65-9e4f-1433-9403352b9336.png">

・3Dスキャンした .obj ファイル(mesh.obj)を指定します。”OBJをインポート”ボタンを押します

**［Blender：トランスフォームメニュー表示］**
<img src="https://qiita-image-store.s3.amazonaws.com/0/224568/7f75dc6a-cd55-7153-ee71-0bb431b9d731.png">

・画面右側に出ている”アウトライナー”に出ている”default”をクリックします
・画面右側に出ているメニューの”＋”を押すと”トランスフォーム”メニューが表示されます

**［Blender：オブジェクト位置調整］**
<img src="https://qiita-image-store.s3.amazonaws.com/0/224568/bee785bb-30ce-44aa-d0d9-22073fde8ea2.png">
**［Blender：オブジェクト位置調整］**
<img src="https://qiita-image-store.s3.amazonaws.com/0/224568/42e416bc-bf39-5634-01ca-6eee142a2107.png">

・”トランスフォーム”メニューの位置(x,y,z)、回転(x,y,z)等の数値を変えてオブジェクトが対面になうように位置を動かします

**［Blender：fbxファイルにエクスポート］**
<img src="https://qiita-image-store.s3.amazonaws.com/0/224568/67a74e05-3e85-cb6c-94a0-8d556bfa6d70.png">

・メニューバーの ”ファイル” から ”エクスポート”　→ ”FBX(.fbx)” をクリックします

**［Blender：fbxファイル保存］**
<img src="https://qiita-image-store.s3.amazonaws.com/0/224568/ce52bbe8-7fed-46e0-77dc-e3b0bef0b0c7.png">

・任意の場所に保存するfbxファイル名を入力し、”FBXをエクスポート”ボタンを押します
・しばらく待って該当のファイルが出力されていれば成功です
・出力されたfbxファイルと3Dスキャン時にできたテクスチャのファイル(mesh_u1_v1.jpg)を一緒にした圧縮ファイル(Zipファイル)を作成します。この圧縮ファイルはMixamoにモデルデータをアップロードする際に使用します

###**■■Mixamoを使ってリギング、モーションを付けたfbxファイルを作成する**

**［Mixamo：ログイン画面］**
<img src="https://qiita-image-store.s3.amazonaws.com/0/224568/531e2fcf-f5f9-83d3-9e65-f0f27f8dafe1.png">

・"Mixamo"サイトにアクセスして事前に取得したアカウントでログインします。ログイン画面は[こちら](https://www.mixamo.com/)

**［Mixamo：ログイン後画面］**
<img src="https://qiita-image-store.s3.amazonaws.com/0/224568/a3649d9d-a6cd-3061-dad6-03c4ebed3586.png">

・ログイン後、画面右側にある”UPDATE CHARACTOR”ボタンを押して、モデルデータをアップロードする画面を呼び出します

**［Mixamo：アップロード画面］**
<img src="https://qiita-image-store.s3.amazonaws.com/0/224568/13ff3859-2b5c-3e0c-63dd-f5284dbf9b61.png">

・先ほど圧縮したZipファイルを画面の点線で囲んでいる”Select charactor file...”と書かれている四角の中にDrag&Dropします

**［Mixamo：アップロード中画面］**
<img src="https://qiita-image-store.s3.amazonaws.com/0/224568/e9a7e642-930e-7fad-eb01-ecb8dc4f9375.png">

・アップロードが始まるとインジケータ画面が表示されるので、しばらく待ちます。

**［Mixamo：アップロード完了画面］**
<img src="https://qiita-image-store.s3.amazonaws.com/0/224568/388f6646-90c9-0ca2-cf7a-86cd99ee466c.png">

・アップロードが完了するとモデルが表示された画面になるので画面左下にある矢印を押してモデルが正面に向くよう動かします

**［Mixamo：アップロード完了画面］**
<img src="https://qiita-image-store.s3.amazonaws.com/0/224568/2f2aa8a2-728e-226f-9210-4512d3910f18.png">

・モデルが正面を向いたら、画面右下にある”NEXT”ボタンを押します。

**［Mixamo：リグ入力画面］**
<img src="https://qiita-image-store.s3.amazonaws.com/0/224568/5cc0cd5f-4eb1-aeb9-123e-7fa5db2aca2e.png">

・モデルにリグを入れていきます。画面右側にある女性のサンプルのように画面左側の円をモデルの関節部にDrag&Dropして配置します
・通常左右対称に配置が出来るのですが、画面の様にモデルが中央線に来ていない場合画面下部の”Use Symmetry”のチェックを外すと左右別々に配置できます
・CHIN　　顎　　青円
・WRISTS　手首　緑円（左右）
・ELBOWS　肘　　黄円（左右）
・KNEES 　膝　　橙円（左右）
・GROIN 　股　　桃円
※3Dスキャンをした時は寒い時期だったので、厚着したままスキャンしたのですが、リグを設定する際に関節位置が見えずらかいのでやりにくかったです。スキャンは関節位置が分かりやすい服装でする事をお薦めします

**［Mixamo：リグ入力画面］**
<img src="https://qiita-image-store.s3.amazonaws.com/0/224568/5a3ea3e6-b9b3-5206-c82a-5c59dcb37ca8.png">

・リグの設置が終わったら、画面右下にある”NEXT”ボタンを押します

**［Mixamo：リグ設定中画面］**
<img src="https://qiita-image-store.s3.amazonaws.com/0/224568/1a6e87fd-ff48-cf22-67f4-84de86c39422.png">

・処理中のクルクル回る画面になるのでしばらく待ちます

**［Mixamo：リグ処理終了画面］**
<img src="https://qiita-image-store.s3.amazonaws.com/0/224568/0831cb76-d9c0-8595-add1-0875fd8c44c4.png">

・処理が終了するとデモンストレーション画面になるので画面右下にある”NEXT”ボタンを押します

**［Mixamo：アニメーション選択画面］**
<img src="https://qiita-image-store.s3.amazonaws.com/0/224568/ff95b2ef-b933-7379-4da7-40b4b65ed77e.png">

・モデルにモーションを割り当てます。画面の左側にサンプルアニメーションが表示されているので、割り当てたいものをクリックします
・アニメーションは多種類存在しているので、画面左上の検索枠か画面右の”FIND ANIMATIONS”ボタンを押して検索キーワードを入力して抽出します
・デフォルトで”combat”, ”dance”等の選択ワードを指定することも可能ですので色々探してみましょう 

**［Mixamo：アニメーションデモ画面］**
<img src="https://qiita-image-store.s3.amazonaws.com/0/224568/999cd069-f4bb-e32c-25c1-be71832983b8.png">

・サンプルアニメーションをクリックすると画面右側でモデルが指定したモーションで動き出します。これで良ければ”DOWNLOAD”ボタンを押します

**［Mixamo：ダウンロード設定画面］**
<img src="https://qiita-image-store.s3.amazonaws.com/0/224568/a39af781-52eb-59b3-af68-04bfa540909b.png">

・ダウンロードする際のファイルの設定が出来るのでFormatの項目を"FBX for Unity(.fbx)"に設定変更します。開始するときは画面右下の”DOWNLOAD”ボタンを押します

**［Mixamo：ダウンロード準備画面］**
<img src="https://qiita-image-store.s3.amazonaws.com/0/224568/8be31593-a3ab-2323-f906-57ac10ba1486.png">

・ダウンロードするファイルを作成したいますのでしばらく待ちます。作成出来たらダウンロードが開始されます。ファイル名はアニメーションの名前が自動的に割り振られます
・ここではfbx形式ファイルを作成したという前提で話を続けます

###**■■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" ボタンを押します

■■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）

###**■■Mixamoからダウンロードしたモデルデータを読込**

**［Modelsフォルダの作成］**
<img src="https://qiita-image-store.s3.amazonaws.com/0/224568/56662f14-ec28-e08e-da59-1eeb98c4f63d.png">

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

**［Model データを”Models”フォルダにインポート**
<img src="https://qiita-image-store.s3.amazonaws.com/0/224568/338e5a37-688d-e4fa-64a7-2079f86e7623.png">

・”Models”フォルダを選択してマウスの右クリックから”Import New Asset...” をクリックします
・ファイル選択ウィンドウが表示されるので"Mixamo"からダウンロードしたFBX形式のファイルを指定します。
・”Import”ボタンを押すとFBXファイルの読み込みが始まります。

**［FBXファイルの設定］**
<img src="https://qiita-image-store.s3.amazonaws.com/0/224568/13ff4668-452d-2368-6cca-c5b365e62289.png">

・Importしたモデルデータの"Materials”フォルダにあるMeshデータファイルをクリックします。”Inspector”ウィンドウ内の"shader"の設定を変更します

<img src="https://qiita-image-store.s3.amazonaws.com/0/224568/7d766304-1ff4-25ee-f8f1-9420148c4690.png">

・"shader"のドロップダウンメニューから"Unit" → "Texture" と選択してクリックします

<img src="https://qiita-image-store.s3.amazonaws.com/0/224568/222eaaa8-abc5-23ef-17e5-bccfad02d343.png">

・ImportしたモデルデータのFBXファイルをクリックします。”Inspector”ウィンドウ内の”Rig”ボタンを押して、"AnimationType"のドロップダウンリストの中から”Humanoid”を選択します。最後に”Apply”ボタンを押します

<img src="https://qiita-image-store.s3.amazonaws.com/0/224568/4c07394c-5c55-b5ad-e8a0-6e07ebdde04d.png">

・ImportしたモデルデータのFBXファイルをクリックします。”Inspector”ウィンドウ内の”Animations”ボタンを押して、"Looptime","Loop Pose"にチェックを入れます。最後に”Apply”ボタンを押します

**［Animator Controller 作成］**
<img src="https://qiita-image-store.s3.amazonaws.com/0/224568/d9463160-5a12-4601-b3a9-2d6974747437.png">

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

**［State 作成］**
<img src="https://qiita-image-store.s3.amazonaws.com/0/224568/43851e1b-5076-730d-ac55-d74eb77d8e81.png">

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

**［Motionデータ登録］**
<img src="https://qiita-image-store.s3.amazonaws.com/0/224568/c89f89af-6494-efd7-bd8c-f4bbff6968b5.png">

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

<img src="https://qiita-image-store.s3.amazonaws.com/0/224568/9267c8ec-d92e-b900-43be-9348f723b07f.png">

・FBXファイルをHierarchyウィンドウ内にドラッグ＆ドロップします。”Hierarchy”ウィンドウ内のFBXファイルをクリックします

**［Animator Controller登録!］**
<img src="https://qiita-image-store.s3.amazonaws.com/0/224568/b20a4e63-7334-77ea-3c50-a2f530dbac54.png">

・”Inspector”ウィンドウ内の”Animator”　→ ”Controller” の右側にあるギアアイコンをクリックします。"Select RemoteAnimationController"ウィンドウが表示されますので、先ほど作った ”Animator Controller” をダブルクリックします
・正常に出来ていれば、画面上方の"▶"ボタンを押すとMixamoで選択したアニメーションが実行されます


###**■■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側で作成したアプリケーションが自動的に起動します


##**■あとがき**
・気づかれている方もいるかと思いますが、今回の手順では一切プログラムコードは書いていません。VR系のアプリを技術的なことは判らないのだけど作ってみたいという方にはお勧めです。まずは自分で体感してみて次に進むのは重要なことです。興味を持たれたあなたちょっとやってみませんか？別の異世界が見えてきますよ！


##**■参考**
・Blender　ダウンロードは[こちら](https://www.blender.org/download/)

・Mixamo　サイトは[こちら](https://www.mixamo.com)
・Mixamoチュートリアルは[こちら](https://unt-ad.jp/blog/post.php?a=6)

 ・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)