WebXRについて【2021】

AR

WebXRとは


過去、”WebVR”というのがあったのですが、VRに限らず使うものとしてWebXRが誕生しました。
WebXRの仕様、対応ブラウザ、JavaScriptライブラリなどについて調べて御紹介します。

まずはWikipediaの記載やMozillaの考え方を見比べてみましょう。

Wikipedia より

WebXR（ウェブエックスアール）とは、ウェブブラウザでデバイスの位置，向き，加速度などの情報を取得するために用いられていたJavaScriptのアプリケーションプログラミングインタフェース（API）である。

https://ja.wikipedia.org/wiki/WebXR

Mozillaの見解

WebXR は、仮想世界を提示するため（仮想現実、virtual reality、または VR）に、またはグラフィック画像を現実世界に追加するため（拡張現実、augmented reality、または AR）に設計されたハードウェアへの 3D シーンのレンダリングをサポートするために一緒に使用される標準のグループです。 
WebXR デバイス API は WebXR 機能セットのコアを実装し、出力デバイスの選択を管理し、適切なフレームレートで選択したデバイスに 3D シーンをレンダリングし、入力コントローラーを使用して作成されたモーションベクトルを管理します。

https://developer.mozilla.org/ja/docs/Web/API/WebXR_Device_API

英語版

WebXR is a group of standards which are used together to support rendering 3D scenes to hardware designed for presenting virtual worlds (virtual reality, or VR), or for adding graphical imagery to the real world, (augmented reality, or AR). 
The WebXR Device API implements the core of the WebXR feature set, managing the selection of output devices, render the 3D scene to the chosen device at the appropriate frame rate, and manage motion vectors created using input controllers.

https://developer.mozilla.org/en-US/docs/Web/API/WebXR_Device_API


つまり、
「XRデバイスの上で動くブラウザー、
　そのブラウザーでアクセス中のWebアプリケーションに、
　XRデバイスの加速度センサーなどの値を渡す」必要があり、その仕様がWebXRというわけですね。

Wikipediaの方では、WebXRとはAPIのことである、と言い切ってますね。
一方で、MozillaはWebXRとWebXR Device APIのことを分けて記述しています。どうやら、APIに限らずに関連する技術をWebXRとしているようです。Mozillaの資料を読んでみると”Optimizing memory use (使用メモリの最適化?)”などが記載されている「WebXRパフォーマンスガイド ~WebXRアプリケーションのパフォーマンスを最適化するのに役立つ推奨事項とヒント~」というぺージがあります。これからドキュメントが更新されていけばいくほど、2つが乖離するのかも知れません。

誰が定義しているのか


W3Cが策定中で、以下の作業草案（Working Draft）が提出されています。
https://www.w3.org/TR/webxr/

W3C (World Wide Web Consortium) とはHTMLなどのWeb関連技術を策定している団体です。「俺のHTMLは～～」と属人的に雰囲気でプログラミング言語が成り立っているわけでなく、世界規模で”HTML5はこういうモノだ”というのが決まっているわけです。
ちなみにHTML5は最初の草案が2008年、オフィシャルに勧告されたのが2014年だそうです。
https://www.w3.org/standards/history/html5

WebXRの最初の草案が2019年なので、勧告はいつになることやら…
W3Cの構成員は勧告されるまで待っているわけでは無く、GoogleやMozillaなどブラウザを作っている企業や団体はWebXR対応すべくブラウザーの改修を進めています。
以下の通り、2021年4月時点でMicrosoft Edge (Chromiumベース)、Chrome (Chromiumベース)のみが一部対応しているような状況です。そもそも仕様が標準化されておらず更新されているので、完全対応も何も無いため、一部対応となっている？んでしょうか。

各ブラウザのWebXR対応状況

WebXR Device API | Can I use... Support tables for HTML5, CSS3, etc
"Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.
caniuse.com

WebVRはFirefoxが対応していました。
つまり、VRだけの用途でFirefoxを使う前提が作れるなら、WebVRを使うという選択肢もあるように思えてきます。ただ、将来的には先が見えているので、選択肢としてはスジが悪いかもしれません。

Microsoft Edgeが対応しているのは単純にChromiumベースだからだと思うのですが、MR (Mixed Reality)を推進しているMicrosoftですから、コードをいじっているように思います。
JavaScriptのライブラリであるThree.js や A-frameを使ってみたので、そちらで触れます。

Firefoxですが、Firefox Reality というXR向けのブラウザがあり、そちらもWebXR対応に取り組んでいます。

各VRデバイスの対応状況　

Oculus

Oculusブラウザー7.0以降では、完全没入型(6DOF) VRウェブエクスペリエンスの最新の標準であるWebXRがデフォルトでサポートされています。WebXRは、標準ではないものの多くのブラウザーで採用されていたWebVR APIの進化形です。Oculusブラウザー9.0以降では、WebVRはサポートされません。

https://developer.oculus.com/webxr/

6DOFというのは、加速度センサーなどの情報を用いて移動情報も取り込んでいる状態です。
（下図いらすとやさまの画像を参照）

Oculus内のブラウザーでXR対応のWebサイトにアクセスすると、MRアプリのように動く…というわけですね。
どちらかというと、WebVRには対応しないと明言している方がインパクトが大きいかも知れません。

Hololens

新しい Microsoft Edge には、没入型 Web エクスペリエンスを作成するための新しい標準 (WebVR の置き換え) である WebXR のサポートが含まれています。 多くのイマーシブ Web エクスペリエンスは、VR を念頭に置いて設計されました (視野を仮想環境に置き換えます)、これらのエクスペリエンスは HoloLens 2 でもサポートされています。

https://docs.microsoft.com/ja-jp/hololens/hololens-insider

Hololensが対応しているというか、上述の通り Microsoft EdgeがWebXR対応をしているので利用可能となっています。PCのEdgeブラウザでXR対応Webサイトを開いたときにXRモードに突入することがあるので、MicrosoftはMRに本気でありPCユーザーを気にしてないのかも知れませんね。

HTC Vive

個別のブラウザがあるというよりも、WebXR対応しているFirefox Realityを利用することができます。

ということで、
Oculus、Hololens、HTC Viveと主要なVRデバイスはWebXR対応が可能というわけですね。
かつてのApache Cordova (PhoneGap)時代のようなWebベースのアプリが増えるかも知れません。そして歴史は繰り返すのだとしたら、作り込みが必要なアプリはWebベースでない技術で開発する方向で進めた方が良いのだろうなとは思います。2011年にPhoneGap開発元を買収したAdobeですが、2020年にメンテナンスから手を引きました。
ゲームなどを作り込むのであれば、Unityや Unreal Engine、Androidアプリとして開発した方が将来性がありそうです。

どうすればWebXRアプリとして動くサイトを開発できるのか


そもそも仕様については草案がソレです。
また、草案を作成しているW3Cワーキンググループがあるので、その資料を読むということがあります。
https://immersiveweb.dev/

これはある意味で、「現時点でWebXRが、何が出来ないのかを知る」という作業になるのかなと思います。

JavaScriptライブラリを使う

上記のワーキンググループのサイトでいくつかWebXRを実現するためのJavaScriptライブラリが紹介されています。アルファベット順に並んでいるだけで、どれが一番マッチするかは自分で調べる必要があります。一応一言メモを書いてみます。(2021年4月時点の情報)

  • A-Frame : Three.jsベースのフレームワーク(ライブラリ)
  • Babylon.js : 2015年頃に公開された、レンダリングエンジン。
  • model-viewer : モデルを表示するだけのライブラリ…
  • p5.xr : WebXRライブラリとして使って戦っていけるのか不明…
  • PlayCanvas : 2014年スタート、ブラウザ向けに作られたWebGL/HTML5ゲームエンジン。
  • React 360 : Facebookのだが既に捨ててそう
  • Sumerian : AWSのサービス。WebGL。Amazon側にはサポート情報書いてないけど…
  • Three.js : WebGLレンダラー。
  • Unity
  • Verge3D : Blenderなどの3Dソフトで使える商用ライブラリ。
  • Wonderland Engine： 2020年4月時点で Version0.8.4 の開発中プラットフォーム。

ほかにもVRライブラリ、ARライブラリなどありますが、現時点でWebXR側でリストアップしているのは上記のみです。

まとめ

  • WebXRとは、デバイスが取得した情報をWebサイト(ブラウザ)に渡すためのインターフェースなどの技術仕様のこと。特にAPIについては WebXR Device APIと呼ぶ。
  • まだW3Cより勧告されていないので、草案＝WebXRの仕様。
  • ブラウザは、safari以外は大体WebXR対応。
  • VRデバイスは、メジャーどころはWebXR対応。
    – OculusブラウザーはWeb”VR”非対応
    – FireFox Reality は WebVRとWebXR対応
  • 仕様に基づいてゴリればWebXRサイト作ることが出来るが、JavaScriptライブラリを使うが吉。

別の記事でJavaScriptライブラリを使ってみて、WebXRサイトを作ってみます。

タイトルとURLをコピーしました