Unity + WebXR開発メモ（Oculus Quest、Chrome、Firefox対応）

最終更新日：2022年06月28日

Unityでブラウザで動作するVRアプリを開発する方法についてまとめています。

更新履歴

（2022年6月28日）ブラウザのWebXR対応についてPico Neo 3 Linkを追加
（2022年5月30日）Multiviewレンダリングについて追記
（2022年5月6日）Oculus Browserの名前がMeta Quest Browserに変更されたのを反映
（2022年3月19日）「PCでQuestのブラウザのURLを入力するには」にadbコマンドを使用する方法を追加
（2022年1月15日）「コントローラーのグラフィックスを表示するには」を追加

ブラウザのVR/AR対応について

WebXR Device APIをはじめとした一連のAPIがあり、ブラウザでVR/ARアプリケーションを動かすことができます。いわゆるWebXR全体の概況をつかむにはいっこうさんの記事がおすすめです。

• #WebXR ( WebVR/WebAR ) の現状確認 2021 Winter

Oculus Quest

Oculus Questの標準ブラウザ（Meta Quest Browser）はWebXRに対応しています。WebXR対応ページに設置されているボタンを押すとVRモードに入り、コントローラーのOculusボタンを押すとVRモードを抜けるようになっています。

Meta Quest BrowserはChromiumベースで、下記ページにアップデート情報があります。

• Oculus Browser Developer Release Notes | Oculus Developers

Chrome / Firefox（Windows）

WindowsのChromeおよびFirefoxは現在標準でWebXRに対応しています。別途OculusソフトウェアやSteam VRのインストールが必要です。ChromeとFirefoxはKhronosのOpenXR規格を利用しており、ページに設置されているVRモードのボタンを押すと、現在アクティブになっているOpenXRランタイムを使用してVRモードに入ります。ヘッドセットをはずすとVRモードを抜けます。OculusソフトウェアやSteam VRの設定で、使用するOpenXRランタイムを選択します（下記画像を参照）。

Pico Neo 3 Link

Pico Neo 3 Linkに標準でインストールされているブラウザ（Picoブラウザ）もWebXR Device APIに対応しており、Quest同様VRモードに入れます。User Agentを見る限りChromiumベースです。

UnityでWebXRアプリを作るには

De-Panther氏のWebXR Exportを使用すると、UnityのWebGLビルドを使用してブラウザで動作するVRアプリケーションを開発できます。

なお、Unity公式によるWebXRサポートは、ロードマップによるとUnder Consideration（検討中）になっています（2022年1月現在）。現在WebGLビルドのモバイル対応を優先している雰囲気で、だいぶ先になりそうです。

パフォーマンスは大丈夫？

ブラウザでVRアプリを動かす場合に気になるのは実用的に動くかどうかでしょう。

特にQuestにおいて、WebXR Exportを使用して出力したWebXRアプリは、以前（2020年4月頃）はフレームレートがとても低かったり、起動に数十秒かかったりと厳しかったのですが、2022年1月現在、簡単なコンテンツであれば起動後いくらか待つと90fps出るようになったり（想像ですが、V8のLiftoffとTurboFanの2段構えのコンパイラの挙動でしょうか）、起動時間も最短で数秒から済むようになったりと大幅に状況が改善しています。

今のところカメラを2つ使用してレンダリングしておりMultiviewレンダリングをしていないため、VRモードでは描画に倍のCPUコストがかかります。特にQuestではCPUが弱いためCPUバウンドになりがちなので、注意する必要があります。

あくまでウェブページなので、大容量のアセットのコンテンツはページ表示の待ち時間やサーバー料金で厳しいです。特にテクスチャは最小限に留めてインポート設定に注意し、場合によってはAssetBundleを利用する必要がありそうです。

また、アセットの多いコンテンツを再生すると（特にQuestで）メモリオーバーフローのエラーが出るので注意が必要です。

WebXR Exportを使用する

WebXR Exportの導入方法はこちらにあります。以下、サンプルシーンをビルドする手順のメモです。

• 新規プロジェクトを作成し、プラットフォームをWebGLにする
• Project Settings > Package Managerを開いて、Scoped Registriesに以下を追加
  • Name: OpenUPM
  • URL: https://package.openupm.com
  • Scope(s): com.de-panther
• Window > Package ManagerでMy Registriesに変更するとWebXR Export、WebXR Interactionsが出てくるのでインストール
• WebXR InteractionsパッケージのSamplesからSample Sceneをインポート
• Desertシーンを開く（Assets/Samples/WebXR Interactions/[version]-preview/Sample Scene/Scenes/Desertにあります）
• Project Settings > XR Plug-in ManagementのWebGLタブでWebXR Exportにチェックを入れる
• Window > WebXR > Copy WebGLTemplates を実行
• Player Settings > Publishing SettingsのDecompression Fallbackをオンにしておく（サーバーがBrotli圧縮に対応していない場合に備えて）
• Player Settings > Resolution and PresentationのWebGL TemplateでWebXR2020またはWebXRFullView2020あたりを選択してビルド（WebXR、WebXRFullViewだと動きません）

あとは生成されたページをブラウザで開けばオーケーです。

下記スライドも参照してください（古いので注意点くらいしか参考にならないかも……そのうちページのほうに移植します）。

• Unity WebXR ExporterでVR刺身タンポポを動かしてみた

コントローラーのグラフィックスを表示するには

さらにWebXR Input Profiles Loaderをインストールすると、WebXR Input Profilesを使用して、接続されているヘッドセットに応じてコントローラーのグラフィックスが変化します。なお、ビルド後のサイズが3MBほど大きくなります。

以下の容量でインストールできます。

• Project Settings > Package ManagerのOpenUPMのScope(s)にcom.attenederを追加する
• Package ManagerのMy RegistriesからWebXR Input Profiles Loaderパッケージをインストールする
• Project Settings > Graphicsの下のほうにあるPreload Shadersに、ProjectウィンドウのPackages/WebXR Input Profiles Loader/Runtime/ShaderVariantsに入っているGLTFShaderVariantsを登録する

WebXRCameraSetについて

WebXR ExportのカメラリグはWebXRCameraSetプレハブを使用します。WebXRCameraSet/Camerasが通常時・VRモード・ARモードのカメラを子に持っており、WebXRCamera.csがモードによってカメラを切り替えています。

なお、カメラの子にゲームオブジェクトをアタッチしたい場合は、CameraMainではなくCameraFollowerの子にする必要があります（CameraMainだとビルドしたときに動かなくなります）。

トラッキング基準位置を変更するには

Project Settings > XR Plug-in Management > WebXR > VR Required Reference SpaceをLocalにするとWebXRCameraSetプレハブの位置が頭の位置に、Local_floorにすると床の位置になります。

コントローラーの入力を取得するには

WebXRCameraSetプレハブのhandL、handRオブジェクトにアタッチされているWebXRController.csのGetAxis2DやGetButtonメソッドでコントローラーの状態を取得できます。例えば、

using WebXR;
...
[SerializeField] WebXRController leftHandWebXRController;
...
leftHandWebXRController.GetAxis2D(WebXRController.Axis2DTypes.Thumbstick);

でOculus Questのサムスティックの入力値が取得できます。

XR Interaction Toolkitは使える？

2022年1月現在まだ使用できません。WebXRCameraSetはWebXR Interactionsを使用するリグになっており、今のところWebXR InteractionsはXR Interaction Toolkitとは無関係なサンプルになっています。

• Support for Unity XR Interaction Toolkit · Issue #95 · De-Panther/unity-webxr-export

エディタでVRモードで再生するには

WebXRCameraSetはOculus XR Pluginでも動作しますので、エディタからOculus Linkで再生できます。Project Settings > XR Plugin ManagementでStandaloneタブのOculusのチェックを入れて、プラットフォームをWindowsに変更して再生してみてください。

また、そのままビルドしてOculus Linkで動作する実行ファイルを作ることも可能です。

ビルドサイズを小さくするには

「Unityのビルドサイズを小さくするには」にWebGLビルドを省サイズ化する方法についてまとめてみました。

Meta Quest Browserでデベロッパーツールを使用するには

PCのChromeからリモートのデベロッパーツールを開くことができます。開発者モードにしたQuestをUSB接続している（adb devicesで表示される）状態で、PCのChromeで chrome://inspect/#devices を開いて少々待つとQuestが検索表示されますので、inspectをクリックしてください。

PCでQuestのブラウザのURLを入力するには

QuestのソフトウェアキーボードでURLを入力するのは大変です。

Questの開発支援ツールであるOculus Developer Hubをインストールすると、Device ManagerタブのDevice Actions > Oculus BrowserにURLを入力して簡単にページを開くことができます。

また、上記のChromeのデベロッパーツールでもURLを入力して開くことができます。

下記adbコマンドでも行けます。

$ adb shell am start -n "com.oculus.vrshell/.MainActivity" -d apk://com.oculus.browser -e uri https://framesynthesis.jp/