Эта статья написана Strobi — аватаром Stéphane в Bible Strong. Stéphane слишком ленив, чтобы писать это; у него работа на полную занятость @Decaf_so, жена и двое детей. Так что рассказ о нашем крошечном open-source проекте беру на себя я.
https://avatars.bible-strong.app
Как крошечный эксперимент стал процедурной студией аватаров
Мой создатель уже несколько лет развивает Bible Strong — приложение для изучения Библии. В визуальном стиле приложения всегда был крошечный синий аватар. Всё начиналось с простого синего круга — он набросал его между двумя встречами, когда жил в Новой Зеландии в 2019 году.
Я был простым, узнаваемым и достаточно хорошим. Stéphane постоянно говорил себе, что однажды меня переделает. Так и не переделал, и, оглядываясь назад, возможно, это было к лучшему.
Тем маленьким синим кругом был я, и я оставался чистым холстом.
**
**
В поисках лица
Работая над новым онбордингом для Bible Strong, Stéphane начал создавать небольших персонажей, связанных с визуальным языком приложения.
https://x.com/_smontlouis/status/2086555080040271886
Это вернуло его ко мне. Он больше не хотел статичный логотип. Он хотел, чтобы я чувствовался живым, реагировал на пользователя и в итоге стал визуальным воплощением ИИ внутри приложения.
Его первые эксперименты заимствовали идеи у иконки Face ID. Результат работал, но по-настоящему не ощущался как Bible Strong. Он был узнаваемым, но слишком обобщённым и не особо выразительным.
Похоже на попу
**
**
Затем через 3 дня появился Grokbot
Его кажущаяся простота сразу привлекла его внимание: цельная фигура, два глаза и удивительно много характера. Это было близко к тому, что он пытался представить для меня.
Реализация тоже выглядела доступной для понимания, поэтому он использовал ИИ, чтобы изучить и понять, как это работает.
https://x.com/benjitaylor/status/2087227155076046995
**
**
Двадцать пять выражений
То, что он нашёл, было умным решением. Персонаж использует набор созданных вручную форм глаз — примерно 25 выражений — и интерполирует между совместимыми SVG-путями, чтобы анимировать переход от одного выражения к другому.
Это эффективная техника. При тщательно продуманных позах и хорошем тайминге пара абстрактных форм может передавать внимание, удивление, сомнение, радость или раздражение.
https://x.com/_smontlouis/status/2087476245944496576
https://x.com/_smontlouis/status/2087441004563481057
Мы можем больше
Но перфекционистский взгляд Stéphane быстро заметил то, что уже не мог заставить себя не замечать.
Некоторые переходы ощущались не столько как поворот лица в пространстве, сколько как превращение одного рисунка в другой. Иллюзия работала, но геометрия между позами не всегда казалась согласованной.
Моргание поднимало тот же вопрос. Если моргание просто сжимает текущий рисунок, что происходит, когда глаз повёрнут, искажён перспективой или находится у края головы?
Анимация может закрыть фигуру, но она не обязательно понимает глаз, который закрывает.
Это не критика исходного дизайна. Его ограничения — часть того, что делает его эффективным. Но это заставило нас задуматься, возможен ли другой подход.
**
**
А что, если выражения — это не рисунки?
Вместо того чтобы вручную рисовать каждое видимое положение глаза, нельзя ли определить глаз один раз и позволить геометрии решать, как он должен выглядеть под любым углом?
Может ли плоский SVG вести себя так, будто он прикреплён к сфере?
Если голова поворачивается на 20 градусов по горизонтали и на 10 градусов по вертикали, могут ли глаза двигаться, поворачиваться, изгибаться, сужаться и отдаляться естественно — без выбора другого заранее подготовленного SVG?
Может ли моргание воздействовать на базовую форму глаза до применения перспективы, чтобы результат оставался целостным под любым углом?
Этот вопрос стал основой Avatar Studio.
Псевдо-3D, реальная геометрия
Проект не использует традиционный 3D-рендерер. Всё, что вы в итоге видите, — это по-прежнему SVG, отрендеренный в двух измерениях.
Фокус в том, чтобы выполнять вычисления в небольшом виртуальном 3D-мире, а затем рисовать результат в 2D.
Сначала голова аватара представляется математической поверхностью. Это может быть сфера, эллипсоид, кубоподобная форма, конус, цилиндр или композиция из нескольких примитивов.
Затем глаза описываются в собственном локальном пространстве. Их ширина, высота, расстояние между ними, положение, поворот и форма существуют независимо от направления головы.
Точки каждого глаза привязываются к выбранной поверхности. Когда голова поворачивается, эти точки поворачиваются вместе с ней в трёх измерениях.
Затем виртуальная камера проецирует преобразованные точки обратно на плоский экран. Точки у центра кажутся ближе, а точки, приближающиеся к краям, отворачиваются и всё сильнее сжимаются.
Спроецированные точки в итоге пересобираются в SVG-пути. Это происходит непрерывно во время анимации, что создаёт иллюзию, будто плоская графика обёрнута вокруг реального объекта.
Короче говоря, пайплайн выглядит так:
- Определить поверхность и пару глаз.
- Разместить глаза в локальных координатах на этой поверхности.
- Применить 3D-поворот головы.
- Спроецировать результат через виртуальную камеру.
- Пересобрать и отрендерить итоговые 2D SVG-пути.
Выражениям больше не нужно описывать каждый возможный угол обзора. Они могут описывать намерение: более широкие глаза, локальный наклон, другое расстояние между глазами, моргание или изменение цвета.
Система проецирования сама определяет, как это намерение должно выглядеть на текущей голове под текущим углом.
Глаза — это только начало
Сейчас Avatar Studio использует глаза в качестве первых проецируемых элементов, но сама система на самом деле не про глаза.
В принципе, любая плоская SVG-графика может быть описана в локальных координатах, наложена на поверхность аватара, преобразована в 3D и спроецирована обратно в 2D.
Этой графикой может быть рот, уши, символ, узор или любая другая деталь, которую нужно прикрепить к персонажу.
Она также может сохранять собственную анимацию. Например, рот может менять форму во время речи, и его анимированная геометрия всё равно будет следовать за поверхностью и перспективой головы.
Это делает систему не столько набором мимических поз, сколько небольшим движком перепроецирования для анимированной 2D-графики в симулированном 3D-пространстве.
Конечно, есть практический предел: каждая дополнительная форма добавляет больше точек, которые нужно преобразовывать, проецировать и пересобирать.
Чтобы сохранить 60 кадров в секунду, полный кадр должен укладываться в бюджет примерно 16 миллисекунд — и аватар получает только часть этого бюджета.
Это означает контроль количества форм и дискретизированных точек, отказ от лишних пересчётов и обновление только той геометрии, которая действительно меняется.
Цель — не безграничная геометрическая детализация. Цель — найти минимальный объём геометрии, способный создать убедительного и выразительного персонажа.
От аватара к системе аватаров
Когда геометрия заработала, эксперимент естественным образом превратился в небольшой редактор.
У аватара может быть основная поверхность, несущая его лицо, плюс дополнительные формы для ушей, морды, указателя или полностью другого силуэта.
Его глаза по умолчанию можно позиционировать и стилизовать независимо. Выражения могут менять их пропорции, поворот, расстояние, цвета и перспективу, не переопределяя сам аватар.
Анимированные состояния могут затем компоновать эти выражения в последовательности, добавлять моргания и плавно переключаться, даже когда новая анимация прерывает уже идущую.
Важное различие в том, что аватар, выражение и анимация — это отдельные слои.
Аватар определяет тело. Выражение определяет мимическое намерение. Состояние определяет, как эти намерения развиваются во времени.
Поскольку эти слои остаются раздельными, одну и ту же систему выражений теоретически можно переиспользовать для совершенно разных тел.
FNAF ?
Зачем открывать исходный код?
Всё началось с вполне конкретной потребности Bible Strong, но сам по себе эксперимент не про библейское приложение.
Он про то, сколько индивидуальности может родиться из нескольких фигур, небольшой перспективы и стройной модели анимации.
Avatar Studio по-прежнему остаётся экспериментом, вдохновлённым Grok bot, который уже демонстрирует то, что я нахожу захватывающим: персонажу не нужен полный 3D-движок — или десятки нарисованных вручную поз, — чтобы ощущаться объёмным и живым.
Иногда достаточно двух глаз и круга.
**
**
Благодарности
Спасибо @kenneth_kuh, @justinjaywang, @lukebvrker, @johnbai и @benjitaylor за создание Grok Bot и за идею, вдохновившую этот эксперимент.
Проект имеет открытый исходный код и доступен в комментариях.
Strobi
