Как сделать дополненную реальность по qr коду

Обновлено: 02.07.2024

Устройство HoloLens 2 способно видеть QR-коды в мировом пространстве с помощью веб-камеры, отрисовывая их в виде голограмм в месте расположения каждого QR-кода в реальном мире. Кроме того, HoloLens 2 может также отрисовывать голограммы в одном и том же месте на нескольких устройствах для общего взаимодействия с несколькими пользователями. Соблюдайте рекомендации по добавлению QR-кодов в приложения:

  • Тихие зоны
  • Освещение и фон
  • Размер, расстояние и угловое положение

Размещая QR-коды в приложении, следует уделять особое внимание особенностям пространственной среды. Более подробные сведения по каждой из этих тем, а также инструкции по скачиванию соответствующего пакета NuGet см. в главном документе "Отслеживание QR-кодов".

QR-коды — это единственный тип изображений, отслеживаемый HoloLens без дополнительной настройки. Модуль Unreal UARTrackedImage не поддерживается в HoloLens. Если вам требуется отслеживать собственные изображения, вы можете получать данные с веб-камеры устройства и обрабатывать кадры с нее с помощью сторонней библиотеки распознавания изображений.

Включение обнаружения QR-кодов

Поскольку для обнаружения QR-кодов устройству HoloLens 2 нужно задействовать веб-камеру, необходимо включить эту функцию в параметрах проекта:

  • Выберите Edit > Project Settings (Правка > Параметры проекта), прокрутите вниз до раздела Platforms (Платформы) и выберите элемент HoloLens.
    • Разверните раздел Capabilities (Возможности) и установите флажок Webcam (Веб-камера).

    Если вы используете UE 4.26, мы рекомендуем использовать следующую настройку схемы для добавления небольшой задержки, так как отслеживание QR-кода должно быть инициализировано ПОСЛЕ запуска сеанса дополненной реальности:

    Схема функции Toggle ARCapture с задержкой

    Дополнительные действия по включению для UE 4.25 не требуются.

    Настройка отслеживаемого QR-кода

    QR-коды выводятся в виде отслеживаемого изображения через систему отслеживания геометрии в дополненной реальности Unreal. Чтобы обеспечить работу этого механизма:

    1. Создайте схему субъекта и добавьте в нее компонент ARTrackableNotify:

    AR Trackable Notify для QR-кодов

    1. Выберите компонент ARTrackableNotify и в панели Details (Сведения) разверните раздел Events (События):

    События QR-кодов

    Добавление узла в событие On Add Tracked Geometry (При добавлении отслеживаемой геометрии)

    Использование отслеживаемого QR-кода

    В графе событий, показанном на следующей иллюстрации, событие OnUpdateTrackedImage используется для отрисовки точки в центре QR-кода и печати его данных.

    Пример отрисовки QR-кода для 4.26

    Пример отрисовки QR-кода для 4.25

    1. Сначала отслеживаемое изображение приводится к типу ARTrackedQRCode и проверяется, что текущее обновленное изображение содержит QR-код.
    2. Закодированные данные извлекаются из переменной QRCode. Координаты левого верхнего угла QR-кода можно получить из расположения, возвращаемого функцией GetLocalToWorldTransform, а размеры кода — с помощью функции GetEstimateSize.

    Поиск уникального идентификатора

    Каждый QR-код имеет уникальный идентификатор (GUID), найти который можно следующим образом:

    • Перетащите закрепление As ARTracked QRCode (Как отслеживаемый QR-код дополненной реальности) и найдите узел Get Unique ID (Получить уникальный идентификатор).

    GUID для QR-кода

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

    Следующий этап разработки

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

    Или сразу перейдите к развертыванию приложения на устройстве или эмуляторе:

    Как создать приложение дополненной реальности с помощью ARCore

    В этом гайде вы узнаете, как добавить 3D-модели в реальный мир. Библиотека ARCore от Google позволяет добавлять на 2D-изображение (картинка или видео) полноценные 3D-модели.

    Вам необходимо предоставить системе некое опорное изображение, которое ARCore будет искать в реальном мире, чтобы на его основе добавить на изображение 3D-модель. Дополненная реальность уже широко используются, например, в книгах, газетах, журналах и т.д.

    Прежде чем погрузиться в этот туториал, вам стоит ознакомиться с предыдущими двумя статьями на эту тему, которые познакомят вас с основными AR-терминами:

    Что такое изображения дополненной реальности?

    Согласно документации для разработчиков, изображения дополненной реальности в ARCore позволяют создавать приложения дополненной реальности, которые могут «оживлять» 2D-изображения, например, плакаты или упаковки продуктов.

    Вы загружаете в ARCore какие-то опорные изображения, а он вам затем сообщает об их обнаружении во время AR-сессии, например во время съёмки видео. И эта информация используется для расположения 3D-модели на 2D-изображении.

    Ограничения использования изображений дополненной реальности

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

    • ARCore может обрабатывать только до 20 опорных изображений одновременно.
    • Физическая плоскость в реальном мире должна быть плоской, а её площадь должна быть больше, чем 15 см х 15 см.
    • ARCore не может отслеживать движущиеся изображения и объекты.

    Выбор подходящего опорного изображения

    • Изображения дополненной реальности поддерживают форматы PNG, JPEG и JPG.
    • Неважно, цветное будет изображение или чёрно-белое, главное, чтобы оно было высокой контрастности.
    • Разрешение изображения должно быть не менее 300 х 300 пикселей.
    • Использование изображений с высоким разрешением не означает улучшение производительности.
    • Следует избегать изображений с повторяющимися паттернами (например, узорами или горошком).
    • Используйте инструмент arcoreimg, чтобы оценить, насколько подходит ваше изображение для работы. Рекомендуется оценка не менее 75 баллов.

    Как использовать инструмент arcoreimg:

    • Загрузите ARCore SDK для Android по этой ссылке.
    • Распакуйте zip-содержимое файла в любое место.
    • В извлеченной папке перейдите по пути tools > arcoreimg > windows (даже если у вас Linux или macOS).
    • Откройте командную строку в этой директории.
    • И введите эту команду:

    Замените dog.jpg на полный путь к вашему изображению.

    Начало работы с приложением дополненной реальности

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

    Создание фрагмента

    Мы создадим фрагмент и добавим его в нашу Activity. Создаём класс с именем CustomArFragment и наследуем его от ArFragment . Вот код для CustomArFragment :

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

    Затем мы устанавливаем режим обновления для сессии LATEST_CAMERA_IMAGE . Это гарантирует, что мы будем узнавать об обновлениях изображения всякий раз, когда обновится кадр камеры.

    Настройка базы данных изображений

    Добавьте выбранное опорное изображение (которое вы хотите обнаружить в физическом мире) в папку assets (создайте её, если её ещё нет). Теперь мы можем добавлять изображения в нашу базу данных.

    Мы создадим эту базу данных, как только будет создан фрагмент. В логи мы выведем результат этой операции:

    Вот как будет выглядеть CustomArFragment :

    Вскоре мы добавим метод setupAugmentedImagesDb в MainActivity . Теперь давайте добавим CustomArFragment в наш activity_main.xml :

    Добавление изображения в базу данных

    Сейчас мы настроим нашу базу данных изображений, обнаружим опорное изображение в реальном мире и добавим 3D-модель на изображение.

    Давайте начнём с настройки нашей базы данных. Создайте публичный метод setupAugmentedImagesDb в классе MainActivity :

    Мы также создали метод loadAugmentedImage , который загружает изображение из папки ресурсов и возвращает растровое изображение.

    В setupAugmentedImagesDb мы сначала инициализируем нашу базу данных для текущей сессии, а затем добавляем изображение в эту базу данных. Мы назвали наше изображение tiger. Затем мы устанавливаем эту базу данных в конфиг и возвращаем true , сообщая о том, что изображение успешно добавлено.

    Обнаружение опорных изображений в реальном мире

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

    Добавьте эту строку в метод onCreate() в MainActivity :

    Теперь добавьте метод onUpdateFrame в MainActivity :

    В первой строке мы получаем сам кадр. Кадр можно представить, как обычный скриншот из видео. Если вы знакомы с тем, как работает видео, вы знаете, что это просто набор изображений, которые очень быстро сменяют друг друга, создавая впечатление чего-то движущегося. Мы просто берём одну из этих картинок.

    После того, как мы получили кадр, мы анализируем его на предмет наличия на нём нашего опорного изображения. Мы берём список всех элементов, отслеженных ARCore, используя frame.getUpdatedTrackables . Затем мы перебираем её и проверяем, присутствует ли в кадре наше изображение tiger.

    Если совпадение найдено, то мы просто берём и размещаем 3D-модель поверх обнаруженного изображения.

    Примечание. Флаг shouldAddModel используется для того, чтобы мы добавляли 3D-модель только один раз.

    Размещение 3D-модели над опорным изображением

    Теперь, когда мы нашли наше опорное изображение в реальном мире, мы можем добавлять 3D-модель поверх него. Добавим методы placeObject и addNodeToScene :

    • placeObject : этот метод используется для построения отрендеренного объекта по заданному Uri . Как только рендеринг завершён, объект передаётся в метод addNodeToScene , где объект прикрепляется к узлу, и этот узел помещается на сцену.
    • addNodeToScene : этот метод создаёт узел из полученного якоря, создаёт другой узел, к которому присоединяется визуализируемый объект, затем добавляет этот узел в якорный узел и помещает его на сцену.

    Вот так теперь выглядит MainActivity :

    Теперь запустите ваше приложение. Вы должны увидеть экран, как показано ниже. Подвигайте телефон немного над опорным объектом. И как только ARCore обнаружит опорное изображение в реальном мире, добавит на него вашу 3D-модель.

    Инструкция от основателя сервиса МЕМОРИС Александра Астрова о том, как сделать оживающие фото с дополненной реальностью

    Оживающие фото “захватили” пространство РФ и СНГ в последние 2 года, и уже многие родители знают и любят такой формат детских фотографий. Только по нашей статистике за время работы сервиса было сделано более 200 000 оживающих фотографий, которые посмотрели более 3 миллионов раз.

    Давайте для начала разберёмся, что же такое оживающие фото. Это способ запечатлеть на качественном носителе - таком, как фотокнига или сувенир – эмоции, впечатления, воспоминания момента; воспроизвести голос, звуки окружающей среды, мимику и жесты изображенных людей. Наши клиенты ещё называют это “настоящей памятью”. Это как продолжение Live Photo’s, которые появились в iPhone несколько лет назад, - только для реальных физических объектов.

    Также компании используют эту технологию для “оживления” рекламных банеров, журналов, выставок и инструкций к продуктам.

    Какое оборудование требуется, чтобы сделать оживающие фотоальбомы?

    Если мы говорим про профессиональную съёмку, то достаточно фотокамеры с функцией видеосъёмки, плюс постоянный свет и петличный микрофон для качественной записи звука. Также вместо петличного микрофона некоторые клиенты используют диктофон (“журавлик”) – он позволяет экономить время на закрепление петлички.


    Как снимать видео для оживающих фото?

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

    В самом простом варианте фотографы снимают короткие видео с детьми по 15-20 секунд, где дети отвечают на 2-3 вопроса. Например: “Как тебя зовут? Кем ты мечтаешь стать?” Если детки совсем маленькие, то может потребоваться 2-3 дубля, но к идеальности здесь стремиться не стоит, ведь наша задача запечатлеть реального человека – со всеми его существующими дефектами речи, умиляющей интонацией, смешными гримасами. Ведь это и есть настоящая память! Воспитатели в детских садах или классный руководитель в школе от себя обычно записывают общее пожелание всем детям.

    Как правило, сначала делается серия фото, потом фотограф переключает камеру в режим видео и просит ребёнка ответить на поставленные вопросы. Вопросы даются заранее, чтобы дети могли продумать свои ответы и видеозапись проходила без заминок.

    Как монтировать видео для “живых” фото?

    В базовом варианте требуется обрезать начало и конец видеозаписи, в некоторых случаях скорректировать масштаб видео – все эти правки можно делать сразу в кабинете Меморис.

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

    Как загружать и создавать оживление через административную панель?

    Простые оживающие фото создаются менее чем за 30 секунд; вы можете всё сделать по этой видеоинструкции:

    или воспользоваться нашим текстовым описанием:

    2) Перейдите в раздел “оживающие фото”.


    3) Кликните на “загрузить фото” и выберите фотографию на вашем компьютере, при наведении на которую будет происходить оживление.

    4) Кликните на “загрузить видео” и выберите видео на вашем компьютере, которое будет появляться при наведении на ваше фото. Если у вас несколько фото и видео – повторите 3 и 4 шаги.

    5) Нажмите на кнопку “создать” и ожидайте загрузки.


    6) После загрузки появится qr-код и ссылка


    7) Для iOS 14 и выше: откройте камеру на телефоне, наведите на QR-код, нажмите на всплывающем окне сверху Меморис и открыть

    9) Наведите на фото, загруженное на шаге 3 через открывшуюся камеру Меморис.

    Вот и всё! Вы создали первое в вашей жизни оживающие фото, и на это должно было уйти в первый раз до 5 минут, а в последующие разы будет достаточно 30 секунд.

    Какие еще возможности имеются в Меморис?

    Мы просто перечислим, а если вы займётесь этим в будущем, то сможете изучить всё подробнее и пользоваться сервисом на все 100%!

    1. Маски или рамки – чтобы делать более продвинутые дизайн-макеты
    2. Альфа-канал – для использования хромакея и потрясающих эффектов
    3. Видеоредактор – для обрезки видео, изменения его масштаба
    4. Встраивание QR-кодов внутрь оживающих фото – удобно при продаже единичных фотографий
    5. Выбор кадра из видео в качестве фотографии
    6. Оживающие визитки
    7. Оживающие флаеры
    8. Оживающие календари

    А также многочисленные бонусы:

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

    Начать создавать оживающие фото и поставить процесс на поток можно всего за 1 день! Главное - не бояться идти в новое. Если вы хотите нести добро, вызывая у людей море глубоких волнующих эмоций, дарить им счастье и возможность переживать лучшие моменты жизни снова и снова, испытывая восторг и радость – то этот продукт однозначно для вас!

    Выбравшим для себя этот инструмент для бизнеса: что еще дают оживающие фото?

    1. Увеличение дохода от 30% до 1000%
    2. Счастливых и лояльных клиентов до конца жизни
    3. Новые способы самовыражения
    4. Уникальное преимущество на рынке сувениров, фотопродукции, полиграфии
    5. Способ быстрого захвата рынка и выхода на регионы, масштабирование бизнеса
    6. Новые навыки и умения (видеосъёмка, монтаж)
    7. Статус инноватора и современного фотографа, идущего в ногу со временем

    Каждый выбирает то, что ему важнее, но бесспорно одно: любой, кто возьмёт на вооружение дополненную реальность – останется в плюсе!

    Виртуальная или дополненная реальность поражает воображение, создает очень тесное и доверительное, практически интимное, пространство. Объединяет онлайн и офлайн. Начните погружаться в формат с простых инструментов.


    Создаем дополненную реальность: сервис Аrgin

    Создаем дополненную реальность: сервис Аrgin

    Обычно дополненную реальность используют в печатной продукции, когда на изображение помещают видео, 3D-объекты, слайд-шоу, аудио. Воспользуйтесь сервисом Аrgin.

    Зачем использовать и как создавать QR-коды

    Зачем использовать и как создавать QR-коды

    QR-коды выступают своеобразным посредником между онлайном и офлайном, в них можно «прятать» дополнительную информацию.

    Сфера влияния: как снять видео 360° и всех удивить

    Сфера влияния: как снять видео 360° и всех удивить

    84 миллиона роликов в формате 360° загрузили пользователи на Ютуб, и более миллиона — на Фейсбук. Рассказываем всё о сферической мультимедийной технологии

    Еженедельная рассылка для мультимедийных авторов

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

    Вдохновляйтесь примерами мультимедийных проектов

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

    Читайте также: