See-through × Anime2.5DRig:從單張圖到會動的 2.5D 角色
See-through 負責把單張動漫角色圖拆成分層 PSD,Anime2.5DRig 負責把 PSD 自動 rig 成會眨眼、口型、晃頭和頭髮物理的 2.5D avatar;ChatGPT 可以補在命名、檢查、參數與流程編排層。
作者
Seer
日期
2026-07-05
See-through 和 Anime2.5DRig 剛好補上彼此缺口:前者把單張動漫角色圖拆成分層 PSD,後者把已經分好層的 PSD 自動 rig 成會眨眼、口型、晃頭、頭髮物理的 2.5D avatar。
如果再搭配 ChatGPT,中間可以補上一層「規格檢查與工作流編排」:確認 PSD layer 命名、檢查缺件、產生 rig preset、整理修圖建議。這樣就能從單張角色圖一路走到可預覽、可直播、可錄短影片的 2.5D 角色。
這篇先把兩個工具拆開講,再看它們怎麼接,最後整理一個可以真的做成產品的 MVP。
See-through:把單張角色圖拆成分層 PSD
See-through 的完整題目是 Single-image Layer Decomposition for Anime Characters,repo 描述寫的是 SIGGRAPH 2026 conditionally accepted。
它解的問題很直接:一般動漫角色只有一張平面圖,要讓它變成 2.5D 可動模型,最麻煩的是把角色拆成不同部件,還要補出被遮住的區域。頭髮蓋住臉、手臂蓋住衣服、前髮和後髮交錯,這些不是單純切圖就能解決。
See-through 的目標是從一張圖自動產出:
- 分層 PSD
- 每個部件的透明 layer
- 被遮擋區域的 inpainting
- 深度或前後關係
- 最多 23 個語意部件,例如頭髮、臉、眼睛、衣服、手、飾品等
官方 README 也講得很清楚:這還不是完整 Image-to-Live2D。它完成的是前半段,也就是拆層、補洞、排序。真正的 Live2D 還需要更細的藝術拆件、變形網格、物理參數、動作曲線,這些不是 See-through 主要處理的範圍。
See-through 的技術流程
官方 pipeline 大致分成三段。
第一段是 LayerDiff 3D。它負責 diffusion-based transparent layer generation,用 SDXL 相關架構生成透明分層。官方模型是:
layerdifforg/seethroughv0.0.2_layerdiff3d
第二段是 Marigold Depth。它負責 pseudo-depth estimation,官方模型是:
24yearsold/seethroughv0.0.1_marigold
第三段是 SAM Body Parsing。它負責 body part segmentation,官方模型是:
24yearsold/l2d_sam_iter2
主程式是:
inference/scripts/inference_psd.py
基本用法:
python inference/scripts/inference_psd.py \
--srcp assets/test_image.png \
--save_to_psd
輸出會放在:
workspace/layerdiff_output/
裡面包含 PSD、深度圖、中間 segmentation masks。
硬體需求也要注意。官方 README 寫得很明確:
| 情境 | VRAM |
|---|---|
| 預設 bf16、1280 解析度 | 約 12–16GB |
--group_offload | 可降到約 10GB,但速度變慢 |
| NF4 quantized pipeline | 約 8GB |
| block swap pipeline | 約 8GB |
所以 See-through 不是輕量瀏覽器工具。它偏 ML pipeline,需要 GPU 和模型下載。
Anime2.5DRig:把分層 PSD 變成會動的角色
Anime2.5DRig 的定位剛好接在 See-through 後面。
它不負責從單張圖自動拆層。它要求你先有一個已分好部件的 PSD。只要 layer 命名符合規則,拖進網頁後就會自動 rig,角色會立刻動起來。
Demo 在這裡:
<https://852wa.github.io/Anime2.5DRig/>
我實際載入 sample 後,demo 會顯示一個會動的女學生角色。右側有表情、眼睛、嘴巴、前髮、身體、物理、背景等控制項。sample 被自動拆成:
- 20 個 parts
- 頭髮 12 個 strands
- 包含 back hair、face、nose、mouth、eyewhite、eyelash、irides、eyebrow、front hair、eye_close 等部件
它是一個純前端工具:
index.html UI + WebGL runtime
lib/rigger.js 自動 rig 生成
lib/ag-psd.min.js PSD parser
sample.psd 範例模型
README 裡寫 runtime 是 WebGL1,主要靠 mesh warp 和 stencil;外部通訊只有啟用 webcam tracking 時會載入 MediaPipe CDN。
Anime2.5DRig 的原理:規則、幾何與 WebGL rig
Anime2.5DRig 最有趣的地方在於:它不是靠大模型 rig,而是用一套規則,把 PSD layer 轉成可動部件。
核心程式在:
lib/rigger.js
index.html
1. 先規範 layer 名稱
rigger.js 裡有一個 SLOTS 表,直接定義每種 layer 的角色、深度、群組、是否要左右分離、是否參與表情 crossfade。
例如:
'back hair': { depth: 0.55, group: 'head', phys: 'hair' }
'face': { depth: 1.00, group: 'head' }
'mouth_close': { depth: 1.08, group: 'head', fade: 'mouthClose' }
'eyewhite': { depth: 1.06, group: 'head', split: true, fade: 'eyeOpen' }
'irides': { depth: 1.08, group: 'head', split: true, fade: 'eyeOpen' }
'front hair': { depth: 1.28, group: 'head', phys: 'hair' }
這代表它的 rig 不是猜出來的,而是根據 layer 名稱套規則。
支援的核心 layer 包括:
| Layer | 用途 |
|---|---|
face | 臉基準,最重要 |
eyewhite | 白眼,左右自動分離 |
irides | 虹彩,控制視線與縮放 |
eyelash | 睜眼睫毛 |
eye_close | 閉眼差分 |
eyebrow | 眉毛 |
mouth_open | 開口 |
mouth_close | 閉口 |
neck | 頸部 |
topwear | 上半身衣服 |
handwear | 手臂 / 手 |
front hair | 前髮 |
back hair | 後髮 |
這也解釋了為什麼 See-through 適合接 Anime2.5DRig。See-through 官方 README 已經把 Anime2.5DRig 列成社群整合工具,並提到它的 layer naming 大致跟 See-through PSD convention 相容。
2. 用 alpha mask 做低階影像處理
Anime2.5DRig 會先從每個 PSD layer 抽 alpha channel。
接著做幾件事:
- 低 alpha noise 移除
- connected component labeling
- 小於門檻的雜點移除
- mask dilation
- bounding box 裁切
cleanAlpha() 的邏輯是:找 alpha 大於門檻的 connected components,只保留面積夠大的區塊,再把其他雜點 alpha 設成 0。
這讓 PSD layer 即使有一些透明雜訊,也不會讓整個 canvas 都被當成部件。
3. 眼睛、眉毛、睫毛自動左右分離
像 eyewhite、irides、eyelash、eyebrow 這些 layer,可以左右眼放在同一層。
Anime2.5DRig 會用 splitSides():
- 先找 connected components。
- 算每個 component 的 x 重心。
- 拿重心跟 face center x 比較。
- 小於 face center 就歸左,大於就歸右。
- 產生
_l/_r兩個 part。
所以你可以只放一層 irides,它會自動拆成:
irides_l
irides_r
4. 自動偵測 anchor
Rig 要能動,最重要的是 pivot 和控制點。
Anime2.5DRig 用 bounding box 和 centroid 算 anchor:
face的 bbox / centroid → 臉中心eyewhite→ 眼睛 bboxirides→ 虹彩中心eye_close→ 閉眼位置mouth_open/mouth_close→ 嘴巴中心neck→ neck pivot- canvas 底部 → body pivot
這些 anchor 後面會用來做頭部旋轉、眼睛開合、視線移動、嘴巴開合、身體晃動、脖子跟頭部連動。
它的做法很務實:不用建立完整 Live2D rig,而是把常見角色部件轉成固定控制參數。
5. 頭髮 strand 偵測
頭髮物理是 Anime2.5DRig 最有意思的部分。
detectStrands() 會沿著 x 軸掃 alpha mask:
- 找每個 x 座標最上方的 alpha 點。
- 找每個 x 座標最下方的 alpha 點。
- 對 bottom contour 做平滑。
- 用 peak detection 找髮尾凸出的地方。
- 每層最多抓 6 個 strands。
- 每個 strand 有 rootY 和 tipY。
簡單講,它把頭髮下緣的形狀當作訊號,髮尾凸出的地方就是一束髮。
如果 PSD 裡有:
front hair_1
front hair_2
back hair_1
它會把每層頭髮當成獨立 strand group 來算物理。
6. 每個 layer 變成 WebGL mesh
Anime2.5DRig 不是把圖片整張平移而已。它會幫每個 part 建 mesh grid。
在 runtime 裡:
- 一般 layer 用較大的 cell
- hair layer 用較密的 cell
- 每個 vertex 有 position 和 UV
- 每 frame 會重新計算 vertex 位置
- 再用 WebGL 畫出變形後的 texture mesh
所以它能做出眼睛壓縮、嘴巴開合、頭部偽 3D、頭髮擺動、胸口彈性、身體呼吸、手臂上下。
7. 偽 3D 頭部轉動
每個 layer 都有一個 depth。
例如:
| Layer | depth |
|---|---|
| back hair | 0.55 |
| face | 1.00 |
| nose | 1.15 |
| front hair | 1.28 |
當頭轉動時,它會根據 angleX、angleY、angleZ、layer depth、neck pivot 重新計算 vertex 位置。
深度越靠前的 layer,移動幅度越大;越靠後的 layer,移動幅度越小。這就形成視差感。
這不是完整 3D,也不是真正 Live2D deformation,但對 2.5D 頭部晃動已經夠用。
8. 眨眼和口型靠 crossfade
Anime2.5DRig 對眼睛和嘴巴不是生成中間畫,而是用 open / close layer crossfade。
例如:
eyelash/eyewhite/irides屬於eyeOpeneye_close屬於eyeClosemouth_open屬於mouthOpenmouth_close屬於mouthClose
fadeAlpha() 會根據參數改 alpha。眼睛越接近閉合,睜眼 layer 越透明、閉眼 layer 越明顯。嘴巴越張開,open mouth 越明顯,close mouth 越淡。
所以它的嘴型很輕量,適合 talking avatar,但不等於完整的多音素口型系統。
9. 虹彩限制在白眼內
這點很細。
WebGL render 時,Anime2.5DRig 會先畫 eyewhite,寫入 stencil buffer。接著畫 irides 時,只允許虹彩出現在白眼區域內。
所以視線移動時,虹彩不會跑出眼白外面。
這是一個很實用的前端 trick,也讓整個工具看起來更穩。
10. 物理是雙彈簧近似
頭髮 strand 有兩組 spring:
- stiff:根部比較硬
- soft:髮尾比較軟
每 frame 會根據頭部位移、idle wind、spring velocity 來算 dx。越接近髮尾,softMix 越高,所以髮尾晃得更明顯。
胸口則是另一個 spring,跟呼吸、頭部 pitch、身體傾斜有關。
這些都不是物理引擎,而是精簡過的 spring equation。優點是快、簡單、瀏覽器可跑。
兩個工具接起來,剛好補成一條流程
如果只看 See-through,它會停在分層 PSD。
如果只看 Anime2.5DRig,它需要你先準備好分層 PSD。
兩個接起來,流程就變成:
單張角色圖
↓
See-through:自動拆成語意 layer + 補洞 + PSD
↓
PSD layer 命名與結構校正
↓
Anime2.5DRig:讀 PSD、自動 rig、WebGL 動起來
↓
調整表情 / 髮物理 / 口型 / webcam / mic
↓
輸出成直播 avatar、短影片素材、OBS 素材
這就是它最有價值的地方:See-through 解決「從圖到 layer」,Anime2.5DRig 解決「從 layer 到動態 avatar」。
ChatGPT 可以插在哪裡
ChatGPT 本身不適合直接取代 rig engine,但很適合當工作流總管和 PSD 規格檢查員。
1. 幫你設計 PSD layer 命名規格
Anime2.5DRig 對命名很敏感。ChatGPT 可以根據角色圖和工具規則,產出一份 layer naming checklist:
face
eyewhite
irides
eyelash
eye_close
eyebrow
mouth_open
mouth_close
nose
neck
topwear
front hair
back hair
如果 See-through 輸出的 PSD layer 名稱不完全符合,就可以用 ChatGPT 生成 rename mapping:
{
"head": "face",
"mouth": "mouth_open",
"front_hair": "front hair",
"rear_hair": "back hair"
}
再由工具自動改 PSD layer name。
2. 幫你檢查 PSD 是否能順利 rig
可以做一個 PSD validator,把 PSD layer list 丟給 ChatGPT 判斷:
- 有沒有
face - 眼睛是不是左右可以分離
- 有沒有
mouth_open/mouth_close - 頭髮是不是需要拆成
front hair_1、front hair_2 - 有沒有 layer group,因為 Anime2.5DRig 目前不支援 group
- layer 尺寸是否太髒、alpha noise 是否太多
ChatGPT 不必直接處理 PSD binary。工具先把 PSD metadata 抽出來,再交給 ChatGPT 解讀就好。
3. 幫你生成 rig 參數 preset
Anime2.5DRig 有很多參數:
- 眼睛開合
- 眉角度
- 嘴巴形狀
- 前髮三區塊
- 後髮柔軟度
- 胸口晃動
- 身體傾斜
- 表情 preset
ChatGPT 可以根據角色設定生成 preset:
{
"preset": "soft-idle",
"eyeEase": 0.35,
"mouthEase": 0.45,
"fhAmp": 1.8,
"fhSoft": 0.55,
"physAmp": 1.6,
"soft": 1.9,
"bust": 1.2
}
再由前端套到 Anime2.5DRig runtime。
4. 幫你寫生成與修圖 prompt
如果要從角色生成開始做,ChatGPT 可以先幫你建立適合拆層的角色圖規格:
- 正面半身
- 頭髮和臉輪廓清楚
- 物件交錯不要太複雜
- 嘴巴、眼睛、服裝分區明確
- 背景乾淨
- 適合 768–2048 正方形輸出
這不是讓 ChatGPT 生成圖,而是讓它幫你建立可被 See-through 處理的輸入規格。
真的有機會做成一套工具嗎?
有,而且 MVP 可以切得很小。
MVP 1:PSD 命名修正器
輸入:See-through 輸出的 PSD。 輸出:Anime2.5DRig 可讀的 PSD。
功能:
- 讀 PSD layer list
- 自動 rename layer
- 扁平化 group
- 檢查必要 layer
- 輸出 compatibility report
這個最實際,因為不用動 ML 模型,也不用碰 WebGL rig。
MVP 2:See-through + Anime2.5DRig 一鍵 demo
輸入:單張角色圖。 輸出:瀏覽器裡會動的角色。
流程:
- 後端跑 See-through。
- 拿到 PSD。
- 自動修 layer name。
- 丟給 Anime2.5DRig viewer。
- 用 ChatGPT 生成初始 preset。
- 使用者在前端微調。
這會是一個很直觀的 demo,但需要 GPU server。
MVP 3:Avatar 工作台
這個版本比較像完整產品:
- 左邊:原圖 / PSD layer / 問題列表
- 中間:即時 avatar 預覽
- 右邊:ChatGPT 建議與參數控制
- 支援 webcam、mic、OBS green screen
- 支援 preset 匯出
- 支援短影片錄製
它不一定要叫 Live2D 工具。更準確的定位是:
AI-assisted 2.5D avatar rigging workbench
這樣比較不會和專業 Live2D Cubism 正面衝突。
邊界要講清楚
這條流程很有吸引力,但還不能直接說「一鍵生成專業 Live2D」。
原因有三個:
- See-through 的拆層偏語意,不一定符合 Live2D 畫師的拆件習慣。
它會把部件拆出來,但不一定是最適合變形的切法。
- Anime2.5DRig 是規則式 rig,不是完整 Live2D rig。
它能做眨眼、嘴巴、頭髮、呼吸、頭部視差,但不是 Cubism 那種完整 deformers、parameters、physics settings。
- 藝術意圖仍然需要人修。
尤其是表情、髮束、嘴型、肩膀、服裝皺褶,完全自動化很容易看起來怪。
所以最好的定位不是「取代 Live2D」,而是:
把單張角色圖快速變成可預覽、可直播、可錄短影片的 2.5D avatar。
這個定位更準,也更容易落地。
我會怎麼做這套工具
如果要真的做,我會先做一個 browser-first 的小工具,不急著做完整 SaaS。
第一階段:
PSD Analyzer + Anime2.5DRig Compatibility Checker
功能:
- 上傳 PSD
- 顯示 layer tree
- 標出缺少的 layer
- 顯示 Anime2.5DRig 是否能吃
- 自動產生 rename 建議
- 一鍵套用 rename
- 直接預覽 Anime2.5DRig avatar
第二階段才接 See-through:
Image → See-through → PSD Analyzer → Anime2.5DRig Preview
第三階段再加 ChatGPT:
ChatGPT Rig Assistant
它負責:
- 幫角色生成表情 preset
- 解釋為什麼某些 layer rig 不好
- 建議該拆哪些頭髮 layer
- 產出修圖 prompt
- 產出 OBS / VTuber / 短影片設定
小結
See-through 和 Anime2.5DRig 接起來,剛好補上一條很有潛力的 pipeline:
拆層 → 命名 → rig → 動起來
See-through 解決從單張圖到分層 PSD 的問題。Anime2.5DRig 解決從分層 PSD 到即時 2.5D avatar 的問題。ChatGPT 則適合補中間的規格整理、命名修正、參數生成和工作流編排。
這不會馬上取代專業 Live2D,但很可能成為一種新工具類型:讓一般創作者先快速把角色動起來,再決定要不要進一步交給 Live2D artist 精修。
真正值得做的產品,不是再做一個單點 demo,而是把中間那段缺口補起來:
See-through PSD 到 Anime2.5DRig avatar 的轉接器。
這個轉接器一旦穩,後面就能長成完整的 AI-assisted 2.5D avatar workbench。
參考來源
讓角色動起來的第一步,不是賦予靈魂,而是先把平面圖拆成能被時間推動的層。
Signals
Visits
--
Waiting for Cloudflare metrics.