дополненная реальность по 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

Отслеживание маркеров — лишь один из типов дополненной реальности. Библиотеку можно также использовать для создания следующих интерактивов:

Источник

Как создать приложение дополненной реальности с помощью 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%!

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

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

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

Источник

Дополненная реальность: QR-коды, RFID-метки и всё такое

Что такое дополненная реальность? Если говорить по-простому и без википедийной заумности, то это наложение виртуального слоя на реальные объекты. Первыми эту штуку оценили военные – совмещать прицел и афганских талибов стало гораздо удобнее – потом потянулись маркетологи. Собственно, на маркетологах все и застопорилось.

Что такое дополненная реальность? Если говорить по-простому и без википедийной заумности, то это наложение виртуального слоя на реальные объекты. Первыми эту штуку оценили военные – совмещать прицел и афганских талибов стало гораздо удобнее – потом потянулись маркетологи. Собственно, на маркетологах все и застопорилось.

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

Пример правильной метки: реклама нижнего белья Victoria Secret

Поэтому до конца 2010 года дополненную реальность никто всерьез не воспринимал. Ну, работают какие-то компании над исследованием, так массовому пользователю от этого ни жарко, ни холодно. А потом компания Quest Visual выкатила в App Store совершенно потрясающую программу Word Lens. И оказалось, что нужная дополненная реальность не только реальность (простите за каламбур), но и жизненно необходимая и полезнейшая вещь.

В след за переводчиком стали появляться программы, выполняющие функции, которые обычному человеку и в голову не придут. Например, ведущие постоянные арифметические подсчеты. Так в Google Play имеется интересное приложение iOnRoad, постоянно анализирующее расстояние до едущей впереди машины. Как только расстояние (вычисляемое исходя из скорости собственно авто и едущей впереди повозки) станет меньше критического, программа издаст радостный писк. Опять же, приложению совсем не обязательно быть все время запущенным. Оно может работать в фоне (в то время как на экране, к примеру, выведена программа навигации), и подавать сигнал только в случае необходимости.

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

Более того, оказалось, что дополненную реальность вполне можно применить и в холостяцком хозяйстве (бурные и продолжительные аплодисменты). С недавних пор для iOS и MacOS существует отличное приложение TieSight, помогающее завязывать галстук. Как это работает: встаем перед веб-камерой, берем в руки галстук, а приложение показывает на нашем же фоне, какую часть галстука куда продевать. Выглядит весьма понятно и смахивает на персонального помощника гораздо больше, чем Siri.

TieSight отслеживает текущее положение галстука и подсказывает дальнейшие действия. Я бы еще включил распознавание цвета лица, как индикатора тугости узла

Это была, так сказать, ложка меда. Бочка дегтя заключается в том, что ни одно из вышеперечисленных приложений так и не смогло заставить пользователя смотреть на дополненную реальность хоть сколько-нибудь часто (iOnRoad не в счет – от программы требует лишь вовремя пискнуть). А значит, какой бы красивой и полезной ни была наша дополненная реальность, пользователь может ее просто не заметить.

Так как же заставить человека взглянуть на мир под другим углом? И тут мы снова приходим к меткам, но уже немного под другим соусом.

Первое, что вспоминается, когда мы говорим о метках дополненной реальности, это, конечно же, QR-коды. Казалось бы, эти квадратные значки активно распространяются по миру, и можно было бы говорить о некоем общепринятом стандарте. Существует даже несколько очень удачных проектов. К примеру, южнокорейский магазин Tesco разместил в сеульском метро большой баннер, где распечатал популярные товары и QR-ссылки на них. Теперь корейцы, ожидая вагон метро, могут «нащелкать» себе список необходимых продуктов, которые тем же вечером им доставит курьер. Быстро и очень удобно. Представители магазина тоже счастливы – онлайновый продажи выросли на треть.

Корейский метро-супермаркет. Интересно, что на полках изображено по несколько единиц одного и того же товара. Для массовости

Или проект вакцинации индийский детей, основанный на QR-кодах как базе данных о вакцинации.

Это Радж. История его вакцинации написана на QR-кулоне. Остается надеяться, что он не обменял его у соседнего мальчишки

Однако все эти проекты не отменяют одного простого факта — пользоваться QR-кодами крайне неудобно. Проблема заключается в том, что относительно простые QR-коды содержат настолько короткие ссылки, что их проще набрать пальцем или надиктовать голосом, чем ждать целую цепочку событий: пока сфокусируется камера, пока отсканируется изображение, пока придет ответ от сервера с результатом распознавания. После этого вам, наконец-то предложат перейти по ссылке. Ей богу, за это время я уже наберу нужный запрос в Google или сфотографирую нужный объект в Google Goggles. Это, повторюсь, в случае простой ссылки. Ну а если QR-коде находится сколько-нибудь сложная ссылка, то возникает риск ошибочного распознавания.

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

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

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

Ситуацию может сильно изменить проект Google Glass, но что это за зверь, доподлинно никто пока не знает. Прямо сейчас же, во время переходного периода, наиболее интересным выглядит использование RFID-тегов (радиометок, передающих информацию по NFC). Тем более, что большинство пользователей давно с ними знакомы. До недавнего времени, эти штуки использовались в довольно ограниченных областях, требующих идентификации предметов. К примеру, ценники, проход в метро, обработка багажа и так далее. Существуют совсем курьезные варианты применения таких меток, к примеру, фирма Blacksocks предлагает так искать вторую пару носков (и снова бурные холостяцкие авации). А немножко ненормальные корейцы предлагают с помощью RFID определять, кто чаще моет посуду в доме, а потом автоматически двигать еду на столе к тому, кто больше хозяюшка.

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

Чем же хороши эти метки? Прежде всего, RFID-теги могут использоваться там, где не нужно, чтобы кто-то вообще видел дополненную реальность. К примеру, для построения ориентиров для людей, имеющих ограничения по зрению или по слуху. С помощью этих меток и специального софта можно создать в прямом смысле параллельный мир, наполненный один им видимым (и слышимым) подсказками. О том, как это может быть реализовано, отлично показано на вот этом видео:

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

К слову, с радиусом действия недавно случился забавный казус: в 2008 году появился интересный материал о повальных похищениях в Мексике и RFID-имплантатах, позволяющих отслеживать похищенных чуть ли не со спутника. Мысль была предельно простой – зачем таскать с собой GPS-треккер, когда его может просто не оказаться в руках в момент похищения (и кто сказал, что похищенному вообще позволят что-то держать в руках?). А так под кожу руки имплантируется небольшой RFID-тег, якобы легко обнаруживаемый.

Реальность оказалась не столь радужной, в 2011 году, уже в Washington Post, написали, что технология банально не работает. Сигнал с этих меток может пробиться в очень и очень небольшом количестве случаев. Но мы отвлеклись.

Как уже говорилось выше, RFID-теги могут довольно здорово изменить представление о дополненной реальности. Причем, не простой реальности, а мира «чисто для своих». К примеру, японцы вовсю пользуются подобными технологиями, когда встречаются со своими виртуальными поп-звездами. По сути, от пользователя требуется лишь оказаться в радиусе действия метки, и иметь соответствующий софт, запущенные на телефоне. А дальше… А дальше кто знает, в какой мир вы откроете дверь своим телефоном. Но ведь это же самое интересное, не правда ли?

Источник

QR, дополненная реальность

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

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

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

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

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

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

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

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

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

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

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

Источник