Дополненная реальность как сделать самому

Как создать дополненную реальность, написав 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-текста на английском языке. Его свойствами можно управлять с помощью атрибутов, подробно описанных в документации. Полный код:

Как создать свой маркер для 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-модель.

Лучшие инструменты разработки дополненной реальности в 2021

От студии Black VR (продолжение 2 части)

В начале 2 части мы рассказывали на что стоит обратить внимание при выборе SDK для разработки своего продукта с дополненной реальностью, и теперь, когда вы знаете, какие функции вам следует рассмотреть, пришло время сделать обзор самых популярных, на наш взгляд, лучших framework дополненной реальности на рынке. Хотя их довольно много, мы отобрали семь AR SDK.

Vuforia — лучший доступный SDK для пользователей Unity, легко интегрируется и поддерживает кроссплатформенное развертывание с такими платформами, как Unity, предлагает широкий набор функций.

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

Этот SDK доступен бесплатно, но с водяными знаками Vuforia и ограниченной функциональностью. Дополнительные функции, которые раскрывают весь потенциал этого AR SDK доступны по нескольким коммерческим лицензиям, например, стоимость базового пакета Basic — составляет 42$ в месяц, а ежегодная оплата — 504$, пакет Basic+Cloud — 99$ в месяц.

Есть специальные предложения для больших агентств и корпораций — пакет Agency, который включает в себя 5 краткосрочные лицензии, и пакет PRO.

Подробнее о возможностях пакетов можно узнать на официальном сайте по данной ссылке https://www.ptc.com/en/products/vuforia/vuforia-engine/pricing

EasyAR предлагает свой SDK нового поколения, который предлагает ряд передовых функций, таких как SLAM, 2D-3D-отслеживание и запись экрана.

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

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

EasyAR Sense предоставляет четыре режима подписки: Personal Edition (Free), Профессиональная версия (ежемесячная оплата в размере 39$), Классическая версия (единовременная плата за пожизненное использование за 1399$) и специальное предложение Enterprise Edition (Customized).

Подробнее ознакомиться с тарифами можно по ссылке https://www.easyar.com/price.html

Maxst предлагает два типа программного обеспечения для создания приложений дополненной реальности: Maxst AR SDK 2D и Maxst AR SDK 3D.

Этот SDK — это инструмент разработки на основе Unity, полностью работающий на Android и iOS.

Инструменты для разработки дополненной реальности Maxst доступны бесплатно с водяными знаками, а также по коммерческой лицензии. Так, пакет Pro-One time fee обойдется вам в 699$ разово за одно приложение, или пакет Pro-Subscription с ежемесячной подпиской 49.9$ в месяц со всеми возможностями. Также Maxst предлагает специальное предложение — пакет Enterprise для предприятий.

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

ARKit 4 представляет способ доступа к подробной информации о глубине, собранной сканером LiDAR на iPhone 12 Pro, iPhone 12 Pro Max, а также iPad Pro. Привязка местоположения использует данные с более высоким разрешением в Apple Maps, чтобы разместить возможности AR в определенной точке мира в приложениях для iPhone и iPad.

Самый большой недостаток ARKit — он доступен только на свежих устройствах iOS и недоступен на устройствах Android, которые более популярны, а распознавание объектов не самое лучшее. Давайте рассмотрим наиболее важные функции Apple AR SDK:

Однако, ARKit будет работать только с процессорами Apple A9+, поэтому функции дополненной реальности будут доступны только для устройств, произведенных после 2015 года.

ARKit — это собственный AR SDK от Apple, поэтому он идеально адаптирован для iOS и работает по бесплатной лицензии, подробнее https://developer.apple.com/augmented-reality/arkit/

ARCore предоставляет SDK для многих наиболее популярных сред разработки предоставляют собственные API-интерфейсы для всех основных функций дополненной реальности, таких как отслеживание движения, понимание окружающей среды и оценка освещенности. С помощью этих возможностей можно создавать совершенно новые возможности AR или улучшать существующие приложения с помощью функций AR.

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

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

Лицензия ARCore — бесплатная, подробнее по ссылке https://developers.google.com/ar/develop

Его можно использовать для создания сцен AR на основе маркеров. Инструмент поставляется с расширением A-Frame и three.js, которое работает с любым смартфоном, независимо от версии его ОС, включая Android, iOS 11 и Windows Mobile.

Для создания AR-решения на основе AR JS необходимо лишь создать HTML-файл и подключить в него соответствующие библиотеки. Маркеры очень стабильны, но ограничены по форме, цвету и размеру. Предлагается для тех случаев, когда требуется много разных маркеров с разным содержанием, например, в книгах, листовках и флаерах с AR.

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

8th Wall — лидер в области дополненной реальности на базе Интернета (WebAR). Платформа 8th Wall также используется для разработки дополненной реальности, которая работает на всех устройствах — приложение не требуется и обеспечивает максимально широкий охват, поддерживая более 3 миллиардов смартфонов на iOS и Android.

Targets работает как с плоскими, так и с изогнутыми поверхностями, такими как бутылки, чашки и банки, обеспечивает потоковую передачу объемного видео в WebAR (или то, что часто называют голограммами).

В версии 16 система SLAM теперь на 50% точнее, чем раньше, с частотой кадров, которая на 70% выше, в зависимости от используемого устройства, обновление вышло этой весной. Это означает уменьшение дрейфа, дрожания и задержки для более плавного, и стабильного воспроизведения, согласно, информации на сайте 8th Wall.

Функции, которые раскрывают весь потенциал этого AR SDK, доступны без коммерческой лицензии за 99$ в месяц, но обязательно с водяными знаками 8th Wall, неважно коммерческий проект или нет.

Ежемесячная оплата лицензии также различается в зависимости от просмотров. Коммерческая лицензия Basic обойдется — от 1250$ в месяц, пакет Standart — от 3000$, Premium — от 5000$. И конечно же есть специальное предложение в пакете Pro. Также можно воспользоваться бесплатной пробной 14-дневной версией.

Основываясь на приведенных выше критериях, мы составили сравнительную таблицу 7 ведущих платформ дополненной реальности.

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

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

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

➕Читайте также начало 2 части «Практическое руководство по разработке AR — продукта. Выбор SDK и стоимость» — о том, на что нужно обращать внимание при выборе SDK.

➕Читайте 1 часть «Цена на дополненную реальность под ключ: как формируется стоимость» — где мы рассказали о стоимости разработки приложения дополненной реальности и формирования цены на российском рынке.

Создание вашего первого ARCore-приложения

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

Если вы ещё не читали её, я настоятельно рекомендую это сделать, прежде чем перейти к этой статье и начать разработку ARCore-приложений.

Начало работы

Чтобы начать разработку ARCore-приложений, сначала необходимо добавить поддержку ARCore в свой проект. Это очень просто, так как мы будем использовать Android Studio и Sceneform SDK. Есть две основные операции, которые благодаря Sceneform выполняются автоматически:

Вам не нужно беспокоиться об этих двух шагах при создании ARCore-приложения с помощью Sceneform SDK. Вам просто нужно добавить Sceneform SDK в ваш проект.

Создайте новый проект Android Studio с пустой Activity.

Добавьте следующую зависимость в файл build.gradle на уровне проекта:

А эту зависимость добавьте в файл build.gradle на уровня приложения:

Создание вашего первого ARCore-приложения

Теперь, когда настройка Android Studio завершена и SDK Sceneform установлен, мы можем начать создание нашего первого ARCore-приложения.

Во-первых, нужно добавить Sceneform-фрагмент в наш layout. Это так называемая сцена, где будут размещаться все наши 3D-модели. Фрагмент самостоятельно позаботится об инициализации камеры и обработке разрешений.

Проверка совместимости

Этот метод проверяет, поддерживает ли ваше устройство Sceneform SDK или нет. SDK требует Android API уровня 27 или выше и OpenGL ES версии 3.0 или выше. Если устройство не поддерживает эти два параметра, сцена не будет загружена, и ваше приложение отобразит пустой экран.

Однако вы по-прежнему можете реализовывать все другие функции своего приложения, для которых не требуется Sceneform SDK.

После проверки совместимости мы можем создать нашу 3D-модель и прикрепить её к сцене.

Добавление assets

Теперь нужно добавить в проект 3D-модели, которые будут отображаться на вашем экране. Вы можете создавать эти модели самостоятельно, если вы знакомы с процессом их создания. Или же вы можете зайти на Poly.

Там вы найдете огромный репозиторий 3D-ресурсов на выбор. Кроме того, они бесплатны для скачивания.

В Android Studio откройте папку своего приложения в панели слева. Вам нужна папка sampledata. Эта папка будет содержать все ваши 3D-модели. Внутри этой папки создайте папку с названием своей модели.

В архиве, который вы скачаете с Poly, вы, скорее всего, найдёте 3 файла:

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

Создание модели

Добавьте следующий код в вашу Activity, а я объясню его построчно:

Всё это происходит асинхронно, поэтому вам не нужно беспокоиться о многопоточности.

Добавление модели в сцену

В arFragment находится наша сцена, и он будет получать события пользовательских касаний. Поэтому нам нужно установить слушатель onTap для нашего фрагмента, чтобы обрабатывать касания и размещать объекты, там, где это потребуется. Добавьте следующий код в метод onCreate :

Мы устанавливаем слушатель onTapArPlaneListener для нашего AR-фрагмента. Далее используется синтаксис лямбда-выражений. Если вы с ним не знакомы, то ознакомьтесь с этим небольшим гайдом по этой теме.

Ох! Слишком много терминологии. Не волнуйтесь, сейчас всё объясню:

Сцена: это место, где будут отображаться все ваши 3D-объекты. Эта сцена размещена в AR-фрагменте, который мы добавили в layout.

HitResult: это воображаемая линия (или луч), идущая из бесконечности, которая даёт точку пересечения себя с объектом реального мира.

Якорь: это фиксированное местоположение и ориентация в реальном мире. Его можно понимать как координаты (x, y, z) в трехмерном пространстве. Поза — это положение и ориентация объекта на сцене. Она используется для преобразования локального координатного пространства объекта в реальное координатное пространство.

Якорный узел: это узел, который автоматически позиционирует себя в реальном мире. Это первый узел, который устанавливается при обнаружении плоскости.

TransformableNode: это узел, с которым можно взаимодействовать. Его можно перемещать, масштабировать, поворачивать и так далее. В этом примере мы можем масштабировать наш объект и вращать его. Отсюда и название Transformable.

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

По итогу ваша Activity должна выглядеть следующим образом:

Поздравляю! Вы только что завершили создание своего первого ARCore-приложения. Начните добавлять в него объекты и вы увидите, как они начнут оживать в реальном мире.

Это был ваш первый взгляд на то, как создать простое ARCore-приложение с нуля в Android Studio. В следующем уроке я углублюсь в ARCore и добавлю больше функциональности в приложение.

Гайд по виртуальным мирам: AR и VR

Miroslav Kungurov

1. Дополненная реальность (AR)

Дополненная реальность (англ. augmented reality) – это технология, которая расширяет физический мир, накладывая на него слои цифровой информации: звуки, видео, графику.

1.1. Виды AR

Обычно рассматривают четыре типа дополненной реальности:

В marker-based AR требуется конкретный шаблон, маркер, например, QR-код, поверх которого накладывается виртуальный объект.

Рис. 1. Маркерная AR

Как видно из названия, для разработки markerless приложения маркер не нужен. На окружающую среду накладывается сетка и обнаруживаются ключевые точки, к которым привязывается виртуальная модель.

Рис. 2. Безмаркерная AR

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

Superimposition-based AR частично или полностью заменяет исходное представление объекта дополненным представлением того же самого объекта.

1.2. Софт для AR

Чтобы создать приложение дополненной реальности, понадобится набор средств разработки (software development kit, SDK). Ниже мы рассмотрели наиболее популярные SDK.

ARKit

ARKit – это SDK для создания приложений дополненной реальности и игр для iPhone и iPad. Для него характерны следующие черты:

Reality Composer – редактор для создания 3D-моделей.

RealityKit – рендеринг и анимация.

Поддерживаемые платформы: iOS 11.0 и выше.

ARCore

На ARKit компания Google ответила своей разработкой – ARCore.

Поддерживаемые платформы: Android 7.0 и выше, iOS 11 и выше.

Vuforia

Поддерживаемые платформы: Android 4.4.4 и выше, iOS 11 и выше.

EasyAR

Поддерживаемые платформы: Android, iOS.

Lens Studio

Поддерживаемые платформы: Snapchat.

Spark AR

Поддерживаемые платформы: Instagram.

2. Виртуальная реальность (VR)

Виртуальная реальность (англ. virtual reality) – компьютерная симуляция альтернативной реальности.

2.1. Виды VR

Автономная VR работает сама по себе, без необходимости использования дополнительного внешнего оборудования (компьютер, консоль), например, Oculus Quest. Всё, что нужно, – это гарнитура и контроллеры VR.

VR на базе ПК – это любые гарнитуры, требующие постоянного подключения к ПК, такие как: PC Oculus Rift S, Valve Index, HTC Vive, Pimax и Windows Mixed Reality.

Когда говорят о VR для консоли, обычно имеют ввиду PlayStation VR для PlayStation 4.

Рис. 4. PlayStation VR

2.2. Типы отслеживания движения

Наиболее распространенный способ отслеживания движений – система Inside-Out с камерами, встроенными в гарнитуру. Такой подход реализован в Oculus Rift S, HTC Vive Cosmos и всех гарнитурах Windows Mixed Reality.

Существует также схема отслеживания Outside-In с размещением базовых станций в углах комнаты, помогающих гарнитуре и контроллерам отслеживать их точное местоположение (HTC Vive Cosmos Elite, Valve Index).

Рис. 5. Отслеживание Outside-In и Inside-Out

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

2.3. Базовые термины и понятия

Поле зрения (FOV). В контексте гарнитур VR поле зрения относится ко всему, что вы можете видеть в виртуальном мире при использовании гарнитуры.

Рис. 6. Поле зрения (FOV)

Степени свободы (DoF). Чем больше степеней свободы, тем больше физических движений будет отслеживаться гарнитурой. 3DoF (3 степени свободы) отслеживает только перемещение головы: крен, тангаж, рыскание, но не положение в пространстве по координатам (x, y, z). В современных гарнитурах используется 6DoF, отслеживающий как движения головы, так и ее координаты.

Рис. 7. Степени свободы 3DoF и 6DoF

Frames Per Second (FPS) – количество кадров в секунду.

Screen Resolution – количество пикселей, отображаемых на экране.

Spatial Audio (3D аудио) – пространственное звучание (используется для создания звука, который исходит из определенной точки виртуального мира).

Рис. 8. Spatial Audio (3D аудио)

2.4. VR через веб-браузер

WebGL – кроссплатформенный API для 3D-графики в браузере. Исполняется как элемент HTML5 и поэтому является полноценной частью объектной модели документа (DOM API) браузера. Может использоваться с языками программирования, поддерживающими DOM API: JavaScript, Rust, Java, Kotlin и др.

Для упрощения работы с WebGL существуют различные фреймворки. Все они распространяются под свободной лицензией (MIT, Apache 2 или BSD), написаны на JavaScript и имеют сходный набор функций: работа с геометрией, материалом, светом, анимацией, камерами, шейдерами, текстом и 3D-аудио. Вот некоторые из них:

2.5. Программное обеспечение

Blender

Unity

Unity является наиболее распространенным инструментом для разработки VR. С его помощью можно импортировать модели, созданные в Blender, настроить взаимодействие с этими моделями, а также их физику. Для скриптинга используется C# и UnityScript, напоминающий JavaScript. На этом движке можно создавать приложения для WebGL, Oculus Rift и HTC Vive. Также есть интеграция с ARCore, ARKit.

Цена: бесплатно и не требует отчислений с прибыли.

Ограничение: объем привлеченных инвестиций не более 100 тыс. долл. за последние 12 мес.

Unreal Engine

Основной конкурент Unity – Unreal Engine. В нем можно писать на C++ и Blueprints (визуальное программирование). Поддерживаемые платформы: AR (Android, iOS), VR (Google VR, Oculus, Gear VR, SteamVR, Windows MR)

Ограничение: 5% от выручки с продаж, если ежеквартальная выручка превышает 3 тыс. долл.

3. Уроки и курсы по AR и VR

3.1. AR

3.2. VR

Итак, для разработки AR-приложений основными инструментами являются ARkit и ARCore. Если вы пишете на JavaScript, обратите внимание на AR фреймворки, работающие через веб-браузер. С языками в VR всё очевидно: C# в Unity, C++ в Unreal Engine. Рынок AR и VR будет расти, так что успейте запрыгнуть в поезд, пока он не ушел!

Swarp SDK или о том, как быстро создать AR-приложение

Обзор

Маркеры

Утилита создания маркеров (SquareMarkerCreator)

Как видно из названия, эта утилита служит для создания маркеров, используемых в Swarp SDK. После ее запуска появляется визуальный редактор маркеров:
Изменять цвет ячейки маркера можно просто кликая мышкой по соответствующей ячейке. Тут же можно изменить такие параметры маркера, как отступы, ширина рамки, размерность матрицы ячеек и прочие.

«Hello, world!» на Swarp SDK

Самое время попробовать написать свое AR-приложение. Я хочу разобрать пример OgreSimpleSceneExample, который будет использовать первую попавшуюся камеру и использовать Mogre для рендеринга одной 3D-модели.

Создадим проект консольного Win32-приложения. И добавим в Reference используемые сборки:

А в код добавим ссылки на используемые пространства имен:

Теперь надо добавить поля в статический класс Program, которые будут реализовывать процесс дополненной реальности. Нам понадобится класс AugmentedRealityManager, который будет обеспечивать взаимодействие и управление различными модулями SDK. Еще нам будет нужен интерфейс ITrackable для описания используемого маркера. После добавления этих полей у нас получится такой код:

Теперь у нас есть точка входа в приложение. Возникает вопрос — что же делать дальше? Дальше я приведу картинку из документации Swarp SDK:

На картинке красной рамкой выделены действия, которые должен выполнить разработчик.
На текущем этапе необходимо инициализировать камеру. Для этого служит класс CameraManager:

Затем надо указать, какие маркеры будут использованы в приложении. Это делается таким способом:

Таким образом, мы указываем, что маркер Trackable\5.trackable будет искаться системой трекинга маркеров.

А теперь нам надо инициализировать систему рендеринга, основанную на Mogre:

Работа с Managed Ogre инкапсулирована в класс Ogre3DRenderingSystem, что существенно упрощает жизнь разработчику, так как берет на себя большую часть рутинных операций. Вообще, Mogre это отдельная и очень большая тема, так что если кому-нибудь интересно, то в конце статьи ссылка на Mogre wiki.

Swarp SDK не ограничивает разработчика только Ogre’ом. В принципе, разработчик может интегрировать другое средство рендеринга. Для этого необходимо создать два класса, наследуемых от Renderer и Scene, находящихся в пространстве имен Swarp.SDK.Rendering.

Вернемся к нашему приложению. При вызове конструктора Ogre3DRenderSystem указываются 4 параметра: handle формы или контрола, с которым будет работать Mogre, пути к файлам конфигурации Ogre, описывающим плагины и настройки системы рендеринга, а также путь к лог-файлу.

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

Здесь загружается только одна модель House.zip, которая находится в ZIP-архиве.
Затем вызывается метод LoadScene. Он нужен для того, чтобы создавать сцену Mogre и добавлять в нее модель. Подробнее про это можно прочитать в Mogre wiki. Описание метода приведено ниже:

Теперь все готово для инициализации менеджера и запуска:

Важный момент: перед запуском процесса дополненной реальности необходимо включить захват с камеры.

Метод UpdateScenes ориентирует модель (если она найдена трекером) соответственно положению маркера в пространстве:

Таким образом, у нас получилось первое AR-приложение, своеобразный «Hello, world!» в мире дополненной реальности. Я заскриншотил то, что у меня получилось:

И немножко видео Swarp SDK в действии:

Симпатичный домик, не правда ли?

В заключение

Вот, вроде бы и все, что необходимо, чтобы создать свое AR-приложение. У меня ушло около 2 часов, чтобы прочитать документацию по SDK и понять принципы работы.

Надеюсь, что статья поможет тем, кто захочет разобраться в Swarp. В следующих статьях попробуем написать приложение посерьезнее и посложнее. Спасибо Вам что прочитали.

Ссылки

Сайт разработчиков: www.sectar.com
Ссылка на скачивание SDK: Swarp SDK
Managed Ogre: Mogre wiki

UPD: выложил видео.
UPD 2: Новости с полей: Sectar выкатили новый апдейт. В старой версии была ошибка с активацией триал-режима. Вроде исправили. В посте поправлены ссылки на скачивание.

Создание AR-игры с помощью Vuforia

[Под катом есть объёмные GIF]

Дополненная реальность (Augmented reality, AR) внезапно стала очень популярным термином. Благодаря Vuforia разработчики с лёгкостью могут дополнять физический мир цифровым контентом.

Хотя выпуск ARKit и ARCore позволил повысить известность дополненной реальности, уже существовали другие платформы и SDK. Одним из них был Vuforia; а недавно Unity заключила с Vuforia партнёрское соглашение и интегрировала эту AR-платформу в игровой движок Unity.

В этом туториале я создам AR-игру с помощью Vuforia SDK, интегрированного с движком Unity. В процессе работы я расскажу о следующих ключевых компонентах:

Примечание: в этом туториале по Vuforia подразумевается, что вы уже знаете основы разработки в Unity. Если вы новичок в Unity, то изучите отличный туториал Getting Started In Unity.

Разработка AR-игр в Unity

На рынке есть множество AR-устройств, но основной целью AR-приложений является мобильное пространство таких платформ, как iOS и Android. Именно здесь удобно сочетание Unity и Vuforia — в кросс-платформенной разработке. Ещё один плюс заключается в том, что приложение можно тестировать в редакторе. Для этого всего лишь нужна веб-камера!

Перед началом работы скачайте последнюю версию Unity и установите компонент Vuforia Augmented Reality Support. Если вы пользуетесь Unity Hub, то можете добавить этот компонент в уже установленную версию Unity.

Приступаем к работе

Теперь, когда у вас есть Unity, Vuforia и веб-камера, необходимо скачать пример проекта (отсюда).

После скачивания извлеките файлы и откройте в Unity проект How to Make an AR Game Using Vuforia Starter. Когда проект загрузится, откройте сцену Starter из папки Scenes и посмотрите на окно Hierarchy:

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

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

Примечание: ассеты UI для этого туториала скачаны с shareicon.net

Знакомимся с шеф-поваром Vuforia

Чтобы сделать это, нам нужно заставить виртуальную пиццу отображаться на изображении-трекере, которое мы держим в реальном мире. После добавления в заказ начинки вы сможете физически «подать» пиццу, вынеся её за пределы видимости камеры…

Но всему своё время. Для начала нужно заменить Main Camera на AR Camera. Удалите из сцены Main Camera, а затем нажмите правой клавишей мыши в Hierarchy.

Нажмите Import и дождитесь, пока Vuforia Package импортируется в проект, при этом добавится довольно много файлов.

Можно не обращать внимания на новые файлы в папках Editor и Streaming Assets. Это просто шаблоны; нужные нам файлы включены в проект.

В папке Vuforia хранятся все префабы и скрипты, используемые платформой Vuforia, которую мы будем применять.

Стоит также упомянуть о файле VuforiaConfiguration внутри папки Resources. Этот файл добавлен, потому что для разработки приложения Vuforia необходима лицензия. Однако при желании можно получить бесплатную лицензию разработчика на Vuforia Developer Portal.

Примечание: если в вашем проекте нет лицензионного ключа приложения (App License Key), то его можно найти в файле README. Скопируйте строку в поле инспектора файла VuforiaConfiguration.

Теперь, когда у нас в сцене есть AR Camera, осталось сделать только одно — включить дополненную реальность!

Нажмите в редакторе Play и скажите «привет» самому себе!

Примечание: если вы нажали на play и появился экран «Vuforia Initialization Failed», то попробуйте перезапустить Unity. Это случайный баг, который появляется только на некоторых системах.

Введение в распознавание образов

Любоваться на себя — это, конечно, здорово, но разве мы не собирались делать игру про пиццу?

По умолчанию Vuforia работает с распознаванием образов (Image Recognition). Распознавание образов, также называемое распознаванием трекеров (Tracker Recognition) или трекингом изображений (Image Tracking) — это процесс, при котором камера распознаёт заранее заданное изображение и знает, что с ним делать, например, выполнять поверх него рендеринг какого-то контента. Лучше всего это работает тогда, когда изображение трекинга каким-то образом соответствует контенту, например, планы этажей для рендеринга зданий хорошо работают поверх изображения со зданием.

Как это работает: очень важно хорошо подобрать качественное изображение для трекинга. При использовании Vuforia можно загрузить выбранное изображение на портал разработчика, чтобы проверить качество его отслеживания, и это нужно делать до того, как начинать разработку. Портал разработчика присваивает изображению рейтинг, но, что более важно, показывает его «характерные точки». Чтобы трекер был хорошим, эти характерные точки (feature points) должны быть густо распределены по изображению и в них не должно присутствовать повторяющихся паттернов. Во время выполнения камера ищет эти характерные точки, чтобы вычислить своё расположение относительно изображения.

Для этого туториала изображение и база данных трекинга уже настроены. Изображение пиццы находится в папке Materials, которую вы скачали ранее. В идеале стоит его распечатать. Или же его можно открыть на каком-нибудь цифровом устройстве, а затем «показать» его камере. Вот как выглядит изображение в Vuforia Tracker Database:

Как видите, характерные точки хорошо распределены. К тому же это пицца, что удобно!

Добавление в сцену Image Targets

Теперь у нас в сцене есть Image Target GameObject. Посмотрите на этот target в инспекторе, и вы увидите несколько компонентов. Самыми важными являются Image Target Behavior и Default Trackable Event Handler. Второй мы подробнее рассмотрим позже, а пока убедимся, что опции раскрывающегося списка Image Target Behavior настроены следующим образом:

Помните добавленные ранее к проекту файлы, которые я попросил игнорировать? Вы их нашли! Vuforia добавляет несколько примеров баз данных Image Target, чтобы мы могли начать разработку и использовать их для примеров, например того, которым мы пользуемся, уже добавленного в материалы.

Примечание: трекер Pizza — единственный image target в вашей базе данных; однако в одной базе данных могут быть сотни изображений. Кроме того, в одном приложении может быть несколько баз данных.

Теперь, когда мы настроили в сцене AR Camera и Image Tracker, у нас есть всё необходимое для работы дополненной реальности! Нажмите в Editor на кнопку Play и поставьте распечатанное изображение напротив камеры.

У нас появилась пицца!

Прикрепление Game Objects к Trackers в качестве дочерних объектов

Пицца немного маленькая, но она крепко приклеилась к изображению-трекеру. Можно также заметить, что если убрать отслеживаемое изображение, то пицца останется висеть в воздухе.

Дело в том, что пока веб-камера может видеть изображение-трекер, Vuforia способен обновлять позицию AR Camera в сцене. Если хотите увидеть это в действии, настройте Unity Editor таким образом, чтобы были одновременно видны окна Game и Scene, затем выберите AR Camera и нажмите Play.

Как же заставить пиццу вести себя правильно, когда работает камера? Выберите ImageTarget в Hierarchy. Вы увидите, что его масштаб по каждой оси имеет значение 10. Этим управляет компонент Image Target Behaviour. В разделе advanced можно увидеть, что параметр Width имеет значение 10. Он был задан при загрузке изображения на сайт Vuforia Developer.

Подсказка: вы не понимаете, почему Image Target в этом туториале была задана ширина 10? Когда размер не является существенным фактором для приложения, то установка значения 10 обеспечивает камере повышенную вероятность трекинга, при этом сохраняя хорошую позицию для контента между ближней и дальней плоскостями AR Camera. Однако иногда нужно, чтобы дополненная реальность имела определённый масштаб. В таком случае нужно задать размер изображения-трекера таким образом, чтобы он соответствовал физическим измерениям при загрузке на портал разработчика.

Снова нажмите Play и вы увидите, что пицца находится поверх изображения, а также исчезает, когда изображение пропадает из кадра.

Изучение DefaultTrackableEventHandler

Это поведение берётся из DefaultTrackableEventHandler объекта ImageTarget. Откройте скрипт и просмотрите его.

Скрипт хорошо откомментирован, но стоит обратить внимание на некоторые аспекты:

Переварите пока эту информацию.

Создание собственных действий трекинга

Настало время сделать что-нибудь с этой информацией!

Удалите из ImageTarget компонент DefaultTrackableEventHandler. Затем добавьте PizzaTrackableEventHandler, который можно найти в папке Scripts. Затем откройте PizzaTrackableEventHandler. Это клон DefaultTrackableEventHandler, но код в OnTrackingFound и в OnTrackingLost удалён — эту задачу предстоит решить вам!

Включение и отключение компонентов Renderer пригождается почти в каждом AR-приложении, поэтому вернём этот код. Если вы застрянете, то можно скопировать его из DefaultTrackableEventHandler или найти под спойлером ниже.

Мы готовы превратить этот проект в игру в дополненной реальности!

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

В начале PizzaTrackableEventHandler добавим UnityEvent для вызова, когда Image теряет трекинг.

А теперь вызовем событие в методе OnTrackingLost:

Это делает PizzaTrackableEventHandler более гибким, потому что теперь мы можем задавать выполнение любых действий при потере трекинга. Сохраните PizzaTrackableEventHandler, вернитесь в Unity Editor и дождитесь завершения компиляции. Когда она закончится, сделайте так, чтобы GameManager.CompleteOrder() вызывался при потере трекинга трекера пиццы. Наконец, отключите или удалите CompleteOrderButton в UI.

Сохраните сцену, нажмите Play и подайте пиццу!

Куда двигаться дальше

Поздравляю, вы завершили туториал!

Пример проекта можно скачать отсюда.

Дополнительную информацию о разработке с помощью Vuforia в Unity можно изучить в Vuforia Developer Library или в руководстве Unity.

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

Для более подробного изучения прочитайте о виртуальных кнопках. На веб-сате Vuforia есть примеры материалов. Проверьте, сможете ли вы создать эти виртуальные кнопки для замены UI в игре про пиццу.

Практическое руководство по разработке AR — продукта. Выбор SDK и стоимость

От студии Black VR (Часть 2)

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

Вопрос, который задают нам клиенты чаще всего — «Что входит в создание приложения дополненной реальности?» Это очень важный вопрос, который требует некоторого обучения со стороны заказчика. Это необходимо для того, чтобы вы, как клиент смогли понять сколько денег и времени потребуется, как строится работа, с чего начать и как в результате получить максимальную выгоду от продукта. Накопленный нами опыт за 5 с лишним лет работы на рынке разработки интерактивных технологий позволяет создать нам краткое руководство к действию.

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

В последующей серии частей мы подробнее обсудим во сколько может обойтись стоимость 3d-моделирования, анимации, кода и др., далее обсудим особенности работы с маркет-плейсами и что в итоге должно быть отражено в ТЗ.

Вот несколько вещей, которые следует учитывать при создании AR.

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

Чтобы проанализировать реальный мир и построить виртуальный объект, задав его координаты относительно плоскости или 2d изображения нам понадобятся специальные средства для разработки дополненной реальности, такие — как SDK.

Software Development Kit — набор средств разработки, это как раз то, о чем мы с вами говорим.

Если вы полны решимости использовать эту технологию и создать мобильное приложение с дополненной реальностью в 2021 году, вам понадобится соответствующий комплект для разработки программного обеспечения AR (SDK).

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

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

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

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

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

Выбирая SDK дополненной реальности, вы должны проверить, с какими платформами он работает. Конечно, почти любой SDK поддерживает как Android, так и iOS (две наиболее широко используемые мобильные операционные системы).

Но что, если вы решите разработать приложение для Windows Mobile? Некоторые пакеты AR SDK совместимы с универсальной платформой Windows (UWP), которая поможет вам создавать приложения AR для смартфонов и компьютеров под управлением Windows. Существуют также платформы дополненной реальности, которые позволяют разрабатывать приложения AR для macOS. Даже если вам не нужны эти функции сейчас, они могут понадобиться когда-нибудь в будущем.

Сегодня большинство приложений AR работают через смартфоны, что означает, что пользователи могут видеть виртуальные объекты на экранах своих гаджетов. Однако, есть другой способ наложить объекты AR прямо на реальный мир — умные очки. В отличие от смартфонов, умные очки позволяют использовать дополненную реальность без помощи рук. Поскольку умные очки становятся все более популярными (вспомните Microsoft HoloLens, Vuzix Blade 3000, Epson Moverio BT — 300 и многие другие), возможность создавать мобильные приложения AR, совместимые с этими гаджетами, безусловно, является преимуществом.

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

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

Unity — один из самых продвинутых игровых движков в мире. Обычно он используется для создания игр, компьютеров и консолей, но Unity также поддерживает приложения с дополненной реальностью. Благодаря Unity можно создавать действительно потрясающую графику, поэтому проверьте, совместим ли SDK с Unity.

Обратной стороной использования Unity является его ресурсоемкость, поэтому многие компании предпочитают разрабатывать нативные приложения для iOS и Android.

Как создавать персонажей для дополненной реальности

Меня зовут Елена Шпаковская, я 3D Lead Generalist международной ИТ-компании Live Animations Corp.

В марте 2018 года мы запустили приложение с дополненной реальностью Timi для серии кондитерских изделий.

Мы с нуля создали приключенческую захватывающую историю из 20 серий, а также целую сказочную вселенную с разными планетами и персонажами, а их получилось аж 23. У каждого своя история, свой характер и уникальная способность. И конечно, как во всяких приключениях, не обошлись мы и без антигероя — хитроумного, но очень доброго злодея.

Менее чем за шесть месяцев продукт показал хорошие результаты: приложение скачали более 250 тысяч раз, а в ноябре Adobe Illustrator добавил наш кейс Timi в «Рекомендуемое» на Behance, и я решила поделиться опытом создания персонажей для дополненной реальности.

Заказчик искал возможность:

Способом реализации стало использование AR для серии упаковок кондитерских изделий. Таким образом, упаковка продукта перестала быть одним из самых слабых каналов связи на рынке и стала мощным источником взаимодействия с потребителем.

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

У нас было два сценариста, и они написали два типа сценариев.

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

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

Когда детский опрос подтвердил, что мы были правы, начали писать посерийники, потом и сценарии, а параллельно рисовали концепты. Все сценарии объединили общей идеей «Сладость — это радость», вкусняшки придают детям энергию, силу, дают пищу мозгу и, соответственно, нацеливают на правильные мысли и идеи. В будущем это позволило маленькому пользователю в полной мере быть вовлечённым в игру, а это и было нашей задачей.

Самое важное — это их лица. Красивые выразительные глаза, милый носик забирают на себя основное и, скажем так, первоочерёдное внимание. То есть это то, что первым бросается в глаза. А потом уже начинаешь рассматривать детали одежды, по которым можно сразу определить, что это за персонаж и какой у него характер.

Совет: уделяйте внимание мелким деталям, референсам, дети очень любят «пасхалки».

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

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

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

Также важно помнить, что ваш персонаж — трёхмерная фигура, его формы объёмные, поэтому он должен быть интересным во всех плоскостях. С одной стороны, у вас в буквальном смысле больше места для творчества, а с другой — больше работы и деталей, которые необходимо продумать.

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

Большие трудности были с моделированием Timi, поскольку это бренд компании, и его изображение есть на всех упаковках. Когда мы начали моделировать, было трудно преобразовать 2D-персонажа в 3D-модель. И ещё одной проблемой было то, что целевая аудитория — дети начальной школы.

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

Проект был для кондитерской компании, поэтому интерфейс и иллюстрации должны выглядеть вкусно и аппетитно, особенно для детей. Конечно, мы выбрали мультяшный стиль: объёмные формы, яркие цвета, элементы сладостей, шрифт Galpon, он хорошо читается, подходит под стиль и выглядит по-детски.

Цвета подбирали такие, чтобы они вызывали ассоциацию с карамелью, шоколадом, печеньем. Иконки, кнопки рисовали объёмные, чтобы они сочетались со всеми элементами в игре. В камере же иконки простой 2D-формы, чтобы они не отвлекали при просмотре мультика.

Как мы сделали одну из лучших в мире AR-игр без платного трафика

Alice in Wonderland AR Quest

19 сентября 2017 года Apple выпустила iOS 11, поддерживающую технологию дополненной реальности. Любой разработчик мог создать AR-приложение при помощи фреймворка ARKit.

23 сентября мы в Avatarico выпустили игру Alice in Wonderland AR quest.

В начале октября игра была 10-й в мире бесплатной AR-игрой по количеству скачиваний в App Store.

Через пару месяцев игра была отмечена в списке App Store Best of 2017.

В марте 2018 года игра стала 4-й AR-игрой в мире по скачиваниям

Сейчас у игры наивысший рейтинг среди AR-игр, лидирующих по скачиваниям.

С момента релиза мы не потратили ни рубля на платный трафик. Рассказываем, как так получилось.

Предыстория

Решение сделать AR-игру было стремительным, но не случайным.

До этого момента мы в Avatarico занимались разработкой VR-игр (вот посты на Хабре: 1, 2, 3) — с 2014 года сделали 5 игр и продавали лицензии на коммерческое их использование. Сейчас у нас больше 70 партнеров по всему миру.

За это время мы научились использовать новые технологии так, чтобы это было не формально (то есть мы используем потенциал технологии, а не делаем игру в вакууме, где VR чисто для галочки), научились продавать такие продукты широкой аудитории (спойлер: продает не технология, а эмоции) и делать их так, чтобы они нравились, условно говоря, нашим бабушкам и мамам.

Поэтому, когда 5 июня 2017 года анонсировали iOS 11, мы поняли, что нужно ловить момент и сделали игру меньше, чем за 4 месяца.

К этому времени в сети уже расходились вирусным образом эксперименты с бета-версией ARKit. То и дело мы наблюдали видео в твиттере с классными вау-эффектами.

Одним из них был эффект портала.

Натолкнуться на подобное видео проще всего в твиттере

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

В качестве сеттинга мы выбрали Алису в Стране Чудес — вселенная популярная и бесплатная, если вы основываетесь на книгах Льюиса Кэролла — они являются общественным достоянием (в отличие от продукции Диснея).

Разработка

Конечно, одной вселенной недостаточно. Вбейте в App Store “алиса в стране чудес”, и вы найдете мириады безвестных игр по этой сказке. Но у нас был козырь — дополненная реальность, и мы понимали, как сделать с ее помощью вау-экспириенс.

Если вы посмотрите в раздел AR-игр, то вы увидите множество игр, где дополненная реальность остается номинальной. А где-то даже и лишней.

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

Наш кролик

В полу перед игроком образовывалась нора, из которой выскакивал белый кролик. Его нужно было поймать, и тогда от открывал портал в Страну Чудес.

Войти в портал нужно физически, при помощи ног, держа в руках телефон. Даже сейчас для многих это настолько фантастично, что нам приходится говорить об этом прямым текстом. Иначе игрок может так и не побывать в Стране Чудес!

Внутри портала можно свободно перемещаться, встретить Чеширского кота и других персонажей, взаимодействовать с предметами и устроить безумное чаепитие.

Видео прохождения игры

Релиз, фичеринг и скачивания

Благодаря использованию ARKit, мы получили фичеринг. Наше приложение побывало на первом экране в разделе «Игры» нового App Store.

В первые же недели мы набрали несколько сотен тысяч скачиваний и — что еще более приятно — тысячи положительных отзывов; игроки в восторге от возможности посетить Страну Чудес «вживую».

Арт для фичеринга

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

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

Неожиданно для нас самих, игра дико зашла в Азии. Только треть наших пользователей — россияне. Дальше идут Китай, Япония и Южная Корея.

Соответственно, мы перевели игру на все нужные языки.

Анализ отзывов

Если посмотреть на раздел AR-игр в российском App Store, то у нашей игры беспрецедентное число отзывов. Игры, которые висят месяцами в фичеринге рядом с нами — имеют несколько десятков оценок.

Другими словами, что-то заставляло пользователей выбирать именно нашу игру среди всех остальных.

В России мы самая популярная AR-игра (рейтинг 4,8 на основе 5,4к оценок).

В Китае у нас самый высокий рейтинг 4,9 — выше, чем у YuME, местного лидера по числу оценок (рейтинг 4,8 на основе 14,3к оценок).

В США у нас рейтинг 4,7, такой же, как у Zombie Gunship Revenant AR (это игра с наибольшим числом оценок в Штатах — 12,4к).

Судя по отзывам, людям нравится именно вход в портал — та киллер-фича, на которую мы и делали ставку («Сумасшедший трекинг, приятная графика и переход от выдуманного мира в реальный через портал работает на 5+», «it feels like i’m really in the wonderland»).

Те, кто понимают, что такое AR (я выделяю этих пользователей в отдельную категорию, потому что средний посетитель App Store, скорее всего, даже не знаком с аббревиатурой) — также отмечают, что это лучшее использование технологии, что они видели («AR must», «Идеал дополненной реальности», «Awesome! Best AR experience I’ve tried!!»).

Итоги

Выводы

Как мы себе это объясняем, такой результат — следствие нескольких факторов.

То, что зависело от нас: