読者です 読者をやめる 読者になる 読者になる

Leap Motionを使ってVR上にデスクトップ画面を作ろう

Unity VR Leap Motion Orion SDK

はじめに

Leap Motionとは

Leap Motionは、手の位置や指一本一本の動きをトラッキングすることのできる赤外線センサーです。

VR向けに対応したOrion SDKを導入することにより、Oculus RiftやHTC Viveと組み合わせてVR空間で手をトラッキングすることも可能になりました。

特徴

長所

  • 手に握るタイプのコントローラー(Oculus touchなど)と違い、ものを持たずにVR上で操作が可能。
  • ジェスチャーを使った直感的な操作ができる。

短所

  • 手に握るタイプのコントローラーと比較して、トラッキング精度が劣る。
  • ボタンのついたコントローラーと異なり、フォースフィードバックが感じられないので物を掴んだりする際に違和感を感じる。
  • 視野角130度ぐらいしかカバーできないので、ジェスチャーでPinch outさせたときに手がトラッキングから外れることがしばしば。
  • VRHMDを赤外線センサーでトラッキングするシステムを使っているHTC Viveだと、ViveとLeap Motionのセンサー同士が干渉することがある。

今回の目的

  • HTC ViveとLeap Motionを用いて、VR空間にデスクトップ画面を生成する。

具体的には、親指と人差し指をくっつけた状態(Pinch point)で両手のPinch pointを近づけたときに、デスクトップ画面をVR空間内に生成させるというもの。 以下がそのイメージ図になります。 Screen To Gif - エディタ 2017-01-09 16.35.16.png (639.3 kB)

デモ

必要なもの

ハードウェア

使用したミドルウェア・アセットなど

  • Unity5.5.0f3
  • Leap Motion SDK v3.2.0 (ORION BETA)
  • LeapMotion_CoreAsset_Orion_4.1.5.unitypackage
  • Attachments-1.0.4.unitypackage
  • UIInputModule-1.2.0.unitypackage
  • uDesktopDuplication-v1.5.1.unitypackage
  • SteamVR Plugin
  • Purple Space Nebula Skybox

内容

Leap MotionのUnityアセットをあらかじめ、下記のサイトからダウンロードしておく。
Unity — Leap Motion Developer

デスクトップをミラーリングするのに、uDesktopDuplicationを使用した。 github.com

(1) SteamVR Pluginをインポートする。SteamVR_settingsが出てくるのでAccept Allをクリック(You made the right choice!というコメントが出る)。

Unity 5.5.0f3 Personal (64bit) - Untitled - LeapMotion-PinchTest - PC, Mac & Linux Standalone _DX11_ 2017-01-09 12.00.52.png (365.2 kB)

(2) [Assets] -> [Import Package] -> [Custom Package...]をクリックして、

  • LeapMotion_CoreAsset_Orion_4.1.5.unitypackage
  • uDesktopDuplication-v1.4.2.unitypackage

をそれぞれインポートする。

無題 - ペイント 2017-01-09 12.06.39.png (53.5 kB)

(3) Scenesフォルダを作成し、新しいシーンPinchTestを用意する。 (4) HierarchyMain cameraを削除する(VRHMD専用のCameraをあとで追加するので、Unityの既存のカメラを削除する必要がある。) (5) Assets/LeapMotion/PrefabsからLMHeadMountedRig.prefabHierarchyにドラッグ&ドロップする。

Unity 5.5.0f3 Personal (64bit) - PinchTest.unity - LeapMotion-PinchTest - PC, Mac & Linux Standalone _DX11_ 2017-01-09 13.21.17.png (243.1 kB)

(6) Hierarchy中のLMHeadMountedRig/HandModelsにあるCapsuleHand_LCapsuleHand_Rをそれぞれ右クリックし、Create emptyから空の子オブジェクトをつくる。それぞれ、PinchDetector_L、PinchDetector_Rと名前をつける。

(7) Assets/LeapMotion/Scripts/DetectionUtilitiesからPinchDetector.csを先ほど作成したPinchDetector_LPinchDetector_Rにそれぞれアタッチする。これらのオブジェクトは人差し指と親指をくっつけた状態(Pinch)を手が取っているかどうか確認するのに必要です。

Unity 5.5.0f3 Personal (64bit) - PinchTest.unity - LeapMotion-PinchTest - PC, Mac & Linux Standalone_ _DX11_ 2017-01-09 13.33.35.png (492.0 kB)

ここまででPinchの検出がする準備が整いました。
さらに、Pinch状態になっているかどうか視覚的に確認するために、ここではLeap Motionから提供されているAttachmentsのUnityアセットを導入します。

(8) [Assets] -> [Import Package] -> [Custom Package...]をクリックして、Attachments-1.0.4.unitypackageUIInputModule-1.2.0.unitypackageをインポートする。

(9) Assets/LeapMotionModules/Attachments/PrefabsからHandAttachment_L.prefabHandAttachment_R.prefabHandModelsにアタッチする。

Unity 5.5.0f3 Personal (64bit) - PinchTest.unity - LeapMotion-PinchTest - PC, Mac & Linux Standalone_ _DX11_ 2017-01-09 13.50.03.png (462.2 kB)

(10) 先ほどアタッチしたHandAttachmentsを、使用するHandModelsとして設定するためにLeapHandControllerの設定を変更する。

  • Hand PoolのModel PoolでSizeを1から2に変更する。
  • Model Poolが1つ追加されるので、Group NameAttachmentと記載し、Left ModelRight ModelHandAttachments-L/Rをそれぞれアタッチする。

Unity 5.5.0f3 Personal (64bit) - PinchTest.unity - LeapMotion-PinchTest - PC, Mac & Linux Standalone _DX11_ 2017-01-09 15.09.32.png (114.5 kB)

(11) Assets/LeapMotionModules/UIInput/TexturesCircleCursorをアタッチする。

Unity 5.5.0f3 Personal (64bit) - PinchTest.unity - LeapMotion-PinchTest - PC, Mac & Linux Standalone _DX11_ 2017-01-09 14.08.16.png (490.6 kB)

(12) CircleCursorのTransformを書き換える。Positionを(0, 0, 0)、Rotationを(120, 0, 0)、Scaleを(0.15, 0.15, 0.15)に設定する。CircleCursorの位置を設定しているだけなので、適当な値を入れて構わない。

Unity 5.5.0f3 Personal (64bit) - PinchTest.unity - LeapMotion-PinchTest - PC, Mac & Linux Standalone_ _DX11_ 2017-01-09 14.14.34.png (59.8 kB)

(13) PinchPointInspectorから、Add Componentをクリックして、Pinch Detectorを選択する。

無題 - ペイント 2017-01-09 14.27.13.png (69.8 kB)

(14) Scriptsフォルダを作り、PinchCursor.csという名前のスクリプトを用意する。

Pinchを検出したときに、子オブジェクトをActive状態にするスクリプトになります。

(15) 先ほど作成したPinchCursor.csPinchPointにアタッチする。

Unity 5.5.0f3 Personal (64bit) - PinchTest.unity - LeapMotion-PinchTest - PC, Mac & Linux Standalone _DX11_ 2017-01-09 14.34.14.png (494.8 kB)

(16) PinchPointのInspectorのPinch Detector内にあるOn Activate()+をクリック。

Pinch状態にあるとき、On Activate上で指定した関数が実行されます。一方で、Pinch状態が解除された場合、On Deactive上で指定した関数が実行されます。つまり、手の状態の遷移に伴って、さまざまな命令を実行ができるというわけです。

(17) PinchPointオブジェクトを図に示した箇所にドラッグ&ドロップ。

(18) No Functionをクリックし、先ほど作成したPinchCursorのpinchOn()関数を指定する。On Deactivate()に関しても同様の操作を行い、No FunctionにpinchOff()関数を指定する。

Unity 5.5.0f3 Personal (64bit) - PinchTest.unity - LeapMotion-PinchTest - PC, Mac & Linux Standalone_ _DX11_ 2017-01-09 14.45.32.png (167.1 kB)

最終的に、以下のようになるはずです。

Unity 5.5.0f3 Personal (64bit) - PinchTest.unity - LeapMotion-PinchTest - PC, Mac & Linux Standalone_ _DX11_ 2017-01-09 14.51.38.png (83.4 kB)

(19) CircleCursorオブジェクトのチェックを外して、Deactivateの状態にしておく。

こうしておくことで、シーンのはじめにCircleCursorが見えない状態になります。 逆にチェックを外しておかないとはじめからCursorが見えてしまいます。

Unity 5.5.0f3 Personal (64bit) - PinchTest.unity - LeapMotion-PinchTest - PC, Mac & Linux Standalone_ _DX11_ 2017-01-09 14.56.44.png (65.1 kB)

(20) シーンのプレビューを行う。

以下のように、Pinchが検出されると、設定したCircleCursorが出現します。Pinch状態が解除されると、Cursorは見えなくなります。 PinchTest_demo1.gif (2.7 MB)

最後に、Pinch状態にある両手を近づけたときに、デスクトップ画面がVR上で生成される仕組みを作っていきます。

(21) Hierarchy上で、何も選択していない状態で右クリックする。Create emptyを選択し、DisplayAnchorという名前の空のゲームオブジェクトをつくる。

Unity 5.5.0f3 Personal (64bit) - PinchTest.unity - LeapMotion-PinchTest - PC, Mac & Linux Standalone _DX11_ 2017-01-09 15.49.23.png (25.4 kB)

(22) Scriptsフォルダ内にCreateDisplay.csという名前のスクリプトを作る。

(23) CreateDisplay.csスクリプトを先ほど作成したDisplayAnchorオブジェクトにアタッチする。

Unity 5.5.0f3 Personal (64bit) - PinchTest.unity - LeapMotion-PinchTest - PC, Mac & Linux Standalone _DX11_ 2017-01-09 15.55.40.png (458.7 kB)

(24) Pinch Detector_LPinch Detector_RMagic Display Prefabに、HandModels内のPinchDetector_LPinchDetector_RAssets/uDesktopDuplication/Examples/PrefabsMonitor_Board.prefabをそれぞれアタッチする。

Unity 5.5.0f3 Personal (64bit) - PinchTest.unity - LeapMotion-PinchTest - PC, Mac & Linux Standalone_ _DX11_ 2017-01-09 16.00.41.png (507.9 kB)

(25) Skyboxがデフォルトのままで物悲しい感じなので、UnityアセットのPurple Space Nebula Skyboxを導入する。

Unity 5.5.0f3 Personal (64bit) - Untitled - LeapMotion-PinchTest - PC, Mac & Linux Standalone _DX11_ 2017-01-09 13.07.28.png (342.5 kB)

(26) Assets/Skyboxes/PurpleNebulaにあるPurpleNebula.matをシーンにドラッグ&ドロップ。

Unity 5.5.0f3 Personal (64bit) - PinchTest.unity - LeapMotion-PinchTest - PC, Mac & Linux Standalone_ _DX11_ 2017-01-09 16.08.28.png (404.5 kB)

周りが宇宙空間になりました。少しはマシな感じになったと思います。 Unity 5.5.0f3 Personal (64bit) - PinchTest.unity - LeapMotion-PinchTest - PC, Mac & Linux Standalone _DX11_ 2017-01-09 16.10.35.png (1.0 MB)

(27) 最後に、CenterEyeAnchorのInspectorのCameraでClear FlagsをSkyboxに変更する。

これを設定しないと、Skyboxが反映されないので周りが真っ暗なままになってしまいます。

Unity 5.5.0f3 Personal (64bit) - PinchTest.unity - LeapMotion-PinchTest - PC, Mac & Linux Standalone _DX11_ 2017-01-09 16.18.12.png (90.6 kB)

(28) シーンのプレビューを行う。

以下のように両手のPinchを検出され、PinchPointを近づけたときにディスプレイが生成されます。
Pinch inもしくはPinch outすることで自由自在に大きさを変えられます。
手(親指と人差し指)を離すと、その場にディスプレイが固定されます。

以上、C#スクリプトの記述量は少なめで、Unityアセットを多用してイメージ通りのものが作れました。

参照