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

凹みTips

C++、JavaScript、Unity、ガジェット等の Tips について雑多に書いています。

Oculus Rift と Leap Motion で空中お絵描きアプリを作ってみた

Oculus Unity Leap Motion

f:id:hecomi:20141031012737p:plain

はじめに

Leap Motion VR の登場で簡単に VR 空間に干渉出来る自分の手を持ち込むことが可能になりました。

そこでふと思いついてやってみようと思ったのが、自分の指で空中にお絵描きできるアプリです。本エントリでは作ってみたアプリの配布と、この作り方(なんとコード0行!)についての紹介をしたいと思います。

デモ

ダウンロード

下で解説を行っているものになります(上のデモの線をカラフルにしたものです)。↑キーと↓キーで明るさの調節ができます。

簡単な仕組み解説

Leap Motion VR の世界はおおよそ実空間に則したスケールで作られています(Unity 上のスケール 1 = 実空間の 1m)。これについては以下のエントリで詳しく解説されています。

また、Oculus のトラッキングも同じく実空間に則したスケールで作られているため、なんと特に何もしなくてもおおよその位置が合う形になります(微妙にはずれています)。

環境

作り方

基本的には、指先に Trail Renderer をつけるだけです。

まず、Leap Motion VR のページから Unity 用の Asset を落としてきてインポートします。

LeapMotion+OVR > LeapOculusPassthrough シーンを開いて実行してみると手で崩せるブロックがたくさんある画面になると思います。今回はブロックは必要ないので Walls オブジェクトを削除するか、Inspector からチェックを外して inactive にして非表示にしておきましょう。

次に、指から線が出るように手のモデルである FadingHandbone3(人差し指の先)に Trail Renderer をアタッチします(FadingHandLeap Motion で認識した手に乗っかるコピー元のオブジェクトとして扱われるため、普段は見えないように inactive な状態になってますが、ここでは分かりやすいように一度 active な状態にしてスクリーンショットを撮っています)。

f:id:hecomi:20141031002839p:plain

デフォルトだと 1 の太さ(= 幅 1 メートルの線)になっているので、適当に 1 cm の太さ、線の頂点の間隔を 5 mm などとしてみます。

f:id:hecomi:20141031004056p:plain

最後に、Durovis Dive 用のアセットがビルドの妨げになるので、DiveLeapMotion+Dive は Project から消去した後にビルドします。

f:id:hecomi:20141031004250p:plain

これで完成です!色をつけたい場合は FadingHand にアタッチされている HmdFading スクリプト(手の信頼度に応じて手の透過率を変更するスクリプト)のチェックを外して disabled にしておき、Trail Renderer のパラメタを適当にいじります。

f:id:hecomi:20141031005046p:plain

f:id:hecomi:20141031010057p:plain

f:id:hecomi:20141031010104p:plain

また、LeapPassthroughOVRPlayerController > OVRCameraController > CameraLeft > HandController にアタッチされている HandController.cs の Tool に適当なオブジェクトを指定すると棒状のものもトラッキングできるようになるので、同様にトレイルを引いてくれる棒オブジェクトを作ってあげると空中ペンができます。

f:id:hecomi:20141031020022p:plain

あとはパーティクルをモリモリしたりすればきれいな感じになると思います。また標準の Trail Renderer はカクカクしがちなのでスプラインにしてくれるアセットを代わりに適用しても良いと思います(次回エントリで紹介する Magic VR ではこちらを利用しています)。

Leap Motion VR の無駄な処理削減

さて、Leap Motion VR で画を取ってくる処理ですが、結構重いです。そこで Deep Profile で見てみると、EncodeDistortion() が結構な時間を食っています。

f:id:hecomi:20141031010352p:plain

これは LeapImageRetriever.cs の中で行われている Leap Motion の歪み補正を行うための処理(前回の記事参照)なのですが、テクスチャのサイズが変更されない限り初回のみで良いはずです。そこでこれを最初のみ行われるようにちょっとだけ書き換えたものが以下になります。

これを代わりに使うことで軽量化することが出来ます。

f:id:hecomi:20141031014252p:plain

先行事例紹介

AR の分野では MIT Media Lab の Second Surface が有名かと思います。

Second SurfaceiPad を使ったものですが、自作の透明パッドによる Gravity というプロジェクトもあり、こちらでは Oculus Rift と組み合わたデモも実現されています。

昨今の VR 関連の技術進歩によって、これらのコンセプトを実現することが容易になったのは本当に素晴らしいと思います。

おわりに

ちょっとした工夫でもっと色々なことが出来ると思います。例えば犬を描くとそれを認識して動き出したり、うごメモのように 3D 漫画が作れたり、他人の描いた絵を 3D 空間上でそのまま再現して見れる、などなどたくさん思いつきます。Leap Motion の次期バージョン Dragonfly が出るとスルー画もカラーに出来てもっと楽しくなりそうですね。

次回は、このコンセプトを発展させて現在開発中の、図形を描いて魔法を発射できる Magic VR の紹介と解説エントリを書きたいと思います。