WebVRをやる際のOculus Questのデバッグ方法を考える
Oculus Questのデバッグ方法がわからなくて少し詰まったので共有します。
※この方法は現在私の知っている最新のものを記述していきます。新しい情報が分かり次第更新します。
セットアップ
STEP1 Oculus Questを開発者モードにする
Oculus Questのアプリから開発者モードをONにします。
Introduction to Oculus Browser
STEP2 PCとOculus Questをつなぐ
Debug Your Browser Content
このページが参考になります
-
Oculus QuestとパソコンをＵＳＢケーブルでつなぎます
Oculus Questには購入したときにUSB Type-C to Type-Cのケーブルがついています。パソコンにUSB-Type-Cを指すことができない場合には別途必要 -
Android Platform Toolsをダウンロードしてadbコマンドが打てるようにする(パスを通す)
-
adb devicesでOculusが接続されていることを確認、ここで見つからない場合はケーブルをつなぎなおし、Oculus側でPCが接続することを許可をするとできるようになります。
STEP3 Chromeでリモートデバイスをデバッグする
- Chromeの開発者モードを
F11を押して開きます。 -
3つの点が縦に並んでいるボタン→More tools→Remote devicesを開きます。
- 開発時に使用しているブラウザを
Inspectで開きます。
これでOculus見ているウェブブラウザにアクセスすることができました。こちらからVRのデバイスの確認であったり、コントローラの確認をすることができるようになりました。
※ゲームパッドの接続には別途WebVRの手順が必要です
VRのディスプレイが有効になっている状態でwindow.navigator.getGamepadsで接続されているゲームパッドを確認する
これで現在接続されているOculusのコントローラーの情報を確認できるようになりました
補足
Oculus Questで開発をしているとどうしても VR⇔現実‘での開発必要となります。
STEP4 Oculus Quest本体を頭につけたまま少しずらす
Oculus Questで開発をしているとどうしても VR⇔現実‘での開発必要となります。Oculus Questは外してから一定時間たつとブラウザの表示が切れてしまい、コントローラーの出力がブラウザで受け取れなくなってしまいます。
その為にOculus Questを45度くらいずらすと、Oculus Questの接続を保ったままの状態を作り出せます。
45度ずらして、Oculus Quest ⇔ エディタを繰り返えすとかなりよい開発者体験が生まれました。
STEP5 ソースコードを反映
ソースコードに変更があったらリアルタイムに、Oculus Quest側のブラウザを自動的にリロードをするようにしています。 Oculusで開発する際にはソースコードの変更を検知してブラウザをリロードしてくれる機能をのあるもの、私はPlayCanvasで開発をしているので、エディター上で直接いじってしまっておりますがwebpack gulpでも同様の機能があると思いますので、そちらを使用して開発をするとかなり開発をしやすいです。