WebXR 機器 API
============

**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

**Experimental:** **これは実験的な機能です。**  
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

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

WebXR 互換機器には、モーションと方向の追跡が可能な完全没入型 3D ヘッドセット、フレームを通した現実世界のシーンの上にグラフィックをオーバーレイする眼鏡、カメラで世界を捉えることで現実を拡張し、コンピューターで生成された画像でそのシーンを増強する携帯電話が含まれます。

これらを実現するために、WebXR 機器 API は次の主要な機能を提供します。

* 互換性のある VR または AR 出力機器を見つける。
* 3D シーンを適切なフレームレートで機器にレンダリングする。
* （オプション）出力を 2D ディスプレイにミラーリングする。
* 入力コントロールの動きを表すベクトルを作成する。

最も基本的なレベルでは、それぞれの目の位置を計算し、その位置からシーンをレンダリングすることにより、ユーザーのそれぞれの目の視点からレンダリングするためにシーンに適用するパースペクティブを計算することにより、ユーザーが現在向いている方向を見ているシーンが 3D で提示されます。 これらの 2 つの画像はそれぞれ単一のフレームバッファーにレンダリングされ、左目のレンダリングされた画像は左側に、右目の視点はバッファーの右半分にレンダリングされます。 シーンに対する両目の視点がレンダリングされると、結果のフレームバッファーが WebXR 機器に配信され、ヘッドセットまたは他の適切なディスプレイ機器を通じてユーザーに提示されます。

古い WebVR API は、仮想現実（VR）に対応するためだけに設計されましたが、WebXR はウェブ上の VR と拡張現実（AR）の両方に対応します。 AR 機能の対応は、WebXR 拡張現実モジュールによって追加されます。

典型的な XR 機器は 3 または 6 自由度を持つことができ、外部位置センサーがある場合とない場合があります。

機器はまた、ユーザーが空間を移動したり、頭を回転したりすることなどを感知するために使用する加速度計、気圧計、または他のセンサーを含んでいるかもしれません。

WebXR リファレンス記事
--------------

### 初期化

* `navigator.xr`
* `XRSystem`
* `XRPermissionStatus`
* `Permissions-Policy`: `xr-spatial-tracking`

### セッション

* `XRSession` (en-US)
* `XRSessionEvent` (en-US)
* `XRRenderState` (en-US)

### フレームループ

* `XRFrame` (en-US)

### 空間

* `XRSpace` (en-US)
* `XRReferenceSpace`
* `XRBoundedReferenceSpace`
* `XRReferenceSpaceEvent`
* `XRJointSpace` (en-US)

### ビュー

* `XRView` (en-US)
* `XRViewport` (en-US)

### 幾何プリミティブ

* `XRRigidTransform`

### 姿勢

* `XRPose` (en-US)
* `XRJointPose` (en-US)
* `XRViewerPose` (en-US)

### 入力

* `XRHand` (en-US)
* `XRInputSource`
* `XRInputSourceArray` (en-US)
* `XRInputSourceEvent` (en-US)
* `XRInputSourcesChangeEvent` (en-US)

### レイヤー

* `XRLayer` (en-US)
* `XRLayerEvent` (en-US)
* `XRCompositionLayer` (en-US)
* `XRCubeLayer` (en-US)
* `XRCylinderLayer` (en-US)
* `XREquirectLayer` (en-US)
* `XRProjectionLayer` (en-US)
* `XRQuadLayer` (en-US)
* `XRMediaBinding` (en-US)

### WebGL の構築

* `XRWebGLBinding` (en-US)
* `WebGLRenderingContext.makeXRCompatible()` (en-US)
* `XRWebGLLayer` (en-US)
* `XRSubImage` (en-US)
* `XRWebGLSubImage` (en-US)

### アンカー

* `XRAnchor` (en-US)
* `XRAnchorSet` (en-US)

### 深度センシング

* `XRDepthInformation` (en-US)
* `XRCPUDepthInformation` (en-US)
* `XRWebGLDepthInformation` (en-US)

### ヒットテスト

* `XRHitTestSource` (en-US)
* `XRTransientInputHitTestSource` (en-US)
* `XRHitTestResult` (en-US)
* `XRTransientInputHitTestResult` (en-US)
* `XRRay` (en-US)

### 照明の推定

* `XRLightEstimate` (en-US)
* `XRLightProbe`

ガイドとチュートリアル
-----------

次のガイドとチュートリアルは、WebXR とその基礎となる 3D および VR/AR のグラフィックスの概念を理解する方法を学ぶための優れたリソースです。

### 基盤と基礎

* WebXR の基本
* ウェブの行列計算
* WebXR アプリケーションのライフサイクル (en-US)

### 複合現実エクスペリエンスの作成

* WebXR セッションの起動と停止
* WebXR の幾何学と参照空間
* WebXR での空間追跡 (en-US)
* レンダリングと WebXR フレームアニメーションコールバック
* 視点とビューアー: WebXR でのカメラのシミュレーション
* WebXR 設定の照明
* 制限付き参照空間の使用 (en-US)

### インタラクティブにする

* 移動、向き、モーション: WebXR の例
* 入力と入力ソース (en-US)
* ターゲティングとヒット検出 (en-US)

### パフォーマンスとセキュリティ

* WebXR パフォーマンスガイド (en-US)
* WebXR の権限とセキュリティ (en-US)

仕様書
---

| Specification |
| --- |
| **WebXR Device API**
 (ソース、
 課題、
 説明)
  |
| **WebXR Anchors Module**
 (ソース、
 課題、
 説明)
  |
| **WebXR Augmented Reality Module**
 (ソース、
 課題、
 説明)
  |
| **WebXR Depth Sensing Module**
 (ソース、
 課題、
 説明)
  |
| **WebXR DOM Overlays Module**
 (ソース、
 課題、
 説明)
  |
| **WebXR Gamepads Module**
 (ソース、
 課題、
 説明)
  |
| **WebXR Hand Input Module**
 (ソース、
 課題、
 説明)
  |
| **WebXR Hit Test Module**
 (ソース、
 課題、
 説明)
  |
| **WebXR Layers API**
 (ソース、
 課題、
 説明)
  |
| **WebXR Lighting Estimation API**
 (ソース、
 課題、
 説明)
  |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* ウェブのグラフィック
* グラフィックの描画
* WebGL API: ウェブ上の 2D および 3D グラフィックスの高速化
* キャンバス API: ウェブのための 2D 描画
* キャンバスチュートリアル