Вызов всех автоботов

Вызов всех автоботов

Закулисный взгляд на интерактивный WebGL

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

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

Концепция

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

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

Используя интерактивный личностный тест в WebGL, веб-сайт сопоставил поклонников с главными героями фильма на основе их личности.

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

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

Моделирование

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

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

Кроме того, количество полигонов не было большой проблемой. Мы протестировали производительность до 400 000 вершин в WebGL, и после наших оптимизаций мы знали, что 65 000 вершин (которыми оказалась наша модель) не будут проблемой.

Текстурирование (Quixel + PBR)

Поскольку PBR в настоящее время является самым безопасным вариантом, мы решили использовать программное обеспечение для рендеринга — в данном случае Quixel — для текстурирования Bumblebee. Его относительная простота использования означала, что мы могли интуитивно текстурировать Bumblebee и позволить программному обеспечению позаботиться о создании для нас карт альбедо, блеска, шероховатости и нормалей. Он работает с картами AO, Object Space Normal, Curvature и Material ID (по большей части). Они были достаточно простыми для рендеринга в Maya.

Программное обеспечение является интуитивно понятным и эффективным при определении размеров, полостей и краев объекта. Это удобно при процедурном текстурировании таких объектов, как Bumblebee.

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

После того, как общий вид был определен, команда разработчиков текстур усовершенствовала различные материалы (металлы, резину, автомобильные краски, отражатели и т. д.), из которых состоит Bumblebee, и сохранила их в качестве пресетов материалов. Затем они были быстро распределены по модели в соответствии с общей темой идентификатора материала, определенной ранее. Рисовать определенные части эмблем, износ краев, грязь и жир оказалось несложно, так как мы могли рисовать их вручную в наборе.

Наконец, фон состоял из одной сферы с матовым рисунком, созданным в 360° с помощью Photoshop.

Риггинг + анимация

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

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

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

PlayCanvas

Решая, какую среду WebGL мы будем использовать, мы учитывали как Three.JS, так и PlayCanvas. Мы знали, что визуальная точность этого проекта была самым важным аспектом, который нам нужно было сделать правильно, поэтому PlayCanvas оказался лучшим выбором, потому что:

• Конвейер FBX в WebGL. Это был очень простой процесс импорта 3D-моделей и анимаций, которые художники создавали в Maya.
• Онлайн-редактор PlayCanvas. Это позволило художникам напрямую настраивать и повторять освещение, камеры и эффекты постобработки.
• Готовые к использованию шейдеры. У нас был доступ и документация по PBR и шейдерам постобработки, а также способ их создания или расширения.

Анимация в PlayCanvas

Одним препятствием, с которым мы столкнулись при работе с компонентом анимации в PlayCanvas, была система смешивания; это очень ограничено, и в конечном итоге мы не были удовлетворены результатом.

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

Чтобы решить эту проблему, мы посмотрели, как другие движки (в основном Unity и Unreal Engine) обрабатывают смешивание анимаций, и решили написать собственное решение.

UI

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

После фазы исследования самое первое, что мы решили сделать, — это создать небольшой прототип, который будет включать в себя 3D-ресурсы от художника в PlayCanvas, а также слой React поверх него. Как только мы достигли этого, остальная часть цикла разработки стала простой.

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

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

это обертка

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

Изучите сайт и раскройте свой потенциал здесь: http://www.transformersmovie.com/CallingAllAutobots/