image

Mozilla выпустила открытый HTML-фреймворк A-Frame для создания сайтов виртуальной реальности, которые объединяются под термином WebVR. Визуально это выглядит как веб-страница, которая по своей сути представляет трёхмерное изображение, по которому можно перемещаться и с объектами которого можно взаимодействовать. Поскольку технически всё отрисовывается при помощи WebGL, то основная задача фреймворка — это дать разработчикам простой инструмент, который бы позволил им создавать трёхмерный веб привычным, очень похожим на HTML-разметку, способом.

A-Frame организовывает трёхмерную сцену через набор геометрических примитивов, к примеру, таких как куб, цилиндр или сфера, добавляет к ней ней более сложные компоненты — «небо» или «видеокуб», позволяет приписать всему этому визуальные характеристики — цвет или материал, а также некоторую некоторую интерактивность. Для объектов сцены доступны типичные геометрические свойства, такие как местоположение, вращение, масштабирование, кроме того, можно описывать расположение камер и источников света. Всё это делается примерно также, как описываются HTML-атрибуты в обычном веб:

<!-- A red hexagon -->
<a-cylinder position="-4 0 -3" rotation="90 -90 20" radius="2" segments-radial="8" color="red"></a-cylinder>

<!-- Pacman -->
<a-cylinder position="0 0 -3" rotation="65 45 0" radius="1" height="1" theta-start="57" theta-length="286" side="double" color="yellow"></a-cylinder>

<!-- A green pipe -->
<a-cylinder position="4 0 -3" rotation="-80 15 -20" height="5" open-ended="true" color="green"></a-cylinder>



Это позволяет получить примерно такое изображение (приведено для примера):

image

Сама работа с возможностями фреймворка выглядит как работа с обычным HTML-документом. Основой A-Frame является загружаемый js-файл:

<!doctype html>
<html>
  <head>
    <title>My first VR site</title>
    <script src="https://aframe.io/releases/latest/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-cube></a-cube>
    </a-scene>
  </body>
</html>


В итоге можно описывать достаточно сложные сцены, вроде футуристичных пользовательских интерфейсов или 3D-магазинов. Правда, пока что разделы справки, связанные с интерактивностью или анимацией, где можно было бы увидеть работу с JavaScript, недоступны. Полный список примеров можно посмотреть здесь. Исходный код фреймворка открыт и доступен на github.

Комментарии (6)


  1. Stalker_RED
    18.12.2015 19:57
    +4

    Первая версия VRML была выпущена в ноябре 1994 года, но не взлетела. Может на волне всяких окулусов поднимется, и мы таки увидим виртуальную реальность в браузере.


    1. shadowpanther
      18.12.2015 21:03
      +2

      А на этом VRML тогда были даже виртуальные многопользовательские миры, типа современного Second Life :)


    1. dbaykov
      18.12.2015 21:23
      +1

      Ага, я игрался с ним и с более поздним стандартом на основе xml
      Прикольно делать всякие мирки и тогда было — сейчас без плагинов для браузера и покрасивее.
      Но есть все равно один минус — сайты, в большинстве случаев, предоставляют текстовый контент — а его так или иначе лучше всего предоставлять в двумерном пространстве — так и проще и воспринимается лучше.

      А вот красивости — это да! Виртуальные галереи и прочие приблуды.


    1. Simplevolk
      20.12.2015 12:48

      Интересно, а сколько прошло времени между первым айфоном\андроидом (когда было доминирование Нокии и сонериков) и тем, когда оказалось что у всех есть Андроид\Айфон\Люмия, а сонериков и след простыл.

      Думаю, что с разные окулусы будут захватывать рынок несколько медленнее, чем в свое время смартфоны: кроме шлема нужна и сильная десктопная система.
      Или подключаться необходимо будет через облако.


      1. Stalker_RED
        21.12.2015 19:26
        +1

        Облако мало чем поможет, очень важен как можно более быстрый отклик.


  1. Pinsky
    19.12.2015 22:08

    Интересно, почему нет SBS средствами самого фреймворка из коробки?