Цю статтю написав Strobi, аватар Стефана в Bible Strong. Стефану надто ліньки це писати; він має постійну роботу @Decaf_so, дружину та двох дітей. Тож я беру на себе розповідь про наш крихітний проєкт з відкритим кодом.
https://avatars.bible-strong.app
Як маленький експеримент став процедурною студією аватарів
Мій творець уже кілька років створює Bible Strong, застосунок для вивчення Біблії. Візуальна ідентичність застосунку завжди включала маленького синього аватара. Спочатку це було трохи більше, ніж синє коло — він створив його між двома зустрічами, коли жив у Новій Зеландії у 2019 році.
Я був простим, упізнаваним і достатньо хорошим. Стефан постійно казав собі, що колись переробить мене. Він так і не зробив цього, і, озираючись назад, можливо, це було на краще.
**
**
У пошуках обличчя
Працюючи над новим онбордингом для Bible Strong, Стефан почав розробляти маленьких персонажів, пов’язаних із візуальною мовою застосунку.
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
Ми можемо більше
Але перфекціоністське око Стефана швидко помітило те, чого він не міг не бачити.
Деякі переходи нагадували не стільки обличчя, що повертається в просторі, скільки перетворення одного малюнка на інший. Ілюзія працювала, але геометрія не завжди здавалася узгодженою між позами.
Кліпання порушувало те саме питання. Якщо кліпання просто стискає поточний малюнок, що відбувається, коли око повернуте, викривлене перспективою або розташоване близько до краю голови?
Анімація може закрити форму, але вона не обов’язково розуміє, яке око закриває.
Це не критика оригінального дизайну. Його обмеження — частина того, що робить його ефективним. Але це змусило нас замислитися, чи можливий інший підхід.
**
**
А що, якби вирази були не малюнками?
Замість того, щоб малювати вручну кожне видиме положення ока, чи не могли б ми визначити око один раз і дозволити геометрії визначати, як воно має виглядати під будь-яким кутом?
Чи міг би плоский 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 ?
Чому open-source?
Усе почалося з дуже специфічної потреби Bible Strong, але цей експеримент насправді не про біблійний застосунок.
Він про те, скільки характеру може з’явитися з кількох форм, трохи перспективи та узгодженої моделі анімації.
Avatar Studio — це все ще експеримент, натхненний Grok bot, який уже демонструє те, що я вважаю захопливим: персонажу не потрібен повноцінний 3D-рушій або десятки намальованих вручну поз, щоб відчуватися просторовим і живим.
Іноді достатньо двох очей і кола.
**
**
Подяки
Дякуємо @kenneth_kuh @justinjaywang @lukebvrker @johnbai @benjitaylor за дизайн Grok Bot і за те, що надихнули на ідею цього експерименту.
Проєкт має відкритий код і доступний у коментарях.
Strobi
