Интерактивный 3D на сайте: как мы собирали сцену со зданием и анимированной птицей в Blender и Spline

Когда ты дизайн-директор и берёшься за то, чего раньше не делал, тебя ждёт много интересного: нейросеть выдаёт голубя с переломанными лапами, модель здания не влезает в браузер, а Spline отказывается фиксировать частоту кадров.

Как всё началось и почему выбрали 3D-анимацию

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

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

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

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

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

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

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

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

У нашей модели было 402 383 полигона.

Если включить отображение сетки, видно, насколько плотная у неё геометрия. Рендер в картинку из Blender занимал заметно больше времени, как и последующая оптимизация модели.

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

На пересборку ушло полтора-два часа, а итоговая модель получилась уже на 17 693 полигона.

Большая часть из них — это гербы и звёзды на фасаде, но основная геометрия здания достаточно простая. Разница хорошо видна, если сравнить сетки.

Башня в оригинале была несимметричной: где-то торчала лесенка или с одной стороны объём был больше. Я сделал геометрию полностью симметричной, чтобы здание крутилось ровно. Собрал одну четверть и зеркально отразил, поэтому работы стало вчетверо меньше.

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

Птица: подключение генерации на первом этапе

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

Промпт: city bird with spread wings

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

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

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

Лапы расставил нормально, потому что птица должна ими шевелить. Я подгонял модельку под будущую анимацию, так как уже понимал, с чем мне предстоит работать.

В итоге мне удалось упростить модель больше чем в тысячу раз — 1 284 полигона.

Птица на экране маленькая и детальная проработка ей не нужна.

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

Скелетная анимация: как заставить птицу быть птицей

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

Привязал к костям геометрию птицы: я показал Blender, что вот модель, тут её скелет — двигай модель вместе с костями.

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

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

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

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

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

Микроанимации: чем занимается птица на экране

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

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

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

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

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

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

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

Интеграция в Spline: инструмент со своими приколами

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

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

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

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

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

Как собрать 3D-анимацию для веба, если раньше этого не делал

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

1. Blender — моделирование здания и птицы, построение скелета и вся анимация от взмахов до микродвижений.
2. Tripo — генерация исходной модели птицы из текстового запроса, которую потом перерисовывал вручную.
3. After Effects — плоская анимация для видеороликов на сайт.
4. Spline — создание интерактивного 3D на главном экране — облако точек, вращение здания и полёт птицы.

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