Игра для Ford Europe: как создать инстаграм-AR-гонку весом всего 4 МБ

Підписуйтеся на Telegram-канал «DOU #tech», щоб не пропустити нові технічні статті

Привет, меня зовут Александр Сурнин, я сооснователь Areyes. Наша студия с 2019 года занимается разработкой AR-продуктов для социальных платформ. За это время мы успели реализовать проекты для таких компаний, как Sony, L’Oréal, Lego, Red Bull (DE), Real Me (Global) и многих других. Это более 150 проектов разной механики: от AR-эффектов до полноценных мини-игр, в которые зашивается продакт-плейсмент клиент.

В этой статье я хотел бы рассказать об одном из недавних проектов, где нашей команде удалось разработать и поместить в 4 МБ полноценную AR-гонку для компании Ford Europe.

Материал будет полезен как гейм-, так и AR-разработчикам.

Предыстория

Наша команда одна из первых в мире реализовала гоночную игру для инстаграм-фильтра под названием Follow The Dream. До этого считалось, что социальная сеть вмещает только простые дизайн-эффекты вроде одного слоя с нехитрой механикой, но наша работа открыла более широкие возможности, в том числе, как упаковать полноценную AR-гонку в 4 МБ.

Для сравнения другие рекламные форматы весом 4 Мбайта:

• две картинки для соцсетей в высоком разрешении;
• двухсекундный рекламный видеоролик HD 60 Fps;
• две фотографии с моря.

Кейс привлек внимание сообщества разработчиков, среди которых много ребят из диджитал-маркетинга, к тому моменту уже рассматривающих возможности AR, — и среди них оказался Ford.

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

Идея

В 2020 году Ford выпустил новую модель городского внедорожника Ford Puma ST — автомобиль, характеристики которого могут поспорить с гоночным авто: быстро реагирует на импульсы, быстро входит в повороты, по-настоящему build to thrill, как утверждает слоган. Чтобы продвигать машину, помимо традиционных рекламных каналов, было решено использовать возможности геймификации AR-игры и создать свою гонку на базе Spark AR Studio для Instagram.

Гонка будет симулировать заезд на гоночном треке Brands Hatch, расположенном на востоке от Лондона. Именно использование реальной карты и стало главным вызовом проекта. Нам предстояло воссоздать реалистичное вхождение в повороты на реальной трассе, и это не могло выглядеть как в 2D-симуляциях, иначе не донесло бы всех преимуществ модели.

Концепт

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

• интерфейс;
• положение камеры;
• позицию головы игрока (это все ещё инстаграм-фильтр, где пользователь управляет своей головой);
• спецэффекты поворотов и разгона машины;
• композицию кадра;
• ориентир по колористике.

Команда

В проекте принимало участие 9 специалистов:

• проектный менеджер;
• креативный продюсер;
• арт-директор;
• 2D-художник;
• 3D-художник;
• технический директор;
• технический художник;
• лид-артист;
• QA-инженер.

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

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

Разработка

Элемент номер один — карта

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

1. Находим трек в Google Maps. Узнаём, что он плоский и не повторяет всех перепадов высоты, неровностей. Ищем пути, чтобы извлечь нужный фрагмент ландшафта в 3D.

2. Используем:

• open-source 3D-пакет для разработки Blender 3D;
• add-on к Blender Maps Models Importer;
• open-source графический дебагер Render Doc;
• немного терпения.

В итоге получаем что-то вроде 3D-скриншота местности с нужными перепадами высот. Сопоставив эту модель с обзорами трассы с YouTube, видим, что затея с рельефом удалась.

Технический чек-лист, как вытянуть из карты ландшафт

1. Запускаем браузер Google Chrome в специальном режиме, который дает нам PID процесса.

2. Запускаем Render Doc, Inject into process, находим по PID наш процесс.

3. Открываем интересующую нас область в Google Maps в уже открытом Google Chrome.

4. Ищем кнопку Capture Frame.

5. Софт сделал некий 3D-скан местности.

6. Переходим в Blender 3D, подключаем add-on Maps Models Importer, загружаем экспортированный файл с картой.

7. Дальше причесываем топологию ландшафта.

8. Добавляем дорогу.

9. Текущий результат успешно можно брать в работу и отправлять художникам.

Кстати, на всю карту у нас меньше 2 МБ места, поэтому используем атлас-текстуру и уже на ней размещаем все нужные для покраски трассы паттерны.

Выглядит реалистично: будто ранним утром приехал на трек потренироваться перед предстоящим заездом.

Элемент номер два — машина

Конечно, мы не могли использовать случайную модель автомобиля: игрок должен ездить исключительно на Ford Puma ST. И, конечно, клиент предоставил нам 3D-модель автомобиля, которая занимала более 100 МБ вместо нужных нам 1,5 МБ и состояла из 1,5 миллиона треугольников вместо хотя бы 10 тысяч.

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

Элемент номер три — спецэффекты

Все проекты дополненной реальности в инстаграме разработчики создают на платформе Spark AR Studio — программном обеспечении, выпущенном фейсбуком в 2017 году. Однако в нём до сих пор не предусмотрено множества технологий, привычных для других движков. И что было важно для нас — нет встроенной механики для создания хотя бы иллюзии динамики объектов. А для эффекта вхождения в крутые повороты нам это было необходимо.

Решили следующее: если нельзя заставить двигаться машину, заставим двигаться всё вокруг — с помощью люфтов, допусков и поворотов камеры создадим видимость корректного движения.

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

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

Элемент номер четыре — мини-карта

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

Технические решения

Для построения траектории и сохранения формы ландшафта мы использовали obj-файл с информацией о крайних точках, высчитали положение автомобиля по пяти осям, XYZ, rotationX и rotationZ. Ось rotationY получили из разницы между текущим положением автомобиля и положением на 50 мс раньше. Машину удалось разворачивать вдоль изгибов дороги по всему ходу движения.

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

Эти два эффекта усилили движением картинки вокруг машины. В движке Spark AR Studio камера зафиксирована в одной точке и её перемещение невозможно. Мы же пошли от обратного: пока машина стоит на месте, мы вращаем весь мир вокруг машины. Это вроде иллюзии движения, когда нам кажется, что наш поезд тронулся, хотя на самом деле отправился поезд на соседнем пути.

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

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

В работе над проектом мы также использовали собственный набор инструментов (AREYES SDK), чтобы ускорить разработку игровой механики. AREYES SDK — это наш внутренний продукт, на его основе мы разработали множество готовых шаблонов самых популярных игровых механик для Instagram.

По итогу игра заняла 5800 строк кода.

Проблемы

В каждом объёмном проекте, который мы разрабатываем на Spark AR, возникают ошибки, напрямую связанные с движком. В этот раз на ряде телефонов половина текстур оказалась просто чёрной. Проблема появлялась рандомно, не было никакой привязки к конкретным устройствам и функциям, она могла зависеть от версии инстаграма, аккаунта разработчика или даже от А/Б-тестов разработчиков. Чтобы это устранить, нам пришлось исключить из проекта встроенный PBR-шейдер и воспроизвести его самодельным аналогом. Опять-таки хорошо, что предусмотрели время на тестирование.

Результат

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