Web AR

AR разработка для сайтов

Egorov Agency

Как это работает

Дополненная реальность для веба

01
Разработка 3D-объектов и сценариев взаимодействия с ними
02
Анимация и программирование интерактивного взаимодействия с 3D-объектами
03
Создание веб-страницы и размещение на ней WebAR объекта
04
Пользователь видит ссылку или QR-код на сайте или в рекламе
05
Пользователь заходит на страницу и разрешает доступ к камере телефона
06
Магия! Интерактивный объект (продукт, персонаж и т.д.) появляется в пространстве рядом с пользователем

Особенности и преимущества

AR для веба

Пользователю необходим только браузер

Чтобы увидеть элементы дополненной реальности, пользователю не нужно скачивать никаких дополнительных приложений. Просто открывается страница в Chrome или Safari.

Совершенно новый способ взаимодействия с пользователем

На странице сайта пользователь может примерить кроссовки, часы или очки, посмотреть новую расстановку мебели на кухне или в спальне, оценить новую отделку машины и многое другое.

Посты с AR набирают много лайков и репостов

Люди с удовольствием делают посты о своем взаимодействии с AR, так как это создает вау-эффект. AR улучшает любую рекламную кампанию.

Геймификация увеличивает ваши продажи

Использование игровых механизмов и развлекательных элементов увеличивает продажи и лояльность покупателей, вовлекает их в процесс покупки, превращая его в игру.

Web AR кейсы

Примеры от популярных брендов

Interactive printing

Дрифт на Toyota

Дилер Toyota разместил AR-объект с автомобилем Toyota Supra GR в журнале Road & Track. Можно изменить цвет машины, а также увидеть ее в движении прямо на странице журнала.

Ecommerce

Corolla конструктор

Дилер Toyota создал AR-объект с Toyota Corolla в натуральную величину, которую можно припарковать на стоянке. Пользователь может поменять фары, люк и литые диски.

Promo games

Человек-паук на стене

Для продвижения мультсериала The Spider-Verse был использован объект AR с супергероями. Каждый из супергероев может взобраться на стену и спрыгнуть на землю. Кроме того, пользователь может сфотографироваться с ним.

Real estate

Дудочник Miller Lite

Если пользователь направляет камеру телефона на банку пива Miller Lite, из нее появляется персонаж: он играет на дудке, танцует и выполняет трюки со змеей.

3D

Наш опыт

Портфолио

AR клоун для кондитерского бренда Ricolino

Клоун - главный символ компании. Идея проекта состоит в том, что человек сканирует QR-код, который находится на рекламном плакате сладостей. После этого открывается камера и клоун появляется в дополненной реальности, после анимации он призывает скачать приложение компании.

AR-медведь для продвижения песни Озуны

Дополненная реальность была загружена на сайт caramelo-ozuna.com. Когда пользователь заходит на сайт, рядом с ним появляется AR-медведь, танцующий под музыку. Можно сделать фото с медведем и поделиться им в Instagram.

AR-игра для книги

Объект AR размещается на странице книги. При наведении камеры на графическую метку запускается игра. После окончания игры пользователь может сохранить результаты на сайте.

Примерка шлема в AR

Используя селфи-камеру телефона, пользователь может примерить фирменный космический шлем. После этого он может сделать фото и поделиться им в Instagram.

AR-кружка с предсказанием

Чтобы просмотреть предсказание, человек заходит на сайт и затем направляет камеру на кружку. Изображение на кружке запускает предсказание с 3D-анимацией, и после нажатия кнопки пользователь видит случайное предсказание.

Карта филиалов в AR

Объект AR размещается на странице книги. При наведении камеры на графическую метку запускается дополненная реальность, которая представляет собой интерактивную трехмерную карту с метками филиалов. Когда пользователь нажимает на метку, появляется подробная информация о соответствующем филиале: статистика, фотогалерея и подробная карта.

AR-отчет для акционеров

Объект AR размещается на странице книги. При наведении камеры на графическую метку запускается дополненная реальность, которая представляет собой интерактивную 3D-микросхему с кнопками и экраном. При нажатии на кнопку запускается соответствующая анимация и видеофрагмент.

Технологии

WebGL
8th wall
A-Frame
three.js
AR.js
PlayCanvas
Blender
HTML5+CSS3+JS
3DS Max