WebXRの現在と未来

こんにちは。R&D事業部の取り組みを外から指をくわえて見ているフロントエンドエンジニアの山下です。サービシンクのR&D事業部が取り組んでいる活動の1つにAR/VR/MRといったXR技術がありますが、それをフロントエンドの観点から実現する方法はないものかと日々目論んでいたところ、WebXRという技術に行き当たりました。すでにWebXRを使った様々な革新的サービスやコンテンツも存在していますが、現時点ではまだそこまで大きなムーブメントが起きていないように思われるWebXRについて、少しだけわかったことを紹介させてください。

WebXRの利点

WebXRの最大の利点は、ずばりその手軽さです。ユーザが利用する面、エンジニアが実装する面、その両面において手軽さを感じることができます。
とかくAR、VRと言うと、何やら大きなヘッドセットを装着し、刀の持ち手だけのような形をしたコントローラーを振りかざして操作するようなイメージがありますが、WebXRはブラウザを介して体験する技術なので特別なデバイスがなくてもスマホから手軽に利用することができます。（もちろんヘッドセットやコントローラーも使えます。）

また、ブラウザを経由するため、実装の面においても通常のWeb制作と同様にHTML、CSS、JavaScript、WebGLなどの慣れ親しんだフロントエンドの技術を最大限に活用しながらコンテンツを制作することができます。
もちろんWebXRにまつわる特別なコードもある程度は必要ですが、それ程長いものではなく、基本的にはブラウザとデバイスをつなぎ込むことだけに特化しているため複雑ではありません。
AR/VRアプリと言えば思い浮かぶUnityやUnreal Engineなど敷居が高そうなプラットフォームを準備する必要もなく、かなり乱暴な言い方をしてしまえば、これまでもやっていたような3Dオブジェクトを表示するWebページをスマホのカメラから見える風景の上に表示し、モーションと連動させることで手っ取り早くAR/VRを実現してしまおうとするのがWebXRということになるかもしれません。

リリースにおいても、WebXRで実装したWebサイトを既存のPWAの仕組みを利用することで手軽にアプリ化することもできるようです。

試作アプリの実装

上記を踏まえた上で、自分でもWebXRを使った試作アプリを作ってみました。屋外、屋内、天候を問わず雪を降らせることができるアプリです。どのような動きをするかは下記の動画を御覧ください。

スマホ画面に触れると出現する下部メニューによって、雪の量や速度を変更することができます。おすすめの設定は雪の量と速度を十分に落としてからの「反転」です。この萌えるビジュアルを実現したいというのがこのアプリを作成した動機でした。

実際にスマホから体験できるアプリのリンクは下記です。スマホがAndroidであれば、ブラウザから直接下記のリンクかORコードを辿ることで体験できます。iPhoneの場合はこちらの「WebXR Viewer」（https://apps.apple.com/jp/app/webxr-viewer/id1295998056 ）をインストールし、起動したアプリ内のブラウザから下記のリンクかORコードを辿ってください。

https://servithink.co.jp/webxr/snow.html

少しだけ実装内容を説明させていただくと、前面の雪はWebGLの3Dオブジェクトとして作成されています。使用しているWebGLライブラリは、フロントエンドエンジニアにとってはおなじみのthree.jsです。こちら（https://codepen.io/ma_suwa/pen/QzMxxw ）のコードを参考にさせていただきました。

その後、前面の雪をスマホのカメラやモーションと連動させて現実の風景に重ねて表示するために、下記のコードやセッションを処理する関数を追加しました。

  
renderer.xr.enabled = true;
  

  
async function startARSession() {
  if (navigator.xr) {
    session = await navigator.xr.requestSession(
      'immersive-ar',
      {
        domOverlay: { root: document.body },
        optionalFeatures: ['dom-overlay'],
      }
    );
    renderer.xr.setReferenceSpaceType('local');
    renderer.xr.setSession(session);
  } else {
    throw new Error('WebXR is not supported');
  }
}
  

基本的にはこれだけでWebGLを扱ったページとスマホを連動させることができます。（より詳しくはソースをご確認ください。）

なお、前述の通りブラウザベースであることによりフロントエンドの遺産をすべて活用できるため、下部メニューは純粋なHTML、CSS、JavaScriptで実装されています。このために何か新しいことを学ぶ必要はありませんでした。

任意のボタンクリックでカメラの撮影ボタンを押させるような処理は少々手が込んでいるため実装していないのですが、そこもブラウザであることの恩恵を授かり、代わりにスマホに備え付けのキャプチャ機能を使うことで画像や動画を撮影することができます。

WebXRの今後

GoogleやMeta発のデバイスは言わずもがな、AppleのVision ProのvisionOSが段階的にWebXR Device APIに対応しているなど、WebXRの未来は明るい！と声高に宣言したいところではありますが、iPhoneのiOSからはWebXR Device APIの機能が削られているなど、現状ではWebXRの手軽さがスマホユーザにあまねく行き届く状況にはなっていないようです。（このためにiPhoneでは前述のように別途アプリをインストールする必要がありました。WebXRの普及はiOSの対応にかかっているとも言われていたのですが残念です・・）その辺りはVision Proを普及させたいAppleの思惑と絡んでいたりするのかもしれませんし、絡んでいないかもしれません。
ともあれ、UnityでWebXR開発が可能になるなどWebXRを後押しする動きがあるのも確かです。閉じた端末だけではなく、開かれたWebで豊かなXRコンテンツが利用できる選択肢も今後当然ながら残されてしかるべきだと考えています。

まとめ

いかがでしたでしょうか。この記事では、WebXRの現状と未来について紹介しました。WebXRの手軽さが伝わり触ってみようかなと思ってくださる方が1人でもいたら嬉しいです。iPhoneのWebXR Device APIへの未対応状況についてですが、弊社R&Dの藤原がこちら（https://servithink.co.jp/blog/archives/rd-visor-unveiling-review ）の記事でも紹介しているように、大幅に軽量化されたメガネ型デバイスが普及しそれらがWebXRに対応すれば、スマホに取って代わることでWebXR普及問題は解消されていくかもしれません。その上で、これまで主にMicrosoft/AppleとGoogleの間で繰り広げられたような、ローカルアプリとWebアプリの棲み分けや役割分担のような流れがXRとWebXRの間でも起こったり、起こらなかったりするのかもしれません。今後のフロントエンド界隈もまだまだ熱さを維持すると考えています。
ここまで読んでいただきありがとうございました。