上圖描述了 ES 2.0 渲染管線的大致流程。其大致可以分為以下幾個部分（不完全對應）

• 建模
• API 的使用、指定頂點和圖元
• 對應流程圖中，進入 頂點著色器（Vertex Shader）之前的步驟
• 幾何處理
• 坐標轉換（coordinate transformations）和投影（project）
• 裁剪（clip）和圖元裝配（primitive assembly）
• 對應流程圖中，頂點著色器 和 圖元裝配
• 光柵化（rasterization）
• 將圖元（點、線段和三角形）進行光柵化操作，輸出基於窗口坐標系的片元
• 片元著色（顏色或紋理），在片元著色器（fragment shader）中進行
• 對應流程圖中的，光柵器（rasterizer）和 片元著色器
• 片元處理（per-fragment operations）
• 裁剪測試（scissor test）
• 模板測試（stencil test）
• 深度測試（depth buffer test）
• 混合 （blending）
• 抖動（dithering）
• 對應流程圖中的，depth & stencil、colour buffer blend、dithering
• 輸出幀緩存（frame buffer）

1 建模 和 圖元

顧名思義，建模就是建立需要渲染出對象模型。在 ES 2.0 中，建模是通過 API 指定一組表示幾何對象的頂點數據來完成的。在現實中有很多幾何對象，比如點、線段、正方形、立方體、球形等。但在 ES 2.0 中，可以直接使用的幾何對象只有 3 種，被稱為圖元，分別是

• 點
• 線段
• 三角形

在 ES 2.0 中，通過 DrawArrays 或者 DrawElements 傳入頂點數據，同時在參數中指定圖元類型即可描述出指定的幾何對象。實際的圖元類型參數在 點、線段 和 三角形上進行了擴展

• points，每個傳入頂點定義了一個點

• line strips，假設傳入頂點數是 N，描述一條連續有 N - 1 個線段組成的線，傳入的第 i 個頂點代表第 i 個線段的起點，第 i - 1 個線段的終點；最後一個頂點代表最後一個線段的終點; N 小於 2 時無意義

• line loops，和 line stripes 類似，除了最後一個頂點和第一個頂點額外組成一條線段

• separate lines，每兩個頂點一條獨立線段，線段之間沒有交集頂點

• triangle strips，假設傳入頂點數是 N，頂點序列 (v1, v2, v3, v4, ... vN)，描述 N - 2 個三角形。三角形序列為 (v1, v2, v3), (v3, v2, v4), (v3, v4, v5) ...，每一個三角形都和上一個三角形共有一條邊

• triangle fans，假設傳入定點數是 N，頂點序列 (v1, v2, v3, v4, ... vN)，描述 N - 2 個三角形。三角形序列為 (v1, v2, v3), (v1, v3, v4), (v1, v4, v5) ...，每一個三角形的第一個頂點都是 v1

• separate triangles，每 3 個頂點一個獨立的三角形，三角形之間沒有交集頂點

在 ES 2.0 中使用基本圖元 點、線段 和 三角形可以組成其他複雜幾何體，進而建立想要繪製的世界模型 ——

• 用二維三角形可以『拼湊』複雜的二維多邊形
• 可以通過二維多邊形組成三維幾何體的『表面』

最後看兩個使用三角形來畫球面的例子，實際就是使用多個三角形來擬合球體表面，其內部是中空的

推薦閱讀：