WebVR API

非推奨: この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

メモ: WebVR API は WebXR API (en-US) に置き換えられました。 WebVR は標準として批准されることはなく、ごく少数のブラウザでしか既定で実装・有効化されず、少数の端末しか対応していませんでした。

WebVR は，バーチャルリアリティデバイス — 例えば Oculus Rift のようなヘッドマウントディスプレイ — をウェブアプリへ公開し，ヘッドマウントディスプレイの位置や動きを 3D 空間上の動きへと変換する手助けを行います．これによって，バーチャルな製品紹介やインタラクティブな訓練アプリといったものから超臨場感のファーストパーソン・シューティングゲームといったものまで，非常に面白い様々なアプリケーションをつくることができます．

概念と利用方法

コンピュータに接続されている VR 装置は Navigator.getVRDisplays() メソッドによって返されます。それぞれの装置は VRDisplay オブジェクトで表されます。

Sketch of a person in a chair with wearing goggles labelled "Head mounted display (HMD)" facing a monitor with a webcam labelled "Position sensor"

VRDisplay VRDisplay は WebVR API の中心的なインターフェイスであり、そのプロパティとメソッドを介して、以下の機能にアクセスすることができます。

ディスプレイを識別するための有用な情報を取得し、ディスプレイにどのような機能があるのか、ディスプレイに関連付けられたコントローラなどを確認することができます。
ディスプレイに表示したいコンテンツの各フレームの frame data を取得し、一貫したレートで表示するためにそれらのフレームを送信します。
ディスプレイへの表示の開始と停止。

典型的な (シンプルな) WebVR アプリは次のように動作します。

Navigator.getVRDisplays() を使用して VR ディスプレイの参照を取得します。
VRDisplay.requestPresent() を使用して VR ディスプレイの表示を開始します。
WebVR 専用の VRDisplay.requestAnimationFrame() メソッドを使用して、ディスプレイの正しいリフレッシュレートでアプリのレンダリングループを実行します。
レンダリングループ内では、現在のフレームを表示するために必要なデータを取得し (VRDisplay.getFrameData())、表示されたシーンを 2 回 — それぞれの目の画像を 1 回ずつ描画し、レンダリングされたビューをディスプレイに送信してユーザーに表示します (VRDisplay.submitFrame())。

また WebVR 1.1 では、 Window オブジェクトに多数のイベントが追加され、 JavaScript が表示状態の変化に対応できるようになっています。

メモ: WebVR API の使用と WebVR の概念の記事で、この API の使用方法がもっとわかります。

API の可用性

Web 標準として承認されることのなかった WebVR API は、標準化プロセスの終了に向けて順調に進んでいる WebXR API に取って代わられて非推奨となりました。そのため、既存のコードを更新して、代わりに新しい API を使用するようにしてください。一般的には、移行はかなり苦痛のないものになるはずです。

さらに、端末やブラウザーによっては、 WebVR は HTTPS 接続を介して安全なコンテキストを使用してページをロードする必要があります。ページが完全に安全でない場合、 WebVR のメソッドや機能は利用できません。これは、 Navigator の getVRDisplays() メソッドが NULL であるかどうかを確認することで簡単にテストできます。

if (!navigator.getVRDisplays) {
  console.error("WebVR is not available");
} else {
  /* WebVR を使用する */
}

コントローラーの使用: WebVR と Gamepad API の組み合わせ

多くの WebVR ハードウェアは、ヘッドセットと一緒に使用するコントローラーをセットアップします。これらは Gamepad API を介して WebVR アプリで使用することができ、特に Gamepad Extensions API は、コントローラーのコントローラーのポーズや触覚アクチュエーターなどにアクセスするための API 機能を追加します。

メモ: WebVR API の使用の記事では、 WebVR アプリでの VR コントローラーの使い方の基本を解説しています。

WebVR インターフェイス

VRDisplay: この API でサポートされている VR デバイスを表します．デバイス ID や説明など汎用的な情報や，VR シーンの表示を開始するためのメソッドや，両目のパラメータやディスプレイの対応機能を受け取るメソッド，その他の重要な機能のためのメソッドを含んでいます．
VRDisplayCapabilities: VRDisplay の利用可能な機能を示しています — この機能は VR デバイスで使える機能テストを実行するために使うことができ，例えば位置情報を返すことが可能かに使えます．
VRDisplayEvent: WebVR 関連イベントのイベントオブジェクトを表します (下記の window オブジェクト拡張を参照)。
VRFrameData: VR シーンの 1 フレームをレンダリングするために必要なすべての情報を表します。 VRDisplay.getFrameData() から構築されます。
VRPose: 指定した時刻における位置の状態を表します（これには向き，位置，速度，加速度を含んでいます）．
VREyeParameters: 指定した目に対応するシーンを正しくレンダリングするために必要となるすべての情報へのアクセスを提供します．これには FOV 情報を含まれています．
VRFieldOfView: 中心点からの視界を記述する 4 つの異なる角度値で定義される FOV を表します．
VRLayerInit: VRDisplay 内に表示されるレイヤを表します.
VRStageParameters: ルームスケール体験をサポートしているデバイスで，ステージエリアを示す値を表します．

その他のインターフェイスの拡張

The WebVR API extends the following APIs, adding the listed features.

Gamepad

Gamepad.displayId 読取専用: 関連付いている VRDisplay の VRDisplay.displayId を返します — その VRDisplay はゲームパッドが表示シーンのコントロールします．

Navigator

Navigator.activeVRDisplays 読取専用: 現在表示されている（VRDisplay.ispresenting が true の）すべての VRDisplay オブジェクトを持つ配列を返します．
Navigator.getVRDisplays(): コンピュータに接続されている利用可能な VR デバイスを表す VRDisplay オブジェクトの配列へ解決する promise を返します．

Window イベント

Window.onvrdisplaypresentchange (en-US): VR デバイスの表示状態が変更されたとき — すなわち，表示状態から非表示状態へ変化したときあるいはその逆（ onvrdisplaypresentchange イベントが発行されたとき）に実行されるイベントハンドラを表します．
Window.onvrdisplayconnect (en-US): 互換性のある VR デバイスがコンピュータに接続されたとき（ vrdisplayconnect イベントが発行されたとき）に実行されるイベントハンドラを表します．
Window.onvrdisplaydisconnect (en-US): 互換性のある VR デバイスがコンピュータから接続解除されたとき（ vrdisplaydisconnect イベントが発行されたとき）に実行されるイベントハンドラを表します．
Window.onvrdisplayactivate (en-US): ディスプレイが表示できるようになったとき (vrdisplayactivate イベントが発生したとき) に実行されるイベントハンドラーを表します。例えば、HMD を移動させて待機状態を解除した場合や、電源を入れたことで起動した場合などです。
Window.onvrdisplaydeactivate (en-US): ディスプレイが表示できなくなったとき (vrdisplaydeactivate イベントが発生したとき) に実行されるイベントハンドラーを表します。例えば、HMD が一定期間使用されていなかったためにスタンバイモードやスリープモードになった場合などです。
Window.onvrdisplayblur (en-US): ブラウザ、OS、または VR ハードウェアによってディスプレイへの表示が何らかの理由で一時停止された場合 (vrdisplayblur イベントが発生した場合) に実行されるイベントハンドラーを表します。例えば、ユーザーがシステムメニューやブラウザーと対話している間などに、トラッキングや体験の喪失を防ぐためです。
Window.onvrdisplayfocus (en-US): 一時停止後に (vrdisplayfocus イベントが発生したときに) ディスプレイへの提示が再開されたときに実行されるイベントハンドラーを表します。

例

次の Github リポジトリでいくつかの例を見つけられます。

webvr-tests: 基本的な機能の使い方を示すためのシンプルなデモ。
Carmel starter kit — nice simple, well-commented examples that go along with Carmel, Facebook's WebVR browser.
WebVR.info samples — slightly more in-depth examples plus source code
WebVR.rocks Firefox demos — showcase examples
A-Frame homepage — examples showing A-Frame usage

仕様書

仕様書	状態	備考
Gamepad Extensions	編集者草案	Experimental Gamepad extensions を定義。
WebVR 1.1	ドラフト	初回定義

Browser compatibility

Navigator.getVRDisplays

BCD tables only load in the browser