Создание AR-контента с помощью Amazon Sumerian


11.02.2020 Время чтения - 5 минут 516

В этом руководстве вы сумеете создать сцену в Amazon Sumerian для размещения видео в дополненной реальности (AR) поверх вашей визитной карточки. Опубликованный опыт доступен через URL в поддерживаемых браузерах (например, Chrome или Safari).

Чтобы получить представление о реальной среде, AR-приложения используют такие технологии, как построения карты в неизвестном пространстве (SLAM) и отслеживание изображений. Отслеживание изображения сначала распознает конкретное изображение, а затем использует его в качестве основы для AR-объекта таким образом, что положение и поворот AR-объекта всегда будут соответствовать этому изображению, даже если оно движется относительно мобильного AR-устройства. Находящаяся на рассмотрении спецификация WebXR обещает представить технологию платформы SLAM браузерам, но все ещё находится в стадии разработки. Пока она не выпущена и не поддерживается браузерами — вам придется выбирать собственную реализацию SLAM JavaScript для создания AR веб-приложений. Преимущество создания AR веб-приложения заключается в том, что его можно напрямую использовать с помощью URL-адреса.

В этом уроке мы используем стороннюю коммерческую библиотеку 8th Wall для SLAM и отслеживания изображений.

Вы узнаете следующее:

  • Отслеживание и привязка объекта к изображению
  • Использование видеофайла в качестве текстуры для отображения на поверхности
  • Интеграция 8th Wall JavaScript-библиотеки

Предпосылки

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

  • Войдите в Amazon Sumerian с помощью своего аккаунта AWS.
  • Найдите все учебники Amazon Sumerian по началу работы
  • Для этого урока вам понадобится бесплатный аккаунт разработчика 8th Wall. Вы можете подписаться на бесплатную учетную запись разработчика на 8thWall.com

Шаг 1: Создайте новый проект на 8thWall.com

Для начала вам нужно будет создать новый проект 8th Wall, используя панель управления 8th Wall.

  1. Войдите в свою учетную запись 8th Wall и нажмите «Начать новый проект» («Start a new project»).
  2. Дайте проекту осмысленное имя и нажмите «Создать» (“Create”).
  3. Авторизуйте свое тестовое устройство (например, телефон или планшет), нажав кнопку «Авторизация устройства» («Device Authorization») и следуйте инструкциям.
    Внимание: если вы используете QR-ридер для сканирования мобильного QR-кода, обязательно запустите эту ссылку в браузере на вашем телефоне перед авторизацией. В противном случае вы можете авторизовать встроенный браузер приложения для чтения QR-кодов, но не основной веб-браузер на своем телефоне.
  4. Скопируйте и сохраните ключ приложения 8th Wall для использования в дальнейшем в этом руководстве. Вы можете найти ключ приложения, нажав на значок шестеренки слева, на панели инструментов проекта 8th Wall.

Шаг 2: Добавьте изображение

На этом этапе вы загружаете изображение, на которое будет вставлено AR-видео. Вы в праве использовать любое изображение из реального мира, к примеру, визитную карточку или что-то подобное.

  1. Следуйте документации 8th Wall, чтобы добавить маркер изображения. Вы можете добавить более одного изображения, если хотите, чтобы видеосигнал был привязан к вашей визитной карточке или водительским правам.
  2. Обрежьте своё изображение, чтобы вокруг него не было пустого пространства (вы можете сделать это в интерфейсе 8th Wall, во время загрузки изображения). Смотрите документацию 8th Wall для получения рекомендаций по выбору и обрезке целевого изображения.

Шаг 3: Начать проект на Amazon Sumerian

  1. Войдите в Sumerian с консоли AWS.
  2. На панели инструментов Sumerian в разделе «Создать сцену из шаблона» используйте пустой шаблон для создания новой сцены. Дайте вашей сцене осмысленное имя.
    Внимание: Sumerian предоставляет шаблон дополненной реальности, но не используйте его для этого урока. Такой шаблон предназначен для использования в нативных мобильных приложениях и не станет хорошей основой для нашей 8th Wall AR-стены.
  3. Загрузите image-tracking-with-8th-wall.zip и переместите его в свою сцену. Для импорта вы можете щелкнуть значок папки на панели активов или перетащить ZIP-файл со своего рабочего стола в окно редактора Sumerian.
  4. После завершения импорта с панели «Объекты» (Entities) удалите дополнительную камеру с именем «УДАЛИТЬ МЕНЯ».
  5. Выберите объект с именем videoQuad. К нему прикреплен скрипт с именем 8th Wall Init, который предоставляет свойство App Key. Вставьте упомянутый выше ключ приложения 8th Wall в это поле App Key.
  6. Выберите объект «Камера по умолчанию» («Default Camera») и отключите опцию «Follow Camera».
  7. Установите положение камеры по умолчанию на 0, 0,5, 0.  8th Wall использует высоту камеры для эффективного масштабирования виртуального контента и не может быть нулевой (см. Руководство по устранению неполадок  8th Wall  для получения дополнительной информации).

Теперь ваша сцена может быть опубликована и просмотрена на вашем тестовом устройстве!

 Совет: Используйте службу сокращения URL-адресов, например tinyurl.com или bitly.com, чтобы создать URL-адрес, который будет проще вводить в браузере телефона. Обратите внимание, что сцена не будет работать в режиме предварительного просмотра в редакторе, если нажать кнопку «Воспроизвести сцену». Она будет работать только на мобильных AR-устройствах.

Шаг 4: Как это работает?

ВАЖНО! Этот раздел будет полезен для прочтения тем, кто понимает основные термины прораммирования и планирует касмотизировать опыт 8th Wall под свои требования или требования заказчиков.

Скрипт: playVideo

Некоторые браузеры не позволяют автоматически запускать видео, что иногда называют «блокировкой автозапуска». Когда это происходит, требуется пользовательский жест, чтобы запросить разрешение на автозапуск. Рекомендуется проверять значение Promise, возвращенного при попытке воспроизведения видео, чтобы определить, не заблокирован ли автозапуск и отыскать функцию жестов пользователя, например касания, если оно есть. Если автозапуск заблокирован — сценарий playVideo выдаст ответ VideoAutoplayBlocked. Поведение обработчика VideoAutoplayBlocked в свою очередь реагирует на этот сигнал, получает жест пользователя и снова выдает сигнал «PlayVideo», чтобы повторить попытку воспроизведения видео.

Скрипт: imageTargetAnchor

Этот сценарий настраивает преобразование объекта так, чтобы оно помещалось на маркер отслеживаемого изображения. Он реагирует на события xrimageupdated от 8th Wall, чтобы привязать сущность, к которой он присоединен, в данном случае сущность videoQuad к отслеживаемому изображению в реальном мире.

Скрипт:  8th Wall Init

Этот скрипт обрабатывает загрузку и инициализацию 8th Wall JavaScript SDK. Вы найдете этот скрипт прикрепленным к объекту videoQuad.

State Machine Behavior: VideoAutoplayBlocked

Такое поведение прослушивания скрывает объект, к которому оно подключено и прослушивает сигнал VideoAutoplayBlocked. Полученный сигнал показывает объект, к которому он присоединен и ожидает, когда пользователь щелкнет или коснется объекта. После этого он скрывает объект и пускает сигнал PlayVideo. Этот сигнал, в свою очередь, заставляет скрипт playVideo попытаться воспроизвести видео. Вы обнаружите, что это поведение привязано к объекту playButton.

Такое поведение необходимо для обработки блокировки автозапуска. Если попытка воспроизведения не удалась из-за блокировки автозапуска — сцена должна получить пользовательский жест, а именно касание и затем повторить попытку воспроизведения. Это поведение обрабатывает получение пользовательского жеста и сигнал о том, что попытка должна быть предпринята.

Оригинал статьи.

AR/VR

Читайте также: Страница 404 | Как создать страницы ошибок

Страница 404 | Как создавать страницы ошибок