SA1902 — Погружение в AR Quick Look

Сообщение от Apple кристально ясно: дополненная реальность (AR) здесь, чтобы остаться, и это сыграет большую роль в будущем iPhone. С момента выпуска ARKit 2.0 и iOS 12 на WWDC 2018 Apple глубоко интегрировала AR в ядро всех своих операционных систем.

Даже такие приложения, как iMessage, Mail, Notes, News, Safari и Files, теперь поддерживают AR.

Это благодаря AR Quick Look, который является самым простым способом представления AR — контента на мобильных устройствах. В этой главе вы узнаете о AR Quick Look. Вы увидите, как легко интегрировать его в свои собственные приложения, чтобы дать им некоторые крутые суперспособности AR.

Что такое AR Quick Look?

Вы, вероятно, уже знакомы с Quick Look, который позволяет быстро просматривать изображения, PDF-файлы и электронные таблицы в таких приложениях, как Mail и Safari. Quick Look — это фреймворк, который делает тяжелую работу за вас, давая вашему приложению суперспособности, которые позволяют ему поддерживать широкий выбор универсальных форматов файлов.

Вот лучшая часть: Quick Look теперь предлагает поддержку форматов файлов USDZ и Reality с помощью функции AR Quick Look.

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

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

AR Quick Look достигает высокой степени реализма, имитируя реалистичные условия освещения в вашей локальной среде. Он сочетает в себе это освещение с мягкими тенями и физически основанными материалами рендеринга (PBR), которые сияют и отражают местную среду, как настоящая вещь.

Использование AR Quick Look так же просто, как предоставить ему путь к вашему контенту USDZ или реальности и позволить ему творить свою магию. И есть много изящных вещей, которые вы можете сделать с ним тоже.

Особенности AR Quick Look

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

Вот посмотрите, что внутри:

• Якоря: якоря позволяют привязывать виртуальный контент к различным поверхностям реального мира. С выпуском iOS 13 AR Quick Look поддерживает горизонтальные поверхности, такие как полы, потолки, столы и стулья; вертикальные поверхности, такие как стены; изображения, включая фотографии и плакаты; а также лица и объекты, такие как игрушки и потребительские товары.
• Окклюзия: Окклюзия позволяет физическому миру скрывать виртуальный контент на основе его глубины относительно реального мира. AR Quick Look в настоящее время предлагает окклюзию для людей и лиц. Эта функция работает только на определенных устройствах.
• Физика, силы и столкновения: виртуальный контент отвечает законам физики. Объекты могут падать из-за силы тяжести, подпрыгивать и сталкиваться друг с другом.
• Триггеры и поведение: пользователи могут обращаться к AR и взаимодействовать с объектами для запуска событий, анимации и звуков.
• Тени в реальномвремени: виртуальный контент отбрасывает реалистичные тени на реальные поверхности. Качество теней зависит от возможностей устройства. Устройства низкого уровня проецируют тени, в то время как устройства высокого уровня используют тени с трассировкой лучей.
• Высокий динамический диапазон, отображение тонов и цветокоррекция: AR Quick Look анализирует локальную среду в режиме реального времени и использует результаты для управления яркостью, цветом и тоном виртуального контента. Это заставляет объекты естественным образом сливаться с окружающей средой.
• Зернистость камеры, размытие движения и глубина резкости: эффекты камеры после обработки выводят визуальную точность на новый уровень. Быстро движущиеся объекты размываются, удаленные объекты кажутся не в фокусе, а добавление эффекта зернистости к четкому виртуальному контенту делает его смешанным с типичной зернистой подачей камеры.
• Мульти-выборка и зеркальное сглаживание: AR Quick Look сглаживает края виртуального контента, чтобы сгладить пикселизацию. Он также сглаживает зеркальные отражения, чтобы предотвратить мерцание.
• Физический рендеринг Clear Coat Materials: Применяйте суперреалистичные материалы к виртуальному контенту, чтобы ваши объекты выглядели точно так же, как их реальные аналоги.
• Окружающий и пространственный звук: Окружающие звуки добавляют еще один уровень реализма виртуальному контенту. Объекты производят пространственно-точные звуковые эффекты, основанные на их местоположении в физическом пространстве и их положении относительно камеры.
• Интеграция и настройка: Вы можете легко интегрировать AR Quick Look в приложения Web, iOS, macOS и tvOS.
• Apple Pay: Apple Pay полностью интегрирован в AR Quick Look. Пользователи могут импульсивно покупать ваши продукты, не выходя из AR-опыта.

Как вы можете видеть, AR Quick Look дает вам гибкость, чтобы ваши продукты сияли в AR. Тем не менее, есть несколько ограничений, которые следует иметь в виду при работе с ним.

AR Быстрый взгляд Ограничения

Хотя AR Quick Look предлагает множество функций, важно отметить, что AR experience масштабирует некоторые эффекты в зависимости от возможностей устройства пользователя. Только новейшие и лучшие устройства высокого класса способны предложить полный опыт.

Это может показаться очевидным, но стоит отметить, что AR Quick Look доступен только в экосистеме Apple. Вы не можете просматривать содержимое AR Quick Look на устройствах под управлением Android, Windows или любой другой операционной системы, отличной от Apple.

Опыт AR Quick Look также несколько ограничен из-за отсутствия какого-либо скриптового или кодируемого конвейера. Более интеллектуальные AR-приложения требуют создания приложений для них.

Испытывая AR Быстрый взгляд

Apple предлагает фантастическую галерею 3D-моделей, которые вы можете использовать для изучения AR Quick Look. Если вы используете iOS 12 или новее на устройстве, вы можете попробовать это сами.

Откройте следующую ссылку в Safari: AR Быстрый взгляд

Эти модели используют формат USDZ, и благодаря AR Quick Look Safari теперь имеет встроенную поддержку этого формата.

Вы заметили этот крошечный кубик на каждом из изображений модели?

Это значок подписи Apple, указывающий на то, что модель доступна для просмотра в AR.

Итак, чего же вы ждете? Выберите вариант и попробуйте сами.

Режим AR

Когда вы выбираете модель, Safari запускает AR Quick Look, который загружает файл USDZ с URL-адреса и представляет его вам.

Он запускается непосредственно в режиме AR, чтобы как можно быстрее ввести пользователя в AR.

Подожди, что за утка! Это Launchpad McQuack?

Как только AR Quick Look обнаруживает нужную поверхность, он автоматически помещает 3D — модель поверх этой поверхности. Опыт является бесшовным, и с качественным виртуальным контентом вы можете легко поверить, что видите реальную вещь.

Есть несколько вещей, которые вы можете сделать в режиме AR:

• Позиционирование: Вы можете легко расположить 3D-модель с помощью жеста касания, удержания и перетаскивания, чтобы разместить модель в нужном месте. AR Quick Look понимает как горизонтальные, так и вертикальные поверхности. Поэтому, если за моделью есть стена, вы можете просто перетащить модель на стену, и она прилипнет.
• Масштабирование: Масштабируйте 3D-модель больше или меньше с помощью жеста pinch-in или out. Сбросьте масштаб до 100%, дважды нажав на 3D-модель.
• Вращение: Поверните 3D — модель, положив два пальца на экран и двигая ими круговыми движениями. Опять же, жест двойного касания сбросит вращение.
• Левитация: Бросьте вызов гравитации и левитируйте 3D-модель с помощью жеста перетаскивания двумя пальцами вверх.
• Снимки: Сделайте классные снимки вашего AR-опыта, быстро нажав кнопку спуска затвора камеры один раз. Это позволит сохранить снимок на ваших фотографиях.
• Видео: Вы даже можете сделать видеозапись вашего опыта AR, удерживая кнопку спуска затвора камеры в течение короткого времени. Как только вы отпустите, AR Quick Look автоматически сохранит видеоклип на ваших фотографиях. Отлично!
• Общий доступ: Нажмите кнопку «Поделиться» в правом верхнем углу, и вы получите список приложений, которые позволяют вам поделиться текущей моделью. Как насчет того, чтобы сбросить его ближайшему другу?

Параметры кнопки «Поделиться»:

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

Режим объекта

Переключитесь в режим объекта, выбрав вкладку Объект в режиме AR. Здесь вы можете осмотреть 3D-модель с помощью тех же основных жестов, чтобы манипулировать ею, например, ущипнуть для масштабирования и провести пальцем для поворота.

В режиме объекта вы можете видеть детали объекта, не отвлекаясь на реальный мир вокруг него.

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

AR Быстрый поиск в Интернете

Начиная с iOS 12, Safari имеет встроенную поддержку предварительного просмотра USDZ и файлов реальности, благодаря AR Quick Look. В этом разделе вы узнаете, как интегрировать поддержку файлов USDZ в ваши собственные веб-сайты.

Откройте папку starter_web и дважды щелкните index.html. Это запускает Safari и загружает следующую веб — страницу:

Это пример веб-страницы с двумя моделями USDZ. Когда вы проверите файлы в папке, вы увидите три изображения вместе с тремя файлами USDZ.

Ваш следующий шаг-пройти процесс добавления другой модели USDZ в вашу галерею AR.

Открыть index.html использование обычного текстового редактора.

Примечание: Для редактирования HTML-файлов вам необходимо использовать обычный текстовый редактор; TextEdit имеет тенденцию отображать файл, а не предоставлять вам доступ к базовому HTML-коду. Если у вас нет обычного текстового редактора, вы можете использовать Xcode для редактирования файла.

Добавьте следующую HTML — разметку в нижнюю часть файла, прямо над </body>тегом:

<a href="pig.usdz" rel="ar"> </a>

Это добавляет стандартный <a>тег, который создает ссылки на URL-адреса. Посмотрите на предоставленные атрибуты:

• href: Это установлено на pig.usdz. Он указывает на файл USDZ, на который вы ссылаетесь, который находится в том же месте, что и index.html.
• rel: Этот атрибут определяет связь между текущим документом и связанным документом. В этом случае вы устанавливаете отношение в ar, указывая, что ссылочный документ является моделью AR.

Теперь добавьте следующую строку кода непосредственно перед ранее добавленным </a>тегом:

<img src="pig.jpg" width="250" height="250">

До этого момента ссылка на файл USDZ была невидима на веб-странице. Эта строка кода добавляет изображение к ссылке, давая пользователю что-то нажать.

Наконец, откройте .htaccess с помощью текстового редактора и добавьте следующую строку:

AddType model/vnd.usdz+zip .usdz

Это добавляет необходимый тип MIME, поэтому Safari знает, что делать с типом файла USDZ.

Примечание: Для поддержки файлов реальности используйте следующий тип MIME:

AddType model/vnd.reality .reality

Сохраните изменения и протестируйте. Еще раз, откройте index.html в Сафари.

Вот и все; вы только что добавили еще один файл USDZ на свою веб-страницу. Фантастика!

Примечание: Вы можете испытать AR Quick Look только на реальном устройстве под управлением iOS 12 или новее. Вам также необходимо развернуть веб-страницу на реальном веб-сервере, чтобы перейти к ней с вашего устройства. Настройка локального веб — сервера выходит за рамки данной книги.

Если вам интересно, как добавить поддержку AR Quick View в существующие приложения, вы пришли в нужное место. Ты собираешься сделать это в следующий раз.

AR Быстрый поиск приложений

Первым шагом для добавления AR Quick Look в приложение является открытие проекта starter из папки starter. Это базовое приложение с одним видом UITableViewи пользовательской ячейкой,которая показывает небольшое изображение и имя.

Сделайте быструю сборку и запустите, чтобы проверить ее.

Ошибка: В этом изображении отсутствует атрибут ширины

Пожалуйста, предоставьте его в виде ![width=50%](images/ARQuickLookApp00.png)

Изображение было скрыто до тех пор, пока эта проблема не будет решена.

Когда вы выбираете строку, ничего не происходит. Все, что вы делаете на этом этапе, это сохранение выбранного индекса строки в переменной с именем modelIndex. Вы будете использовать эту переменную позже.

Затем вы загрузите изображения, используя массив именованных строк modelNames, который напрямую ссылается на изображения, хранящиеся в Assets.xcassets.

Импортируйте файлы USDZ в проект, перетащив папку Models, найденную внутри ресурсов, в проект.

Убедитесь, что вы установили флажок Добавить в целевыеобъекты, затем нажмите кнопку Готово, чтобы завершить процесс.

Теперь вы увидите новую группу моделей внутри проекта; вы можете просмотреть файлы USDZ в Xcode.

Откройте ViewController.swift и добавьте следующее в начало файла:

import QuickLook

Это импортирует фреймворк QuickLook, который необходим для реализации функции AR Quick Look в вашем приложении.

Затем добавьте следующие протоколы вViewController:

QLPreviewControllerDelegate, QLPreviewControllerDataSource

Вот более пристальный взгляд на эти протоколы:

• QLPreviewControllerDelegate: Этот протокол позволяет контроллеру предварительного просмотра предоставлять анимацию масштабирования для быстрого просмотра. Он также указывает, открывает ли ваше приложение URL-адрес и реагирует ли оно на открытие и закрытие предварительного просмотра.
• QLPreviewControllerDataSource: Этот протокол позволяет источнику данных указыватьQLPreviewController, сколько элементов включить в список навигации по элементам предварительного просмотра.

Реализуйте протоколы, добавив следующее нижеQLPreviewControllerDataSource:

func numberOfPreviewItems(in controller: QLPreviewController) -> Int { return 1 }

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

Добавьте следующую функцию под ранее добавленной функцией:

func previewController( _ controller: QLPreviewController, previewItemAt index: Int) -> QLPreviewItem { let url = Bundle.main.url( forResource: modelNames[modelIndex], withExtension: "usdz")! return url as QLPreviewItem }

Так что же происходит в приведенном выше коде? Когда контроллер предварительного просмотра запрашивает resourceURL, вы создаете URL-адрес для выбранного имени ресурса modelIndexв modelNamesмассиве. Вы также указываете расширение ресурса как usdz. Наконец, код передает URL-адрес обратно контроллеру как a QLPreviewItem.

Теперь вы реализовали все протоколы быстрого просмотра. Единственное, что осталось сделать, это представить предварительный просмотр.

Добавьте следующие строки кода в нижнюю частьtableView(_:didSelectRowAt:):

// 1 let previewController = QLPreviewController() // 2 previewController.dataSource = self previewController.delegate = self // 3 present(previewController, animated: false)

Наконец, вы готовы представить пользователю предварительный просмотр AR Quick Look. С этим кодом:

2. Вы создаете экземпляр QLPreviewController.
3. Затем вы назначаете ViewControllerкласс как dataSourceи delegateдля контроллера предварительного просмотра.
4. Наконец, вы представляете пользователю контроллер предварительного просмотра.

Все, ты закончил! Теперь ваше приложение может использовать AR Quick Look. Соберите и запустите, чтобы протестировать его.

Примечание: Убедитесь, что ваше устройство работает под управлением iOS 12 или новее, иначе вы не сможете его увидеть.

Вы собираетесь стать свидетелем дядя Скрудж банк монета!

Ключевые моменты

Молодец, ты дошел до конца первой главы.

Вот что вы узнали:

• Apple глубоко интегрировала AR в iOS, macOS и tvOS. Многие часто используемые приложения обеспечивают поддержку AR с помощью AR Quick Look.
• AR Quick Look является многофункциональным и обеспечивает лучший опыт дополненной реальности из коробки. Пользователи инстинктивно знают, что делать.
• AR Quick Look использует файлы USDZ и Reality.
• Вы можете использовать USDZ и контент реальности в Интернете. Загрузите файл и создайте на него стандартную ссылку. Благодаря встроенной поддержке Safari достаточно умен, чтобы знать, что он может просматривать контент с помощью AR Quick Look. Это автоматически дает пользователю этот потрясающий опыт AR.
• Нужно добавить поддержку AR в некоторые из существующих приложений? AR Быстрый взгляд имеет вашу спину. Просто добавьте файлы USDZ и Reality в существующий проект вместе с некоторыми образцами изображений. Затем используйтеQLPreviewController, чтобы сделать тяжелую работу для вас.

Куда идти отсюда?

Вот несколько ссылок, чтобы расширить свои знания по этой теме:

• Быстрый просмотр документации
• Быстрый взгляд на WWDC 2019

Теперь, когда вы знаете все, что нужно знать об AR Quick Look, вы можете задаться вопросом, как вы создаете свои собственные файлы USDZ и Reality. Ну, переходите к следующей главе, чтобы узнать!