インターンの若林です。
5月のオフ会で、以前から作っていたVR KindleReaderアプリを多くの方に体験をしていただきました。あの体験会は自分にとってとても良い機会で、貴重なフィードバックを沢山頂けました。
あれから度々アップデートを繰り返し、今回アプリをAppLabとSideQuestでリリースしました!
App説明
- 視線によってページ送りできるKindleReaderアプリ
(ストア上ではストア審査の都合上ブラウザアプリとしてあります) - ブラウザアプリという建前上、初期起動時はGoogle.comにアクセスされます。Menu画面よりJPを選択し、KindleCloudReaderへアクセスしてください。
- ブラウザ左右のバーを注視するとページ送りができます。注視し続けると連続してページ送りができます。
- 視線とピンチ操作によって入力可能なキーボード
- キーボードの操作方法
- 入力したいキーに視線を合わせ、ピンチ操作すると文字入力されます。
- 視線入力のみ対応しています。 - アイトラッキングの精度を高める為、本体設定よりキャリブレーションを行う事をお勧めします。
設定アプリ>動きのトラッキング>アイトラッキング > アイトラッキングの調整>やり直し - アプリ内の操作は視線とハンドジェスチャーのみで完結されます。
- Quest2でもコントローラー・ハンドジェスチャーで使用可能ですが、アイトラが使えなかったり最適化されていない部分があります。
インストール方法
AppLab
- 👆こちらのリンクから購入できます。
- AppLabのアプリのため、ダイレクトリンクからのみインスール可能です。
SideQuest
- SideQuestからもインストールできます。
元々はKindleを読む為だけのアプリの予定でしたが、QuestのSDKを触っているうちに作りたいものが増え、視線入力キーボードまで実装していました。
ハンズフリーかつ手を下ろした状態でKindleを読めるのはかなり面白い体験になっています。手を使わなくなると姿勢も楽にしたくなり、今は椅子をリクライニングして半分寝そべりながり読んだりしています。
また、タイピングし始めた頃はゆっくりだったけどブラインドタッチで速く入力できるように、視線とピンチ操作のキー入力も慣れるまでは少しやりずらいですが、慣れると速く入力できるようになります。キー入力においても手は下ろした状態でピンチ操作さえすれば大丈夫です。このキー入力はなかなか面白い感覚なので、QuestProユーザーの皆さんには一度ぜひ試してもらいたいです。
しかし、視線入力のしやすさはQuestProのアイトラ精度に大きく左右されます。
アイトラのキャリブレーションがうまく行くと狙ったキーがしっかり入力されますが、HMDの装着が少しづれると隣のキーが入力されるということも起きます。
また、オフ会で多くの方に体験してもらって気づいたのは、メガネの種類によっても精度が変わります。自分のメガネはわりかし大きい円形のレンズで縁が細いので精度への影響は少なかったですが、細いレンズのものだったりすると影響は大きそうです。自分の環境だけでデバッグしていると全く気づかないものですね...
アイトラッキングについて、他にもいろいろ知見があったので共有します。
アイトラッキング
視線によりキー入力処理は思っていたより厄介なものでした。
人間の目の動きは想像以上に速くてトラッキングが追いつかず、入力値がよく飛びます。トラッキング精度しきい値を低くすれば、トラッキングが飛ぶことは少なくなると思いますが、キーボード入力には一定以上の精度は必要です。
また、視線がキーにホバーした時や入力した際の(キーのハイライトや入力モーションなどの)処理中に、視線は次に入力したいキーへ動くので処理が詰まることがよくありました。そこでキャッシュを作り、ホバーされたらキーを入れ、ホバーが外れたらそのキーキャッシュを消すなどの対策をし、順番に処理を行いました。
また、キーのサイズも重要です。小さすぎたら視線がうまく当たらないし、大きすぎてもスペースをとってしまい邪魔です。そんな時に見つけたのがマイクロソフトのMRガイドラインです。ここに具体的な指標が書かれていました。
あなたのデザインでは、ユーザーにとって快適で心地よい体験を作り出すために、ターゲットの視角は2°以上の視覚的な角度を基準にすることをお勧めします。
例えば、あなたが腕を伸ばしたときの親指の爪の視角は約2°です。
具体的で分かりやすい!アプリ内で表示される手のモデル(の親指の太さを)基準にキーサイズを調整しました。確かにキーサイズと入力精度がバランスするサイズがこのあたりでした。ありがとうマイクロソフト!さすがです!
マイクロソフトのガイドラインにもあるように視線入力は、他のインターフェイスと違い常に入力されている為、ユーザーの意思と反したアプリ動作をしてイラつかせる原因になりかねません。今回でいうと、Webを使っているときに勝手にキー入力されることが多々ありました。これは使っている側からするとかなりのストレスになります。Kindleを読んでいるときには、キーが入力されないような処理を足し、UXを向上させました。
バーチャルキーボード UI
バーチャルキーボードを実装するに当たり、キーを素早く入力すると押し込まれた状態で固まるという問題がありました。
一つ一つのキーの実装にはuGUIのボタンを利用しており、キーを入力するとオブジェクトの座標を変えることで押し込みのアニメーションをしていました。
uGUIはCanvas内にあり、Canvas内の要素に変化があるとCanvas内の要素が全て再描画されます。今回の場合だと、押し込みアニメーションする間、44個全てのキーが再描画されます。また、キーオブジェクトに含まれるColliderも一緒に動くことになるので負荷も高くなります。
この問題を解決する為、uGUIを使用せずに一つ一つのキーをシェーダーで描画することにしました。押し込みのアニメーションについては、オブジェクト座標を変更せずに頂点シェーダーを動かすことで代用しました。頂点シェーダーを動かすことにより、Colliderを動かさずにキーのアニメーションだけ実現できるので無駄に負荷をかけません。シェーダーを使ったことによりどんなに素早く入力してもフリーズせずに正常に動作させることができました。
VisionProに期待すること
QuestProのアイトラを使いアプリを作ってみて気づいたこととしては、QuestProのアイトラはメタバース・ゲームに用途として振り切って搭載されたものだと思いました。QuestProのアイトラ精度は結構良い方だと思いますが、それはあくまでキャラクターの目をアイトラで同期したり、フォービエイテッドレンダリングのように動作を軽くする為が目的で、今回のようにUIを操作するには少し厳しいと感じました。
そこで期待するのが、AppleVisionProになります。自身で謳うようにVisionProはコンピューティング目的で使用するデバイスになり、その為にはアイトラ精度はQuestProより数段高くないと厳しいと思います。楽しみですね。視線でUIを操作できるものを作るということはかなり大変だと思います。
また、VisionProとQuestProのアイトラ方式は若干違います。詳しくは、アイトラ用カメラの取り付け位置が変わっています。
QuestProはレンズ外の縁にカメラとLEDが載っていて、カメラで直接目を撮っています。
しかし、VisionProはカメラと目の間にレンズがはさまることで、レンズを通して目をトラッキングすることになります。
レンズを通すことで歪みが出るでしょうし、そのままのデータを使う訳にはいかないのでより処理が多くなることが考えられます。
QuestProより高い精度を出さないといけないのにQuestProより複雑なことをしているVisionPro、期待しかありません。
そして、なんと9月のVisionProデベロッパーラボに行ける事になったので、その辺りも注目して体験してきたいと思います!おそらく一日VisionProを使って開発できるようなので、プレスの方達よりも長時間体験できるとは「デベロッパーで良かった!」の一言に尽きますねw 今からワクワクです!
KindleReaderアプリを使った感想やフィードバックなどありましたら、Discordなどでぜひ共有をお願いします!