При разработке веб-сайта вокруг человека, а не продукта, задача выходит за рамки визуальных эффектов. Опыт должен отражать, кто они и что люди с ними ассоциируют.
Для Стефаноса Циципаса это означало сначала понять свой мир, прежде чем переводить его в интерактивный опыт. Нашей целью было максимально достоверно представить его личность сообществу и фанатам.
Предыстория проекта
Стефанос Циципас – одно из самых узнаваемых имен в теннисе. Помимо выступлений на корте, он также является известным лицом в рекламных кампаниях международных брендов. С самого начала мы хотели, чтобы этот опыт отразил обе стороны его личности: элитного спортсмена и личность за пределами игры.
Производственный трубопровод
Конвейер 3D-производства опирался на Cinema 4D, Redshift, Blender и Marvelous Designer для создания ресурсов, анимации и моделирования одежды.
Фотограмметрия
Первым шагом было сделать 360-градусное сканирование Стефаноса с помощью фотограмметрии. OFF+BRAND заключила партнерское соглашение с французской студией для проведения сканирования, поскольку для этого процесса требуется около 70 камер и узкоспециализированная установка.
Мы попросили Стефаноса встать либо в А-позу, либо в Т-позу, чтобы облегчить монтаж в Mixamo.
Мы запросили две разные конфигурации: одну для игры на площадке и другую для версии за пределами площадки. Для версии на корте нам нужно было включить в сканирование теннисную форму, волосы с повязкой на голову и браслеты. Для внекортовой версии нам потребовалась его прическа без повязки и дополнительных аксессуаров.
Студия представила две версии Стефаноса, каждая с тремя уровнями детализации (LOD), начиная от моделей высокой четкости и заканчивая оптимизированными низкополигональными версиями.
Каждая часть тела имела свою текстуру — руки, ноги, голова и туловище. Эта настройка не подходила для WebGL, так как вообще не была оптимизирована.
УФ-оптимизация
Первым шагом было объединение всех восьми текстур в один оптимизированный набор текстур. Для этого мы использовали инструменты переназначения текстур Blender. Мы продублировали UV-развертки, создав UV1 из исходной модели и UV2, который был переназначен для упаковки всех восьми текстур в один UV-макет. Затем мы перенесли данные текстуры из UV1 в UV2, поскольку исходные текстуры уже были запечены в макете UV1.
Такелаж
После того, как мы сократили модель до одной текстуры, нам нужно было ее оснастить. После нескольких тестов мы обнаружили проблему с одной из рук, поэтому отрегулировали пальцы, чтобы убедиться, что они правильно разделены, что позволило Mixamo правильно интерпретировать топологию.
Поскольку нам не нужна была анимация от Mixamo, мы скачали только новую модель Стефаноса в Т-позе.
Позирование персонажа
Затем мы импортировали оснащенную модель в Cinema 4D и скорректировали ее позу, чтобы придать Стефаносу сильную и мощную стойку. И версия на площадке, и версия за ее пределами должны были иметь одну и ту же позу, поэтому мы выбрали ту, в которой он держит ракетку, скрестив руки. Мы создали два ключевых кадра для каждой анимированной кости: один сохраняет позу А, которая нам понадобится позже, а второй, через несколько кадров, со скрещенными руками.
Когда поза нас устроила, мы экспортировали ее в файл Alembic, чтобы анимацию можно было импортировать в Marvelous Designer.
Моделирование одежды
Первоначальные сроки всего процесса 3D-производства оценивались в пять-восемь дней, но в конечном итоге на его завершение ушло 14 дней. Учитывая плотный график, мы решили использовать готовые наряды с Marvelous Designer Marketplace.
Мы открыли наряды в Marvelous Designer и импортировали файлы Alembic Стефаноса.
Хотя первые две версии Стефаноса на главной странице не были анимированы, нам все равно нужно было, чтобы они начинались в А-позе, чтобы футболка могла правильно разместиться между руками и туловищем. В противном случае правильно подогнать футболку было бы гораздо сложнее, так как руки мешали бы этому процессу.
Как только мы остались довольны позой, мы повторно экспортировали одетую модель Стефаноса в формате FBX, чтобы ее можно было импортировать в следующий инструмент. Что касается позы со скрещенными руками, мы дополнительно усовершенствовали ее в Cinema 4D, слегка увеличив туловище и руки, чтобы придать ему еще более выразительный вид.
Ниже приведено сравнение начальной позы и финальной итерации. Разница в энергетике заметна сразу. Поскольку мы хотели продемонстрировать личность Стефаноса, напоминая о присутствии греческой статуи, мы уделили пристальное внимание этим деталям, поскольку они имели существенное значение.
Для анимированной версии мы снова экспортировали модель в файл Alembic, чтобы сохранить анимацию.
Как и в оригинальной модели Стефаноса, каждый наряд имел свой собственный набор УФ-лучей. Поэтому мы объединили их в один набор текстур.
Мы использовали два разных подхода к текстурам.
Для статичных поз мы запекали тени. Мы настроили освещение в Cinema 4D с помощью Redshift, расположив основной свет так, чтобы он исходил с левой стороны Стефаноса. Мы также запечили Ambient Occlusion (AO), чтобы добавить статуе больше реализма.
Разработка текстур
Для анимированной версии мы использовали только Ambient Occlusion и Diffuse Maps. Мы экспортировали их из Substance Painter на случай, если позже нам понадобятся карты шероховатости и металличности, поскольку они не включены в проход красоты.
Для анимированной статуи Стефаноса основной проблемой был выбор правильного угла, чтобы избежать чрезмерной окклюзии окружающей среды в одежде. Чтобы решить эту проблему, мы создали две AO-текстуры из разных моментов анимации и объединили их. Затем мы усовершенствовали результат с помощью дополнительных настроек в Photoshop.
Для нарисованной версии эталонное изображение, созданное с помощью инструментов искусственного интеллекта, представляло собой нарисованный портрет Стефаноса. В WebGL это означало, что текстура должна была включать в себя живописный стиль затенения.
Мы провели несколько тестов в Substance Painter, но в конечном итоге обнаружили, что рендеринг WebGL сам по себе уже обеспечивает достаточно живописный вид.
Оптимизация реквизита
Чтобы упростить геометрию ракетки, мы использовали альфа-текстуру для создания струн. Затем мы применили PNG к простой квадратной сетке.
Скульптура волос
Что касается волос и бороды, мы хотели, чтобы они напоминали греческую статую, поэтому их нужно было лепить. Мы использовали ZBrush, чтобы моделировать каждую прядь индивидуально.
Анимация персонажей
Что касается анимации, у Стефаноса есть очень характерное служебное движение, которое нам нужно было воспроизвести как можно точнее. Мы использовали эталонные видеоролики, найденные в Интернете, и работали кадр за кадром, чтобы соответствовать движению.
Основная проблема заключалась в том, что 3D-художник не был специалистом по анимации персонажей и не был глубоко знаком с теннисом, из-за чего было трудно судить, была ли поза точной или реалистичной для профессионального игрока. К счастью, наш менеджер проекта Мэтт очень хорошо разбирается в теннисе и на протяжении всего процесса давал ценные отзывы. Его вклад оправдался, поскольку команда Стефаноса предоставила очень мало отзывов о 3D-анимации.
Еще одной проблемой был экспорт оптимизированной анимированной модели с имитацией ткани. Наш разработчик Адриан нашел решение, удалив выбранные ключевые кадры из ключей формы.
Поначалу результат выглядел совершенно испорченным, но это был просто вопрос понимания того, как работает система. Каждый ключ формы связан с определенным ключевым кадром: в кадре 1 ключ формы 1 имеет значение 1, а все остальные — 0.
Однако если для ключа формы 1 установлено значение 1 в кадре 1 и новое значение не записывается позже, оно останется равным 1 в последующих кадрах. Поэтому при удалении ключевых кадров для уменьшения размера файла нам также требовалось перенастроить значения ключей формы, удалив ненужные ключи и перезаписав оставшиеся.
От фотограмметрии до оптимизации WebGL — каждый этап работы был тщательно проработан для создания цифрового опыта, отражающего личность Стефаноса Циципаса как на площадке, так и за ее пределами.