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

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

Привет! Меня зовут Алексей Нибо, я дизайн-директор в Атвинте. В этой статье я расскажу о процессе создания интерактивных 3D-моделей для веб-сайта архитектурного бюро.

Первые шаги: почему мы выбрали 3D-анимацию для архитектуры

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

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

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

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

Создание модели здания: от 400 000 полигонов до облака точек в браузере

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

Мы остановились на башне в стиле триумф (сталинский ампир), так как у неё была простая ось симметрии, что делало её привлекательной при вращении.

Архитектурные модели предназначены для инженерных нужд, требующих высокой точности в размерах. Тем не менее, подобная 3D-модель состоит из полигонов — треугольников, координаты вершин которых записываются в файл. Чем больше полигонов, тем больше весит документ. Наша модель имела 402 383 полигона, и при включении сетки видно, насколько плотная её геометрия. Рендер в изображение в Blender требовал существенно больше времени, как и последующая оптимизация модели.

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

На процесс пересборки ушло полтора-два часа, в результате полученная модель имела всего 17 693 полигона. Большая часть из них — это гербы и звезды на фасаде, тогда как основная геометрия здания была довольно простой. Разницу можно хорошо увидеть, если сравнить сетки.

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

Готовую модель я загрузил в Spline и настроил эффект облака точек, подбирая цвет, плотность и размер.

Создание птицы: генерация на первом этапе

Когда я оценивал время на создание птицы, мне казалось, что нейросеть выполнит основные задачи — сгенерирует и анимирует модель. Я рассчитывал на 20 часов: минимум 2 часа, если нейросеть справится самостоятельно, и максимум 20 часов, если придётся работать вручную. Оказалось, что адекватно анимировать нейросеть может только людей и собак. В итоге пришлось делать все самим: в сервисе Tripo я получил модель по текстовому запросу и затем работал с ней.

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

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

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

Я расположил лапы, чтобы птица могла ими маневрировать. Модель была детализирована под будущую анимацию, так как я начал осознавать, с чем мне предстоит работать. В конце концов, мне удалось упростить модель более чем в тысячу раз — всего 1 284 полигона. Птица на экране маленькая, и чрезмерная детализация здесь не имела смысла.

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

Скелетная анимация: создание естественного движения птицы

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

Я привязал геометрию птицы к костям: показал Blender, где расположена модель и её скелет — это позволило модели двигаться вместе с костями.

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

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

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

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

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

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

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

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

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

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

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

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

Каждое видео я отрисовывал в маленьком квадрате, а фронтенд-разработчик перемещал этот квадрат по странице. Это позволило создать эффект, что птица появляется из-за края экрана, садится, сидит какое-то время и затем улетает.

Интеграция 3D-анимации в Spline: работа с инструментом

Я перенёс всю анимацию из Blender в Spline, где уже находилось здание из облака точек. Я загрузил птицу и подобрал ей полосатую стилизацию, чтобы она гармонировала с общей сценой. Сначала результаты были не очень удачными из-за неправильной настройки каждого элемента: когда крылы складывались, линии ломались, и это создавало хаос. Я решил сделать птицу полностью полосатой.

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

С вращением здания мы разобрались не сразу. В Spline камера реагировала на курсор, но угол поворота нигде не устанавливался. На предыдущем проекте мы сделали поворот на 10-15 градусов, предполагая, что это максимум. Однако здесь я начал экспериментировать с камерой, и со временем понял, что, расположив её подальше и ровно по центру, угол поворота увеличивается. Это оказалось случайным открытием. Первоначально я думал, что задняя часть здания не будет видна, поэтому удалил её. Но когда мы научились вращать на больший угол, то вернул геометрию обратно.

Чтобы анимация была более лёгкой, в Blender я установил 24 кадра в секунду, что является минимальным для плавности движения. Однако Spline не имел фиксированного FPS: на мощных компьютерах кадров было больше, а на более слабых — меньше. Птица на разных устройствах махала крыльями с различной скоростью...

скоростью.

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

Эффективные инструменты для создания 3D-анимации для веба

Инструменты, которые я использовал:

• Blender — для моделирования здания и птицы, построения скелета и выполнения всей анимации от взмахов до микродвижений.

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

• After Effects — для создания плоской анимации видеороликов на сайт.

• Spline — для создания интерактивного 3D на главном экране: облако точек, вращение здания и полёт птицы.

До этого в Blender я моделировал только hard surface объекты: здания, станки и оборудование. А вот модель птицы делал впервые. Со Spline мы уже набили шишек и понимали, как с ним работать. Новой для меня была скелетная анимация, но я понимал принцип, и задача оказалась достаточно простой, чтобы разобраться в процессе. В этом и кайф — когда есть база, браться за новое не так страшно. Нужны только время и, конечно же, голуби в слоумо.