Настоящая виртуальная реальность на веб-сайтах: живые примеры и обзор инструментов разработки

Виртуальная реальность — назревающий тренд в мире высоких технологий в общем и веб-разработки в частности.

В то время, как корпорации уровня 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.

Онлайн демо