Apple Vision ProのBabylon.js-WebXRでの「つかむ」と「テレポート」機能について

Apple Vision ProはWebXRに対応しています。そのため、Apple Vision ProのSafariでWebXRに対応しているサイトを表示すると、VRモードにすることができます。ただし、現時点ではVRのみ対応で、ARは対応していません。

Babylon.jsもWebXRに対応しており、ブラウザで作ったコンテンツのVR表示ができます。しかし、提供されているサンプルコードではものを掴む機能がなく、またテレポート移動がうまく動きませんでした。

そこで、今回は掴むと移動をどうやって実現するかを解説します。

なお、この記事の詳細は技術書典16で頒布予定の「Babylon.jsレシピ集Vol.4」でもう少し詳しく解説予定です。

2024/5/25までにこちらに公開予定です。

この記事では、仕組みの概要とApple Vision Proで実行可能なソースコードだけ記載します。

1. 「掴む」機能

仮想空間のオブジェクトを掴んで動かす機能です。基本的な機能ですが、Babylon.jsのDocumentation、Forumを見る限り存在しなかったので作りました。

ソースコードはこちらにあります。この場合の「掴む」とは、人差し指と親指をくっつける動作です。

Apple Vision ProのSafariでこのURLを表示し、右下に表示されるHMDアイコンを選択すると、VRモードになります。

VRモードで、sphereに手を向けてrayを当てて、人差し指と親指をくっつけると、くっつけている間だけsphereを移動させることができます。

指を離すとsphereは止まります。

主な手順は以下の通りです。詳細は上記のPlaygroundのソースコードをご確認ください。

(1) WebXRを有効にする

(2) Rayを飛ばして当たったオブジェクトを判定する

(3) Rayが当たり続けているオブジェクトを動かす

(4) Rayが当たらなくなったらオブジェクトの移動を止める

動作確認例です。

仮想空間の中で移動する機能です。Babylon.jsのWebXR機能には、VRコントローラを使って移動する機能が入っています。調べたところ、Apple Vision Proのハンドトラッキングでも動作しました。

テレポート機能の使い方を説明します。

WebXRモードで空間に入り、右手または左手の人差し指と親指をくっつけます。すると、Rayの先に床がある場合、テレポート用のサークルが表示されます。

手を動かして移動先を決めたら３秒待ちます。すると、３秒後に決めた移動先にテレポートできます。

3秒ではなくもっと早く移動したい場合、移動までの時間を変更することができます。変更するには、このように書きます。

この場合、timeToTeleportの値が1000なので、1000ミリ秒=１秒後に移動します。500にすると0.5秒後に移動します。

先ほどの掴む機能のコードを使用し、テレポート移動までの時間を１秒にした場合のサンプルコードです。

Apple Vision ProでのWebXR対応はまだこれからで、Babylon.jsの対応も同様です。

今回は、「掴む」と「移動」の実現方法を紹介しました。基本機能ではありますが、これでできることが広がったと思います。

次回はもう少し別の機能やサンプルアプリみたいなものを作ってみたいと思います。