С модным вайбом: сделали 3D-модели и анимацию персонажа для NFT приложения StepApp

Как началось наше сотрудничество

Небольшая предыстория о том, как мы начали работать с командой StepApp 😀 В прошлом году они запустили сайд-проект — NFT приложение, где пользователи могут наряжать 3D-персонажей в стильную одежду. Инхаус-дизайнеры были заняты на основном продукте, поэтому StepApp начали искать внешнюю команду для дизайна 3D-объектов.

В это время мы опубликовали на Dribble новые работы — анимированные 3D-объекты. Этот пост увидел CEO StepApp. И написал нам в тот же день.

Сначала нам дали маленький тестовый таск — сделать пачку из-под чипсов 🍟
Нам нравится, что клиент с самого начала дал понять, что его интересует партнерство в широком смысле. Он делился с нами, какой визуальный стиль исповедует StepApp — смотрели референсы вместе, обсуждали, какие образы и фактуры резонируют с аудиторией их приложения и какие визуальные приемы используем. И тут случился мэтч 🔥

На первом созвоне заказчик отметил, что ему важны не только скиллы, но и культурный код. Нам —тоже, поэтому мы кайфуем от стильных, смелых проектов.

Мы не просто выполняем задачи, а делимся своими идеями, как сделать лучше. Дизайнеры не просто смотрят, а предлагают: «Было бы клево добавить вот такой эффект». Это мне нравилось.

Кирилл, CEO StepApp

Для работы с таким клиентом нам и не нужно подробное ТЗ — мы сами предлагаем решения в нужном стиле.

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

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

Кирилл, CEO StepApp

Клиент изучил наш Dribble, убедился, что стиль совпадает, и выбрал дизайнера Данилу.

Что нам нужно было сделать

На проект нас взяли ради 3D-моделей кроссовок. Но в итоге мы сделали немного больше:

• 3D-модели 8 кроссовок
• 3D-анимацию персонажей-аватаров
• анимацию экрана приложения

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

Дальше расскажем, как мы работали над каждым из этих форматов.

3D-модели кроссовок

Нам нужно было сделать 3D-модели 8 кроссовок в NFT стиле — стильных, «мультяшных», как будто живых. Клиент присылал референсы по каждой модели: скриншоты и рендеры реальных кроссовок. Наша задача — адаптировать под стиль NFT приложения.

Мы делали модели в Blender. Первые шаги стандартные: изучить референс, написать план работы, поставить задачу 3D-дизайнеру.

Лично у нас в студии 3D-дизайнер — Данила — строит модели методом box modeling. Это значит, что базовые фигуры (кубы, сферы) постепенно преобразуются в нужную форму. Такой метод точный и дает хороший контроль над деталями модели.

Почему мультяшность лучше реализма

Один из главных вопросов, с которым мы определились с заказчиком, — насколько реалистичными должны быть модели. Нашим ответом был: ни насколько 😄 В NFT-приложениях стилизованные, почти мультяшные модели работают лучше, чем реалистичные.

Вот почему мультяшность выигрывает:

• Техническая оптимизация. Стилизованные модели требуют меньше полигонов и меньше текстурных деталей, что делает их более легкими и быстрыми для рендеринга в мобильных приложениях.
• Уникальность и узнаваемость. Стилизация позволяет создать неповторимый визуальный стиль, что очень важно в NFT-пространстве, где каждый проект борется за внимание пользователей.
• Если сделать фотореалистичный 3D-рендер дорогого кроссовка — люди привыкли к таким изображениям с маркетплейсов вроде Farfetch или StockX. Стилизация делает объект новым и интересным.

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

Зачем 3D-модели нужен скелет

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

Пока это звучит как «пошли и сделали». Но на деле, когда смотришь на готовую анимацию, хочется спросить: откуда столько жизни? И всё это — благодаря правильному риггингу. Разберем подробнее.

Риггинг — это процесс создания системы «костей», которая позволяет анимировать 3D-модель. По сути, скелет для персонажа. Если 3D-модель — это тело, то риггинг — это кости и мышцы, которые позволяют ему двигаться.

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

• У 3D-модели не было скелета. Это означало, что кроссовок нельзя было анимировать — ни подошва, ни шнурки, ни язычок не могли двигаться.
• Топология была неправильной. Это означало, что при любом движении модель «ломалась» — геометрия искажалась некрасивыми складками или провалами.

Чтобы всё исправить, Данила сначала полностью перестроил топологию модели, а затем создал для неё риг.

3D-анимация персонажей-аватаров

Под конец проекта нам доверили анимировать аватаров — персонажей в кроссовках StepApp. Нам прислали готовые 3D-модели персонажей, нужно было сделать 4 цикличных анимации: танец, бег, прогулка, победный жест.

У этой части проекта тоже не обошлось без технических сложностей, но мы их решили. Рассказываем.

Как мы создавали 3D-анимацию

Сначала мы разобрали каждое движение на ключевые кадры — моменты начала и конца движения. Затем добавили промежуточные кадры, постепенно уточняя детали.

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

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

Анимация экрана приложения

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

Мы использовали After Effects для создания анимации и затем экспортировали её в Lottie — формат, который позволяет воспроизводить сложные анимации в мобильных приложениях без потери качества.

Больше кроссовок и NFT-проектов! Мы сотрудничали с командой StepApp несколько месяцев и сделали несколько итераций по каждому из форматов. Это позволило достичь высокого уровня полировки, который соответствует стандартам крупного NFT-бренда.

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

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

Свяжитесь с нами, поговорим о вашем проекте, прикинем сроки и бюджет, пропишем дорожную карту.

А чтобы вдохновиться — посмотрите, как создать как создать NFT маркетплейс для произведений искусства.

Работали как одна большая команда

Со стороны заказчика в проекте участвовали двое: технический директор и CEO. У нас — дизайнер Данила и Маша в роли менеджера.

Заказчик был очень вовлечен в процесс, видел нашу работу в режиме реального времени через публичную ссылку в Figma и давал фидбек. Когда нужно было переделать какой-то элемент, Данила вносил правки сразу в сессии — несколько раз их звонки продолжались 2-3 часа.

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

Кирилл, CEO StepApp

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

Написать нам