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
|
---
title: WebVR API
slug: Web/API/WebVR_API
translation_of: Web/API/WebVR_API
---
<div>{{SeeCompatTable}}{{APIRef("WebVR API")}}</div>
<p class="summary">WebVR обеспечивает поддержку для использования устройств виртуальной реальности — например, шлемы виртуальной реальности, таких как Oculus Rift или HTC Vive — для веб-приложений, позволяя разработчикам передавать информацию о местоположении и движения с дисплея в движение вокруг 3D-сцены. Это имеет множество интересных приложений, от виртуальных туров продукта и интерактивных обучающих приложений до захватывающих игр от первого лица.</p>
<h2 id="Концепция_и_использование">Концепция и использование</h2>
<p>Любые VR-устройства, подключённые к вашему компьютеру, будут возвращены методом {{domxref("Navigator.getVRDisplays()")}}; каждое из которых будет представлено {{domxref("VRDisplay")}} объектом.</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")}} является центральным интерфейсом в API WebVR - с помощью его свойств и методов вы получить доступ к функциям:</p>
<ul>
<li>Получить полезную информацию, чтобы мы могли идентифицировать дисплей, какие возможности он имеет, контроллеры, связанные с ним и многое другое.</li>
<li>Получить {{domxref("VRFrameData", "frame data")}} для каждого кадра контента, который вы хотите представить на дисплее, и отправьте эти кадры для отображения с постоянной скоростью.</li>
<li>Начать и прекратить подачу на дисплей.</li>
</ul>
<p>Типичное (простое) WebVR приложение будет работать так:</p>
<ol>
<li>{{domxref("Navigator.getVRDisplays()")}} используется для получения ссылки на ваш VR-дисплей.</li>
<li>{{domxref("VRDisplay.requestPresent()")}} используется для начала представления на дисплей VR.</li>
<li>Выделенный {{domxref("VRDisplay.requestAnimationFrame()")}} WebVR's используется для запуска цикла рендеринга приложения с правильной частотой обновления для отображения.</li>
<li>Внутри цикла рендеринга берутся данные, необходимые для отображения текущего кадра ({{domxref("VRDisplay.getFrameData()")}}), дважды нарисуйте отображаемую сцену - один раз для просмотра в каждом глазу, затем отправьте отображаемый вид на дисплей, чтобы показать пользователю ({{domxref("VRDisplay.submitFrame()")}}).</li>
</ol>
<p>Кроме того, WebVR 1.1 добавляет ряд событий {{domxref("Window")}} объекту, чтобы JavaScript мог реагировать на изменения состояния дисплея.</p>
<div class="note">
<p><strong>Примечание</strong>: Вы можете найти намного больше о том, как работает API в <a href="/en-US/docs/Web/API/WebVR_API/Using_the_WebVR_API">Using the WebVR API</a> и <a href="/en-US/docs/Web/API/WebVR_API/Concepts">WebVR Concepts</a> статьях.</p>
</div>
<h3 id="Использование_контроллеров_Объединение_WebVR_с_API-интерфейсом_геймпада">Использование контроллеров: Объединение WebVR с API-интерфейсом геймпада</h3>
<p>Многие аппаратные настройки WebVR оснащены контроллерами, которые сочетаются с гарнитурой. Они могут быть использованы в WebVR приложениях через <a href="/en-US/docs/Web/API/Gamepad_API">Gamepad API</a>, и, в частности, <a href="/en-US/docs/Web/API/Gamepad_API#Experimental_Gamepad_extensions">Gamepad расширения API</a>, которые добавляют API функции для доступа к <a href="/en-US/docs/Web/API/GamepadPose">позе контроллера</a>, <a href="/en-US/docs/Web/API/GamepadHapticActuator">haptic actuators</a>, и многое другое.</p>
<div class="note">
<p><strong>Примечание</strong>: Наша <a href="/en-US/docs/Web/API/WebVR_API/Using_VR_controllers_with_WebVR">Using VR controllers with WebVR</a> статья объясняет основы использования VR-контроллеров в приложениях WebVR.</p>
</div>
<h2 id="WebVR_Интерфейс">WebVR Интерфейс</h2>
<dl>
<dt>{{domxref("VRDisplay")}}</dt>
<dd>Представляет любое устройство VR, поддерживаемое этим API. VRDisplay включает в себя общую информацию, такую как идентификаторы устройств и описания, а также методы для начала представления сцены VR, получения параметров глаз и возможностей отображения и других важных функций.</dd>
<dt>{{domxref("VRDisplayCapabilities")}}</dt>
<dd>описывает возможности {{domxref("VRDisplay")}} — его функции могут использоваться для тестирования возможностей устройства VR, например, может ли он возвращать информацию о местоположении.</dd>
<dt>{{domxref("VRDisplayEvent")}}</dt>
<dd>Возвращает объект события (event) связанного с WebVR-событием (см. {{anch("Window", "window object extensions")}} , перечисленных ниже).</dd>
<dt>{{domxref("VRFrameData")}}</dt>
<dd>Представляет всю информацию, необходимую для создания одного кадра сцены VR; созданный от {{domxref("VRDisplay.getFrameData()")}}.</dd>
<dt>{{domxref("VRPose")}}</dt>
<dd>Представляет состояние позиции на заданной временной отметке (которая включает в себя ориентацию, положение, скорость и ускорение).</dd>
<dt>{{domxref("VREyeParameters")}}</dt>
<dd>Предоставляет доступ ко все информации, необходимой для корректного отображения сцены для каждого заднего глаза, включая информацию о поле зрения.</dd>
<dt>{{domxref("VRFieldOfView")}}</dt>
<dd>Представляет поле зрения, определённое четырьмя различными значениями степени, описывающими представление из центральной точки.</dd>
<dt>{{domxref("VRLayerInit")}}</dt>
<dd>Представляет слой, который должен быть представлен в {{domxref("VRDisplay")}}.</dd>
<dt>{{domxref("VRStageParameters")}}</dt>
<dd>Представляет значения, описывающие область сцены для устройств, поддерживающих опыт в помещении.</dd>
</dl>
<h3 id="Расширения_для_других_интерфейсов">Расширения для других интерфейсов</h3>
<p>WebVR API расширяет следующие API, добавляя перечисленные функции.</p>
<h4 id="Геймпад">Геймпад</h4>
<dl>
<dt>{{domxref("Gamepad.displayId")}} {{readonlyInline}}</dt>
<dd><dfn>Возвращает {{domxref("VRDisplay.displayId")}} связанного с {{domxref("VRDisplay")}} — <code>VRDisplay</code> , которым геймпад управляет отображаемой сценой.</dfn></dd>
</dl>
<h4 id="Навигатор">Навигатор</h4>
<dl>
<dt>{{domxref("Navigator.activeVRDisplays")}} {{readonlyInline}}</dt>
<dd>Возвращает массив, содержащий каждый {{domxref("VRDisplay")}} объект, который в настоящее время отображается ({{domxref("VRDisplay.ispresenting")}} является <code>true</code>).</dd>
<dt>{{domxref("Navigator.getVRDisplays()")}}</dt>
<dd>Возвращает обещание, которое преобразуется в массив {{domxref("VRDisplay")}} объектов, представляющих любые доступные VR-дисплеи, подключённые к компьютеру.</dd>
</dl>
<h4 id="Window_события">Window события</h4>
<dl>
<dt>{{domxref("Window.onvrdisplaypresentchange")}}</dt>
<dd>Представляет обработчик событий, который будет выполняться, при изменении состояния отображения VR-дисплея — т.е. идёт от отображения до неотображения, или наоборот (когда {{event("vrdisplaypresentchange")}} событие срабатывает).</dd>
<dt>{{domxref("Window.onvrdisplayconnect")}}</dt>
<dd>Представляет обработчик событий, который будет запускаться, когда к компьютеру подключён совместимый VR-дисплей (когда {{event("vrdisplayconnect")}} событие срабатывает).</dd>
<dt>{{domxref("Window.onvrdisplaydisconnect")}}</dt>
<dd>Представляет обработчик событий, который будет запускаться, когда совместимый VR-дисплей был отключён от компьютера (когда {{event("vrdisplaydisconnect")}} событие срабатывает).</dd>
<dt>{{domxref("Window.onvrdisplayactivate")}}</dt>
<dd>Представляет обработчик событий, который будет выполняться, когда дисплей может быть представлен (когда {{event("vrdisplayactivate")}}событие срабатывает), например, HMD (Head Mounted Display) был перемещён, чтобы вывести его из режима ожидания, или проснулся, будучи перемещенным.</dd>
<dt>{{domxref("Window.onvrdisplaydeactivate")}}</dt>
<dd>Представляет обработчик событий, который будет запускаться, когда дисплей больше не будет отображаться (когда {{event("vrdisplaydeactivate")}} событие срабатывает), например, HMD (Head Mounted Display) перешёл в режим ожидания или спящий режим из-за периода бездействия.</dd>
</dl>
<h4 id="Невыполненные_window_события">Невыполненные window события</h4>
<p>Следующие события перечислены в спецификации, but do not currently seem to be implemented anywhere as yet.</p>
<dl>
<dt>{{domxref("Window.onvrdisplayblur")}}</dt>
<dd>Представляет обработчик событий, который будет выполняться, когда презентация на дисплей была приостановлена по какой-то причине в браузере, ОС или оборудованием VR (когда {{event("vrdisplayblur")}} событие срабатывает) — например, в то время как пользователь взаимодействует с системным меню или браузером, чтобы предотвратить отслеживание или потерю опыта.</dd>
<dt>{{domxref("Window.onvrdisplayfocus")}}</dt>
<dd>Представляет обработчик событий, который будет выполняться, когда презентация на дисплей возобновляется после потери фокуса (когда {{event("vrdisplayfocus")}} событие срабатывает).</dd>
</dl>
<h2 id="Примеры">Примеры</h2>
<p>Вы можете найти несколько примеров в этих местах:</p>
<ul>
<li><a href="https://github.com/mdn/webvr-tests">webvr-tests</a> — очень простые примеры для сопровождения MDM WebVR документации.</li>
<li><a href="https://github.com/facebook/Carmel-Starter-Kit">Carmel starter kit</a> — простые, хорошо прокомментированные примеры, которые идут вместе с Carmel,браузером WebVR от Facebook's .</li>
<li><a href="https://webvr.info/samples/">WebVR.info samples</a> — несколько более подробных примеров плюс исходный код</li>
<li><a href="https://webvr.rocks/firefox#demos">WebVR.rocks Firefox demos</a> — демонстрация примеров</li>
<li><a href="https://aframe.io/">A-Frame homepage</a> — примеры использования A-Frame</li>
</ul>
<h2 id="Спецификация">Спецификация</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Спецификация</th>
<th scope="col">Статус</th>
<th scope="col">Комментарий</th>
</tr>
<tr>
<td>{{SpecName("GamepadExtensions")}}</td>
<td>{{Spec2("GamepadExtensions")}}</td>
<td>
<p>Определяет <a href="/en-US/docs/Web/API/Gamepad_API#Experimental_Gamepad_extensions">Experimental Gamepad extensions</a>.</p>
</td>
</tr>
<tr>
<td>{{SpecName('WebVR 1.1')}}</td>
<td>{{Spec2('WebVR 1.1')}}</td>
<td>Первоначальное определение</td>
</tr>
</tbody>
</table>
<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</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>[3]</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 Webview</th>
<th>Chrome for Android</th>
<th>Edge</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
<th>Samsung Internet for GearVR</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}<sup>[1]</sup></td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatVersionUnknown}}<br>
</td>
</tr>
<tr>
<td>Gamepad extensions</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}<sup>[3]</sup></td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<p>[1] <a href="https://github.com/GoogleChrome/OriginTrials/blob/gh-pages/explainer.md">Origin trials only</a>.</p>
<p>[2] В настоящее время только в Windows и Mac OSX поддержка включена по умолчанию.</p>
<p>[3] Включено в Firefox Nightly и Beta, версии 55 и выше. Включено / отключено с помощью <code>dom.gamepad-extensions.enabled</code> pref.</p>
<h2 id="Смотрите_также">Смотрите также</h2>
<ul>
<li><a href="https://vr.mozilla.org">vr.mozilla.org</a> — Основная посадочная площадка Mozilla для WebVR с демонстрационными материалами, утилитами и другой информацией.</li>
<li><a href="https://aframe.io/">A-Frame</a> — Веб-платформа с открытым исходным кодом для создания опыта VR.</li>
<li><a href="https://webvr.info">webvr.info</a> — Актуальная информация о WebVR, настройке браузера и сообществе.</li>
<li><a href="http://mozvr.com/">MozVr.com</a> — Демонстрации, загрузки и другие ресурсы от команды Mozilla VR.</li>
<li><a href="https://github.com/MozVR/vr-web-examples/tree/master/threejs-vr-boilerplate">threejs-vr-boilerplate</a> — Полезный стартовый шаблон для написания приложений WebVR.</li>
<li><a href="https://github.com/googlevr/webvr-polyfill/">Web VR polyfill</a> — JavaScript-реализация WebVR.</li>
</ul>
|
