Notes 01 : computer graphics rendering pipeline

1. 電腦圖學繪圖流程
作者 王聖川 日期

2. 目錄
1. 電腦圖學 Computer Graphics............................................................................................3
1.1. 幾何網格(Mesh).....................................................................................................................3
1.2. 座標系統與轉換矩陣..............................................................................................................4
2. 3D Viewing ............................................................................................................................5
2.1. 鏡頭空間 Camera Space......................................................................................................6
2.2. 投影 Projection......................................................................................................................6
2.3. 正規投影空間 Clip space......................................................................................................7
3. Rasterization ...................................................................................................................... 10
4. Programmable Graphics Pipeline................................................................................. 10
4.1. CPU vs. GPU........................................................................................................................11
4.2. GPU program/shader 架構 ............................................................................................. 14
4.3. 硬體加速............................................................................................................................... 15

3. 1. 電腦圖學 COMPUTER GRAPHICS
實現電腦繪圖的技術，開發應用軟體，接受幾何輸入資訊，完成 Rasterization(繪圖區塗色)工作，最
終結果呈現在螢幕輸出裝置。
幾何資訊(geometry)主要由頂點(vertex)，多邊形(最常用三角形，triangle)來描述出幾何模型的外形。
在幾何資訊處理階段，有幾個重要的處理步驟：
i. Model & Camera transformation: 幾何物件(primitive)的轉換姿態與鏡頭設置的運算
(world space)。
ii. Lighting: 決定打光效果。
iii. Projection: 將輸入資訊投影到對應的投影空間中(3D clip space)。
iv. Clipping: 由投影空間決定那些物件資訊不在投影範圍內，排除在繪圖工作外。
v. Viewport transformation: 螢幕輸出裝置的繪圖區轉換運算(screen space)。
1.1. 幾何網格(MESH)
網格主要用來描述幾何資訊，可由點(vertex)，線(line/edge)，面(face/polygon/triangle)，來組成
一個幾何外形(surface/geometry)。

4. 常見的網格檔案格式有: STL，OBJ，COLLADA，FBX 等。FBX 檔案格式被廣泛地被娛樂產業使用
(Autodesk 提出，Maya、3DS Max、Blender、Unity、Unreal、CryEngine 等都支援)。
http://usa.autodesk.com/adsk/servlet/pc/item?siteID=123112&id=10775847
1.2. 座標系統與轉換矩陣
座標主要以 Cartesian coordinate 座標系來表示，一個點座標包含 X、Y、Z 座標分量。常以 4 個分
量的向量表示: [X, Y, Z, W]，以利於 4x4 Matrix 的矩陣運算，其中 W=0 時代表方向，W=1 時代表
位置。Cartesian 座標系又分左手定則與右手定則。
線性代數發展出許多轉換公式，在電腦圖學中推導為 4x4 Matrix 形式使用，完成座標轉換的各種運

5. 算(GPU 運算常使用 column-major 矩陣)。
Translation: T [
1 0 0 Tx
0 1 0 Ty
0 0 1 Tz
0 0 0 1
] Scaling: S[
Sx 0 0 0
0 Sy 0 0
0 0 Sz 0
0 0 0 1
]
Rotation by Z: RZ [
cosα −sin α 0 0
sin α cosα 0 0
0 0 1 0
0 0 0 1
] Rotation by Y: RY [
cosα 0 sin α 0
0 1 0 0
−sin α 0 cosα 0
0 0 0 1
]
Rotation by X: RX [
1 0 0 0
0 cosα −sin α 0
0 sin α cosα 0
0 0 0 1
]
2. 3D VIEWING
繪圖應用中需要定義一個鏡頭(Camera)，決定哪些場景資訊拍攝到繪圖範圍內(view volume)。
為計算出最終的螢幕裝置輸出區域座標資訊，下方提出更詳細的座標系轉換流程。
i. Object: 物件幾何設計座標空間。
ii. World: 場景世界座標空間。
iii. Eye/Camera: 鏡頭座標空間。
iv. Clip: 正規投影座標空間。
v. Device/Screen: 螢幕輸出裝置座標空間。

6. 2.1. 鏡頭空間 CAMERA SPACE
此階段需要做一個鏡頭座標空間座標系轉換(Camera Transform/View Matrix)，鏡頭位置定義為原
點 [0, 0, 0, 1]，鏡頭看的方向定義為 Z 軸方向。
2.2. 投影 PROJECTION
鏡頭設置決定可投影範圍，稱作 View Volume，投影分為平行投影(orthogonal)和透視投影
(perspective)。

7. 2.3. 正規投影空間 CLIP SPACE
投影步驟完成後會將座標系統轉換為正規投影座標空間(Canonical space/Clip space)。最後透過
Viewport 轉換公式，便可以從 Clip space 計算出 Screen space 座標空間資訊。
Reference: http://www.opengl-tutorial.org/beginners-tutorials/tutorial-3-matrices/

10. 3. RASTERIZATION
很多人翻譯為光柵化(黑人問號???)，反正就是做塗顏色的步驟。前面介紹已經運算得到幾何透過投影
之後，screen space 座標資訊，再來只剩下把幾何內部塗滿正確的顏色資訊。下方是常見的 scanline
fill algorithm。(另外有 triangle fill algorithm)
Pixel 填色時的所有資訊都是由頂點帶進來的資訊(position, color, normal, texel, depth 等)，透過內
插運算(interpolation)得到。
4. PROGRAMMABLE GRAPHICS PIPELINE
傳統的繪圖流程(fixed-function pipeline)是定死的，只能透過 SDK(OpenGL / Direct3D)來配合
GPU 協同完成繪圖工作。後來開始發展更自由的繪圖流程，也就是允許開發者編寫 GPU 可以執行的
程式，新的繪圖流程稱為 programmable graphics pipeline。一開始提出的是組合語言程式，後來
漸漸發展出 C-like 擬高階程式語言(GLSL / HLSL / CG 等)。

11. 4.1. CPU VS. GPU
https://www.gamedev.net/news/where-do-gpus-come-from-r108/
先考慮 CPU 流程。
考慮 GPU 流程。

12. CPU 與 GPU 架構設計上的不同。

14. 4.2. GPU PROGRAM/SHADER 架構
上圖是 GPU program 早期提出的架構，現在的次世代 graphics pipeline 牽涉更多複雜與酷炫的新
技術，在此從舊的流程先開始介紹。一個 GPU program 必須包含 vertex shader 與 fragment shader
兩組程式，分別給 vertex processor 與 fragment processor 單元運作。
i. Vertex shader: 輸入頂點資訊，在 shader 中做處理，這裡要完成前面提過的
ModelingViewProjection transformation，必須運算出正確的 clip space coordinate，
完成後可指定資訊輸出到fragment shader階段。額外的per-vertex資訊都可在此階段處哩，
包含法向量(normal)、顏色(color)、貼圖座標(texel)、深度(depth)等。
ii. Fragment shader: 由頂點經內插運算得到輸入資訊，在此完成對應 per-pixel rasterization
工作。最終必須要決定此 pixel 的顏色資訊(RGBA)。

15. 4.3. 硬體加速
GPU 執行繪圖相關指令的次數(drawcall)對效能有直接的關聯。GPU 只可存取 video memory 中的
資料，所以幾何資訊須透過 PCI-express 介面，由 main memory 上傳到 video memory，這對效
能消耗來說也是有代價的。所以繪圖效能優化，最重要的步驟是有效率地減少 drawcall。
GPU program 可做到對幾何資訊的某些處理工作(尤其適合平行化)，寫入到 vertex/fragment
shader 中，如果可以有效運用 GPU 多核心的特性，就可以達成硬體加速的目的。後來開始有組織推
廣 GPU 平行加速技術，運用在各種領域中，稱為 GPGPU(general purpose GPU)，OpenCL 與 CUDA
等函式庫都屬此應用領域。