はじめに

このWebxR Device APIは見たところ実験的な機能が多いようです。
今回は、WebARを扱うので、実際に動作させて動かしたい場合、
AndroidのChrome環境で動かすと確実に動くので、その環境を用意してください。
Webページ（WebAR）のデプロイはVercelでやっています

泡沫京水

WebxR Device APIとは

まず、WebxRが、

仮想世界（仮想現実、virtual reality、または VR）を提示するために、またはグラフィック画像を現実世界に追加（拡張現実、augmented reality、または AR）するために設計されたハードウェアへの 3D シーンのレンダリングに対応するために、一緒に使用される標準のグループ

という説明の記載がされており、

WebxR Device APIが

WebXR 機能セットのコアを実装し、出力機器の選択を管理し、適切なフレームレートで選択した機器に 3D シーンをレンダリングし、入力コントローラーを使用して作成されたモーションベクトルを管理

という説明の記載がされています

泡沫京水

機能概要

WebxRを実現するために、WebxR Device APIは以下の機能を提供

互換性のある出力機器の検知
3Dシーンのフレームレートを適切に設定し、機器にレンダリング
入力コントロールの動きを表すベクトルの作成

オプションとして、「出力を2Dディスプレイにミラーリングする」とあるが、これは開発者向けのデバッグのためかと思われる。

泡沫京水

基本的なレンダリングの説明

それぞれの目の位置の計算
その位置からシーンをレンダリング
ユーザのそれぞれの目の視点からレンダリングする
- そのためにシーンに適用するパースペクティブを計算する
- これによって、ユーザーが現在向いている方向を見ているシーンが 3D で見える
- 3Dは、両目がそれぞれ別の像（表現が正しいか怪しいが）を視ることで成立しており、それら2つの像はそれぞれ単一のフレームバッファにレンダリングされる
- 左目側にレンダリングされる像はバッファの左側に、右目側にレンダリングされる像はバッファの右側にレンダリングされるその結果のフレームバッファがレンダリングされる

泡沫京水

初期化

使う前に、このコードを記述してください

if("xr" in window.navigator){
    // このブロックの中ではXR機能が使える前提のコードを書く
    navigator.xr.isSessionSupported("immersive-[vrかar]").then((isSupported) => {
        if(isSupported){
            navigator.xr.requestSession("immersive-[vrかar]").then((session) => {
                 // ここにXR上での任意の処理を書く。
            })
        }
    })
}
 else {
    // このブロックの中では、XR機能が使えない前提のコードを書く
}

泡沫京水

WebxR Device APIを理解する

はじめに

WebxR Device APIとは

機能概要

基本的なレンダリングの説明

初期化

今回書いたプログラムを実際に動作させるページ