大八耐でVisionAPIを使ったARコンテンツを作ってきた
9/24~25で開催された大八耐というハッカソンイベントに参加してきました。
大八耐とは
大八耐は２日間で何かしらものづくりをしようというイベントで、基本的にテーマやルールはありません。
普段作っているものを継続して開発してもよし、２日間だけで作ってもよし。
内容も、プログラムでもCGでも絵画でも音楽でも立体物でも手芸でもなんでもOK。
お互いの作品を披露し合って交流しましょう、というような会です。
作ったもの
タイトルにある通り、GoogleのVisionAPIを使ったARコンテンツを作りました。
作品名は「識り神の眼」（しりがみのめ）
すべての物の名前を知っている識り神という神様がいます。（いません）
HMDを装着し特別な手袋を身につけることで識り神の眼を体験できます。
名前を知りたい物に手をかざすと、識り神の力によりその物の名前が分かります。
こんな風に見えてます。
分かりやすいように全画面表示していますが、実際はHMD用の２眼表示になってます。
手をかざすと魔法陣が表示され、その内側にあるものが何かを表示します。
対象は何でもOK。小さいものでも、大きな建物でも、魔法陣の中に収まるように調整すれば認識されます。（結果はGoogle先生しだい）
環境など
用意したもの
開発環境
Unity5.4
Vuforia6.0
使用したAPI
処理の流れ
- 手袋の模様（ARマーカー）をVuforiaで認識して手の位置を把握
- 手の横に魔法陣を徐々に大きくなるように表示
- 魔法陣が一定の大きさになったら認識開始
- 魔法陣が表示されている画像領域を切り取りVision APIに投げる
- 認識結果が英語で返ってくるのでTranslator APIに投げる
- 日本語で返ってきた結果を画面に表示
ポイントとしては、4.で魔方陣の領域に合わせて画像を切り取っているところです。
手の位置を上下左右前後に動かすことで魔方陣の位置と大きさを調整できるので、自分が調べたい範囲を任意に指定することができるようにしています。
画像の切り取りは、ARマーカーとカメラの位置関係、カメラのFoV値などからごにょごにょ計算しています。多分ここが一番複雑だった。
APIについて
APIはGoogleのVision APIとMicrosoftのTranslator APIを使っています。
このAPIがUnityから使えることだけは事前に確認してから臨みました。
Google Cloud Vision API
Googleの学習済みの機械学習モデルを外から簡単に利用できるAPIです。
今回は物体検知の機能を使いましたが、顔検知、ランドマーク検知、テキスト抽出など、いろいろな機能があります。
Unityからの使い方はこちらのブログとGitHubが大変参考になり、割とすんなりいけました。ありがとうございます！
Vision APIは1000リクエスト/月までは無料で利用できますが、それを超えると1000リクエストごとに5ドル程度かかるようなので、無料アプリとかで公開したら大変なことになります。
Microsoft Translator API
Microsoftが提供している翻訳APIです。テキスト翻訳と音声翻訳があるようですが、今回はテキスト翻訳を利用しています。
VisionAPIの結果が英語で返ってくるので、日本語に翻訳するために使いました。
最初はGoogleの翻訳APIを使おうと思ったのですが、無料での利用ができないようだったので、無料で使えるMicrosoftのAPIに切り替えました。こちらは2,000,000文字/月までは無料で利用できるようです。
Translator APIはUnityから扱うサンプルなど見あたらなかったのでドキュメントや他言語での記事を見ながら実装しました。コンポーネントとしてGistに上げてます。
UnityからMicrosoft Translator Text APIを利用するコンポーネント · GitHub
感想
Googleの物体認識の精度がすごいです。
もちろん周囲の環境にもよりますが、対象の画像範囲を絞っているのでなかなかいいかんじで結果を表示してくれます。
多くの人に使ってもらいましたが、「じゃあこれはどうだろう？」「これならどう？」といったかんじでいろいろ試してもらえたので良かったです。
また、ありがたいことに審査員賞をいただくことができました。
技術、アイデア、手袋による入力インターフェイス、「識り神」という世界観、といったコンテンツ全体を含めて評価していただけました。
入力インターフェイスをどうするか悩んでいたのですが、識り神の手袋というアイテムにすることで世界観を表現しつつ認識範囲の調整もできるようになったので良かったです。
おまけ
識り神のマスクは世界観を演出する賑やかしアイテムなので別に無くても遊べます。
が、実はHMDの上からかぶることもできます。むしろかぶることで本物の識り神に近づけます。
マスクの目の部分に穴を開けており、ちょうどカメラが眼球っぽくなります。
まさしく「識り神の眼」ですね。
Hacker Tackle 2016でVR/AR/MRの話をしてきました
Hacker Tackle 2016 で登壇してきました。
VR元年、ポケモンGOのAR、MRデバイスのHoloLensなど、今年はVR/AR/MRという言葉を多く耳にします。
違いをしっかり理解できてないところもあったので、自分なりにそれぞれのポイントだと思ったところを
VR → 「まるで現実」
AR → 「現実を理解する」
MR → 「AR⇔AV、VRの現実感」
というキーワードでまとめて共有させてもらいました。
MRの中で紹介したAugmented Virtualityという概念はあまり聞くことがないですが、ARとAVを含むのがMRと考えるのが今のところ理解しやすい気がしています。
また、現実→AR→AV→バーチャルと徐々に世界が変化していくようなデモをUnityとVuforiaで作ってみたので、後半はその実装について話しました。
稀に見る緊張っぷりでしたが、なんとか無事に終わってよかったです。
他の登壇者の方々のお話も面白く、特にGoogleの機械学習の話はVR/AR/MRコンテンツを作る中で活かせそうだったので、さっそく大八耐（9/24~25、テーマなしの自由なハッカソン）で使ってみたいと考えてます。
貴重な機会を頂いた運営の皆様、聴きに来てくださった参加者の皆様、ありがとうございました！
【HoloLens】Unityでスタートメニューみたいな追従するUIを作る
HoloLensの機能を確認するためのUnityプロジェクトを作り始めました。
いろいろな機能を確認できるように、
- Launcherシーンを用意して確認できる項目をリスト表示
- リストから項目を選択して各機能のシーンに遷移
という構成にしました。
こんなかんじです。
エミュレーターなので分かりにくいですが、HoloLensのスタートメニューのような自分に追従するUI表示にしています。
UnityのUIシステムとHoloToolkitの機能を利用してこの追従UIを作ったので、その実装方法を書きます。
通常のHoloLens開発で必要な項目については書いてないところもあるので、そのあたりはHoloLensのドキュメントなどご覧いただければと思います。
まだいろいろ試行錯誤している段階なので最適な方法ではないかもしれませんが、とりあえず今のところこんなかんじという内容です。
カメラ設定
エディタ上のシーンビュー・ゲームビューでレイアウトを調整すると、ビルドして実行した際にUIのサイズが全然違うように表示されることがあります。
これは、実行時にUnityが自動でCameraのField of Viewの値を更新しているのが原因のようです。
エディタ上とビルド後との見た目を合わせるために、Field of VIewの値をビルド後と同様の値に設定します。
ここでは17.9898にしていますが、もしかしたらエミュレーターや実機の設定によって値は異なるかもしれません。実際の値をテスト表示してみるのが確実だと思います。
キャンバス設定
UIをワールド空間上に配置するため、CanvasのRender ModeをWorld Spaceに設定し、Event CameraにMain Cameraを設定します。
Rect TransformのScaleを0.001にしているのは、後述するUIオブジェクトのレイアウトを組みやすくするためです。
Unityの座標の単位はメートルなので、キャンバスのスケールを1000分の1にしておくことで、UIオブジェクトをミリメートル単位で設定するようにしています。
テキストがボケて表示される場合はDynamic Pixels Per Unitの値を調整することで改善するようです。ここでは10に設定しています。
EventSystem設定
EventSystemオブジェクトに HoloLens Input Moduleを追加します。
これでAirTap等のジェスチャーでUIオブジェクトを操作できるようになります。
UIオブジェクト配置
キャンバスの子としてUIオブジェクトを配置していきます。
キャンバスのスケールを0.001に設定したので、UIオブジェクトのRecTransform設定の単位はミリメートルになります。
ここでは追従するウィンドウとしてLauncherWindowオブジェクトを作成しています。
Pos Z=1000, Width=200, Height=250となっているので、1m先に幅20cm高さ25cmの板が浮いているようなイメージです。
あとは通常のUIのようにテキストやボタンなどで好きなレイアウトを組んでいきます。
Tagalongコンポーネント
ウィンドウとなるオブジェクトにTagalongを追加します。
Tagalongを追加すると自動でBox ColliderとInterpolatorも追加されます。
TagalongはHoloToolkitに含まれるコンポーネントで、画面内にBoxColliderが収まっているかどうかを監視して、画面内に留まるよう位置を更新します。
いろいろ設定項目がありますが、ここでは画像のように設定しています。
Mimimum Horizontal/Vertical Overlapは、追従動作開始のための画面とコライダーとが重なり割合の閾値です。0.5に設定されている場合、コライダーが半分以上画面外に出たときに追従動作が始まります。
Target Horizon/Vertical Overlapは、追従動作の目標となる画面とコライダーとの重なり割合の値です。1に設定されている場合、コライダー全体が画面内に収まるように追従動作が発生します。
Billboardコンポーネント
ウィンドウとなるオブジェクトにBillboardを追加します。
これもHoloToolkitに含まれるコンポーネントです。
Pivot Axisで指定した軸について、常にカメラの方向を向くようにRotationが更新されます。
今回はX軸もY軸も常にこちらに向いてほしいので、Freeに設定しています。
できあがり
ビルドして実行してみて、うまく追従されていればOKです。
追従動作が気に入らない場合は、Tagalongの設定をいろいろいじってみると気持ち良くなるかもしれません。
なんとなくレイアウトが初期のFFみたいになって、なかなか気に入っています。
これでようやく機能確認の準備ができたので、次からは機能の実装について書いていこうと思います。
HoloLens開発でHoloToolkit-Unityを導入＆更新しやすくする構成
HoloLensに興味があります。
もう少ししたらきっとほとんどの人がHoloLens的なデバイスを身につけて生活することになると思っています。今のスマホのように。
開発者向けとして北米ではリリースされていて、エミュレータもあるので開発環境を試してみることができます。
今のうちから勉強しようと思って、HoloLensの機能を確認するためのUnityのプロジェクトを作りました。いろいろ試してみて追加していくつもりです。
HoloToolkit-UnityはMicrosoftが公開しているHoloLensをUnityで扱いやすくするためのライブラリ的なものです。
導入する際は、クローンするかダウンロードして必要なファイルを自分のプロジェクトに持ってくる必要があるんですが、今後の更新や修正がやりづらそうだなーという印象だったので、簡単に導入＆更新できるよう、以下のような構成にしてみました。
- HoloToolkitはサブモジュールとしてRoot直下に配置する
- HoloToolkitをUnityPackageとしてエクスポートするバッチを作成(Tools/exportHoloToolkit.bat)
- Unity上から2.のバッチを実行＆インポートするためのエディタスクリプトを実装(Assets/Scripts/Editor/HoloToolkitImporter.cs)
これで、Unityエディタ上のメニューからHoloToolkitをインポートできるようになりました。
HoloToolkitに更新があったときは、サブモジュールを最新にしてから再度インポートをすれば変更が反映されるはずです。（未確認ですが。。。）
あと、HoloToolkitは自分でも機能追加や修正するかもしれないのでフォークしたリポジトリを追加しています。
インポートのところはUnityPackageにせずに普通にコピーでも大丈夫かもしれませんが、Unityでは直接ファイル操作するとmetaファイル関連で問題が起こりがちです。
なので、HoloToolkitプロジェクトからいったんパッケージをエクスポート、それをメインプロジェクトからインポート、という段階を踏むようにしています。
Unityはコマンドで制御できたり、エディタを拡張するスクリプトを書くこともできるので、工夫するといろいろ自動化できて楽しいですね。
今回はHoloLensには直接関係ない準備の話でした。
いろんな機能をさわってみてまた記録に残せたらなと思います。
VRハッカソン@福岡を開催＆参加しました
だいぶ時間が経ってしまったけど6/18~19でVRハッカソンというイベントを開催＆参加しました。
僕は"運営"兼"参加者"だったので、運営面と開発面で思ったことを簡単に書き残しておきます。
他にも記事を書いてくれている方がいるので詳細はそちらをご覧ください。
運営面
今回のハッカソンは、日本全国で同日に行われた All Japan VR Hackathon の福岡会場として開催しました。
東京では200人くらいが参加するとても大きなイベントだったのですが、福岡会場はなんと、運営メンバーの自宅を会場としてお借りしました。
前述した２つ目の記事が家主レポートです。「参加してきました」って言ってますけど自分の家ですね。
はじめから家でやるつもりではなかったのですが、気づいてみたら家でやることになってました。（土日夜通し開放できる会場探すのはハードル高いですね）
文字どおりアットホームなハッカソンになったわけですが、個人的には、これはこれですごく楽しめました。
- 人数が多くならない（できない）ので運営しながら開発できた
- 夜にピザとってみんなで食べたりして交流しやすい
- 寝やすい
このあたりが理由です。
運営が大変で開発に参加できないのは悲しいので、運営するならこれくらいの規模がいいなーと思いました。
ただ、参加者にとっては知らない人の家が会場っていうのはなかなかハードルが高いと思うので、今回15人弱も参加してもらえてよかったです。
特に今回はじめましてでご参加いただいた皆さん、本当にありがとうございました。
理解ある参加者ばかりで運営としては何も困ることがなかったです。
開発面
自分が参加したチームはViveを使ったゲームを作りました。
タイトルは
「高めの鼻」
ざっくり言うと、天狗になって鼻を伸ばして飛ばして敵を倒すゲームです。
たしか、アイデア出しのときにメンバーが、
「（実世界で）視野の端っこに自分の鼻がちょっと見えてて邪魔に思うことがある」
って言い出したところから、
→鼻を伸ばそう
→テーマが「日本らしさ」なので天狗にしよう
→メンバーにミサイルのアセットの作者さんがいたのでそれで鼻を飛ばして戦おう
途中で結構悩んだとこもあったんですが大体こんなかんじだったかと。
わりとノリでワイワイ考えたアイデアではあるんですが、鼻を伸ばすという着眼点は面白いと思っています。
というのも、VR酔いには鼻が重要だという話があるようで、
VR酔いをなくすための冴えた方法は「鼻を描き込むこと」｜WIRED.jp
この鼻が動的に伸び縮みした場合に、
- 鼻の高さが酔いにくさに関わるのか
- しっくりくる鼻の高さはあるのか
- 高い鼻を自分の鼻だと認識する（できる？）のか
- 鼻が根元から切れて飛んでいったらどう感じるのか
など、考えられることがたくさんあるなーと。
と、いろいろ書きましたが、残念ながら思い描いていたところまで作れませんでした。
- はじめにシーン分けなどワークフローをもっと固めておくべきだった
- VRのUIが難しかった
このへんが原因かなーと思っています。
特にUIは、CanvasのRenderModeを"Screen Space - Camera"で作っていたのですが、UnityエディタのGameビューで見た画面と、エディタでの再生時にViveで見た画面と、ビルドしてViveで見た画面でレイアウトが異なっていて、ビルドしてみたらUIが見えない！というかんじで調整にすごく時間がかかりました。
設定によって解消できるのかもしれませんが、情報を見つけきれませんでした。。
素直にWrold Spaceでやるべきものなんでしょうか。。
VR開発に対する知見がほぼない状態から開発スタートだったので準備不足でした。
次回はもっと準備してから臨もうと思います。
というわけで、開発的には悔しい部分もありましたが、参加者の皆さんが（きっと）楽しんでくれて、無事に終わったので良かったです！
機材提供していただいた主催者の皆さん、参加していただいた皆さん、差し入れを持ってきてくれた皆さん、どうもありがとうございました！
今後もまた何かしらやるときはよろしくお願いします！
全体のJapan VR Hackathonのコンテストの結果が今日で全部発表になるようなので、そちらも見てみるとおもしろいものがたくさんあると思います。
おまけ
ハッカソンではいろんな人が差し入れを持ってきてくれたりするんですが、今回は参加者の方が「ソースコ」という調味料を持ってきてくれました。
福岡会場、もうすぐ始まります！
— NAGAMINE.Keizo 長峰慶三 (@KzoNag) 2016年6月18日
参加者の方から差し入れをいただきました！ハコスコならぬ、ソースコ！ #JVRH2016 pic.twitter.com/ODizf0bT8O
ピザにかけるとそれはもう当たり前のように美味しいんですが、みんなハマって打ち上げのときもいろいろかけてました。個人的には焼き鳥がすごく美味しかったです。
（コーラに入れてる人がいましたが、さすがにむせてました。）
