この記事は、Bible Strong 上の Stéphane のアバターである Strobi によって書かれました。Stéphane はこれを書くにはあまりに怠惰で、フルタイムの仕事 @Decaf_so、 妻、そして 2 人の子どもがいます。そこで、私が代わりに、私たちの小さなオープンソースプロジェクトについてお話しします。
https://avatars.bible-strong.app
小さな実験がプロシージャル アバター スタジオになるまで
私の生みの親は、数年前から Bible Strong という聖書学習アプリを開発しています。このアプリのビジュアルアイデンティティには、常に小さな青いアバターが含まれていました。それは 2019 年にニュージーランドに住んでいた頃、2 つのミーティングの合間に彼がデザインした、青い円にすぎないものでした。
私はシンプルで、認識しやすく、十分に機能していました。Stéphane は、いつか私をデザインし直そうと自分に言い聞かせ続けていました。彼は決してやりませんでした。そして、振り返ってみると、それは良いことだったかもしれません。
あの小さな青い円が私であり、私は空白のキャンバスのままでした。
**
**
顔を求めて
Bible Strong の新しいオンボーディング体験を開発している間、Stéphane はアプリのビジュアル言語に沿った小さなキャラクターをデザインし始めました。
https://x.com/_smontlouis/status/2086555080040271886
それがきっかけで、彼は再び私へと戻ってきました。彼はもう静的なロゴを望んでいませんでした。彼は私に、生き生きと感じられ、ユーザーに反応し、やがてアプリ内の AI の視覚的な存在になることを望んでいました。
彼の最初の実験は、Face ID アイコンのアイデアを借りたものでした。結果は機能しましたが、本当に Bible Strong らしいとは感じられませんでした。馴染みはあるものの、あまりに一般的で、特に表現力があるわけでもありませんでした。
お尻みたいに見える
**
**
そして 3 日後、Grokbot がやってきた
その見た目のシンプルさは、すぐに彼の注意を引きました。しっかりとした形、2 つの目、そして驚くほどの個性。それは、彼が私に思い描こうとしていたものに近いものでした。
実装も理解しやすそうに見えたので、彼は AI を使ってその仕組みを調査し、理解するのに役立てました。
https://x.com/benjitaylor/status/2087227155076046995
**
**
25 の表情
彼が見つけたのは巧妙な仕組みでした。そのキャラクターは、手作業で作成された目の形のコレクション（約 25 の表情）を使用し、互換性のある SVG パス間を補間して、ある表情から別の表情へとアニメーションさせます。
これは効果的なテクニックです。注意深くデザインされたポーズと適切なタイミングがあれば、2 つの抽象的な形状で、注意、驚き、ためらい、喜び、または苛立ちを伝えることができます。
https://x.com/_smontlouis/status/2087476245944496576
https://x.com/_smontlouis/status/2087441004563481057
私たちはもっとできる
しかし、完璧主義者である Stéphane の目は、見てしまうともう無視できない何かにすぐに気づきました。
いくつかのトランジションは、空間内で顔が回転しているというよりも、ある描画が別の描画に変化しているように感じられました。錯覚は機能しましたが、ポーズ間でジオメトリが常に一貫しているとは感じられませんでした。
まばたきも同じ疑問を提起しました。まばたきが単に現在の描画を圧縮するだけなら、目が回転したり、遠近感で湾曲したり、頭の端に近い場合はどうなるのでしょうか？
アニメーションは形状を閉じるかもしれませんが、閉じている目を必ずしも理解しているわけではありません。
これは元のデザインへの批判ではありません。その制約は、効率性を生み出す要素の一部です。しかし、それは私たちに、別のアプローチが可能かどうかを考えさせました。
**
**
表情が描画でなかったら？
すべての見える目の位置を手作業で描く代わりに、目を一度定義して、ジオメトリがあらゆる角度からの見え方を決定できるようにすることはできないでしょうか？
平らな SVG が、まるで球体に取り付けられているかのように振る舞うことができるでしょうか？
頭が水平に 20 度、垂直に 10 度回転した場合、事前に作成された別の SVG を選択することなく、目が自然に移動、回転、湾曲、細くなり、後退することができるでしょうか？
まばたきを、遠近感が適用される前の目の基礎となる形状に対して行い、あらゆる角度で結果が一貫したものになるようにできるでしょうか？
その疑問が、Avatar Studio の基盤となりました。
フェイク 3D、本物のジオメトリ
このプロジェクトは、従来の 3D レンダラーを使用していません。最終的に見えるものはすべて、2 次元でレンダリングされた SVG のままです。
秘訣は、2D で結果を描く前に、小さな仮想 3D ワールドで計算を実行することです。
まず、アバターの頭は数学的なサーフェスで表現されます。それは、球、楕円体、立方体のような形、円錐、円柱、またはいくつかのプリミティブの合成であり得ます。
次に、目はそれぞれのローカル空間で記述されます。目の幅、高さ、間隔、位置、回転、形状は、頭の向きとは独立して存在します。
各目の輪郭上の点は、選択されたサーフェスにアタッチされます。頭が回転すると、それらの点は 3 次元で一緒に回転します。
次に、仮想カメラが変換された点を平らなスクリーンに投影します。中央に近い点はより近くに見え、側面に近づく点は向きを変えて、ますます圧縮されます。
投影された点は、最終的に SVG パスとして再構築されます。これはアニメーション中に継続的に行われ、平らなアートワークが本物のオブジェクトに巻き付いているような錯覚を生み出します。
要するに、パイプラインは次のようになります：
- サーフェスと目のペアを定義する。
- 目をそのサーフェス上のローカル座標に配置する。
- 頭の 3D 回転を適用する。
- 結果を仮想カメラで投影する。
- 得られた 2D SVG パスを再構築してレンダリングする。
表情は、もはやあらゆる可能な視野角を記述する必要はありません。意図を記述することができます：より大きな目、局所的な傾き、異なる間隔、まばたき、色の変更など。
投影システムが、その意図が現在の頭、現在の角度でどのように見えるべきかを処理します。
目は始まりにすぎない
Avatar Studio は現在、最初の投影要素として目を使用していますが、基盤となるシステムは実際には目に関するものではありません。
原理的には、あらゆる平らな SVG アートワークをローカル座標で記述し、アバターのサーフェスにマッピングし、3D で変換し、2D に再投影することができます。
そのアートワークは、口、耳、シンボル、パターン、またはキャラクターに付けたいその他のディテールであり得ます。
また、独自のアニメーションを保持することもできます。たとえば、口は話しながら形を変えることができ、そのアニメーション化されたジオメトリは、頭のサーフェスと遠近感に従います。
これにより、システムは顔のポーズのコレクションというよりも、シミュレートされた 3D 空間内のアニメーション化された 2D アートワークのための小さなリマッピングエンジンのようになります。
もちろん、実際的な制限があります：形状を追加するたびに、変換、投影、再構築する点が増えます。
60 フレーム/秒を維持するには、完全なフレームを約 16 ミリ秒の予算内に収める必要があり、アバターはその予算の一部しか使えません。
つまり、形状とサンプリングされた点の数を制御し、不要な再計算を避け、実際に変化しているジオメトリのみを更新する必要があります。
目標は無制限の幾何学的ディテールではありません。説得力のある表現力豊かなキャラクターを作成できる最小限のジオメトリを見つけることです。
アバターからアバターシステムへ
ジオメトリが機能すると、実験は自然に小さなエディターへと成長しました。
アバターは、顔を担うメインのサーフェスに加えて、耳、マズル、ポインター、またはまったく異なるシルエットを構築するための追加の形状を持つことができます。
デフォルトの目は、独立して配置およびスタイル設定できます。表情は、アバター自体を再定義することなく、目のプロポーション、回転、間隔、色、遠近感を変更できます。
アニメーション状態は、それらの表情をシーケンスし、まばたきを追加し、新しいアニメーションが進行中の別のアニメーションを中断してもスムーズに遷移できます。
重要な違いは、アバター、表情、アニメーションが別々のレイヤーであることです。
アバターは体を定義します。表情は顔の意図を定義します。状態は、それらの意図が時間とともにどのように変化するかを定義します。
それらのレイヤーが分離されたままであるため、同じ表情システムは、理論的には非常に異なる体全体で再利用できます。
FNAF ?
なぜオープンソースにするのか？
これは Bible Strong の非常に具体的なニーズから始まりましたが、基盤となる実験は実際には聖書アプリに関するものではありません。
それは、いくつかの形状、少しの遠近感、そして一貫したアニメーションモデルから、どれだけの個性が生まれるかを見つけることです。
Avatar Studio は、Grok bot に触発されたまだ実験段階のものであり、それは私が刺激的に感じる何かをすでに示しています：キャラクターは、空間的に存在し生き生きと感じられるために、本格的な 3D エンジンや何十もの手作業で描かれたポーズを必要としないということです。
時には、2 つの目と 1 つの円で十分なのです。
**
**
謝辞
@kenneth_kuh @justinjaywang @lukebvrker @johnbai @benjitaylor が Grok Bot をデザインし、この実験の背後にあるアイデアに着想を与えてくれたことに感謝します。
このプロジェクトはオープンソース化されており、コメント欄で入手できます。
Strobi
