Webにおける表現力が年々向上しています。それらは需要があり、かつAPIが増えていくことによってもたらされます。今回のその中でも新しいAPIであるWebXRについて紹介します。

WebXRがどういったもので、何が実現できるのかを学べば、きっと面白いWebアプリケーションが開発できるでしょう。

1. はじめに

WebXRは、WebVRとWebARを統合して新しく作られたAPIです。ARやVRといった領域ではさらにMR（Mixed Reallity）がありますが、それらを一括して扱えるようにしたものといえます。

WebXRは正しくはWebXR Device APIといいます。つまりVRやARを利用するデバイスにおいて、Webブラウザ連携できるものを対象としたAPIになります。

2. WebXR Device APIの基礎

APIの概要と目的

WebXR Device APIが提供するのは以下の機能です。

  • セッション
  • フレームループ
  • 空間
  • ビュー
  • 幾何プリミティブ
  • 姿勢
  • 入力
  • レイヤー
  • WebGLの構築
  • アンカー
  • 深度センシング
  • ヒットテスト
  • 照明の推定

実際にはこれらのAPI一つでできるWebXRが実現できるわけではなく、複合的に利用する形になります。

ブラウザの対応状況

WebXR Device API | Can I use... Support tables for HTML5, CSS3, etcによれば、まだGoogle Chromeで一部が対応されている程度となっています。このAPIの仕組み上、デスクトップブラウザよりもスマートフォンやHMD（ヘッドマウントディスプレイ）での対応が期待されるでしょう。

iOS/Safariでは、iOS15以降で実験的な機能としてAPIが使えるようになっています。とはいえ実用レベルではなく、APIが存在するだけといったものです。iPhoneやiPadについてはまだまだ時間がかかりそうです。

しかし、AppleはVision Proを開発しています。このVision ProはSafariも内蔵していますので、WebXR関連のAPIを先んじて実装する可能性は十分に考えられるでしょう。

3. WebXRの開発

必要なツールとライブラリ

WebXRを使う場合、直接APIを利用するのはとても技術的な敷居が高いと考えられます。そのため、何らかのフレームワークを利用して開発するのが基本になるでしょう。

現時点で利用できそうなのが、Unity + WebXR Exportという組み合わせです。WebXR ExportはUnityのプラグインで、Unityで作成したVR/ARアプリをWebXRに対応させるものです。完全にWebXR Device APIに対応しているわけではありませんが、Unityを使っている人にとっては手軽にWebXR対応できるでしょう。

3D

3DやWebGLについて、直接APIを使うのも難しいかも知れません。すでに多くのライブラリがあり、これらを使うことで透過的にWebGLを扱えます。

つまりWebXRアプリを作る場合には、まずこれらのライブラリの使い方を学ぶのが先決になるはずです。

WebXRを体験する

WebXRを試す際には、まず簡単なデモとしてWebXR - Particlesがあります。これはAR・VR両方に対応しています。

同じコンテンツをVR表示した場合です。この場合、基本的にHMDありきの表示になります。

あとはWebXR - Samplesにも多くのデモがあります。一部、まだAndroidのChromeでも未対応のものがありますので注意してください。

4. WebXRに対応したデバイス

WebXRに対応したデバイスとしては、Android ChromeかMeta Questになるでしょう。なお、Meta Questも内部的にはAndroidを使っているので、Android ChromeがWebXR向けデバイスと言えます。

開発時にはWebXR emulator extensionが利用できます。

5. 注意点

WebXR Device APIはHTTPS限定のAPIになります。また、トラッキング情報を利用する際には xr-spatial-tracking の利用許可が必要です。

まとめ

WebXR Device APIは、VR/ARデバイスに対応したアプリケーションを作るのに大事なAPIになります。HTMLやJavaScriptでVRアプリケーションが作れるようになれば、VR業界がもっと盛り上がるでしょう。

2024年に登場するAppleのVision Proも、その後押しになるはずです。今後、注目したいAPIになるでしょう。

Immersive Web Developer Home