MR時代のユーザ体験てんこ盛り！ML1と外部デバイス連携を使ったショッピングアプリを作ってみた！

株式会社TechFirst Leadersの毛利と申します。

普段は、Webシステム開発の会社経営をしながら、自分自身でも現場でごりごりプログラムを書いています。

今回は、MRグラスMagic Leap 1のハッカソン（プログラミング/アプリ開発イベント）のMagicLeap Challenge#02で開発したアプリについてご紹介いたします。

MagicLeapとスマホの連携方法や、ハンドトラッキング・ボディトラッキングなどの実装方法などを説明していくので、ご一読いただけると幸いです。

ハッカソン参加時に設定した2つのテーマ

ハッカソンに参加するにあたり、2つのテーマを持っていました。

1つはビジネス寄りのユースケースのアプリを開発することでした。私はMagicLeap Challenge #01にも参加しており、その時はゲームのアプリを作成しました。

【MagicLeap Challengeで開発したゲームアプリ】

このゲームアプリの開発を通して、Magic Leapの持つ描画性能や6DoFコントローラーのトラッキング性能を十分堪能することができたので、#02ではビジネス用途で使われるようなアプリを作ってみたいと考えていました。

もう1つのテーマは、Magic LeapとMagic Leap以外のデバイスを連動させることでMagic Leap単体ではできないようなユーザ体験を持つアプリを実装してみるというものでした。

デバイス間の通信機構を１パターンでも実装して検証することで、今後Magic LeapをはじめとしたMRデバイスのアプリを企画する際に、デバイスの制約に引きずられることなく、アイデアを出せると考えていましたが、なかなか時間も取れていなかったので、今回のハッカソンはちょうど良い機会になりました。

どんなアプリを作ったか

簡単に説明すると「MRデバイスを利用した洋服のショッピングアプリ」です。

まずは、どのようなアプリなのかを理解するためにデモ動画をご覧ください。

ハッカソンの性質上、限られた時間内（今回は1週間）で開発したものなので、デモとしてはそれほど派手なデモではありません。

ただ、「MRデバイスを利用した洋服のショッピング」というユースケースの中に前述の「Magic Leap単体ではできないようなユーザ体験」を含め、幾つかのユーザ体験を取り入れています。

ここからはデモ動画を見ただけでは気づきにくい以下の内容や所感について詳細に紹介していきます。

• タブレットデバイスを組み合わせた観客視点
• スマホのコントローラ化
• ハンドトラッキングによる操作
• ボディトラッキングによる試着

タブレットデバイスを組み合わせた観客視点

デモ動画は、以下の2つの画面で構成されています。

1. メインで表示している映像：Magic Leap 1の映像
2. 右上の小窓の映像：iPad Proのカメラからの映像

下の画像のように、メイン映像のMagic Leap 1で表示された洋服がiPad Proの第三者の視点の映像でも表示されていることが確認できると思います。

MRアプリではこうした機能のことをSpectator Viewと呼んだりしますが、MRデバイスを装着している人と周りの人とで、同じMR空間を共有して体験することを実現しています。

（Spectator Viewの詳細はこちらの記事をご覧ください）

 

スマホのコントローラー化

XRデバイスのアプリの操作では、ハンドトラッキングや専用コントローラーを使った操作が紹介されることが多いですが、今回のアプリではスマホをコントローラーとして利用しています。

ハンドトラッキングを用いたアプリ操作は、デバイスが認識できる範囲までしか手をトラッキングできない問題があり、加えてユーザに仮想のものに触れるという不慣れな操作を強いることになります。

また、専用コントローラの場合、デバイスやアプリごとの様々な操作方法をユーザが理解する必要があります。

一方で、スマホであれば使い慣れている人が多く、XRデバイスのユーザビリティを上げることができないかと考え、スマホを利用することにしました。

VRデバイスと比べてMRグラスであれば、スマホの画面をみながら操作できますので、MRグラスが普及する際には、MRアプリの操作方法として主流になるのではないかと感じました。

 

ハンドトラッキングによる操作

ハンドトラッキングによる操作も実装してみました。

上記の「スマホのコントローラ化」のところでも述べている通り、操作感としてはやや難しく感じましたが、用途によっては十分使えると思いました。

例えば、触覚フィードバックのような機能を搭載した、リング型、グローブ型のデバイスなどの登場により、XRデバイスを初めて使う人でも戸惑いなく使えるようなユーザビリティが実現できるのではないかと思いました。

ボディトラッキングによる試着

ハッカソンの期間の最後の方に思いつきで入れた機能なので、無理やり感が否めませんが、ボディトラッキングを利用した試着の機能を実装しました。

上記の「タブレットデバイスを組み合わせた観客視点」で「観客視点」と表現していますが、他者が見るだけではなく、MR空間上で自分の姿を確認することも用途として考えられるという例になっているかと思います。

アプリの技術構成や技術要素について

ここまではアプリの機能的な説明でしたが、ここからは技術的な話について紹介していきます。

アプリ全体の技術構成

まずアプリの構成ですが、Magic Leap 1アプリ・iPhoneアプリ・iPad Proアプリの三つのアプリで構成されています。

開発ツールにはUnityとUnityのAR Foundation（+各デバイス用のプラグイン）を使用しています。

Unity上でMagic Leapのアプリを開発する場合はAR Foundationを使わない方が簡単なのですが、今回はiPhone, iPadアプリを同時に開発する必要があったため、AR Foundationを選択しました。

Unityのプロジェクトは、一つになっており、ビルドの際にPlatform切り替えや実行時にデバイス情報を判定しながらデバイスごとのUIや処理を切り替えています。

そうすることで、後述の通信機構やMR空間共有機構をコードベースで同じものを利用することができます。

通信機構を活用したMR空間共有

デバイス間の通信方式としては、今回はWebSocketを利用しました。

iPhoneのテザリング機能を使いMagic LeapとiPad Proを接続させ、そのローカルエリアネットワーク内で、iPhoneをサーバ、Magic LeapとiPad Proをクライアントとして通信を行っています。

このデバイス間の通信機構によりMagic Leap 1,iPhone,iPad Proがデバイスの3D空間上の座標やMR空間上の3Dオブジェクトの座標を交換し合う仕組みが「タブレットデバイスを組み合わせた観客視点」や「スマホのコントローラー化」を実現するベースになっています。

 

ひとまずMagic LeapとiOSで通信できれば通信方式は何でもよかったのですが、WebSocketをサポートしているデバイスは多く他の用途などにも広く流用できそうなので、WebSocketにしました。

下記のデモは、マイコン搭載のIoTデバイスのM5Stack Fireを使用しジャイロセンサーの情報をMagic Leapに送信することで、3Dモデルを手にとって見るようなユーザ体験を実現しているデモです。

こちらのデモもこれまでと同じ通信機構を流用して簡単に作成することができました。

【M5Stack Fireを利用した、小物を手に取っているかのように3Dモデルを閲覧できるデモ】

ハンドトラッキングによるアプリ操作

ハンドトラッキングによる操作については、AR Foundationの機能ではなく、Magic LeapのSDKが提供しているAPIを使用しました。

今回のアプリは、Magic LeapとiOSのクロスプラットフォームに近いような構成になっていますが、それほど難しいことをせずに共存させることができました。

ボディトラッキングを活用した試着

ボディトラッキングによる試着については、AR Foundationの機能を使用しています。

今回は、座標と角度だけ合わせるシンプルなものでしたが、本格的に人の体に合わせようと思うと、APIから取得された値のチューニング、モデルの用意、骨格サイズをモデルに反映など、課題が多く、ハッカソンの期間でほどほどのクオリティにもっていくのは難しそうでした。

まとめ

ハッカソン期間中に思いついた機能を詰め込んだアプリのため、取り留めのない説明になってしまいましたが、読んでいただいた方に、参考になるような点があれば幸いです。

Magic Leapは、会社でMRアプリ開発をしていないと、なかなか手に触れる機会が少ないデバイスかとは思いますが、開発環境が充実しておりUnityを使えば思った以上に簡単に開発できます。

そのため、MagicLeap Challengeのようなデバイス貸出型のイベントなどを利用して、ぜひ体験していただきたいデバイスです。

もし、第３回目が実施されることがあれば、皆様も参加してみては、いかがでしょうか。