НАТИВНАЯ ВЕБ-AR ДЛЯ IOS

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

AR Quick Look решает эту проблему для iOS. Это нативная функция ARKit, и с ее помощью можно открыть модели в AR прямо в браузере — именно поэтому мы называем ее нативной AR для веба.

Она использует файлы формата .reality или .USDZ и позволяет:

• отображать объекты с высокой детализацией;

• добавлять анимацию и звуковое сопровождение;
• устанавливать масштаб до 1:1, чтобы модели показывали размер объекта.

Внедрение AR Quick Look на сайтах может принести наибольшую выгоду для e-commerce платформ. К примеру, если покупатель нашел на маркетплейсе кровать, которую хотел бы приобрести, то нативная AR для веба предоставит возможность моментально разместить ее модель в своей квартире. Благодаря фиксации проверить размеры и сочетаемость с другими предметами мебели в комнате. По словам Дэна Дэвиса, технического директора Build.com, возврат купленных продуктов снизился на 22%, так как у клиентов теперь была возможность заранее удостовериться, что товар помещается в доступное пространство. Эта функция имеет особенную актуальность, учитывая, сколько людей сейчас предпочитают заказывать товары онлайн и избегать посещения общественных мест.

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

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

Более того, если вам необходима быстрая демонстрация вашего продукта, у браузерного AR Quick Look практически нет недостатков:

- поддержка размещения объектов на горизонтальных и вертикальных поверхностях позволяет поставить или повесить объект, куда угодно;

- освещение, тени и картография среды обеспечены возможностями ARKit;

- разработка занимает меньше времени и усилий, чем AR-приложение.

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

Давайте начнем с основ и посмотрим, как мы можем запустить готовую 3D-модель в AR.

КАК УБЕДИТЬСЯ, ЧТО ВСЕ РАБОТАЕТ

Обязательно необходимо проверить тег изображения – он должен быть первым дочерним элементом ссылки rel=ar. В противном случае, браузеры не смогут сразу запустить AR Quick Look, и вместо этого просто откроют предварительный просмотр файла.

Чтобы AR Quick Look работал правильно, вам нужна следующая структура HTML:

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

Проверить, все ли вы сделали правильно, очень легко: в Safari значок с 3D-кубом должен быть размещен в углу превью файла. Дополнительные примеры можно посмотреть в галерее Quick Look.

Иконка не появится в Firefox и других браузерах, но модели по прежнему можно запускать в AR с устройств на iOS. Если нажать на превью с устройства на платформе Android, модель просто скачивается без предварительной демонстрации.


Нативная Веб-AR для Android работает по-другому — и мы обязательно затронем эту тему в следующей статье о Веб-AR.

‍

КАК ОТКЛЮЧИТЬ МАСШТАБИРОВАНИЕ

AR Quick Look позволяет менять масштаб модели, показывая соотношение в процентах. Но мы рекомендуем ставить масштаб 100% или 1:1 — так вы сможете удостовериться, что ваши клиенты всегда видят точные пропорции продукта, который  планируют заказать.

Как навсегда выставить масштабирование на 100%:

Если после этого кто-то попробует увеличить модель, она просто вернется к оригинальному размеру. Но стоит учесть, что эта функция работает только в Safari.

‍

КАК УСТАНОВИТЬ КАНОНИЧЕСКИЕ ССЫЛКИ “ПОДЕЛИТЬСЯ”

По умолчанию, кнопка “поделиться” будет делиться только ссылкой на саму модель, предлагая загрузить файл .reality или .USDZ на ваше устройство. Проще говоря, ваши ссылки не должны выглядеть так:
https://developer.apple.com/arkit/gallery/toy_biplane.usdz#allowsContentScaling=0

Чтобы создать ссылку, которая сразу будет вести ваших пользователей на просмотр AR, вам нужно добавить #canonicalWebPageURL=http://example.com в конец ссылки.

Если вы хотите использовать и ограничение масштабирования, и канонический URL-адрес, конец ссылки должен выглядеть так: #allowsContentScaling=0&canonicalWebPageURL=https://example.com

Так же, как и в случае с отключением функции масштабирования, канонические ссылки будут работать только для Safari.

‍

ИНТЕРАКТИВНЫЕ МОДЕЛИ В НАТИВНОЙ ВЕБ-AR

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

Как анимировать 3D-модель? Можно выбрать 1 из этих способов:

• Добавьте анимацию в файл .USDZ, используя одну из платформ, поддерживающих этот формат, и установите для нее автовоспроизведение;
• Модифицируйте файл .USDZ в Reality Composer и экспортируйте его в файл .reality;
• Создайте файл .reality в Reality Composer с нуля.

Но важно отметить, что способ использования файла .USDZ со встроенным автозапуском анимации не будет интерактивным. Анимация просто зацикливается и не реагирует на действия пользователя. Чтобы создать интерактивную AR, необходимо использовать Reality Composer от Apple. Это специализированный инструмент для работы с 3D-моделями в AR, к примеру: добавление анимации и звука, управление их порядком, триггерами и т.д.

Reality Composer доступен и как часть Xcode для Mac, и как отдельное приложение для iOS. Это позволяет с легкостью сразу протестировать AR-сцену на мобильном устройстве сразу после работы в Xcode.

Мобильная версия имеет меньше функций — и хотя ее можно использовать для создания дополненной реальности с нуля, мы рекомендуем начать с версии Xcode, и использовать мобильную только проверки результатов и внесения небольших изменений (например, изменение положения объектов).

Когда вы начинаете работать с Reality Composer, сначала необходимо создать новый файл проекта. После этого приложение сразу предлагает выбрать якорь.

Существует 5 типов якорей, и вы можете выбрать только один из них:

После выбора якоря можно приступить к изменению дефолтного объекта, добавить объекты из Content Library (в ней есть довольно крутые 3D-модели) или импортировать файлы .reality или .USDZ.

ПОВЕДЕНИЕ В AR QUICK LOOK

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

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

И кстати, авто-зацикливание анимации из файла .USDZ можно комбинировать с анимацией из Reality Composer.

ОНЛАЙН-ШОППИНГ И AR QUICK LOOK

Нативная Веб-AR позволяет добавить кнопку Apple Pay. Вы также можете установить действие, например «Добавить в корзину», вместо того, чтобы предлагать пользователю сразу оплатить товар. А также можно перенаправить пользователя в мессенджер или добавить кастомный баннер.

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

По сути, это помогает создать экспириенс от покупки максимально близким к оффлайну. С помощью AR Quick Look можно объединить возможности электронной коммерции и ритейла в одной точке продаж.

ПРИМЕР КОДА И ДЕМО-ВЕРСИЯ

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