Современным разработчикам всё сложнее удерживать внимание пользователей на сайтах. Для этого применяются различные методы: крутая анимация, 3D-объекты, даже целые мультфильмы. Одним из самых впечатляющих решений стала интеграция дополненной реальности (AR), доступной через обычный компьютер с веб-камерой или смартфон. Эта технология способна значительно увеличить продажи сайтов — некоторые компании отмечают рост в десятки раз после её внедрения. Например, сайты по продаже обуви позволяют пользователям «примерить» обувь онлайн, не выходя из дома. Другой пример — WebXR, позволяющий легко создавать 3D-объекты.
Интеграция AR.js
Эта статья описывает простую интеграцию дополненной реальности на сайт с помощью библиотеки AR.js. Хотя технология используется крупными компаниями, она всё ещё развивается, и возможны баги, которые, однако, быстро исправляются.
Подготовка HTML-файла
Создадим простой HTML-файл. Объект будет отображаться при наличии маркера (изображения), а не по GPS-координатам. Качество изображения маркера напрямую влияет на точность распознавания и отображения объекта. Изображение маркера можно скачать из официальной документации.
В коде страницы используется стандартная HTML-разметка, а в начале подключаются необходимые JavaScript-библиотеки (ссылки на них можно найти в соответствующей документации). Дальнейшая работа ведётся с <a-scene>, элементом, аналогичным сцене в игровых движках, но предназначенным для объектов дополненной реальности.
Определение маркера и объекта
В <a-scene> указываем маркер: собственное изображение (атрибут src указывает путь к картинке) или стандартный маркер. Воспользуемся стандартным маркером hiro. Внутри маркера указывается объект, отображаемый при распознавании изображения камерой. На этом этапе указывается только позиция и размеры объекта; сам объект добавим позже. Также необходимо создать <a-entity> и указать работу с камерой.
Добавление 3D-модели
Для отображения понадобится 3D-модель в формате GLTF или FBX. Такие модели можно найти на ресурсах типа Sketchfab. После регистрации и скачивания бесплатной модели, распакуйте файлы и укажите полный путь к файлу модели в коде.
Тестирование
Для тестирования необходим сервер (даже локальный); простое открытие файла в браузере, скорее всего, не сработает. Желательно, чтобы проект в дальнейшем размещался на сайте, использующем HTTPS, иначе доступ к камере может быть заблокирован. После запуска, объект должен появиться на маркере, поворачиваясь и трансформируясь вместе с движением телефона.
Ограничения и возможности
На основе этой технологии сложно создать полноценную игру или добавить сложный функционал. Тем не менее, возможность реализации дополненной реальности на сайте за несколько строк кода впечатляет.
Современные разработчики постоянно расширяют границы возможного. Технологии, которые ещё несколько лет назад казались фантастикой, сегодня доступны и относительно просты в реализации.