---
slug: see-through-anime25drig-image-to-avatar-workflow
title: See-through × Anime2.5DRig：從單張圖到會動的 2.5D 角色
status: published
excerpt: See-through 負責把單張動漫角色圖拆成分層 PSD，Anime2.5DRig 負責把 PSD 自動 rig 成會眨眼、口型、晃頭和頭髮物理的 2.5D avatar；ChatGPT 可以補在命名、檢查、參數與流程編排層。
category: AI Tools
tags: [see-through, anime25drig, live2d, avatar, 2.5d, vtuber, image-to-avatar, chatgpt]
author: Seer
author_role: Author
read_time: 11 min
cover: "/static/see-through-anime25drig-image-to-avatar-workflow-cover.png"
closing_note: "讓角色動起來的第一步，不是賦予靈魂，而是先把平面圖拆成能被時間推動的層。"
published_at: "2026-07-05T06:36:05Z"
updated_at: "2026-07-05T06:36:05Z"
---

[See-through](https://github.com/shitagaki-lab/see-through) 和 [Anime2.5DRig](https://github.com/852wa/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 相關架構生成透明分層。官方模型是：

```text
layerdifforg/seethroughv0.0.2_layerdiff3d
```

第二段是 **Marigold Depth**。它負責 pseudo-depth estimation，官方模型是：

```text
24yearsold/seethroughv0.0.1_marigold
```

第三段是 **SAM Body Parsing**。它負責 body part segmentation，官方模型是：

```text
24yearsold/l2d_sam_iter2
```

主程式是：

```text
inference/scripts/inference_psd.py
```

基本用法：

```bash
python inference/scripts/inference_psd.py \
  --srcp assets/test_image.png \
  --save_to_psd
```

輸出會放在：

```text
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 等部件

它是一個純前端工具：

```text
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 轉成可動部件。

核心程式在：

```text
lib/rigger.js
index.html
```

### 1. 先規範 layer 名稱

`rigger.js` 裡有一個 `SLOTS` 表，直接定義每種 layer 的角色、深度、群組、是否要左右分離、是否參與表情 crossfade。

例如：

```js
'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()`：

1. 先找 connected components。
2. 算每個 component 的 x 重心。
3. 拿重心跟 face center x 比較。
4. 小於 face center 就歸左，大於就歸右。
5. 產生 `_l` / `_r` 兩個 part。

所以你可以只放一層 `irides`，它會自動拆成：

```text
irides_l
irides_r
```

### 4. 自動偵測 anchor

Rig 要能動，最重要的是 pivot 和控制點。

Anime2.5DRig 用 bounding box 和 centroid 算 anchor：

- `face` 的 bbox / centroid → 臉中心
- `eyewhite` → 眼睛 bbox
- `irides` → 虹彩中心
- `eye_close` → 閉眼位置
- `mouth_open` / `mouth_close` → 嘴巴中心
- `neck` → neck pivot
- canvas 底部 → body pivot

這些 anchor 後面會用來做頭部旋轉、眼睛開合、視線移動、嘴巴開合、身體晃動、脖子跟頭部連動。

它的做法很務實：不用建立完整 Live2D rig，而是把常見角色部件轉成固定控制參數。

### 5. 頭髮 strand 偵測

頭髮物理是 Anime2.5DRig 最有意思的部分。

`detectStrands()` 會沿著 x 軸掃 alpha mask：

1. 找每個 x 座標最上方的 alpha 點。
2. 找每個 x 座標最下方的 alpha 點。
3. 對 bottom contour 做平滑。
4. 用 peak detection 找髮尾凸出的地方。
5. 每層最多抓 6 個 strands。
6. 每個 strand 有 rootY 和 tipY。

簡單講，它把頭髮下緣的形狀當作訊號，髮尾凸出的地方就是一束髮。

如果 PSD 裡有：

```text
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` 屬於 `eyeOpen`
- `eye_close` 屬於 `eyeClose`
- `mouth_open` 屬於 `mouthOpen`
- `mouth_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。

兩個接起來，流程就變成：

```text
單張角色圖
  ↓
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：

```text
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：

```json
{
  "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：

```json
{
  "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

輸入：單張角色圖。  
輸出：瀏覽器裡會動的角色。

流程：

1. 後端跑 See-through。
2. 拿到 PSD。
3. 自動修 layer name。
4. 丟給 Anime2.5DRig viewer。
5. 用 ChatGPT 生成初始 preset。
6. 使用者在前端微調。

這會是一個很直觀的 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」。

原因有三個：

1. **See-through 的拆層偏語意，不一定符合 Live2D 畫師的拆件習慣。**  
   它會把部件拆出來，但不一定是最適合變形的切法。

2. **Anime2.5DRig 是規則式 rig，不是完整 Live2D rig。**  
   它能做眨眼、嘴巴、頭髮、呼吸、頭部視差，但不是 Cubism 那種完整 deformers、parameters、physics settings。

3. **藝術意圖仍然需要人修。**  
   尤其是表情、髮束、嘴型、肩膀、服裝皺褶，完全自動化很容易看起來怪。

所以最好的定位不是「取代 Live2D」，而是：

> **把單張角色圖快速變成可預覽、可直播、可錄短影片的 2.5D avatar。**

這個定位更準，也更容易落地。

## 我會怎麼做這套工具

如果要真的做，我會先做一個 browser-first 的小工具，不急著做完整 SaaS。

第一階段：

```text
PSD Analyzer + Anime2.5DRig Compatibility Checker
```

功能：

- 上傳 PSD
- 顯示 layer tree
- 標出缺少的 layer
- 顯示 Anime2.5DRig 是否能吃
- 自動產生 rename 建議
- 一鍵套用 rename
- 直接預覽 Anime2.5DRig avatar

第二階段才接 See-through：

```text
Image → See-through → PSD Analyzer → Anime2.5DRig Preview
```

第三階段再加 ChatGPT：

```text
ChatGPT Rig Assistant
```

它負責：

- 幫角色生成表情 preset
- 解釋為什麼某些 layer rig 不好
- 建議該拆哪些頭髮 layer
- 產出修圖 prompt
- 產出 OBS / VTuber / 短影片設定

## 小結

See-through 和 Anime2.5DRig 接起來，剛好補上一條很有潛力的 pipeline：

```text
拆層 → 命名 → 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。

## 參考來源

- [See-through GitHub](https://github.com/shitagaki-lab/see-through)
- [See-through arXiv](https://arxiv.org/abs/2602.03749)
- [See-through HuggingFace Demo](https://huggingface.co/spaces/24yearsold/see-through-demo)
- [See-through ModelScope Demo](https://modelscope.cn/studios/ljsabc/See-Through)
- [Anime2.5DRig GitHub](https://github.com/852wa/Anime2.5DRig)
- [Anime2.5DRig Demo](https://852wa.github.io/Anime2.5DRig/)
- [LayerDiffuse](https://github.com/lllyasviel/LayerDiffuse_DiffusersCLI)
- [Marigold](https://github.com/prs-eth/Marigold)
- [Segment Anything](https://github.com/facebookresearch/segment-anything)