Создание геолокационного приложения с использованием библиотеки AR.JS
Ключевые слова: AR.js, Glitch, A-frame, gps-camera, Яндекс.карты, JavaScript, simulateLatitude, simulateLongitude
В этой теме рассмотрим основы работы в Aframe и как на основе библиотеки ar.js создать геолокационное приложение.
AR.js — это библиотека для создания проектов дополненной реальности в браузере (отслеживание маркеров, отслеживание местоположения). Она проста в использовании, имеет открытый исходный код, проекты запускаются достаточно быстро даже на относительно старых телефонах.
AR.js разработана на основе библиотеки three.js и jsartoolkit и объединена с A-frame (библиотекой для разработки VR в web)
Шаги создания первого проекта AR.
Хостинг (локальный, https://glitch.com/).
Создание VR сцены (https://aframe.io/).
Добавление Камеры для создания AR (https://ar-js-org.github.io/AR.js-Docs/).
Отслеживание геолокации (https://yandex.ru/map-constructor/location-tool/).
Для выполнения первого шага, необходимо зарегистрироваться в web-сервисе Glitch. Далее откроем ссылку из второго шага, перейдем в документацию Aframe и выберем ознакомительный проект "Hello, World!" (Рис. 1).
Рис. 1 Запуск стартового проектаДалее появляется предложение открыть проект в Glitch, необходимо на него согласиться (Рис. 2).
Рис. 2 Окно Remix project
Перед нами открывается интерфейс рабочего пространства Glitch. Слева находятся папки и наши файлы, по центру — редактор кода, справа — превью (Рис. 3).
Рис. 3 Проект Glitch
В превью есть возможность вращения вокруг своей оси и просмотра сцены вверх-вниз, что очень полезно как в дополненной реальности, так и в виртуальной реальности. Когда вы видоизменяете код, то есть меняете какие-либо настройки, то превью необходимо обновить.
Первое, что нам необходимо сделать, это подключить библиотеку Aframe. Подключение библиотеки можно взять из примера или из документации. В ней обычно выложена самая последняя версия с примером, поэтому можно скопировать строчку отсюда (Рис. 4).
Рис. 4 Подключение библиотеки
В теле нашего кода необходимо выставить следующие теги. <a-scene> — все, что расположена внутри него, отображается на нашей сцене, которая и будет являться в дополненной реальности. Если вы укажете что-то вне сцены, то это отображаться не будет. Этот объект будет вне зоны видимости нашего устройства.
Далее представлены несколько примитивных объектов:
<a-box> — представляет из себя примитив в виде куба либо прямоугольника. У него есть несколько атрибутов. Это позиция по x y и z, так как мы находимся в трехмерном пространстве, rotation - это угол поворота нашего куба и свойства color, которое указывает на цвет нашего объекта.
<a-sphere> — примитив сферы.
<a-cylinder> — примитив цилиндра.
<a-plane> — представляет из себя плоскость и имеет другие атрибуты. Это ширина и высота данной плоскости.
<a-sky> — заполняет пространство цветом. В дополненной реальности он нам не понадобится (Рис. 5).
Рис. 5 Пример кода
Теперь посмотрим на пример с отображением текста.
Сцена осталась прежней, только теперь у нас есть дополнительный тег <a-text>, который отображает какое-то содержание.
При работе с текстом могут возникнуть следующие проблемы.
Изначально все шрифты, которые идут по умолчанию для библиотеки aframe, поддерживают только английские символы. Поэтому нам придется создать собственный шрифт, подгрузить его в наш проект, и только после этого у нас будут отображаться русские буквы.
Нам необходимо вернуться в документацию aframe, в поиске вбить "text " и перейти на страницу с описанием данного тега. Оттуда мы перейдем на страницу для создания новых шрифтовых решений. Для работы с данным компилятором, нам понадобится найти любой шрифт поддерживающий русские символы. Для этого вы можете зайти на google fonts.
Для примера скачаем шрифт Roboto. После загрузки перейдем во вкладку Glyphs (Рис. 6).
Рис. 6 Вкладка Glyphs
Здесь необходимо скопировать таблицу символов (Рис. 7).
Рис. 7 Таблица символов
Затем возвращаемся на страничку с созданием нашего шрифта. Вставляем в поле "Select character set" скопированные раннее символы. Не забываем вставить в конце пробел (Рис. 8).
Рис. 8 Заполнение поля Select character set
В первом пункте "Select font" прикрепим раннее скачанный файл со шрифтом, предварительно его распаковав. Файл имеет расширение .ttf
В третьем пункте нажимаем на кнопку "Create MSDF". После того, как шрифт сгенерировался, смотрим на отображение. У вас должны отображаться первые символы введенные во второй пункт. Если отображаются какие-то другие символы или нечто непонятное, необходимо изменить размерность нашего MSDF шрифта (Рис. 9).
Рис. 9 Изменение размера
После того, как отображение текста нас удовлетворило, можем переходить к скачиванию.
В пятом пункте присутствует пример того, как можно вставить текст в проект. Давайте его скопируем и вставим в наш код (Рис. 10).
Рис. 10 Подключение русского языка
Далее необходимо подгрузить два ранее скачанных файла. Файл .json мы можем импортировать воспользовавшись перетаскиванием объектов в левую панель Glitch, либо плюсом и кнопкой "загрузить файл" (Рис. 11).
Рис. 11 Импорт json файла
Для того чтобы загрузить второй файл .png, перейдем во вкладку Assets и перетащим туда нашу картинку. Дожидаемся загрузки и после нажатия на нашу картинку копируем url (Рис. 12).
Рис. 12 Получение ссылки на картинку
Так как мы работаем в Glitch, у нас несколько нестандартное расположение файлов. Так как картинка и json-файл лежат в разных директориях, необходимо указать дополнительный атрибут которой будет ссылаться на нее. Нам потребуется атрибут <font-image>, внутрь которого мы вставляем ранее скопированную ссылку (Рис. 13).
Рис. 13 Вставка текста
Однако, мы не видим нашего текста. Это происходит потому, что его позиция находится под plane. Ее необходимо скорректировать (Рис. 14).
Рис. 14 Корректировка позиционирования текста
Для того, чтобы создавать проекты дополненной реальности, нам потребуется подключить еще две библиотеки связанные с AR.js.
На главной странице документации библиотеки AR.js есть кусочки кода для подключения библиотек. Нам потребуется отслеживать маркеры и позицию людей, поэтому находим AR.js with Marker Tracking + Location Based AR и копируем 2 строчки оттуда (Рис. 15).
Рис. 15 Скрипты для подключения библиотек
Переходим обратно в проект и добавляем скрипты в <head> (Рис. 16).
Рис. 16 Подключение библиотек
Теперь мы можем обновить окно превью и увидеть, что вместо белого пространства появляется изображение с нашей камеры.
Для создания дополненной реальности нам понадобится еще одни тег — <a-camera>. Он позволит нам отслеживать позицию камеры и ее повороты, что позволит ей отображать наш контент так, как нужно именно нам.
Перейдем в документацию AR.js в заголовок Location Based. В примере написано, что к нашему тегу <a-camera> необходимо дописать атрибуты gps-camera, для того чтобы отслеживать позицию человека, и советуют дописывать rotation-reader, которая отвечает за позиционирование и отслеживание поворотов в пространстве. В целом, данную строчку можно полностью скопировать и вставить в свой проект (Рис. 17).
Рис. 17 Location Based - gps-camera
Gps-camera имеет множество атрибутов. Но нам понадобятся только несколько из них. Первый это simulateLatitude - симуляция долготы и широты, она позволит нам произвести быструю отладку относительно той местности, на которой мы будем выстраивать дополнительные точки, которые будут отображаться в дополненной реальности.
Посмотрим как узнать свою долготу и широту на примере яндекс.карт (Рис. 18).
Рис. 18 Определение координат от яндекс.карт
Введем нужный нам адрес в поисковую строку. И настроим местоположение так, чтобы плюсик указывал на нужную нам точку. Окошко в правом нижнем углу выводит массив из двух переменных - долготы и широты (Рис. 19).
Рис. 19 Координаты выбранной позиции
Скопируем координаты и перенесем их в свой проект. Пока в закомментированном виде (Рис. 20).
Рис. 20 Перенос координат в проект
Вернемся к атрибутам из нашей документации. У нас есть simulateLatitude и simulateLongitude. Скопируем эти атрибуты и вставим из в проект. Примитивы из кода мы можем удалить (Рис. 21).
Рис. 21 Работа с кодом
Вернемся обратно в документацию и увидим еще один тег - gps-entity-place. Он позволяет указывать местоположение наших примитивов. Скопируем пример и вставим его в проект. Вернемся в яндекс.карты и заменим <your-latitude> и <your-longitude> на новую точку (Рис. 22).
Рис. 22 Работа с кодом
Обновим превью. Можно заметить, что объект очень маленький, это необходимо исправить. Для этого подкорректируем тег <a-box> добавив к нему свойство scale. Атрибут scale имеет три параметра: это увеличение по оси X, увеличение по оси Y, и увеличения по оси Z (Рис. 23).
Рис. 23 Увеличение размера куба
В библиотеке Aframe также есть тег <a-entity>. Он позволяет с помощью атрибута геометрия присваивать абсолютно любую форму объекту. Создадим вторую точку которая тоже будет кубом. Перейдем в документацию Aframe .
Cкопируем первый пример и вставим его в наш проект. Добавим новую геопозицию (Рис. 24).
Рис. 24 Работа с кодом
Давайте посмотрим, как вставлять наши объекты в цикле. Допустим, у нас есть массив, где указано название, долгота и широта нашего объекта. Мы будем создавать блоки, которые отображаются, с помощью Java Script и добавлять их на сцену . Создаем новый тег <scrip> сразу после подключаемых библиотек. Первым делом мы создадим массив "places" у нас он выглядит следующим образом (Рис. 25).
Рис. 25 Создание массива
После массива введем команду window.onload, которая дожидается полной загрузки страницы и выполняет алгоритм, который в нее вложен. Внутри мы ссылаемся на тег a-scene и записываем его в переменную scene (Рис. 26).
Рис. 26 Работа с кодом
После этого мы перебираем наш массив place с помощью функции for each и в скобках указываем, как будет называться один элемент данного массива. После чего мы начинаем создавать новые элементы, которые будут типа а-entity (Рис. 27).
Рис. 27 Работа с кодом
Давайте подгрузим какую-нибудь картинку. Для этого добавим в атрибут material свойство src, где сошлемся на добавленную картинку в <a-assets> (Рис. 28).
Рис. 28 Работа с кодом
Для того, чтобы подгружаемое изображение поддерживало прозрачность, добавим стиль наложения в скрипте (Рис. 29).
Рис. 29 Работа с кодом
Запустим превью. Видим, что локации отображаются и они на разном расстоянии, как мы и прописывали (Рис. 30).
Рис. 30 Отображение локаций
Добавим наименование к каждой локации. Для этого воспользуемся атрибутом text. Давайте добавим и подключим наш кастомный шрифт с русскими символами. Для того, чтобы мы могли работать с массивом наименований, поставим косые скобки и сошлемся на вторые элементы массива. Также добавим черный цвет текста, подкорректируем размер с положением и контур (Рис. 31).
Рис. 31 Работа с кодом
Перейдем в превью. Камера дергается, так как находится в статичном устройстве. Однако, мы работаем с мобильными устройствами, поэтому нашу камеру нужно контролировать. Для этого у нас в камере есть несколько параметров, которые смогут нам помочь (Рис. 32).
Рис. 32 Добавление текста
Вернемся к документации AR.js . У нас есть минимальная (minDistance) и максимальная (maxDistance) дистанции, это относится к тому, сколько у нас видит камера на текущий момент.
Допустим, minDistance = 2 м, тогда пользователь не будет видеть метки, которые ближе к нему, чем два метра. Это делается для того, чтобы контент не перекрывал друг или, возможно, в этом месте вы хотите, чтобы пользователь нашел что-то уже без ваших подсказок. Максимальная дистанция - это то, насколько далеко пользователь будет видеть метки. В некоторых случаях эта дистанция увеличится до такой степени, что наши 3d-объекты станут очень маленькими, но если вы работаете с картой всего города, то максимальную дистанцию тоже следует ограничивать. Так как элементы прогружаются и занимают память устройства.
Еще одно свойства камеры - gpsMinDistance, которое следует указывать, когда мы работаем с мобильными устройствами. Оно позволяет нам отслеживать камеру и ее движение не постоянно, а на определенной дистанции. Условная дистанция это 5 метров, чем больше число, тем меньше движений и колебаний будет учитываться.
Добавим значения <a-camera> и удалим не нужные нам, так как симуляция нам больше не потребуется, мы начинаем работать с телефоном (Рис. 33).
Рис. 33 Работа с кодом
Запустим превью и скопируем ссылку на демонстрацию с мобильного устройства.
Last updated