Добавление эффектов AR к продуктам и местам с отслеживаемыми изображениями

‍

Слои контекстуально релевантной информации в трехмерном пространстве с дополненной реальностью (AR) помогают дизайнерам глубже погрузиться в идею, даже когда они не хватит места на странице. Отслеживаемые изображения или маркеры изображений привязывают контент к уникальному изображению, такому как QR-коды или торговые марки. Отслеживаемые изображения — от анимированных визиток до винных бутылок, открывающих порталы в новые миры, — один из самых восхитительных и широко распространенных примеров, демонстрирующих влияние подключенного опыта дополненной реальности.

С традиционными рабочими процессами игрового движка (например, Unity и Unreal) отслеживаемые изображения требуют специализированных инструментов разработки и баз данных. В среде визуального дизайна Torch вы можете создавать приложения AR с использованием отслеживаемых изображений за считанные минуты без кода, используя только iPad или iPhone.

Загрузите Torch, чтобы следовать этому уроку.

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

‍

Поскольку я люблю и дизайн, и кодирование, я выбрал книгу Скотта Мюррея «Интерактивная визуализация данных для Интернета» в качестве цели для этого прототипа AR. Книги о коде полны различной информации (методологии, кода, визуализаций и т. Д.), Из-за которой они могут изо всех сил пытаться отобразить весь релевантный контент на одной странице — идеальная проблема для решения AR.

Для нашего примера проекта мы начинаем со страницы 101, где пример кода для гистограммы отделен от получаемой визуализации. Такое разделение может затруднить связь идеи с процессом. Итак, мы собираемся активировать книгу с некоторыми аннотациями AR — отображая анимированную гистограмму в пространстве над кодом, который генерирует таблицу. В этом случае мы применяем AR экономно — давая читателю моменты, когда они могут испытать расширенные функции на своем телефоне, но только тогда, когда им нужна дополнительная поддержка. Давайте начнем.

Шаг 1: Подготовьте целевой объект изображения

Сначала мы сфотографируем пример кода, который мы комментируем. Используя камеру iPad и инструменты редактирования, обрежьте фотографию, чтобы сделать уникальное и легко идентифицируемое изображение.

Используя инструмент измерения iOS, измерьте физическую ширину отслеживаемого маркера. Этот шаг может показаться несущественным, но правильные измерения улучшают производительность вашего приложения — не пропустите его. Запишите это измерение и откройте Факел.

Шаг 2. Запуск нового проекта Torch

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

С помощью набора привязок мы можем начать импортировать наши активы в проект. Поскольку все мои активы находятся в моей связанной учетной записи Dropbox, я могу перетащить GIF-диаграмму в сцену из папки Dropbox в ящике ресурсов Torch. Поместите карту рядом с Якорем Мира и перейдите к следующему шагу.

Шаг 3: Используйте параметры сцены, чтобы добавить новое отслеживаемое изображение

Нажмите «Табличка сцены» (в настоящее время она отображает «Основная сцена») в верхней части экрана, чтобы открыть меню «Параметры сцены». Нажмите Отслеженные изображения а затем Добавить отслеженное изображение . Отсюда мы можем импортировать отслеживаемое изображение прямо с нашей камеры. Как только отслеженное изображение будет загружено, нажмите на него, чтобы настроить его параметры. Здесь мы можем переключить единицу измерения на дюймы и ввести ширину изображения, которую мы измеряли ранее. Здесь вы также можете указать Torch, будет ли отслеживаемое изображение ориентировано горизонтально или вертикально. Нажмите на стрелку назад, чтобы вернуться в меню «Параметры сцены».

Шаг 4: Прикрепите сцену к отслеживаемому изображению

Вот где происходит волшебство! В разделе «Параметры сцены» нажмите «Привязка» и выберите только что загруженное отслеживаемое изображение. Когда Факел идентифицирует это отслеживаемое изображение в мире, он немедленно заменяет Якорь Мира на Якорь Изображения — переориентирует все объекты в сцене на новую исходную точку в нашей книге. Диаграмма теперь находится над кодом в книге, из которой она была сгенерирована. Отличная работа!

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

Шаг 5: Использование взаимодействий сцены для перемещения между представлениями

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

Чтобы создать новую сцену для своего проекта, используйте «Табличку сцены», чтобы снова открыть меню «Параметры сцены», затем выберите «Новая сцена» . Дайте вашей сцене описательный заголовок — это ключ к поддержанию нормального рабочего процесса, когда вы работаете с несколькими сценами. Я пометил эту сцену «Между», которая помогает мне вспомнить, как эта сцена должна вести себя. Отсюда мы собираемся повторить шаг 3 (выше), чтобы добавить изображение нашего образца кода в качестве отслеживаемого изображения и для этой сцены.

Вернитесь к параметрам сцены и нажмите Взаимодействие . Поскольку эта промежуточная сцена ищет наш пример кода, мы выберем триггер взаимодействия Tracked Image Found и установим наш код в качестве изображения для поиска. Нажав Action Response мы получим три варианта взаимодействия сцены — выберите Смена сцены и выберите Основную сцену. Теперь это взаимодействие переместит нас из промежуточного состояния в основную сцену, когда Torch найдет наш пример кода. Sweet!

Шаг 6: Переверните и переверните его

Теперь мы закроем цикл, добавив аналогичное взаимодействие к нашей первой сцене. Мы будем использовать тот же шаблон и триггер Image Lost для перехода от основной сцены к промежуточной, когда Torch больше не может видеть отслеживаемый образец кода. Бам! Теперь вы можете создавать приложения AR с отслеживаемыми изображениями, все с вашего устройства iOS — и вам никогда не приходилось открывать такую ​​среду разработки, как эта.

Готовы ли вы сделать свое первое приложение с отслеживаемыми изображениями? Откройте Torch и начните работу сегодня