ウェブブラウザでXRを身近にするWebXRとは？
WebXRとはウェブブラウザ上でXRを可能にするためのプロジェクトです。 XRアプリに対し以下のような機能を提供するのをゴールにしています。
・デバイスのXR機能が利用可能か検知する
・XRデバイスの機能(XRSession)を呼び出す
・XRデバイスや入力デバイスの状態(ポーズ等)をポーリングする
・適切なフレームレートでXRデバイスに画像を描画する(WebGL API利用)
これらの機能を実現していくにあたり、センサやヘッドマウントディスプレイを含めたAR/VRデバイスにアクセスするための標準的な仕様がWeb XR Device APIとして策定されています。
XR関連の標準化には、OpenGL等のグラフィックス関連の標準化団体であるKhronos Groupが2016年から推進しているOpenXRというのがありますが、W3Cが2018年にImmersive Web WGを発足してGoogle, Microsoft, Mozillaなどのメンバーが中心となって推進しているのが、JavaScript APIによるXRの標準化仕様であるWebXRとなっています。(WebXR以前にもWebVRというVR向けの仕様がありましたが、現在はARやMRにも対応すべくWebXRの中に統合されています。)
OpenXRがネイティブ(ハードウェアに直接アクセス)向けであるのに対し、WebXRはブラウザ向けに抽象化するAPIを策定しているといったイメージになります。
WebXRでは、ハードウェアを限定していませんが、以下のようなハードウェアに搭載されているブラウザで利用が可能となっています。
ARCore対応デバイス、Google Daydream、HTC Vive、Magic Leap One、Microsoft Hololens、Oculus Rift、Samsung Gear VR、Windows Mixed Reality headsets
(iOSのSafariは非対応ですが、MozillaがProject WebXR Viewerというのを立ち上げているようです)
また、WebXR Device APIをサポートするOSSのライブラリとして、three.js、A-Frame、AR.jsなどがあります。
WebXRのユースケース
WebXRによってウェブブラウザでXRアプリが動くようになるため、XRコンテンツの裾野を広げ、ロングテールな形での展開が期待されます。一般的に各プラットフォームごとにソフトウェアを開発するとなると開発コストが膨大になります。効率的な開発を行うにはデバイスに依存しない開発環境(APIやデバッグ環境など)が求められます。
WebXRのユースケースとして、Immersive WebのAPIの説明には以下のような例が紹介されています。
・映像配信：360°ビデオでの自由な視点移動
・構造物やデータの可視化：ショッピング、検索
・アート体験：現実空間をキャンバスにしたアート
WebXRアプリの実装
WebXRのsamplesで公開されているコードをもとに、実装を見ていきたいと思います。ここでは、最近Chrome 81でサポートが発表された、WebXR Hit Test APIを用いて、現実空間に仮想オブジェクトを配置するXRアプリの実装を見ていきたいと思います。
Hit Testが使えるようになったことで平面などを認識し、仮想オブジェクトを配置するなど、より現実空間とリンクしたXR体験が可能になります。
WebXRアプリの大まかな処理の流れは以下のようになります。
1. XRデバイスが利用できるかチェック
2. XRデバイスが利用できる場合、XRセッションを要求
3. XRセッション内でのRender loopの実行
4. Render loop処理(各XRフレームでの描画処理)
5. XRセッションの終了
- XRデバイスが利用できるかチェック
2. XRデバイスが利用できる場合、XRセッションを要求
3. XRセッション内でのRender loopの実行
4. Render loop処理(各XRフレームでの描画処理)
仮想オブジェクトの配置に関しては、onSessionStarted関数内で、sessionに対しselectのEventListenerをセットしておき、イベント発生時に、reticle.visibleであれば、addARObjectAt関数をコールして、オブジェクトを配置するという処理を行っています。
5. XRセッションの終了
まとめ
WebXRとはウェブブラウザ上でXRを可能にするため、W3Cが2018年にImmersive Web WGを発足してGoogle, Microsoft, Mozillaなどのメンバーが中心となって推進しているJavascript APIによるXRの標準APIです。ウェブブラウザ上でXRコンテンツが気軽に楽しめるようになれば、もっとXRの応用が加速すると考えられます。アプリのデバッグも含めた効率的な開発のためには、共通的な仕様で各プラットフォームの差異を抽象化するライブラリや開発フレームワークといったものも必要になってくるでしょう。NTTでは、その手の仕組みを創る仕事に興味のある仲間を募集中です。連絡お待ちしています。
