Приручить погоду: как мы создали анимированные заставки для Яндекс Станции Дуо Макс

Всем привет! Я Леша Пьянков, дизайн-директор Pragmatica. В статье расскажу, как мы анимировали заставки с погодой для устройств с Алисой, от концепта до технической начинки.

Что внутри:

Команда Яндекс Станции Дуо Макс создала интерьерный девайс, в котором все сценарии Алисы должны были получить впервые свой UI. В один из сценариев с погодой ребята решили добавить новую фичу – фотореалистичные анимированные заставки, которые подстраиваются под погоду за окном в разное время суток и сезон. До этого заставки были плоскими и статичными.

Это был масштабный и довольно ответственный проект – принести погоду в каждый дом, где есть устройства Алисы с умными экранами. Мы создали залипательные CG анимации, плюсом они стали довольно адаптивными, иммерсивными, будто это не просто заставка, а целый микромир у тебя дома!

Предлагаю посмотреть, что у нас получилось.

Ландшафт, который объединяет

Перед нами стояла интересная задача – найти универсальный пейзаж, который похож на все сразу. Неважно, где вы находитесь – в Буэнос-Айресе или Москве – картинка должна быть знакомой. Так мы сразу отбросили экзотические варианты с пустыней и джунглями и искали повторяющиеся для всех континентов паттерны.

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

Решили, что придумаем свой пейзаж и взяли за основу ландшафт центральной части России: он универсален и прост, а еще понятен пользователям Алисы.

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

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

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

Согласовали цвета, примерную композицию и пошли делать 3D-сцены. Вот тут началось самое интересное.

Реалистичные облака

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

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

Чтобы облака не были мрачными в пасмурную погоду, мы играли с просветами, так сказать, добавили немного надежды и тепла, потому что, как мы знаем…

«Счастье можно найти даже в темные времена, если не забывать обращаться к свету» (с) Альбус Дамблдор

А дальше решили вдохнуть в картинку еще больше жизни.

Капелька уюта

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

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

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

Конструктор. Чтобы не рисовать каждое состояние отдельно, мы собирали экраны по слоям. Сначала небо, затем накладывается интерфейс, далее – анимация осадков (снег, дождь, снегодождь).

Добавляя новые элементы, мы учитывали расположение интерфейса: часы, температура и кнопки накладывались поверх картинки, поэтому в этой области не должно быть отвлекающих внимание деталей.

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

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

Мы сделали так, чтобы облака возвращались на прежнюю точку, а травинка вставала на место. Это была настоящая проверка на усидчивость.

«Мы не создавали каждое состояние экрана с нуля, а брали базовую сцену и, с помощью цветокоррекции и добавления осадков, адаптировали, создавая нужный эффект. Это позволило нам не менять само наполнение: травинка, дерево, куст, домик – все остается на своих местах».

Давайте вместе просто позалипаем.

Позже в матрице появились новые зимние состояния. Мы взяли за основу наш конструктор и добавили в него нужные детали – елку, украшенный домик и снегопад.

Посмотрите, какой новогодний спешл у нас получился!

В итоге с помощью конструктора мы собрали больше 40 заставок под разные состояния погоды. Это был наш первый большой проект с 3D-графикой и CGI. И знаете, ощущение, будто мы воссоздали частичку мира Алисы, прикоснулись к прекрасному (или даже создали его!), и теперь каждый пользователь может проникнуться погодой за окном через заставку.

Чаще, чем на VC, мы рассказываем о своих проектах в телеграме Senior Designer. Заглядывайте в гости.