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

Наш постоянный клиент, с которыми мы работали над несколькими крипто-проектами, обратился к нам с новыми задачами: сделать 3D-модели стильных кроссовок для их NFT приложения StepApp и продумать UI/UX дизайн для мобильного приложения.

Получилось так круто, что в рамках этого проекта нам доверили еще несколько задач, о которых изначально речи не шло:

- дополнительно мы сделали анимацию для экрана загрузки приложения

- переделали анимацию 3D-персонажа, которую до нас делал другой дизайнер

На первом созвоне заказчик отметил, что ему важны не только скиллы, но и личные качества дизайнера, его вкус и индивидуальный стиль. А соответствовать он должен вот таким критериям: 

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

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

Клиент изучил портфолио ребят и пообщался с теми, чьи работы зашли ему больше всего. Ну а потом мы ударили по рукам и полетели креативить. 

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

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

Они увидели наши работы на Dribbble и поняли — вот оно. Заказчику понравилось, как мы работает с цветами, текстурами и какие визуальные приемы используем. И тут случился мэтч!

Задача была такая: сделать 3D-персонажей и продумать UI/UX дизайн для мобильного приложения. 

Вот таких персонажей мы сделали для нашего первого совместного проекта. Ребята получились на стиле:

Мы (и наши дизайнеры) растопили сердце заказчика, и через некоторое время он вернулся к нам с новой задачей. Нужно было отрисовать 3D-модели NFT кроссовок для основного продукта — приложения StepApp. 

В StepApp реализована популярная в крипто- и финтех-проектах механика: пользователь покупает NFT-актив и зарабатывает токены — внутреннюю валюту приложения — выполняя определенные действия. Например, в StepApp можно приобрести NFT-кроссовки, бегать и получать за это токены, которые потом можно обменять на криптовалюту. Такая модель называется «do-to-earn», буквально: делай и зарабатывай. 

В приложении уже были 2D-кроссовки, но заказчик хотел проапгрейдить их до 3D, чтобы выпустить с ними новую NFT коллекцию. И поставил нам задачу: сделайте кроссовки примерно такими, как нарисованные в 2D…

…но только чтобы они напоминали реальную обувь.

Референсы «настоящих» кроссовок, подобранные нашим проектным менеджером. 

То есть, нам нужно было сделать что-то мультяшное и в то же время реалистичное, но в 3D. Интересная и по-своему противоречивая задача

Наш дизайнер попробовал все это взболтать и смешать. Когда он работал над первой итерацией кроссовок, то тщательно отрисовал даже швы. Если не приглядываться, кажется, будто перед тобой фотка с витрины, а не 3D-модель — посмотрите сами:

Попытка перерисовать настоящие кроссовки в таком стиле давала странный эффект — они казались детскими, словно игрушечными. И заказчику не зашло: он сказал, что они выглядят какими-то пластилиновыми, нужно было что-то более «крутое». Так что в первый раз — мимо.

Заказчик прислал нам дополнительные референсы кроссовок, стиль которых ему нравился:

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

Вот что получилось во второй раз:

Оказалось, что именно такое направление стилистики наиболее близко к тому, что заказчик хотел видеть в приложении

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

Третья — и финальная — итерация. Зацените!)

Нам удалось найти баланс между броской мультяшной стилистикой и эстетикой модных и дорогих кроссовок.

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

И другие модели кроссовок:

Результат настолько понравился заказчику, что он принес нам еще одну задачу в рамках проекта! Дополнительно мы сделали анимацию для экрана загрузки приложения. 

Интересный момент: изначально заказчик планировал делать анимацию для лоадера приложения не с Purrweb. Но в итоге эту задачу доверили нам!

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

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

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

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

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

Исходная анимация:

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

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

◾️ У 3D-модели не было скелета. Вы спросите: а зачем он ей нужен, какой еще скелет?! Но в 3D-анимации кости и скелет ставят для того, чтобы управлять движениями модели и добиться большего реализма. Иначе у модели будут неестественно изгибаться ноги или руки — что, в общем, и случилось с персонажем. Из-за отсутствия скелета её движения нарушали анатомию человека, выглядели странными и нереалистичными.

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

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

Так дизайнер настраивал движения модели, чтобы каждая часть тела двигалась правильно:

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

Когда 3D-модель меняла позу, одежда не искажалась вслед за её движениями:

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

◾️ Одежда сидит плохо. Девушка должна была сначала стоять, а после сесть на корточки. При симуляции поэтапных движений её одежда «вела» себя странно: то скользила, то дергалась, и все это выглядело…да, неестественно. Чтобы добиться реалистичности, наш дизайнер «перекроил» всю одежду модели с нуля, настроил нужные параметры для размера и материала. 

Пришлось подгонять складки на одежде под движения модели:

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

И вот как выглядела её эволюция. В итоге получилась крутая и уверенная в себе девчонка на стиле.

И вишенка на торте — анимация 3D-модели: 

Анимация получилась на значительно более высоком уровне. Заказчику результат очень понравился!

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

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

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

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

На всякий случай уточним: нашей команде комфортно работать и по четкому техническому заданию. Мы понимаем, что у всех клиентов разные потребности и задачи, и в каких-то проектах без ТЗ результат получится сами знаете какой, а в каких-то оно только загонит наших ребят в рамки. В общем, мы стараемся придерживаться гибкого подхода. 

Ничто не способно вывести команду Purrweb из состояния дзена капибары!

Со стороны заказчика в проекте участвовали разработчики, чьей задачей было позже интегрировать в приложение модели 3D-кроссовок, и арт-директор. 

Над некоторыми задачами мы штурмили сразу двумя командами. Так, у разработчиков не было возможности загрузить текстуры в 4k — это бы утяжеляло размер приложения и кроссовки плохо бы прогружались. Поэтому использовали файлы, которые весили не так много. Из-за этого были такие опасения: а вдруг юзер захочет получше рассмотреть рисунок кроссовка и начнет зумить? 

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

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

А еще в чатике проекта была супер теплая и неформальная коммуникация. Мы с ребятами много шутили и кидались мемами. Посмотрите, какой вайб у нас там был — ну круто же, когда так! 

Приложение сейчас в релизе, и скоро разработчики StepApp интегрируют 3D-модели кроссовок и анимацию персонажа.