Stefan VaskevichИнструменты из этой статьи
Вы, наверное, уже видели, как ИИ превращает одно изображение в 3D-персонажа. Это впечатляет — но, честно говоря, какой толк от одного статичного объекта? В играх всё устроено иначе. В игре у вас не просто персонаж, а персонаж плюс гардероб — шляпы, очки, наряды, обувь, которые можно менять как вздумается.
И вот в чём идея: я покажу вам, что точно так же легко создать целого кастомизируемого персонажа с собственным гардеробом ассетов, а затем упаковать его в веб-приложение, где любой сможет его нарядить. Это полный рабочий процесс от начала и до конца — разработка концепта, генерация 3D-модели, текстурирование с помощью ИИ, сборка, риггинг, быстрый заход в Unreal Engine и, наконец, интерактивное веб-приложение, созданное с помощью ИИ-агента для написания кода. Я сделал всё это примерно за день, и результат получился действительно классным.
1. Спланируйте гардероб, прежде чем что-либо генерировать
Всегда есть соблазн сразу броситься генерировать модели. Не стоит. Кастомизируемый персонаж хорош ровно настолько, насколько хорош список его ассетов, поэтому я открываю доску и первым делом фиксирую список. Моей темой стал ироничный обзор последних пяти очень насыщенных лет интернет-культуры, так что ассеты подобрались сами собой: та самая красная кепка, Apple Vision Pro, спиннер, вейп, неизбежный стаканчик Starbucks, маска N95, шапка Supreme, пара мемных худи и так далее.
Я распределяю всё по категориям, которые будут в итоговом приложении: Hat, Eyewear, Face wear, Costume, Skin, Boots, Animation — и помечаю каждую подтверждённую идею красным. Эта доска и есть спецификация: по ней точно видно, сколько мешей мне нужно сгенерировать и как их потом сгруппировать.
2. Сгенерируйте базового персонажа с помощью Tripo Smart Mesh
Когда список зафиксирован, я загружаю концепт в Tripo и запускаю генерацию через Smart Mesh. Для аккуратного стилизованного вида это лучший вариант, а недооценённая фишка в том, что количество полигонов можно выбирать для каждого ассета отдельно, повышая детализацию только там, где это действительно важно. Для головы я выбрал значение 7, что само по себе дало практически идеальный результат.
3. Трюк с заменой головы в Blender
Обе части отправляются в Blender. Я отрезаю голову от тела и на её место присоединяю более качественную голову, сгенерированную отдельно. Аккуратно объединить два меша куда проще, чем кажется:
Соедините два кольца рёбер
Выделите нижний луп головы и верхний луп шеи, нажмите правую кнопку мыши и выберите Loop Tools → Bridge. Это сшивает оба отверстия в один клик. Добавьте пару дополнительных сегментов на шее для более плавного перехода.
Исправьте шейдинг, затем сгладьте вручную
Вернувшись в Object Mode, пересчитайте шейдинг, затем перейдите в Sculpt Mode и пройдитесь кистью Smooth по шву, а с помощью Elastic Deform подправьте общую форму. При минимуме усилий вы получаете полный контроль над результатом — именно на это и стоит тратить время, когда ИИ уже взял на себя самую сложную часть создания меша.
4. Текстурируйте в Tripo, исправляйте в Modddif
Поскольку меш чистый, я делаю быструю UV-развёртку в Blender — всего несколько швов, чтобы текстура легла как надо (бесплатный аддон UV Packer делает этот процесс ещё удобнее). Затем возвращаюсь в Tripo: оставляю исходную UV-развёртку, загружаю то самое изображение, с которого начинал, и нажимаю Generate Texture. Результат сразу получается отличным; я включаю PBR в настройках материала и двигаюсь дальше.
Некоторые ассеты возвращаются с искажённым текстом: бокс-логотип Supreme получился не совсем правильным, а текстура на обратной стороне стаканчика Starbucks полностью превратилась в кашу. Но это не проблема. Я открываю Modddif (бесплатный инструмент), закрашиваю испорченную область, генерирую заплатку и проецирую её обратно уже с правильным текстом. Таким же способом можно в два счёта исправить любую текстуру.
5. Сборка гардероба в Blender
Теперь самое интересное. Я возвращаю все ассеты в Blender и подгоняю каждый под тело в Sculpt Mode, используя всё тот же небольшой набор инструментов — перемещение, масштабирование, вращение, а также кисти Elastic Deform и Smooth, чтобы одежда красиво сидела и правильно наслаивалась. С предметами, которые персонаж держит в руках, например стаканчиком кофе или вейпом, всё немного иначе, но в остальном рабочий процесс одинаков для головных уборов, очков, верха и обуви. В общей сложности сборка и подгонка всего гардероба заняла у меня около 30 минут.
6. Делаем риггинг один раз в AccuRig
Я экспортирую всё в FBX и загружаю в AccuRig. Два совета по экспорту, которые избавят вас от лишней головной боли: вам не нужно экспортировать дубликаты предметов для рук (позже можно просто сменить материалы и сделать риггинг одного предмета), и вам не нужно объединять объекты — экспортируйте их по отдельности и оставьте раздельными, чтобы потом можно было аккуратно переназначить материалы.
Расстановка маркеров и калибровка
AccuRig пошагово проведёт вас через расстановку нескольких маркеров суставов. У Pepe четыре пальца, поэтому выбирайте риг кисти на четыре пальца — не пропускайте этот шаг. Нажмите кнопку калибровки, и результат получится хорошим. Обычно проблемными местами становятся подмышки и нестандартные пропорции; для стилизованных персонажей этот вопрос решает опция pose offset.
Скачиваем пару бесплатных анимаций
AccuRig бесплатен, и в нём есть бесплатные анимации. Я экспортирую две: обычный idle и idle с предметом в руке — потому что у персонажа есть состояние, в котором он держит кофе или вейп.
- Жёсткие аксессуары (Vision Pro, головные уборы, очки) должны следовать только за костью головы. Вместо раскраски весов заблокируйте кость головы в Vertex Groups, а затем удалите все незаблокированные группы — так за одно действие останется только вес головы, равный 100%.
- Отделите ноги от тела и сделайте их отдельным объектом, чтобы можно было скрывать всё, что закрывает одежда. В играх тело под штанами не рендерят — показывайте ноги или штаны, но ни в коем случае не то и другое вместе, и вы избежите клиппинга.
7. Необязательный шаг: переносим в Unreal Engine
Этого же персонажа можно сразу перенести в игровой движок. Единственное отличие — при экспорте из AccuRig нужно выбрать скелет Unreal Engine 5. Загрузите персонажа со всеми ассетами в UE5, выполните ретаргетинг анимаций на стандартный шаблон блюпринта Third Person и соберите простой блюпринт для переключения объектов. А всё, что вы делаете дальше, — это уже ваша игровая логика.
8. Создаём веб-приложение с помощью Claude Code + Google Stitch
Вот этап, от которого я получил больше всего удовольствия. Я экспортирую подготовленные ассеты с ригом в формате GLB, даю каждому объекту понятное имя в Blender, а затем доверяю сборку конфигуратора ИИ-агенту для написания кода. Главное, что я сообщаю агенту: все ассеты уже привязаны к одной арматуре и правильно названы, так что ему остаётся лишь показывать и скрывать их.
В новой папке проекта я использую Claude Code с двумя наборами навыков — Designer Skills от сообщества и Google Stitch Skills, а также со Stitch MCP:
# In an empty project folder, add the skills to Claude Code:
npx -y skills@latest add julianoczkowski/designer-skills -y -a claude-code
npx -y skills@latest add google-labs-code/stitch-skills -y -a claude-code
# Then connect the Stitch MCP (stitch.withgoogle.com -> Settings -> Setup MCP),
# and restart Claude so the new skills + MCP load.Дальше пайплайн от дизайна до приложения строится как последовательность навыков:
/grill-me → a brief
Начните с /grill-me, сразу укажите, что хотите сосредоточиться на дизайне (чтобы агент не увяз в выборе стека технологий), и дайте ему устроить вам подробный опрос. На выходе получится дизайн-бриф. Команда /design-brief превратит его в полноценную дизайн-документацию. В моём случае мне нужен был простой интерфейс для выбора ассетов — и где-то на этом этапе до меня дошло, что мы оцениваем стиль, то есть дрип. Это и стало названием: Some Serious Drip, со встроенной шкалой дрипа.
/stitch design system → /stitch-loop
Используйте /enhance-prompt, чтобы доработать промпт для Stitch, заложите основу с помощью /stitch manage-design-system, а затем запустите /stitch-loop — главный навык — для проектирования всех экранов (десктоп + мобайл). Здесь вы даже можете поэкспериментировать с несколькими разными дизайн-системами.
/design-tokens → plan → build
Сгенерируйте реальные переменные из дизайна с помощью /design-tokens, а затем соберите интерфейс через /frontend-design. Мой главный общий совет по работе с Claude Code: сначала планируйте. Запустите /brief-to-tasks, чтобы разбить сборку на чёткий список задач перед реализацией — это сделает результат куда более стабильным. Затем наблюдайте за его работой и проверяйте результат.
/design-review → fixes
Наконец, команда /design-review поручает агенту критически оценить собственную сборку на соответствие брифу, дизайн-документу и концепт-экранам Stitch, а затем исправить найденные недочёты. Несколько ручных проверок на экранах разных размеров — и готово.
9. Результат: Some Serious Drip
Спустя некоторое время приложение было готово. Вы выбираете пресет — touch grass, btc gold, chrome, wet slime — настраиваете стиль персонажа, а дрип-метр на лету пересчитывает его Drip, Chaos, Cringe и Aura. Можно менять скины, заменяющие все тело, снимать вещи («зачем нам вообще штаны?») и экспортировать карточку, которой можно поделиться — у меня получилась «The Quiet Flex». А потом отправить ее другу. Ну круто же?
Демо из этого руководства уже доступно на TOP 3D AI. Оденьте лягушонка, подберите случайный прикид и экспортируйте свою карточку.
Запустить Some Serious DripЧто вы получаете на самом деле
Вот и весь пайплайн: от концепта до кастомизируемого персонажа с риггингом и работающего веб-приложения всего за один день. ИИ берет на себя основную работу, а вы применяете свой вкус там, где это действительно важно. Новые инструменты для сборки подобных персонажей появляются постоянно — как только они выходят, то сразу попадают в Arena, чтобы вы могли сравнить их, прежде чем сделать выбор.
