Хотела создавать продукт, а теперь моделирую гусиные яйца: 3D-тамагочи в Yet Another English

Про свой тренажёр английского Yet Another English я уже писала. Там можно собирать слова, заниматься, повторять забытое. Но мне захотелось ещё геймифицировать это все. Чтобы начинаешь с яйца, учишь слова, получаешь плюшки и постепенно выращиваешь себе персонажа. Ну то есть тамагочи, только кормить его надо занятиями.

Начала с Claude Opus 5.0, подключённого к Blender через MCP, потом продолжила через GPT. Ушла примерно неделя по два часа в день, то есть около 14 часов. Подписка Astra стоила $100

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

Что было на старте и зачем понадобился 3D-гусь

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

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

Этап 1. Claude + Blender: гусь вроде есть, но что-то не то

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

Итого я скачала Blender, подключила Claude через MCP к Blender, скинула картинку своего гуся и.... получился такой 3D-гусь:

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

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

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

Ещё с Claude: пробы головы

К этому же этапу с Claude и Blender относятся пробы головы ниже. Это ещё до перехода к Codex:

Спереди клюв выглядит довольно компактным. Поворачиваем голову и получаем вот это:

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

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

Этап 2. Подключила GPT: сначала лицо, потом тело

Дальше продолжила через GPT, потому что вышла Астра. Дала ему картинку гуся и попросила сделать 3D-модель ЗАНОВО. Потом уточняла результат по частям: форму головы, клюв в профиль, переход клюва в лицо, симметрию. По каждому мелкому блоку. Больше 200 промтов. То есть моя работа буквально: получила результат, сделала скрин, отправила в чат, что не так.

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

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

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

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

Ещё одна занятная штука: на объединение частей тела повлияла анимация дыхания. Модель в момент операции уже была чуть сдвинута. Переделали в REST-позе, исходном положении скелета без анимации. Так что форму лучше править в фиксированной позе, а движение проверять отдельно. Для первых тестов хватает повернуть голову, поднять крыло, моргнуть. Уже видно, где что расходится и ломается. Собирать длинную анимацию, пока не работает обычный взмах, смысла мало.

Этап 3. Худи и остальные предметы

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

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

Предметы вокруг гуся устроены проще. Лампа, парта, книги собираются кодом Three.js из обычных объёмных фигур. Для каждой книжки отдельный файл из Blender не нужен.

Для понимания масштаба: книги содержат 228 треугольников, парта 1 388, ковёр 1 792. У взрослого гуся в проверенной версии их 548 332. Треугольники тут буквально маленькие грани, из которых состоит поверхность модели.

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

Этап 4. А теперь это надо загрузить

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

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

Ну и размер. Вот цифры из локального аудита:

Вообще «сколько весит» оказалось тремя разными вопросами: сколько лежит на диске, сколько скачивается и сколько занимает в памяти. Например, несжатая RGBA-текстура 512 × 512 занимает 1 МиБ, ещё без дополнительных уменьшенных копий для отрисовки.

Этап 5. Как уменьшала

Сначала геометрия. На одном из проходов взрослого гуся сократила примерно с 1,78 млн до 682 тысяч треугольников. Потом отдельно облегчала капюшон, торс худи, карман и подол. Так дошла до цифр в таблице.

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

Потом упаковка. Meshopt позволяет компактнее хранить данные модели, gzip уменьшает передачу файла. Взрослый гусь в истории проекта занимал 24,80 МиБ с gzip, после одного этапа 11,11 МиБ, после следующих правок и упаковки 5,95 МиБ.

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

Тут легко смешать разные вещи. Gzip не уберёт треугольники. Скрытый объект не обязательно исчезнет из памяти. Сначала надо понять, что тормозит: скачивание, подготовка модели или сама отрисовка.

На реальных телефонах FPS, нагрев и пик памяти в этих отчётах не замерялись. Так что обещать, что гусь теперь летает на любом смартфоне, пока рано. Следующая проверка как раз на устройствах, а не в узком окне браузера на компьютере.

Если бы начинала заново, что бы сделала сразу

• Определила, какие движения и смены вещей вообще нужны. От этого зависит устройство модели.

• Утвердила одну фигуру до сложной одежды. Поддерживать несколько тел под разными комплектами неправильно.

• Раньше открыла черновой GLB в приложении. Blender не покажет проблемы браузерного кода и загрузки.

• Сохраняла версии и одинаковые ракурсы. Без этого сложно понять, стало лучше или просто иначе.

Посмотреть на гуся можно в Yet Another English. Если тоже делали питомца для веба, расскажите, сколько весит ваш и на чём пришлось экономить. Особенно интересно, как вы доводили его до нормальной работы на смарфонах.