дополненная реальность по qr коду своими руками
Как создать дополненную реальность, написав 12 строк кода
Как создать дополненную реальность, написав 12 строк кода
AR.js — библиотека для создания дополненной реальности. Она объединена с фреймворком A-Frame, который предназначен для разработки VR в вебе. Главный плюс AR.js — очень простой процесс создания AR-приложений. Достаточно импортировать библиотеку и добавить объекты, которые будет видеть пользователь при выполнении заданных условий — например, наведении камеры на маркер или нахождении в указанном месте.
Все ссылки на документацию будут в конце статьи, а пока посмотрим самое интересное — как это работает на практике. Результат будет примерно такой:
Слева — метка, справа — AR-объект, который появляется при наведении камеры / Источник: medium.com/@jerome_etienne
Важно: чтобы посмотреть примеры AR-контента, нужно второе устройство с камерой — например, смартфон. В тексте есть ссылки на CodePen. Откройте их на устройстве с камерой и разрешите браузеру доступ.
Как создать AR-приложение за несколько минут
Импортируем в HTML-код A-Frame и AR.js:
Затем внутри создадим сцену, которая будет охватывать все необходимые нам элементы: маркер, камеру, AR-объект.
Следующий шаг — добавление маркера. Пока используем preset Hiro. Это дефолтный маркер AR.js, его изображение вы найдёте ниже:
Напоследок добавляем камеру. Одна должна быть за пределами маркера. Это нужно для того, чтобы AR-объект появлялся только при наведении камеры на маркер. Если в объективе нет маркера, дополнительный контент не отображается на экране.
Чтобы проверить работоспособность:
Наводим камеру — появляется объект дополненной реальности. Убираем камеру — объект исчезает.
Вместо геометрической фигуры можно вставить другую 3D-модель. Рекомендуемый формат — glTF. Например, в этом пене при наведении камеры на маркер на экране отобразится модель города. Вот полный код:
Дополненная реальность работает в браузере
Ещё одна интересная возможность — вставка AR-текста на английском языке. Его свойствами можно управлять с помощью атрибутов, подробно описанных в документации. Чтобы посмотреть пример, откройте на смартфоне ссылку на этот пен и наведите камеру на маркер Hiro. А вот его полный код:
Как создать свой маркер для AR-объекта
В примерах выше используется стандартный маркер Hiro. Но мы можем создать другое изображение с помощью онлайн-инструмента AR.js Marker Training. Правда, оно должно отвечать целому ряду требований.
Также нужно помнить о контрасте. Если у маркера чёрный фон, то окружающая среда должна быть светлой. В противном случае распознавание не сработает.
В качестве маркера также можно использовать штрих-код. Подробнее об этом можно узнать из статьи разработчика AR.js Николо Карпиньоли (Nicolo Carpignoli).
Что ещё можно сделать с помощью AR.js
Отслеживание маркеров — лишь один из типов дополненной реальности. Библиотеку можно также использовать для создания следующих интерактивов:
Подробное описание применения и примеры кода можно найти в документации AR.js и A-Frame.
Хинт для программистов: если зарегистрируетесь на соревнования Huawei Cup, то бесплатно получите доступ к онлайн-школе для участников. Можно прокачаться по разным навыкам и выиграть призы в самом соревновании.
Перейти к регистрации
Как создать приложение дополненной реальности с помощью ARCore
В этом гайде вы узнаете, как добавить 3D-модели в реальный мир. Библиотека ARCore от Google позволяет добавлять на 2D-изображение (картинка или видео) полноценные 3D-модели.
Вам необходимо предоставить системе некое опорное изображение, которое ARCore будет искать в реальном мире, чтобы на его основе добавить на изображение 3D-модель. Дополненная реальность уже широко используются, например, в книгах, газетах, журналах и т.д.
Прежде чем погрузиться в этот туториал, вам стоит ознакомиться с предыдущими двумя статьями на эту тему, которые познакомят вас с основными AR-терминами:
Что такое изображения дополненной реальности?
Согласно документации для разработчиков, изображения дополненной реальности в ARCore позволяют создавать приложения дополненной реальности, которые могут «оживлять» 2D-изображения, например, плакаты или упаковки продуктов.
Вы загружаете в ARCore какие-то опорные изображения, а он вам затем сообщает об их обнаружении во время AR-сессии, например во время съёмки видео. И эта информация используется для расположения 3D-модели на 2D-изображении.
Ограничения использования изображений дополненной реальности
Вот некоторые ограничения, с которыми вы можете столкнуться при использовании изображений дополненной реальности:
Выбор подходящего опорного изображения
Вот несколько советов для выбора хорошего опорного изображения для ARCore:
Как использовать инструмент arcoreimg:
Замените dog.png на полный путь к вашему изображению.
Начало работы с приложением дополненной реальности
Теперь, когда вы ознакомились с ARCore и выбрали хорошее изображение с оценкой 75+, пришло время приступить к написанию кода приложения.
Создание фрагмента
Прежде всего, мы отключаем обнаружение плоскости. Делая это, мы убираем с экрана значок руки, который появляется сразу после инициализации фрагмента и говорит пользователю о необходимости перемещения своего смартфона для поиска плоскости. Нам это больше не нужно, поскольку мы обнаруживаем не случайные плоскости, а конкретное изображение.
Настройка базы данных изображений
Добавьте выбранное опорное изображение (которое вы хотите обнаружить в физическом мире) в папку assets (создайте её, если её ещё нет). Теперь мы можем добавлять изображения в нашу базу данных.
Мы создадим эту базу данных, как только будет создан фрагмент. В логи мы выведем результат этой операции:
Вот как будет выглядеть CustomArFragment :
Добавление изображения в базу данных
Сейчас мы настроим нашу базу данных изображений, обнаружим опорное изображение в реальном мире и добавим 3D-модель на изображение.
Давайте начнём с настройки нашей базы данных. Создайте публичный метод setupAugmentedImagesDb в классе MainActivity :
Обнаружение опорных изображений в реальном мире
Теперь мы начнем обнаруживать наши опорные изображения в реальном мире. Для этого мы создадим слушателя, который будет вызываться каждый раз при обновлении видеокадра, и этот кадр будет проанализирован на предмет наличия там опорного изображения.
Добавьте эту строку в метод onCreate() в MainActivity :
Теперь добавьте метод onUpdateFrame в MainActivity :
В первой строке мы получаем сам кадр. Кадр можно представить, как обычный скриншот из видео. Если вы знакомы с тем, как работает видео, вы знаете, что это просто набор изображений, которые очень быстро сменяют друг друга, создавая впечатление чего-то движущегося. Мы просто берём одну из этих картинок.
Если совпадение найдено, то мы просто берём и размещаем 3D-модель поверх обнаруженного изображения.
Примечание. Флаг shouldAddModel используется для того, чтобы мы добавляли 3D-модель только один раз.
Размещение 3D-модели над опорным изображением
Теперь, когда мы нашли наше опорное изображение в реальном мире, мы можем добавлять 3D-модель поверх него. Добавим методы placeObject и addNodeToScene :
Вот так теперь выглядит MainActivity :
Теперь запустите ваше приложение. Вы должны увидеть экран, как показано ниже. Подвигайте телефон немного над опорным объектом. И как только ARCore обнаружит опорное изображение в реальном мире, добавит на него вашу 3D-модель.
Как сделать оживающие фото с дополненной реальностью
Инструкция от основателя сервиса МЕМОРИС Александра Астрова о том, как сделать оживающие фото с дополненной реальностью
Оживающие фото “захватили” пространство РФ и СНГ в последние 2 года, и уже многие родители знают и любят такой формат детских фотографий. Только по нашей статистике за время работы сервиса было сделано более 200 000 оживающих фотографий, которые посмотрели более 3 миллионов раз.
Также компании используют эту технологию для “оживления” рекламных банеров, журналов, выставок и инструкций к продуктам.
Какое оборудование требуется, чтобы сделать оживающие фотоальбомы?
Если мы говорим про профессиональную съёмку, то достаточно фотокамеры с функцией видеосъёмки, плюс постоянный свет и петличный микрофон для качественной записи звука. Также вместо петличного микрофона некоторые клиенты используют диктофон (“журавлик”) – он позволяет экономить время на закрепление петлички.
Как снимать видео для оживающих фото?
Тут всё зависит от вашего креатива и уровня и качества продукта, который вы хотели бы создать.
В самом простом варианте фотографы снимают короткие видео с детьми по 15-20 секунд, где дети отвечают на 2-3 вопроса. Например: “Как тебя зовут? Кем ты мечтаешь стать?” Если детки совсем маленькие, то может потребоваться 2-3 дубля, но к идеальности здесь стремиться не стоит, ведь наша задача запечатлеть реального человека – со всеми его существующими дефектами речи, умиляющей интонацией, смешными гримасами. Ведь это и есть настоящая память! Воспитатели в детских садах или классный руководитель в школе от себя обычно записывают общее пожелание всем детям.
Как правило, сначала делается серия фото, потом фотограф переключает камеру в режим видео и просит ребёнка ответить на поставленные вопросы. Вопросы даются заранее, чтобы дети могли продумать свои ответы и видеозапись проходила без заминок.
Как монтировать видео для “живых” фото?
В базовом варианте требуется обрезать начало и конец видеозаписи, в некоторых случаях скорректировать масштаб видео – все эти правки можно делать сразу в кабинете Меморис.
Как загружать и создавать оживление через административную панель?
Простые оживающие фото создаются менее чем за 30 секунд; вы можете всё сделать по этой видеоинструкции:
или воспользоваться нашим текстовым описанием:
2) Перейдите в раздел “оживающие фото”.
3) Кликните на “загрузить фото” и выберите фотографию на вашем компьютере, при наведении на которую будет происходить оживление.
4) Кликните на “загрузить видео” и выберите видео на вашем компьютере, которое будет появляться при наведении на ваше фото. Если у вас несколько фото и видео – повторите 3 и 4 шаги.
5) Нажмите на кнопку “создать” и ожидайте загрузки.
6) После загрузки появится qr-код и ссылка
7) Для iOS 14 и выше: откройте камеру на телефоне, наведите на QR-код, нажмите на всплывающем окне сверху Меморис и открыть
8) Для Android 6 и выше: откройте ссылку на телефоне или найдите приложение по названию Меморис. Нажмите кнопку попробовать для запуска без установки или кнопку установить и наведите на QR-код
9) Наведите на фото, загруженное на шаге 3 через открывшуюся камеру Меморис.
Вот и всё! Вы создали первое в вашей жизни оживающие фото, и на это должно было уйти в первый раз до 5 минут, а в последующие разы будет достаточно 30 секунд.
Какие еще возможности имеются в Меморис?
Мы просто перечислим, а если вы займётесь этим в будущем, то сможете изучить всё подробнее и пользоваться сервисом на все 100%!
А также многочисленные бонусы:
Выбравшим для себя этот инструмент для бизнеса: что еще дают оживающие фото?
Каждый выбирает то, что ему важнее, но бесспорно одно: любой, кто возьмёт на вооружение дополненную реальность – останется в плюсе!
Лучшие инструменты разработки дополненной реальности в 2021
От студии Black VR (продолжение 2 части)
В начале 2 части мы рассказывали на что стоит обратить внимание при выборе SDK для разработки своего продукта с дополненной реальностью, и теперь, когда вы знаете, какие функции вам следует рассмотреть, пришло время сделать обзор самых популярных, на наш взгляд, лучших framework дополненной реальности на рынке. Хотя их довольно много, мы отобрали семь AR SDK.
Vuforia — лучший доступный SDK для пользователей Unity, легко интегрируется и поддерживает кроссплатформенное развертывание с такими платформами, как Unity, предлагает широкий набор функций.
Бесплатная версия SDK может быть легко использована для создания обнаружения на основе маркеров, которое также может быть без маркеров и на основе облака, а также обеспечивает достаточную поддержку для создания приложения для небольших задач, но масштабирование приложения до бизнес-уровня будет дорогостоящим, поскольку корпоративная учетная запись довольно дорога в использовании.
Этот SDK доступен бесплатно, но с водяными знаками Vuforia и ограниченной функциональностью. Дополнительные функции, которые раскрывают весь потенциал этого AR SDK доступны по нескольким коммерческим лицензиям, например, стоимость базового пакета Basic — составляет 42$ в месяц, а ежегодная оплата — 504$, пакет Basic+Cloud — 99$ в месяц.
Есть специальные предложения для больших агентств и корпораций — пакет Agency, который включает в себя 5 краткосрочные лицензии, и пакет PRO.
Подробнее о возможностях пакетов можно узнать на официальном сайте по данной ссылке https://www.ptc.com/en/products/vuforia/vuforia-engine/pricing
EasyAR предлагает свой SDK нового поколения, который предлагает ряд передовых функций, таких как SLAM, 2D-3D-отслеживание и запись экрана.
Даже бесплатный SDK дополненной реальности EasyAR может похвастаться впечатляющим набором функций, таких как облачное распознавание и неограниченное количество запросов на распознавание. Кроме того, бесплатная версия может хранить до 1000 меток на устройстве.
Этот SDK будет хорошим выбором, если у вас ограниченный бюджет на проект, но у него есть проблемы с обработкой и производительностью, чем у других подобных SDK.
EasyAR Sense предоставляет четыре режима подписки: Personal Edition (Free), Профессиональная версия (ежемесячная оплата в размере 39$), Классическая версия (единовременная плата за пожизненное использование за 1399$) и специальное предложение Enterprise Edition (Customized).
Подробнее ознакомиться с тарифами можно по ссылке https://www.easyar.com/price.html
Maxst предлагает два типа программного обеспечения для создания приложений дополненной реальности: Maxst AR SDK 2D и Maxst AR SDK 3D.
Этот SDK — это инструмент разработки на основе Unity, полностью работающий на Android и iOS.
Инструменты для разработки дополненной реальности Maxst доступны бесплатно с водяными знаками, а также по коммерческой лицензии. Так, пакет Pro-One time fee обойдется вам в 699$ разово за одно приложение, или пакет Pro-Subscription с ежемесячной подпиской 49.9$ в месяц со всеми возможностями. Также Maxst предлагает специальное предложение — пакет Enterprise для предприятий.
Apple приложила много усилий, чтобы сделать возможности дополненной реальности доступными для разработчиков iOS. Датчики камеры точно отслеживают окружающую среду, комбинируя визуальную информацию с расширенным анализом компьютерного зрения.
ARKit 4 представляет способ доступа к подробной информации о глубине, собранной сканером LiDAR на iPhone 12 Pro, iPhone 12 Pro Max, а также iPad Pro. Привязка местоположения использует данные с более высоким разрешением в Apple Maps, чтобы разместить возможности AR в определенной точке мира в приложениях для iPhone и iPad.
Самый большой недостаток ARKit — он доступен только на свежих устройствах iOS и недоступен на устройствах Android, которые более популярны, а распознавание объектов не самое лучшее. Давайте рассмотрим наиболее важные функции Apple AR SDK:
Однако, ARKit будет работать только с процессорами Apple A9+, поэтому функции дополненной реальности будут доступны только для устройств, произведенных после 2015 года.
ARKit — это собственный AR SDK от Apple, поэтому он идеально адаптирован для iOS и работает по бесплатной лицензии, подробнее https://developer.apple.com/augmented-reality/arkit/
ARCore предоставляет SDK для многих наиболее популярных сред разработки предоставляют собственные API-интерфейсы для всех основных функций дополненной реальности, таких как отслеживание движения, понимание окружающей среды и оценка освещенности. С помощью этих возможностей можно создавать совершенно новые возможности AR или улучшать существующие приложения с помощью функций AR.
Примечательно, что AR-приложения на ARCore поддерживаются не только на Android, но и на устройствах iOS, позволяя разрабатывать кроссплатформенные AR-приложения. У него мало недостатков, большинство из которых относится к поддержке SDK на нескольких устройствах.
Тем не менее, большинство устройств выше 7.0 Android поддерживают его, но, к сожалению, у многих из них нет библиотек или оборудования, необходимых для большинства функций в ARCore. Некоторые из его выдающихся особенностей включают в себя:
Лицензия ARCore — бесплатная, подробнее по ссылке https://developers.google.com/ar/develop
Его можно использовать для создания сцен AR на основе маркеров. Инструмент поставляется с расширением A-Frame и three.js, которое работает с любым смартфоном, независимо от версии его ОС, включая Android, iOS 11 и Windows Mobile.
Для создания AR-решения на основе AR JS необходимо лишь создать HTML-файл и подключить в него соответствующие библиотеки. Маркеры очень стабильны, но ограничены по форме, цвету и размеру. Предлагается для тех случаев, когда требуется много разных маркеров с разным содержанием, например, в книгах, листовках и флаерах с AR.
Отлично, если ваш проект будет находиться на сайте, что использует защищенный протокол https, иначе доступ к камере может блокироваться. Не подходит для разнообразного функционала.
8th Wall — лидер в области дополненной реальности на базе Интернета (WebAR). Платформа 8th Wall также используется для разработки дополненной реальности, которая работает на всех устройствах — приложение не требуется и обеспечивает максимально широкий охват, поддерживая более 3 миллиардов смартфонов на iOS и Android.
Targets работает как с плоскими, так и с изогнутыми поверхностями, такими как бутылки, чашки и банки, обеспечивает потоковую передачу объемного видео в WebAR (или то, что часто называют голограммами).
В версии 16 система SLAM теперь на 50% точнее, чем раньше, с частотой кадров, которая на 70% выше, в зависимости от используемого устройства, обновление вышло этой весной. Это означает уменьшение дрейфа, дрожания и задержки для более плавного, и стабильного воспроизведения, согласно, информации на сайте 8th Wall.
Функции, которые раскрывают весь потенциал этого AR SDK, доступны без коммерческой лицензии за 99$ в месяц, но обязательно с водяными знаками 8th Wall, неважно коммерческий проект или нет.
Ежемесячная оплата лицензии также различается в зависимости от просмотров. Коммерческая лицензия Basic обойдется — от 1250$ в месяц, пакет Standart — от 3000$, Premium — от 5000$. И конечно же есть специальное предложение в пакете Pro. Также можно воспользоваться бесплатной пробной 14-дневной версией.
Основываясь на приведенных выше критериях, мы составили сравнительную таблицу 7 ведущих платформ дополненной реальности.
На данном этапе мы можем уже наблюдать, что еще не запустив производство, уже требуются значительные расходы только на этапе проектирования, не говоря уже об итоговой стоимости самого проекта.
Чтобы выбрать подходящий фреймворк для разработки — для каждого конкретного проекта нужно найти оптимальный баланс между применимостью, стоимостью и скоростью разработки, а также гибкостью и управляемостью, учитывая более широкий круг параметров.
Теперь, когда вы знаете, какие SDK дополненной реальности доступны и какие основные функции они предлагают, вы можете выбрать наиболее подходящий инструмент для создания отличных приложений AR. Решите, какие функции вам нужны в мобильном приложении или веб-браузере (WebAR), проверьте список SDK, примите во внимание цены и вы готовы разработать первоклассное приложение.
➕Читайте также начало 2 части «Практическое руководство по разработке AR — продукта. Выбор SDK и стоимость» — о том, на что нужно обращать внимание при выборе SDK.
➕Читайте 1 часть «Цена на дополненную реальность под ключ: как формируется стоимость» — где мы рассказали о стоимости разработки приложения дополненной реальности и формирования цены на российском рынке.
QR, дополненная реальность
Виртуальная или дополненная реальность поражает воображение, создает очень тесное и доверительное, практически интимное, пространство. Объединяет онлайн и офлайн. Начните погружаться в формат с простых инструментов.
Создаем дополненную реальность: сервис Аrgin
Обычно дополненную реальность используют в печатной продукции, когда на изображение помещают видео, 3D-объекты, слайд-шоу, аудио. Воспользуйтесь сервисом Аrgin.
Зачем использовать и как создавать QR-коды
QR-коды выступают своеобразным посредником между онлайном и офлайном, в них можно «прятать» дополнительную информацию.
Сфера влияния: как снять видео 360° и всех удивить
84 миллиона роликов в формате 360° загрузили пользователи на Ютуб, и более миллиона — на Фейсбук. Рассказываем всё о сферической мультимедийной технологии
Еженедельная рассылка для мультимедийных авторов
Не хватает времени сёрфить по профессиональным сайтам? Подпишитесь на нашу email-рассылку, и каждую неделю вы будете получать полезные статьи, анонсы, интервью, презентации, видеоролики, переводы, инфографику.
Вдохновляйтесь примерами мультимедийных проектов
Редакторы, блогеры, журналисты, общественные активисты рассказывают вам о своём опыте. Как рождаются идеи медиапроектов, какие препятствия встают на пути команды, чему создатели мультимедийных проектов учатся в процессе работы.