Как мы претворили в жизнь талисман нашего продукта с помощью AR.js

1656577095 kak my pretvorili v zhizn talisman nashego produkta s pomoshhyu

Матеуш Торнаски

JVa4Emf7r3TQvcSDTkkERoqQDg6sYvkYoH3q
Фото Родиона Куцаева на Unsplash

Краткий ответ: с помощью браузерной программы дополненной реальности (AR). Чтобы получить длинный ответ, читайте ниже.

Идея играть с AR возникла как случайный интересный эксперимент. В нашей компании мы стремимся оставаться на краю кривой. Мы делимся друг с другом техническими новинками и новыми технологиями на полурегулярной основе. Поскольку мы в основном имеем дело с веб-технологиями, концепция AR в обозревателе действительно возросла.

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

Мы решили оживить Hubert во время мероприятия в виде приложения AR, с которым люди могут играть. В наших головах пользователи должны иметь возможность:

  • отобразить Хуберта на фоне стены в своих телефонах
  • сфотографируйте воспроизведенную модель
  • твиты фотографию (не тема этой статьи)

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

vvpzSs7qYIixdMDjC8TY4kto2aRREFWKHJ4H
lTqvZf927WIlmukzwzK7qt-fN1PWfDDSKPYn

Воспроизведение Hubert в режиме реального времени

Мы использовали AR.js (версия из этого комита) как основной строительный блок нашего приложения AR – он пакетирует доступ к камере webRTC, распознаванию маркеров и 3D-рендерингу сцены. Нам это понравилось, в основном, потому, что вы можете иметь базовую демонстрацию, которая работает примерно с 20 строк кода.

Под капотом AR.js может использовать или три.js или A-frame, чтобы воспроизвести ваши 3D-сцены.

  • three.js предлагает точный контроль над 3D-рендерингом и базируется на JavaScript. Вы наверняка слышали об этом в контексте воспроизведения 2D и 3D сцен в браузере.
  • A-frame – это веб-фреймворк, разработанный специально для создания VR и AR. Он имеет HTML-образную разметку, которая более декларативна, чем three.js, но приносит в жертву часть контроля в пользу простоты использования.

У нас не было эксперта VR или 3D (кроме Мрова, подготовившего 3D-модель). Поскольку декларативный синтаксис A-frame, похожий на HTML, казался нам более знакомым, мы выбрали A-frame для выполнения визуализации.

Здесь вы можете увидеть код для визуализации Hubert, 30 строк по точке. Мы пропустили некоторые параметры и настройки A-рамки для простоты. Вы можете обратиться к репо, чтобы увидеть все.

Это дает нам хорошо отраженный Губерт в браузере в режиме реального времени.

Сделать фотографию для твита

К сожалению, у нас нет ни одного видео, которое отображало бы всю сцену. Есть видео с камеры и воспроизведена 3D-сцена. Мы быстро поняли, что нам придется снять кадр с обоих источников и собрать их вместе, чтобы получить хорошую фотографию Хьюберта.

Вытаскивать кадры из видеопотока webRTC достаточно просто. Лучший материал по этой теме можно найти здесь. Если в вашем браузере есть соответствующий API, вам понадобятся два элемента:

  • ссылку на ваш исходный тег
  • целевой элемент в который нужно поместить рамку

Тогда это просто нарисовать двумерное изображение с видео на холст. В нашем случае и то, и другое немного сложнее.

Используемое видео генерируется и встраивается с помощью AR.js. Мы не имели представления, как это изящно получить, поэтому мы сломали его с помощью цикла и селектора DOM:

Нам тоже нужно было сломать некоторое масштабирование. AR.js не предоставляет пользователю выходной видеоканал, он масштабирует его, чтобы заполнить экран без потери соотношения сторон. Это значит, что нам нужно применить то же масштабирование к нашему кадру. Если нет, наш снимок экрана будет иметь больше видеоканал, чем показано на экране. Мы не хотим вводить пользователей в заблуждение.

Что видит пользователь:

TqNXPoUowQqneSK0YcqTmW0Zs3IXHPXN8Ivv

Если взять рамку без масштабирование и просто попытка скопировать из точки (0.0) мы теряем поля, наложенные AR.js. Это совсем другая картина от того, что представляется пользователю:

G86uFDWwJ15KiGqWsBEJQdRy-hmnvD9qL8gM

Достаточно сказать, что мы просто переделали масштабирование и выяснили ограничительную рамку того, что видит пользователь:

Чтобы добиться этого конечного результата (так же, как и то, что отображается пользователю в прямом эфире, немного встряхните камеру):

qanFbFOXGrc4HzplknO4E7PwqGzEw4ZVO1M5

Теперь нам просто нужно изобразить Хьюберта. Опять же, API для этого очень простой. Чтобы сделать снимок экрана воспроизведенной сцены A-frame, нам нужно получить полотно сцены. Подходящая часть копируется на наше целевое полотно поверх предварительно снятого видеокадра.

Получение соответствующей части сложно в нашем случае. Благодаря масштабированию AR.js, мы не можем просто получить «перспективный» снимок сцены и использовать его. Это будет выглядеть слишком широким или слишком коротким в зависимости от ориентации.

Для ландшафтного режима (ширина > высота) метод масштабирования, используемый для видео, прекрасно работает.

Для портретного режима он отлично работает на ПК… Однако, как только вы входите в сферу мобильных устройств, масштабирование нарушается, и снимок экрана выглядит не очень хорошо. Вы получаете этого тощего Губерта…

b6iPvi5VULuttWNr0fhEbL3Sb68rBHK9vXex

…вместо нашего прекрасного, блестящего талисмана во всей его красоте:

DpNxsKWRiI-WKImCfjd7PZCfg7HAFGk7dB95

Мы до сих пор не уверены, почему это так. Мы совершили ошибку, не испытав его тщательно на реальных мобильных устройствах, подумав, что он будет работать так же, как и на машине для разработки. (Да, мы знаем, как это плохо звучит, но это реальность.) Во время конференции нам удалось выяснить формулу для портретного масштабирования и ввели исправления:

Это не красиво. Это одно из тех поправок «это поздно, это работает, просто оставьте». Вышеприведенные значения дали удовлетворительный результат, и мы оставили его на этом.

Таким образом, у нас есть картина Хуберта в реальном мире! Его можно извлечь из целевого элемента canvas и отобразить на странице или отправить на сервер для рассылки твитов.

Резюме

AR в браузере возможен. Более того, это возможно на мобильном оборудовании среднего класса (на июнь 2018 года). Заставить его работать на каждом телефоне и в браузере еще очень трудно, поэтому не рассчитывайте на него для широких и разнообразных баз пользователей.

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *