HoloLensで空中お絵描き～ハンドトラッキング&音声入力～

Transcript

1. HoloLensでハンドトラッキング&音声操作 ARコンテンツ作成ハンズオン
2. 自己紹介 氏名：吉永崇(Takashi Yoshinaga) 所属：九州先端科学技術研究所(ISIT) 専門：AR活用やモーションキャプチャの開発 ほか：Microsoft MVP for Windows Dev. ARコンテンツ作成勉強会主催
3. Twitterと勉強会ページで情報を発信しています #AR_Fukuoka Googleで「AR勉強会」で検索
4. FacebookグループのxR九州もよろしく
5. 本日作成するコンテンツ https://youtu.be/2jRWHrl16ec
6. さっそく開発Start
7. Unity2017 4.5f1 MixedRealityToolkit 2017.4.0.0 使用ツール
8. プロジェクトを作成 (1) MixedRealityToolkit-Unity-xxxx.zipをわかりやすい場所に解凍 (2) Unityを起動後、画面右上のOPENをクリック OPEN
9. プロジェクトを作成 MixedRealityToolkit-Unity-xxxフォルダを開き、[フォルダーの選択]をクリック MixedRealityToolkit-Unity-xxxx フォルダーの選択
10. まずはUnityの操作の基本
11. Unityの操作画面(概要) ゲーム空間の設計画面 空間に置いた オブジェクト の名称一覧 プロジェクトに追加されたAsset(CGやプログラムなど)の一覧
12. ゲーム空間にCGを追加しよう 右クリック 3D Object→Cube
13. 実行してみよう クリックして実行 クリックして終了 カメラから見た空間
14. オブジェクトの位置・向き・サイズを調整 クリックして選択 移動 回転 拡大・縮小
15. Scene(設計画面)の視点を変えよう [←] [→]で左右移動 [↑][↓]でズームイン/アウト [Alt]+ドラッグで回転 +ドラッグで上下左右 他にもいろいろ → http://goo.gl/Lq1ILT
16. 数値を用いたCGのサイズ指定 クリック Scaleを全て0.05に変更 ※位置や大きさの単位はm Inspector(≒詳細情報)
17. CGの詳細情報の編集：色の設定 (1/3) ②右クリック ③Create マテリアル(色や質感の設定)を作成 ④Material ①Assets
18. CGの詳細情報の編集：色の設定 (2/3) 作成したマテリアルの色(Albedo)を設定 (2) Albedoの右側をクリックし、色を選択 (1)作成したマテリアルをクリック
19. CGの詳細情報の編集：色の設定 (3/3) オブジェクト(Cube)のマテリアルを開き、作成したマテリアルを割り当て (2) Materialsの横の▼ (1)Cube (3) Element0に ドラッグ&ドロップ
20. 確認 色が反映されていればOK。あとから色の変更も可能。
21. Sceneの保存 Scene名  [Ctrl]+[s]でダイアログを開き、好きな名前で保存  コンテンツ作成中はこまめに[Ctrl]+[s]すること
22. MixedRealityToolKitを用いた開発
23. HoloLens用のビルド設定 (1/5) ①File ②BuildSettings
24. HoloLens用のビルド設定 (2/5) ①Add Open Scene ②Universal Windows Platform ③Switch Platform
25. HoloLens用のビルド設定 (3/5) ① 各種設定 ・ Target device：HoloLens ・ Build Type：D3D ・ SDK：Latest Installed ②Player Settings
26. HoloLens用のビルド設定 (4/5) ①Product Nameを自分の名前に ②Icon ②Short nameを自分の名前に
27. HoloLens用のビルド設定 (5/5) ①Publishing Settings ②Package nameを自分の名前に
28. HoloLens Cameraの設定 Main Cameraを削除 ※Deleteキー等を使用
29. HoloLens Cameraの設定 Assets → HoloToolkit → Input → Prefabs HoloLensCameraを ドラッグ&ドロップ
30. 動作確認 [↑] [↓]で前進/後退 [←] [→]で左右移動 [Q] [E]で上下 右クリック+マウス移動で回転
31. SpatialMappingを用いた空間認識 Assets → HoloToolkit → SpatialMapping → Prefabs SpatialMappingを ドラッグ&ドロップ 実物体によるCGの隠れ(オクルージョン)を表現するために使用
32. イメージ
33. 手の位置を取得してCGを追従させる このあとやりたい事
34. ジェスチャ入力を管理する機能を追加 HoloToolkit → Input → Prefabs Input Managerをドラッグ&ドロップ
35. 細かい設定：カーソル不使用 ①InputManager ② Search For Cursorをオフ
36. 動作確認 実行 [Shift]を押すと手が表示され、 そのまま左クリックでAirTap
37. 手の検出や位置を受け取るスクリプトを作成 空白を右クリック CreateEmpty スクリプトを貼りつけるための空のオブジェクトを作成
38. AirTapを受け取るスクリプトを作成 (1)GameObject (2)Add Component
39. AirTapを受け取るスクリプトを作成 New Script スクリプト名 例：Receiver Create and Add スクリプトが追加されてる
40. スクリプトファイルをVisualStudioで開く Assets スクリプト(Receiver) をダブルクリック
41. スクリプトの記述 using HoloToolkit.Unity.InputModule; public class Receiver : MonoBehaviour { // Start関数は初期化のために一度だけ実行される void Start () { } // Update関数は毎フレーム実行される void Update () { } } InputModuleの読み込みとISourceStateHandler, IInputHandlerを実装 , ISourceStateHandler, IInputHandler ISourceStateHandlerとIInputHandlerにカーソルを 合わせ、ヒントからInplement interfaceをそれぞれ選択
42. 不要コードの削除 public class Receiver : MonoBehaviour, ISourceStateHandler, IInputHandler { public void OnInputDown(InputEventData eventData) { throw new NotImplementedException(); } public void OnInputUp(InputEventData eventData) { throw new NotImplementedException(); } public void OnSourceDetected(SourceStateEventData eventData) { throw new NotImplementedException(); } public void OnSourceLost(SourceStateEventData eventData) { throw new NotImplementedException(); } throw new NotImplementedException(); throw new NotImplementedException(); throw new NotImplementedException(); throw new NotImplementedException();
43. このあとやる事 ジェスチャしたことを知っているのは InputManager ジェスチャ時のスクリプトを記述するのはこっち InputManagerがジェスチャを認識した時にGameObjectに通知する
44. ジェスチャの受信設定と手の検出 //手を検出した時に呼ばれる関数 public void OnSourceDetected(SourceStateEventData eventData) { Debug.Log("手を検出"); } //手を見失った時に呼ばれる関数 public void OnSourceLost(SourceStateEventData eventData) { Debug.Log("手をロスト"); } void Start () { InputManager.Instance.PushFallbackInputHandler(gameObject); } void Update () { } このスクリプトが貼り付けられている オブジェクト(gameObject)に ジェスチャの通知が来るように登録
45. Ctrl + Sでコードを保存
46. 動作確認 ①実行 ④手の検出/ロストが表示される ②Consoleタブ ③Shift
47. 指の状態の取得 //人差指をおろした時に呼ばれる public void OnInputDown(InputEventData eventData) { Debug.Log("Down"); } //人差指を上げた時に呼ばれる public void OnInputUp(InputEventData eventData) { Debug.Log("Up"); } public void OnSourceDetected(SourceStateEventData eventData) { Debug.Log("手を検出"); } public void OnSourceLost(SourceStateEventData eventData) { Debug.Log("手をロスト"); }
48. 動作確認 ①実行 ④Up/Downも表示される ②Consoleタブ ③Shift
49. 手の状態を保持する bool drag = false; //ドラッグor開放の状態を保持する変数 public void OnInputDown(InputEventData eventData) { drag = true; Debug.Log("Down"); } public void OnInputUp(InputEventData eventData) { drag = false; Debug.Log("Up"); } public void OnSourceDetected(SourceStateEventData eventData) { Debug.Log("手を検出"); } public void OnSourceLost(SourceStateEventData eventData) { drag = false; Debug.Log("手をロスト"); }
50. 手の位置を取得する準備 IInputSource currentInputSource; //入力情報 uint id; //入力情報のID bool drag = false; public void OnInputDown(InputEventData eventData) { InteractionSourceInfo sourceKind; eventData.InputSource.TryGetSourceKind( eventData.SourceId, out sourceKind); if (sourceKind == InteractionSourceInfo.Hand) { currentInputSource = eventData.InputSource; id = eventData.SourceId; drag = true; Debug.Log("Down"); } }
51. 手の位置にオブジェクトを追従させる IInputSource currentInputSource; //入力情報 uint id; //入力情報のID bool drag = false; public GameObject obj; //Cubeの情報を覚えておく変数 public void OnInputDown(InputEventData eventData) { /*関数の中身を省略*/ } /*各関数(省略)*/ void Update () { if (drag) { Vector3 pos; currentInputSource.TryGetGripPosition(id, out pos); obj.transform.position = pos; } }
52. コード内のobjとUnityエディタ内のCubeを対応付ける GameObject
53. コード内のobjとUnityエディタ内のCubeを対応付ける CubeをReceiverスクリプトのObjにドラッグ&ドロップ
54. 動作確認 Shift + クリックで 手(マウスカーソル)に追従
55. 実機で動かそう：カメラの設定 HoloLensCameraのNearの値を0.2[m]に変更 ※ 0.85が推奨されているがそれだと手元のCGが見えないため ①HoloLensCamera ②Nearを0.2に変更
56. 実機で動かそう File Build Settings
57. 実機で動かそう : Build Build
58. 実機で動かそう : Build用フォルダの作成 Appと名前を付ける 新しいフォルダ フォルダーの選択
59. 実機で動かそう プロジェクト名.sln Appフォルダ
60. 実機で動かそう : HoloLensへのデプロイ x86 横の▼ Device (USB接続の場合) Release
61. 実機で動かそう : HoloLensへのデプロイ Debug Start Without Debugging
62. 動作確認
63. Trail Rendererで軌跡を描画する Add Component Cubeをクリック
64. Trail Rendererで軌跡を描画する Trailと入力 【Trail Renderer】 ▪Material 前半で作ったマテリアル をElementに追加 ▪Time Infinityに変更 ▪MinVertexDistance 0.05 ▪Width 0.02 Trail Rendererを ダブルクリック
65. 動作確認 ①実行 軌跡が描画される ※ただし1本のみ
66. 複数の線を描画しよう 一本目 二本目 ・・・ Ｃｕｂｅ生成 Ｃｕｂｅ生成 【考え方】  今いじっているCubeは軌跡描画機能付きのオブジェクト  ドラッグ開始毎にCubeを生成できれば複数の線も描画可能
67. 複数の線を描画しよう ① Assets ② Cube CubeをAssetsに ドラッグ&ドロップ ③ 軌跡描画機能付きの Cubeを再利用可能に
68. 複数の線を描画しよう Delete
69. 複数の線を描画しよう public GameObject obj; //線の描画に使用するGameObject public GameObject original; //テンプレートとなるCubeを保持 public void OnInputDown(InputEventData eventData) { InteractionSourceInfo sourceKind; eventData.InputSource.TryGetSourceKind( eventData.SourceId, out sourceKind); if (sourceKind == InteractionSourceInfo.Hand) { currentInputSource = eventData.InputSource; id = eventData.SourceId; Vector3 pos; currentInputSource.TryGetGripPosition(id, out pos); GameObject tmp = GameObject.Instantiate( original, pos, Quaternion.identity); obj = tmp; drag = true; Debug.Log("Down"); } }
70. 複数の線を描画しよう ② GameObject ① Assets CubeをOriginalに ドラッグ&ドロップ
71. 動作確認 ①実行 複数の軌跡を 描画できる
72. Cubeを非表示にする ② Cube ① Assets ③MeshRendererをオフ
73. 線を一括削除する準備 public GameObject original; //テンプレートとなるCubeを保持 List<GameObject> lines = new List<GameObject>(); public void OnInputDown(InputEventData eventData) { InteractionSourceInfo sourceKind; eventData.InputSource.TryGetSourceKind( eventData.SourceId, out sourceKind); if (sourceKind == InteractionSourceInfo.Hand) { currentInputSource = eventData.InputSource; id = eventData.SourceId; Vector3 pos; currentInputSource.TryGetGripPosition(id, out pos); GameObject tmp = GameObject.Instantiate( original, pos, Quaternion.identity); obj = tmp; lines.Add(tmp); drag = true; Debug.Log("Down"); } }
74. 線を一括削除する関数を作成 void Update () { if (drag) { Vector3 pos; currentInputSource.TryGetPosition(id, out pos); obj.transform.position = pos; } } public void ResetLines() { for(int i = 0; i < lines.Count; i++) { Destroy(lines[i]); lines[i] = null; } lines.Clear(); }
75. 音声入力で線を削除 ② Add Component ① Input Manager
76. 音声入力で線を削除 ① Speechと入力 【Speech Input Source】 ▪Keywords +ボタン ▪Keyword reset ※認識させたい単語 ▪KeyShortCut R ※UnityEditor上で 仮想入力するため のKey ② Speech Input Source
77. 音声入力で線を削除 ② Add Component ① Input Manager
78. 音声入力で線を削除 ② Speech Input Handler ① Speechと入力
79. 音声入力で線を削除 ① IsGlobalListener ③ reset ④ GameObject Speech Input HandlerからResetLinesを呼び出すように設定 ②+ ⑤ Receiver→ResetLines
80. メッシュを消す
81. メッシュを非表示にする Spatial Mapping Smatial Mapping Manager 〇をクリック マテリアルにSpatial Mapping Occlusionを選択
82. 実機で動かそう : 出力の際の設定 File Build Settings
83. 実機で動かそう : Build Build
84. 実機で動かそう : HoloLensへのデプロイ Debug Start Without Debugging
85. 完成