1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
|
---
title: WebVR API
slug: Web/API/WebVR_API
tags:
- API
- Experimental
- Landing
- NeedsTranslation
- Reference
- TopicStub
- VR
- Virtual Reality
- WebVR
translation_of: Web/API/WebVR_API
---
<div>{{SeeCompatTable}}{{APIRef("WebVR API")}}</div>
<p class="summary">WebVR proporciona soporte para la exposición de dispositivos de realidad virtual — por ejemplo el visualizador de Oculus Rift o HTC Vive — para aplicaciones web, permitiendo a los desarrolladores traducir la información de posición y movimiento del visualizador al movimiento alrededor de una escena en 3D. Esto tiene numerosas aplicaciones interesantes, desde visitas virtuales de productos y aplicaciones de capacitación interactiva hasta juegos inmersivos en primera persona.</p>
<h2 id="Concepts_and_usage">Concepts and usage</h2>
<p>Any VR devices attached to your computer will be returned by the {{domxref("Navigator.getVRDisplays()")}} method; each one will be represented by a {{domxref("VRDisplay")}} object.</p>
<p><img alt='Sketch of a person in a chair with wearing goggles labelled "Head mounted display (HMD)" facing a monitor with a webcam labelled "Position sensor"' src="https://mdn.mozillademos.org/files/11035/hw-setup.png" style="display: block; height: 78px; margin: 0px auto; width: 60%;"></p>
<p>{{domxref("VRDisplay")}} is the central interface in the WebVR API — via its properties and methods you can access functionality to:</p>
<ul>
<li>Retrieve useful information to allow us to identify the display, what capabilities it has, controllers associated with it, and more.</li>
<li>Retrieve {{domxref("VRFrameData", "frame data")}} for each frame of content you you want to present in a display, and submit those frames for display at a consistent rate.</li>
<li>Start and stop presenting to the display.</li>
</ul>
<p>A typical (simple) WebVR app would work like so:</p>
<ol>
<li>{{domxref("Navigator.getVRDisplays()")}} is used to get a reference to your VR display.</li>
<li>{{domxref("VRDisplay.requestPresent()")}} is used to start presenting to the VR display.</li>
<li>WebVR's dedicated {{domxref("VRDisplay.requestAnimationFrame()")}} method is used to run the app's rendering loop at the correct refresh rate for the display.</li>
<li>Inside the rendering loop, you grab the data required to display the current frame ({{domxref("VRDisplay.getFrameData()")}}), draw the displayed scene twice — once for the view in each eye, then submit the rendered view to the display to show to the user ({{domxref("VRDisplay.submitFrame()")}}).</li>
</ol>
<p>In addition, WebVR 1.1 adds a number of events on the {{domxref("Window")}} object to allow JavaScript to respond to changes to the status of the display.</p>
<div class="note">
<p><strong>Note</strong>: You can find a lot more out about how the API works in our <a href="/en-US/docs/Web/API/WebVR_API/Using_the_WebVR_API">Using the WebVR API</a> and <a href="/en-US/docs/Web/API/WebVR_API/Concepts">WebVR Concepts</a> articles.</p>
</div>
<h3 id="Using_controllers_Combining_WebVR_with_the_Gamepad_API">Using controllers: Combining WebVR with the Gamepad API</h3>
<p>Many WebVR hardware setups feature controllers that go along with the headset. These can be used in WebVR apps via the <a href="/en-US/docs/Web/API/Gamepad_API">Gamepad API</a>, and specifically the <a href="/en-US/docs/Web/API/Gamepad_API#Experimental_Gamepad_extensions">Gamepad Extensions API</a> that adds API features for accessing <a href="/en-US/docs/Web/API/GamepadPose">controller pose</a>, <a href="/en-US/docs/Web/API/GamepadHapticActuator">haptic actuators</a>, and more.</p>
<div class="note">
<p><strong>Note</strong>: Our <a href="/en-US/docs/Web/API/WebVR_API/Using_VR_controllers_with_WebVR">Using VR controllers with WebVR</a> article explains the basics of how to use VR controllers with WebVR apps.</p>
</div>
<h2 id="WebVR_Interfaces">WebVR Interfaces</h2>
<dl>
<dt>{{domxref("VRDisplay")}}</dt>
<dd>Represents any VR device supported by this API. It includes generic information such as device IDs and descriptions, as well as methods for starting to present a VR scene, retrieving eye parameters and display capabilities, and other important functionality.</dd>
<dt>{{domxref("VRDisplayCapabilities")}}</dt>
<dd>Describes the capabilities of a {{domxref("VRDisplay")}} — it's features can be used to perform VR device capability tests, for example can it return position information.</dd>
<dt>{{domxref("VRDisplayEvent")}}</dt>
<dd>Represents the event object of WebVR-related events (see the {{anch("Window", "window object extensions")}} listed below).</dd>
<dt>{{domxref("VRFrameData")}}</dt>
<dd>Represents all the information needed to render a single frame of a VR scene; constructed by {{domxref("VRDisplay.getFrameData()")}}.</dd>
<dt>{{domxref("VRPose")}}</dt>
<dd>Represents the position state at a given timestamp (which includes orientation, position, velocity, and acceleration.)</dd>
<dt>{{domxref("VREyeParameters")}}</dt>
<dd>Provides access to all the information required to correctly render a scene for each given eye, including field of view information.</dd>
<dt>{{domxref("VRFieldOfView")}}</dt>
<dd>Represents a field of view defined by 4 different degree values describing the view from a center point.</dd>
<dt>{{domxref("VRLayerInit")}}</dt>
<dd>Represents a layer to be presented in a {{domxref("VRDisplay")}}.</dd>
<dt>{{domxref("VRStageParameters")}}</dt>
<dd>Represents the values describing the the stage area for devices that support room-scale experiences.</dd>
</dl>
<h3 id="Extensions_to_other_interfaces">Extensions to other interfaces</h3>
<p>The WebVR API extends the following APIs, adding the listed features.</p>
<h4 id="Gamepad">Gamepad</h4>
<dl>
<dt>{{domxref("Gamepad.displayId")}} {{readonlyInline}}</dt>
<dd><dfn>Returns the {{domxref("VRDisplay.displayId")}} of the associated {{domxref("VRDisplay")}} — the <code>VRDisplay</code> that the gamepad is controlling the displayed scene of.</dfn></dd>
</dl>
<h4 id="Navigator">Navigator</h4>
<dl>
<dt>{{domxref("Navigator.activeVRDisplays")}} {{readonlyInline}}</dt>
<dd>Returns an array containing every {{domxref("VRDisplay")}} object that is currently presenting ({{domxref("VRDisplay.ispresenting")}} is <code>true</code>).</dd>
<dt>{{domxref("Navigator.getVRDisplays()")}}</dt>
<dd>Returns a promise that resolves to an array of {{domxref("VRDisplay")}} objects representing any available VR displays connected to the computer.</dd>
</dl>
<h4 id="Window_events">Window events</h4>
<dl>
<dt>{{domxref("Window.onvrdisplaypresentchange")}}</dt>
<dd>Represents an event handler that will run when the presenting state of a VR display changes — i.e. goes from presenting to not presenting, or vice versa (when the {{event("vrdisplaypresentchange")}} event fires).</dd>
<dt>{{domxref("Window.onvrdisplayconnect")}}</dt>
<dd>Represents an event handler that will run when a compatible VR display has been connected to the computer (when the {{event("vrdisplayconnect")}} event fires).</dd>
<dt>{{domxref("Window.onvrdisplaydisconnect")}}</dt>
<dd>Represents an event handler that will run when a compatible VR display has been disconnected from the computer (when the {{event("vrdisplaydisconnect")}} event fires).</dd>
<dt>{{domxref("Window.onvrdisplayactivate")}}</dt>
<dd>Represents an event handler that will run when a display is able to be presented to (when the {{event("vrdisplayactivate")}} event fires), for example if an HMD has been moved to bring it out of standby, or woken up by being put on.</dd>
<dt>{{domxref("Window.onvrdisplaydeactivate")}}</dt>
<dd>Represents an event handler that will run when a display can no longer be presented to (when the {{event("vrdisplaydeactivate")}} event fires), for example if an HMD has gone into standby or sleep mode due to a period of inactivity.</dd>
</dl>
<h4 id="Unimplemented_window_events">Unimplemented window events</h4>
<p>The following events are listed in the spec, but do not currently seem to be implemented anywhere as yet.</p>
<dl>
<dt>{{domxref("Window.onvrdisplayblur")}}</dt>
<dd>Represents an event handler that will run when presentation to a display has been paused for some reason by the browser, OS, or VR hardware (when the {{event("vrdisplayblur")}} event fires) — for example, while the user is interacting with a system menu or browser, to prevent tracking or loss of experience.</dd>
<dt>{{domxref("Window.onvrdisplayfocus")}}</dt>
<dd>Represents an event handler that will run when presentation to a display has resumed after being blurred (when the {{event("vrdisplayfocus")}} event fires).</dd>
</dl>
<h2 id="Examples">Examples</h2>
<p>You can find a number of examples at these locations:</p>
<ul>
<li><a href="https://github.com/mdn/webvr-tests">webvr-tests</a> — very simple examples to accompany the MDN WebVR documentation.</li>
<li><a href="https://github.com/facebook/Carmel-Starter-Kit">Carmel starter kit</a> — nice simple, well-commented examples that go along with Carmel, Facebook's WebVR browser.</li>
<li><a href="https://webvr.info/samples/">WebVR.info samples</a> — slightly more in-depth examples plus source code</li>
<li><a href="https://webvr.rocks/firefox#demos">WebVR.rocks Firefox demos</a> — showcase examples</li>
<li><a href="https://aframe.io/">A-Frame homepage</a> — examples showing A-Frame usage</li>
</ul>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName("GamepadExtensions")}}</td>
<td>{{Spec2("GamepadExtensions")}}</td>
<td>Defines the <a href="/en-US/docs/Web/API/Gamepad_API#Experimental_Gamepad_extensions">Experimental Gamepad extensions</a>.</td>
</tr>
<tr>
<td>{{SpecName('WebVR 1.1')}}</td>
<td>{{Spec2('WebVR 1.1')}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatNo}}<sup>[1]</sup></td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoDesktop(55)}}<sup>[2]</sup></td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
<tr>
<td>Gamepad extensions</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}<sup>[4]</sup></td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Edge</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
<th>Chrome for Android</th>
<th>Samsung Internet for GearVR</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatGeckoMobile(55)}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatVersionUnknown}}<sup>[3]</sup></td>
<td>{{CompatVersionUnknown}}<br>
</td>
</tr>
<tr>
<td>Gamepad extensions</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}<sup>[4]</sup></td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<p>[1] API Available on all platforms behind a flag, but currently only works on desktop in an <a href="https://webvr.info/get-chrome/">experimental version of Chrome</a> (other builds won't return any devices when {{domxref("Navigator.getVRDisplays()")}} is invoked).</p>
<p>[2] Currently only Windows support is enabled by default. Mac support is <a href="https://hacks.mozilla.org/2017/06/announcing-webvr-on-mac/">available in Firefox Nightly</a>.</p>
<p>[3] Currently supported only by Google Daydream.</p>
<p>[4] Enabled in Firefox Nightly and Beta, versions 55 and above. Enabled/disabled by the <code>dom.gamepad-extensions.enabled</code> pref.</p>
<h2 id="See_also">See also</h2>
<ul>
<li><a href="https://vr.mozilla.org">vr.mozilla.org</a> — The main Mozilla landing pad for WebVR, with demos, utilities, and other information.</li>
<li><a href="https://aframe.io/">A-Frame</a> — Open source web framework for building VR experiences.</li>
<li><a href="https://webvr.info">webvr.info</a> — Up-to-date information about WebVR, browser setup, and community.</li>
<li><a href="http://mozvr.com/">MozVr.com</a> — Demos, downloads, and other resources from the Mozilla VR team.</li>
<li><a href="https://github.com/MozVR/vr-web-examples/tree/master/threejs-vr-boilerplate">threejs-vr-boilerplate</a> — A useful starter template for writing WebVR apps into.</li>
<li><a href="https://github.com/googlevr/webvr-polyfill/">Web VR polyfill</a> — JavaScript implementation of WebVR.</li>
</ul>
|
