Виртуальная реальность — назревающий тренд в мире высоких технологий в общем и веб-разработки в частности.
В то время, как корпорации уровня Google, Apple и Microsoft выпускают новые продукты на основе виртуальной реальности и во всю клепаются VR-игры, в мире сайтостроительства всё только начинает набирать обороты.
Есть ли виртуальная реальность в вебе и как я могу начать её разрабатывать?
Основным игроком на сцене виртуального веба является компания Mozilla со своим API MozVR и фреймворком A-FRAME версии 1.0, вышедшей на днях, позволяющим создавать полноценные 3D-сцены простой HTML-разметкой.
Пример базовой сцены с освещением и анимацией:
<a-scene>
<a-assets>
<img id="texture" src="texture.png">
</a-assets>
<a-box color="#FFF" width="4" height="10" depth="2"
position="-10 2 -5" rotation="0 0 45" scale="2 0.5 3"
src="#texture">
<!-- Animation will only play when the box is clicked. -->
<a-animation attribute="rotation" begin="click" repeat="indefinite" to="0 360 0"></a-animation>
<a-event name="mouseenter" scale="4 1 6"></a-event>
</a-box>
<!-- New lights. -->
<a-light type="spot" color="#333" position="-20 0 0" look-at="a-box"></a-light>
<a-light type="point" color="#AAA" position="0 5 0"></a-light>
<a-sky color="#73F7DD"></a-sky>
<a-camera position="0 1.8 0">
<a-cursor color="#2E3A87">
</a-camera>
</a-scene>Более подробная инструкция по использованию A-FRAME и документация.
Поддержка виртуальной реальности на основе MozVR в браузерах полноценно ещё не реализована, поэтому чтобы увидеть картинку в своих Oculus Rift или Google Cardboard вам понадобится установить экспериментальную сборку Chrome или Firefox Nightly с дополнительным плагином.
Где я могу пощупать MozVR руками?
Мы отобрали для вас несколько хороших примеров, которые хорошо бы смотреть в очках виртуальной реальности, но можно прямо здесь и сейчас.
1. Космический барашек
Полноценная браузерная игра в виртуальной реальности.
2. Сферы и туман
Простой пример.
3. Укрытие
Пример от команды MozVR.
4. Вершина горы
Демонстрация от Vizor.
