這篇把「電腦怎麼把 3D 物件變成螢幕上的彩色點」講到你能聽懂。
口訣只有一句：資料進來 → 一站一站處理 → 變成畫面。每一站做什麼？一步一步看。

0. 先用一張總圖（不用背，先看過）

你的程式(CPU) → 準備資料
      │
      ▼
[輸入組裝] → [頂點處理] → [裁切/投影/對齊到螢幕]
      │                 │
      └──────→ [光柵化：把三角形變成很多像素]
                              │
                              ▼
                      [像素著色] → [深度/混色] → 影像輸出

• 括號裡是每一站的名稱；你需要的就是知道流程順序與每站的任務。
  

1. CPU 做什麼？（把材料備好、排好）

在進入 GPU 前，你的程式會先準備好幾份「材料」：

• 頂點資料（Vertex）：每個角點的座標、法線（表面方向）、UV（貼圖的座標）。
• 索引（Index）：告訴系統「第 1、2、3 個頂點湊成一個三角形」。
• 貼圖（Texture）：像皮膚/衣服的花紋圖片。
• 小常數（Uniform/Push）：例如相機位置、燈光位置、變換用的矩陣（M、V、P）。

CPU 做好這些後，把命令交給 GPU：「請把這些資料照著這條管線處理」。

2. 站一：輸入組裝（Input Assembler, IA）

**它在做的事：**把你給的頂點和索引「串起來」，知道要畫哪些三角形。
你要知道的點：這一站不計算，只負責「組裝好隊伍」。

示意：

頂點: v0 v1 v2 v3 v4 ...
索引: [0,1,2] → 第一個三角形
      [2,3,4] → 第二個三角形

3. 站二：頂點處理（Vertex Shader, VS）

**它在做的事：**把每個頂點，從「模型自己的座標」一步步換到「相機看到的座標」，最後得到「投影前的座標」。

你只要記住三個盒子（矩陣）：

• M（Model）：把模型放到世界裡（移動、旋轉、縮放）
• V（View）：把世界放到相機前面
• P（Projection）：把 3D 景物投影成 2D

口訣：世界最小的先動 → 模型（M） → 相機（V） → 投影（P）。

示意（不用怕數學）：

clipPos = P * V * M * vec4(模型座標, 1)

同時，VS 會把每個頂點附帶的資料（例如 UV、法線）傳下去給之後的站使用。

4. 站三：裁切、投影與對齊螢幕

這裡其實是三件緊連在一起的小事：

1. 裁切（Clipping）：把視線範圍外的三角形丟掉，省時間。
2. 投影除以 w（Perspective Divide）：把 3D 位置轉成「可投影的 2D 座標」。
3. 視口轉換（Viewport Transform）：把剛剛的 2D 座標對齊到你的螢幕像素。

示意：

3D 物件 → [投影] → 平面上的座標 → 對齊到 1920×1080 的像素格

小提醒：不同系統「深度值」範圍可能不同（有的是 -1~1，有的是 0~1），這是新手常見的小坑。

5. 站四：光柵化（Rasterization）— 把三角形切成像素

它在做的事：「這個三角形覆蓋到哪些像素？」全部找出來，每個像素都變成一個待處理的「片段」。

還會做一件很重要的事：插值。

• 想像三角形三個角有三個顏色/UV/法線，三角形裡面的每個點都會拿到「三個角混合後」的數值，這樣像素才知道要採樣貼圖的哪裡、用哪個表面方向去打光。

小圖：

v0----v1
 \    |      ← 內部每個小點(像素)都會得到「介於 v0,v1,v2 之間」的數值
  \   |
   \  |
    v2

6. 站五：像素著色（Fragment / Pixel Shader, FS/PS）

**它在做的事：**決定每個像素最後是什麼顏色。
它會用到：

• 插值後的 UV 去查貼圖（像從衣服圖案上剪下一點點）
• 插值後的法線、光源位置，做打光計算（讓亮部、暗部合理）
• 可能加特效：發光、金屬感、粗糙度（這叫 PBR 的一些參數）

一句話：這一站是在畫「顏色」。

7. 站六：深度測試與混色（Depth/Stencil & Blending）

• 深度測試：如果一個像素「在後面」，而前面已經有東西畫過，就把它丟掉，這樣才不會穿幫。
• 混色（Blending）：把新的顏色和原本畫面上的顏色混合，做出半透明、光暈等效果。

小示意：

[像素顏色] → (比深度：前面/後面？) → (需要就跟原色混合) → 寫入畫面

小常識：如果你大量用半透明，或常常用到「discard」（直接丟棄像素），效能可能會掉，因為系統更難「先過濾再計算」。

8. 最後：畫面輸出

通過以上站點後，GPU 把結果寫到一張「畫面」裡（你可以把它想成一張大貼圖）。
每 1/60 秒（或 1/30、1/144… 依你的設定），就換一張新的，這就是你看到的動畫。

9. 超級簡化心智圖（收藏用）

CPU：準備資料 → 交給 GPU

GPU：
IA(串三角形)
→ VS(把點放到對的位置, 同時把UV/法線帶下去)
→ 裁切/投影/對齊螢幕
→ 光柵化(把三角形切成很多像素 + 幫像素算出UV/法線)
→ 像素著色(決定每個像素的顏色)
→ 深度/混色(判斷前後、需要就跟原本顏色混合)
→ 完成一張畫面

10. 新手最常遇到的 5 個小坑

1. 畫面上下顛倒：螢幕座標方向和你想的不一樣，翻一下 Y 就好。
2. 顏色怪怪的：UV 接錯或沒開啟貼圖的 MIP（遠處會糊或閃）。
3. 物件穿插：深度測試沒開、或投影矩陣設錯（近遠平面不合）。
4. 太慢：解析度太高、像素著色做太多事；先降低解析度驗證。
5. 透明物件亂順序：半透明要排序或改技巧（例如加權混合）。

11. 立刻能做的小實驗（5 分鐘得到感覺）

• 把解析度從 4K 調到 1080p：如果速度變快一大截，代表你的瓶頸在「像素著色」這一站（因為像素數變少）。
• 關掉背面剔除（Back-face Culling）：如果突然變慢，表示你之前省了很多不必要的像素計算。
• 把一個模型的貼圖關掉：顏色會很單純，但跑更快，代表「貼圖取樣」也是成本之一。

12. 一句話總結

渲染管線就是把 3D 物件一步步變成 2D 畫面：
組裝 → 定位 → 投到螢幕 → 切成像素 → 算顏色 → 判斷前後與混色 → 顯示。
把每一站的工作分清楚，你就能找出畫面錯在哪、慢在哪，也更敢動手做。