Что такое WebAR: дополненная реальность в браузере без приложения

WebAR — это дополненная реальность, которая открывается по ссылке или QR-коду прямо в браузере телефона. Человек наводит камеру на упаковку, открытку или стол, и поверх реального мира появляются видео, 3D-модели, кнопки и игры. Устанавливать приложение не нужно: AR работает как обычная веб-страница.

Ниже — как это устроено, какие бывают виды WebAR, чем он отличается от AR в приложении, где его применяют и как сделать свой первый проект.

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

1. Человек открывает ссылку. Чаще всего — сканирует QR-код камерой телефона. Ссылку можно отправить и в мессенджере.
2. Браузер просит доступ к камере. Это стандартный запрос: человек разрешает — и страница видит то же, что и камера.
3. Камера ищет, к чему привязать контент. Это может быть картинка, QR-код, ровная поверхность, лицо или место на карте.
4. Поверх появляется контент. Видео на открытке, 3D-модель на столе, кнопка «купить» над упаковкой.
5. Обновления — сразу у всех. Проект живёт на сервере, поэтому изменения видят все, кто откроет ссылку, без обновлений в магазинах приложений.

Есть и другой путь: приложение с мгновенным запуском открывает тот же проект без установки из магазина приложений.

То, к чему привязан контент, называют маркером или триггером. Если маркер — картинка, от её качества зависит, как быстро и устойчиво работает AR. Как выбрать хорошую картинку, разобрано в статье о маркерах для дополненной реальности.

AR, VR и 3D: в чём разница

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

WebAR — это AR, который доставляется через браузер. В одном проекте AR и 3D часто работают вместе: на сайте товар вращают в 3D, а потом открывают его в AR и ставят в комнату.

Виды WebAR

Вид трекинга	К чему привязан контент	Пример
Фото (изображение)	Напечатанная или показанная на экране картинка	Оживающее фото, AR-визитка, упаковка
QR-код	Сам код	Постер, листовка, табличка у экспоната
Поверхность (SLAM)	Пол, стол или стена без всяких меток	Мебель в комнате, модель дома на столе
Лицо	Лицо человека во фронтальной камере	Примерка очков, маски, фильтры
Геолокация (GEO AR)	Точка на карте	Городской квест, экскурсия
AR 360°	Окружение вокруг зрителя	Виртуальная прогулка, интерьер
VPS	Само помещение или улица, узнанные по камере	Навигация в помещении, постоянные AR-указатели

Все эти типы трекинга есть в Web-AR.Studio. Геолокация доступна на платных тарифах, VPS — не на всех из них.

Как выбрать вид трекинга

• Есть печатный носитель — открытка, упаковка, плакат? Трекинг фото или QR.
• Нужно показать вещь в натуральную величину у человека дома? Поверхность.
• Примерка или фильтр? Лицо.
• Маршрут по городу или парку? Геолокация.
• Навигация в здании без меток на стенах? VPS.
• Нужно перенести человека в другое место? AR 360°.

WebAR или приложение

	WebAR в браузере	AR в приложении
Установка	Не нужна: ссылка или QR-код	Нужно найти и скачать приложение
Обновления	Сразу у всех	Через магазины приложений
Распространение	Ссылкой в мессенджерах и соцсетях	Через магазин и рекламу приложения
Интернет	Нужен	Может работать без сети
Возможности устройства	Те, что даёт браузер	Глубже: датчики, производительность, весь экран

Для маркетинга, ритейла, мероприятий и образования обычно выигрывает WebAR: человеку не нужно ничего устанавливать, и до AR он доходит за одно касание. Приложение имеет смысл, когда нужна работа без интернета, максимальная производительность или бренду важно своё приложение в магазинах.

Из чего состоит WebAR-проект

Часть	Что это
Триггер	То, к чему привязан контент: картинка, QR-код, поверхность, лицо, место
Контент	Видео, 3D-модели, изображения, текст, звук
Сцены	Этапы проекта: приветствие, каталог, финал с призом
Логика	Что происходит по нажатию: анимация, переход, ссылка, условие
Публикация	Ссылка, QR-код, свой домен, встраивание на сайт
Аналитика	Сколько людей открыли проект и что они в нём делали

Как люди находят WebAR-проекты

Сам по себе AR никто не ищет — человек натыкается на него там, где уже смотрит:

• QR-код на упаковке, ценнике, полке или в каталоге;
• ссылка в мессенджере, рассылке или посте в соцсетях;
• кнопка на странице товара или встроенная 3D-сцена на сайте;
• табличка у экспоната, плакат на мероприятии, приглашение.

Поэтому призыв «наведите камеру» и понятное обещание («посмотрите, как диван встанет у вас дома») важны не меньше самой сцены.

Как WebAR устроен в Web-AR.Studio

Web-AR.Studio — платформа, на которой AR-проекты создают, публикуют и анализируют без программирования.

Редакторы

• WAS Design Studio — универсальный редактор без кода: перетаскиваете элементы, настраиваете сцены, переходы, анимацию и действия.
• WAS Lite Studio — упрощённый редактор шаблонных проектов: прикрепляете файлы и заполняете поля.
• WAS 3D Configurator — интерактивные 3D-конфигураторы с просмотром в AR, которые встраиваются на сайт.

В проект можно добавить фигуры, изображения, текст, видео (в том числе с альфа-каналом — для хромакея), 3D-модели, звук, свет, кнопки и ссылки. Есть шаблоны проектов и сцен, библиотека AR-объектов, 3D-библиотека через интеграцию со Sketchfab и генеративный ИИ в редакторе: 3D-модели, изображения, тексты и короткие видео.

Три способа публикации

• WebAR — проект открывается в браузере по ссылке или QR-коду.
• Приложение с мгновенным запуском — AR Viewer Lite открывает проект без предварительной установки на iOS 14 и выше и Android 8 и выше и может работать без интернета.
• Нативное приложение — AR Studio Viewer: полностью кастомизируемое, с работой без интернета.

Что ещё есть у проекта

• свой домен — проект открывается по вашему адресу (как подключить);
• персональный экран загрузки и интерфейс;
• встроенная аналитика в личном кабинете и внешние счётчики, например от Google;
• встраивание 3D и AR на свой сайт;
• изменение AR-контента без смены QR-кода.

На каких устройствах работает

По данным Web-AR.Studio, проекты работают на iOS 12 и выше в Safari и на Android 8 и выше в Chrome и других браузерах на Chromium. Трекинг картинок и QR, конфигураторы и сцены 360° открываются и в современных браузерах на компьютере. Подробнее — на странице WebAR от Web-AR.Studio.

Где применяют WebAR

• Фото и полиграфия. Оживающие фото, альбомы, открытки. → Как сделать оживающее фото
• Маркетинг и упаковка. Ожившая упаковка, постеры, промо-игры с призами. → 8 форматов AR в маркетинге
• Визитки. Видеоприветствие, портфолио и кнопки на бумажной визитке. → AR-визитка
• Образование. Модели над страницей учебника, проектная работа учеников. → AR в школе
• Музеи и выставки. Ожившие картины, аудиогиды, реконструкции, маршруты. → AR в музее
• Игры. Квизы, кликеры, квесты. → Как сделать AR-игру
• Ритейл и e-commerce. Товар в комнате в натуральную величину, примерка, 3D-конфигуратор на сайте.
• Недвижимость. Модель дома на столе в офисе продаж, отделка и мебель в будущей квартире.
• Корпоративное обучение. Инструкции к оборудованию и учебные материалы с 3D-моделями.
• Мероприятия и туризм. Приглашения, квесты по площадке, экскурсии по городу.

Кто делает WebAR-проекты

Бренды и агентства, фотографы, учителя, музеи, организаторы мероприятий и просто люди, которые хотят удивить друзей. Пути разные:

• собрать проект самому в конструкторе — по шаблону или с нуля;
• пройти обучение и делать проекты внутри своей команды;
• заказать разработку под ключ у команды Web-AR.Studio — от концепции до запуска.

Ограничения, о которых стоит знать

• Нужен интернет. Проект в браузере загружается по сети. Для мест без связи подходят приложения, которые работают офлайн.
• Вес проекта. Тяжёлые модели и длинные видео долго грузятся на мобильном интернете. Как облегчить файлы — в статье о ресурсах для AR.
• Звук после касания. Браузеры не включают звук, пока человек не коснулся экрана.
• Качество маркера. Логотип на белом фоне или глянцевая печать распознаются плохо.
• Освещение. В темноте камера хуже находит маркеры и поверхности.
• Возможности браузера. Для самой тяжёлой графики и глубокой работы с датчиками приложение даёт больше.

Как учесть всё это при проектировании, рассказано в статье о дизайне AR-проекта.

Как сделать первый WebAR-проект

1. Выберите простой сценарий — например, оживающее фото или визитку.
2. Откройте WAS Lite Studio или WAS Design Studio и создайте проект с трекингом фото. Можно начать с шаблона.
3. Загрузите картинку-триггер и добавьте поверх видео или 3D-модель.
4. Опубликуйте проект и скачайте QR-код.
5. Проверьте на телефоне, наведя камеру на настоящий отпечаток.

Подробный путь от первого проекта к сложным — в статье «С чего начать делать AR».

Частые вопросы

WebAR работает на iPhone и Android?

Да. Проекты Web-AR.Studio открываются в Safari на iOS 12 и выше и в Chrome и других браузерах на Chromium на Android 8 и выше.

Чем WebAR отличается от AR в приложении?

WebAR открывается по ссылке без установки и обновляется сразу у всех. Приложение нужно скачать, зато оно может работать без интернета и глубже использовать возможности телефона.

Нужен ли интернет?

Для WebAR в браузере — да. Приложения AR Viewer Lite и AR Studio Viewer могут открывать проекты без сети.

Нужно ли уметь программировать, чтобы сделать WebAR?

Нет. В Web-AR.Studio проекты собираются в визуальном редакторе без кода. Скрипты нужны только для нестандартной логики.

Можно ли сделать WebAR без маркера?

Да. Трекинг поверхности ставит контент на пол или стол, геолокация запускает сцену в нужной точке на карте, а VPS узнаёт помещение по камере. Маркер нужен только для привязки к конкретной картинке.

Что делать, если AR не запускается?

Проверьте, что браузер получил доступ к камере, что света достаточно и что маркер хорошо распознаётся. Если не помогло, напишите в техподдержку Web-AR.Studio.

Безопасно ли разрешать браузеру доступ к камере?

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

Можно ли встроить WebAR на свой сайт?

Да. Проекты Web-AR.Studio встраиваются на сайт, а WAS 3D Configurator создан специально для 3D и AR на страницах товаров.

Сколько стоит?

Базовые возможности Web-AR.Studio бесплатны. Свой домен, white-label, расширенные типы трекинга и другие функции — на платных тарифах; подробности на странице тарифов.

Хотите увидеть WebAR в деле? Посмотрите примеры проектов или соберите свой в WAS Design Studio.