WebVR API

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

注: WebVR API は WebXR API に置き換えられました。 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 アプリは次のように動作します。

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

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

Note: 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 機能を追加します。

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

Window イベント

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

例

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

仕様書

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

Browser compatibility

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
getVRDisplays
実験的非推奨
Chrome 未対応 なし
補足
未対応 なし
補足
補足 Available on all platforms behind a flag, but currently only works on desktop in an experimental version of Chrome (other builds won't return any devices when Navigator.getVRDisplays() is invoked).
Edge 未対応 15 — 79Firefox 完全対応 55
補足
完全対応 55
補足
補足 Windows support was enabled in Firefox 55.
完全対応 64
補足
補足 macOS support was enabled in Firefox 64.
IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 ? — 80Chrome Android 未対応 ? — 80
補足
未対応 ? — 80
補足
補足 Currently supported only by Google Daydream.
Firefox Android 完全対応 55Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 ? — 13.0
補足
未対応 ? — 13.0
補足
補足 Currently supported only by Google Daydream.

凡例

完全対応  
完全対応
未対応  
未対応
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
非推奨。新しいウェブサイトでは使用しないでください。
非推奨。新しいウェブサイトでは使用しないでください。
実装ノートを参照してください。
実装ノートを参照してください。

関連情報

  • vr.mozilla.org — Mozilla VR team から提供されるデモ，ダウンロード，その他のリソース．
  • A-Frame — Open source web framework for building VR experiences.
  • webvr.info — Up-to-date information about WebVR, browser setup, and community.
  • threejs-vr-boilerplate — A useful starter template for writing WebVR apps into.
  • Web VR polyfill — JavaScript implementation of WebVR.
  • Supermedium — A pure WebVR browser to easily access the best WebVR content.
  • WebVR Directory — List of quality WebVR sites.