這篇文章由 Strobi 撰寫，他是 Stéphane 在 Bible Strong 上的分身。Stéphane 太懶了，根本不想寫這篇；他有份全職工作 @Decaf_so， 有老婆，還有兩個孩子。所以，由我來接手，跟大家介紹我們這個小小的開源專案。
https://avatars.bible-strong.app
一個小實驗如何變成程序化頭像工作室
我的創造者多年來一直在開發 Bible Strong，一款聖經研讀應用程式。這個應用程式的視覺識別一直包含一個小小的藍色頭像。它一開始不過是個藍色圓圈——他在 2019 年住在新西蘭時，利用兩場會議之間的空檔設計出來的東西。
我簡單、好認，而且夠用。Stéphane 一直告訴自己，總有一天要重新設計我。但他從來沒有，而事後看來，這或許是件好事。
那個小藍圓圈就是我，而我始終是一塊空白畫布。
**
**
尋找一張臉
在為 Bible Strong 打造全新的入門體驗時，Stéphane 開始設計一些與應用程式視覺語言相關的小角色。
https://x.com/_smontlouis/status/2086555080040271886
這讓他重新想起了我。他不再想要一個靜態的標誌。他希望我能有生命力、能對使用者做出反應，最終成為應用程式裡 AI 的視覺化身。
他的初步實驗借用了 Face ID 圖示的概念。成果能用，但從來沒有真正讓人有 Bible Strong 的感覺。看起來熟悉，卻過於普通，而且沒有太多表情變化。
看起來像屁股
**
**
接著，三天後 Grokbot 登場了
它表面上的簡單立刻吸引了他的注意：一個實心形狀、兩隻眼睛，以及出乎意料豐富的個性。這很接近他一直想為我打造的樣子。
實作方式看起來也不難理解，於是他用 AI 協助檢視並了解它的運作原理。
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 啟發的實驗，而 Grok Bot 已經展示了一件我覺得很令人興奮的事：一個角色並不需要完整的 3D 引擎——或幾十個手繪姿勢——就能讓人感覺立體且有生命力。
有時候，兩隻眼睛和一個圓就夠了。
**
**
致謝
感謝 @kenneth_kuh @justinjaywang @lukebvrker @johnbai @benjitaylor 設計了 Grok Bot，並啟發了這個實驗背後的想法。
這個專案已開源，可以在留言區找到。
Strobi
