非推奨
この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。
WebVR は,バーチャルリアリティデバイス — 例えば Oculus Rift のようなヘッドマウントディスプレイ — をウェブアプリへ公開し,ヘッドマウントディスプレイの位置や動きを3D空間上の動きへと変換する手助けを行います.これによって,バーチャルな製品紹介やインタラクティブな訓練アプリといったものから超臨場感のファーストパーソン・シューティングゲームといったものまで,非常に面白い様々なアプリケーションをつくることができます.
概念と利用方法
コンピュータに接続されている VR 装置は Navigator.getVRDisplays()
メソッドによって返されます。それぞれの装置は VRDisplay
オブジェクトで表されます。
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 が表示状態の変化に対応できるようになっています。
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
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 リポジトリでいくつかの例を見つけられます。
- 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
関連情報
- 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.