AR — это технология, которая в реальном времени накладывает цифровые объекты на физические. Например, 3D-модель органа, анимация действия препарата или интерфейс — всё это может появляться поверх того, что пользователь видит через камеру.
В отличие от VR, дополненная реальность не заменяет окружающий мир, а дополняет его. Она не требует шлемов и дорогого оборудования — достаточно смартфона, планшета или даже браузера (в случае webAR).
Однако, сложности с касанием для пользователя всё равно остаются. Эта проблема решается через разные форматы. Я расскажу, как нам подпортил жизнь уход Инстаграма с рынка и какие альтернативы мы нашли.
Почему webAR раньше был непригоден
Когда мы разрабатываем AR-решения, то вынуждены преодолевать различные барьеры.
Два ключевых барьера:
Сложность целевого действия для пользователя. Чтобы зайти на сайт, тебе достаточно либо открыть ссылку, либо отсканировать QR-код. Это технически сделать достаточно легко. В случае с AR должна быть среда просмотра, которая тебя доводит до взаимодействия.
Уровень качества визуализации. Важно, чтобы картинка была качественной и не лагала, т.к. иначе пользователь не получит эффект “бесшовной” интеграции контента в реальный мир.
Сама технология AR базируется на 3 столпах:
Алгоритм трекинга. Он отвечает за поиск и распознавание объекта, к которому будет крепиться 3D-контент. Это может быть лицо, картинка, плоская поверхность или тело. Такой объект называется маркером.
Алгоритм 3д реконструкции. Когда мы наводим телефон на маркер, поверх него появляется 3d объект. И этот алгоритм считает, как относительно маркера должна располагаться 3d модель и как она будет меняться вместе с движением объекта.
Сам контент, который мы смотрим и с которым взаимодействуем через приложение и устройство. В основном это 3D-модели, элементы пользовательского интерфейса и звуковое сопровождение.
Трекинг – это ключевой аспект AR. Приложение видит мир через камеру телефона, как 30-60 кадров в секунду. 30/60 fps это 30-60 фотографий в секунду, на которых алгоритм пытается найти нужный объект, а затем посчитать, как относительно него должен располагаться контент. Оба алгоритма, делающие трекинг возможным, достаточно требовательны к ресурсам устройства + нам нужно оставить запас на визуализацию 3D-графики.
К сожалению, качество webAR решений было далеко от того качества, которое нам было нужно. Поэтому мы выбирали другие альтернативы.
Чем неудобны отдельные приложения
В приложениях решить задачу трекинга гораздо проще, так как там у нас есть полный доступ к вычислительным ресурсам устройства. Это позволяет добиваться самого топового качества визуализации, ценой провала по сложности целевого действия.
Несмотря на то, что приложение классно справляется с красивой визуализацией даже самых сложных сценариев, ставить приложение на телефон – это очень сложное действие. После установки нужно открыть включить камеру, разрешить доступ к ней, и только затем отсканировать упаковку.
Подобная цепочка замедляет пользовательский путь и ухудшает доходимость. Есть сценарии в которых приложения обеспечивают максимальный эффект, о них мы поговорим отдельно в одном из следующих материалов, а сегодня сконцентрируемся на тех технологиях, которые позволяют оптимально «доставить» AR-контент пользователю.
Как было до блокировки Инсты
До ухода из России, самой комфортной для пользователей средой был Инстаграм со своими масками. Это самый частотный кейс с использованием AR, который пользователи зачастую даже не связывают с технологией AR в принципе. Он хорошо решает оба челленджа AR-технологии, совмещая быстрый и удобный доступ к контенту и сравнительно высокое качество визуализации (хоть и в жестких рамках, установленных Instagram).
Поэтому маски и вирусились – тебе не нужно устанавливать отдельное приложение, а контент гарантированно запустится и отработает даже на среднем по рынку устройстве. Маски нативно интегрированы в сам интерфейс Инсты, ты можешь сразу выбрать нужную, когда постишь сторис.
Инста не была идеальным решением: всю маску необходимо было уложить в 4 мб, а это очень мало. В ходе разработки таких проектов мы больше думали не над креативом, а как сжать сцену через несколько алгоритмов, чтобы всё влезло в ограничения, и при этом выглядело нормально.
Но эпоха инстаграм масок закончилась с блокировкой платформы, а в 2024-м году Инстаграм и вовсе закрыл свой конструктор Spark AR по совокупности причин. VR/AR направление с 2020-года по разным оценкам накопило убытков от 30 до 54 миллиардов долларов. И это не считая растущей конкуренции со стороны Snap и TikTok и накопленного технического долга.
Однако не Инстаграмом единым живет удобный пользовательский AR, и мы переходим к вебу.
Наши первые неудачные попытки в webAR
С 2015-2017 годов стали появляться открытые платформы для создания webAR-решений. Тогда они были либо очень дорогими для российского рынка, и стоили тысячи долларов только за подписку на сервис, либо не отвечали требованиям к качеству и скорости работы визуализации.
Мы перепробовали большую часть доступных на рынке платформ. На наш взгляд, лучшим решением была и остается платформа 8th Wall. Мы увидели, что высокий уровень качества AR в вебе в целом достижим, а значит этот результат можно повторить.
Здесь подходит аналогия с айфоном: как только Apple сделали хороший сенсорный экран, все остальные производители поняли, что появился новый стандарт качества для пользователей и делать паршивые сенсорные экраны больше не получится.
В браузере есть строгие лимиты на использование памяти устройства в рамках одной вкладки, поэтому важно, чтобы алгоритм, отвечающий за поиск маркера и визуализацию 3D-моделей поверх него, был хорошо оптимизирован, иначе, при перемещении маркера будет возникать задержка в отрисовке контента, что негативно отразится на пользовательском опыте.
Известные нам аналоги 8th wall тогда работали плохо. Либо объекты доезжали с задержкой, либо контент и вовсе не открывался в некоторых браузерах. Тогда каждый уважающий себя китайский производитель смартфонов считал своим долгом сделать свой браузер, что усугубило проблему кросс совместимости.
Как мы нашли выход из положения
Приложения перестали нас устраивать, инстаграм душил ограничениями, а webAR-конструкторы были либо очень дорогими, и не подходили клиентам, либо работали из рук вон плохо. Поэтому мы попытались сделать своё решение в вебе.
Мы решили погрузиться в технические детали и создать собственный фреймворк для WebAR.
Наш план основывался на классическом пайплайне компьютерного зрения для трекинга изображений:
Анализ маркера. Сначала мы анализировали статичное изображение-маркер, чтобы найти на нём уникальные «ключевые точки» (keypoints) — например, углы, контрастные области и другие характерные черты. Для каждой такой точки мы создавали «дескриптор» — своего рода цифровой отпечаток, который её описывает.
Анализ видеопотока. Затем, в режиме реального времени, тот же алгоритм обрабатывал кадры с камеры пользователя, также находя на них ключевые точки.
Сопоставление (Matching). Самый важный шаг — сопоставить ключевые точки с видеопотока с теми, что мы заранее сохранили с нашего маркера.
Расчёт трансформации. Когда находилось достаточное количество совпадений, мы могли вычислить матрицу гомографии. Это матрица преобразования, которая описывает, как плоскость маркера повёрнута и расположена относительно камеры.
Отрисовка. Эта матрица позволяла нам правильно трансформировать и наложить 3D-объект на видеопоток, создавая иллюзию его присутствия в реальном мире.
Для реализации мы обратились к OpenCV — мощной open-source библиотеке для компьютерного зрения. Мы экспериментировали с классическими алгоритмами обнаружения и описания ключевых точек, такими как SIFT, SURF, FAST, BRIEF и ORB.
Однако мы столкнулись с двумя фундаментальными проблемами:
Производительность. Эти алгоритмы очень требовательны к вычислительным ресурсам. Их запуск в браузере, даже с использованием WebAssembly (WASM), создавал огромную нагрузку на процессор устройства. Это приводило к низкому FPS и заметной задержке — 3D-объект «дёргался» и не успевал за движением реального маркера, что разрушало весь пользовательский опыт.
Математическая сложность. После успешного расчёта 2D-трансформации (гомографии) мы столкнулись со следующей задачей: «поднять» её в 3D-пространство, чтобы точно определить положение и ориентацию камеры. Это оказалось сложной математической проблемой.
В итоге, мы поняли, что упёрлись в теоретический и ресурсный потолок. Создание действительно стабильного и оптимизированного решения требовало огромных R&D-ресурсов и целой команды, а не одного разработчика, работающего над этим в свободное время. Стало очевидно, что коммерчески этот путь для нас невыгоден, и мы решили отказаться от этой идеи.
Примерно в это же время мы наткнулись на отечественный WebAR сервис под названием Letary. Это оказались молодые парни из Перми, которым удалось разработать state of the art конструктор для webAR визуализации на базе движка three.js, на котором работает большая часть 3D-графики в вебе. Трекинг изображения в их решении был сопоставим по качеству с лидером отрасли 8th wall.
Вторым ключевым открытием на пути к удобному и красивому WebAR стал unity for web. Как следует из названия - это тот же самый Unity, только адаптированный под запуск в браузере. До 2023 года реализовать на нём AR (именно в вебе) было приключением, и затраты на такой проект просто не оправдали бы результат. Но за последние 2 года сообщество сделало большой прогресс, и теперь мы можем использовать трекинг плоскости (стол, пол и т.д.) на базе этого фреймворка..
Бонусом, на Unity реализовали Curved image tracking – трекинг изогнутых изображений (банка, бутылка вина и т.д.), что разнообразило возможности адекватного трекинга разных объектов.
Как выглядит AR изогнутых изображений
Куда всё движется
Когда Инстаграм закрыл свой AR-конструктор, это создало новые возможности (как ни странно). Появилась аудитория людей, которые полюбили маски и готовы ими пользоваться. Осталось лишь найти способ, как эти маски можно реализовать через другие технологии.
Сейчас потихоньку набирает популярность технология mini app, причём не только в телеграме. Что гугл, что эпл позволяют делать приложения в своих сторах, которые не надо устанавливать. Они так мало весят, что их можно открыть из web. Mini app поставится так быстро, что ты этого не заметишь.
Каркас приложения весит 1-5 мб. А сами данные для работы быстро подгружает в момент установки, мобильный интернет это позволяет. Это слабо поддерживаемый стандарт, потому пока что реализовывать это на практике не супер удобно. Но мы уверены, что это решаемо в течение ближайших 3-5 лет.
В самом телеграме мы тоже делаем маски, так как в нём есть та же социальная составляющая, что и в Инсте. Пользователю не нужно скачивать отдельное приложение или заходить в веб. Он открывает знакомое приложение, в котором уже всё установлено.