OpenGL ES頂點着色器和片元着色器

一、OpenGL ES

• OpenGL ES是使用在手機端和嵌入式裏的3D圖形應用程序編程接口，是跨平臺的API。OpenGL ES是OpenGL的簡化版本。

• OpenGL ES也分客戶端Client和服務端Server，OpenGL ES framework屬於客戶端，與application共同運行在CPU上；OpenGL ES頂點着色器、片元着色器等對圖形的處理運行在GPU上，是服務端。客戶端向服務端提供數據，服務端通過頂點着色器、片元着色器等計算數據並顯示。

二、 OpenGL ES 3.0 圖形管線

1. 使用API創建頂點數據（紋理座標也是頂點數據）存入頂點緩衝區/數組對象，頂點緩衝區是GPU顯存上的區間，頂點數組存儲在內存中，數據會傳給頂點着色器；
2. 頂點着色器對glPiont賦值、執行旋轉縮放變換等操作，之後進行圖元裝配；
3. 圖元裝配中設置頂點之間的連接方式來確定繪製方式，然後繪製圖形，之後對圖形進行光柵化；
4. 光柵化是確定圖形在屏幕上的像素點，便於後續片元着色器填充顏色；
5. 紋理座標數據是不斷變化的，需要通過attribute屬性通道交給頂點着色器往下傳遞到片元着色器；
6. 片元着色器對各個像素點填充顏色，可以對圖形填充純色，也可以從紋理數據中獲取對應位置的顏色填充；
7. 逐片元操作是將圖形中的每一個像素點填充顏色，把結果放在幀緩衝區中；
8. 從幀緩衝區將結果顯示到屏幕上。
   tips：圖元裝配、光柵化、逐片元操作和幀緩衝區是不由開發者參與的，OpenGL會自動計算。

三、OpenGL ES圖形管道

1. application應用：程序代碼將圖片原始數據如頂點數據和圖片數據傳遞給頂點着色器；
2. Vertex頂點着色器：頂點着色器處理旋轉縮放等變換數據，需要光照的添加光照數據，將這些數據往下傳遞進行圖元裝配；
3. Geometry幾何處理：對圖形的處理，包括圖元裝配和裁剪，然後交給片元着色器處理；
4. Fragment片元着色器：片元着色器計算紋理座標顏色並填充像素點，將結果存入幀緩衝區；
5. Framebuffer Operations幀緩衝區：處理圖片透明度、模板、開啓深度測試，最後進行顏色混合，從幀緩衝區讀取數據並顯示到屏幕。

四、頂點着色器

頂點着⾊器 輸入:

1. 着色器程序——輸入頂點數據描述頂點上執行操作的頂點着色器程序源代碼/可執行文件；
2. 頂點着色器輸入[屬性]——用頂點數組提供每個頂點的數據
3. 統一變量[uniform]——頂點/片元着色器使用的不變數據
4. 採樣器——代表頂點着色器使用紋理的特殊統一變量類型

頂點着色器業務：
1、矩陣變換位置
2、計算光照公式生成逐頂點顏色
3、生成/變換紋理座標
總結: 它可以用於執行自定義計算,實施新的變換,照明或者傳統的固定功能所不允許的基於頂點的效果.

attribute vec4 position;
attribute vec2 texCoordinate;
uniform mat4 rotateMatrix;
varying lowp vec2 varyTexCoord;
void main() {
    varyTexCoord = texCoordinate;
    vec4 vPos = position;
    vPos  = vPos * rotateMatrix;
    gl_Position = vPos;
}

五、圖元裝配

頂點着⾊器之後,下一個階段就是圖元裝配. 三種圖元(Primitive): 點,線,三角形.
圖元裝配: 將頂點數據計算成⼀個個圖元.在這個階段會執⾏裁剪、透視分割和 Viewport變換操作。
圖元類型和頂點確定將被渲染的單獨圖元。對於每個單獨圖元及其對應的頂點，圖元裝配階段執⾏的操作包括:將頂點着⾊器的輸出值執⾏裁剪、透視分割、視⼝變換
後進入光柵化階段。

六、光柵化

在這個階段繪製對應的圖元(點/線/三⻆形). 光柵化就是將圖元轉化成一組二維片段的過程.而這些轉化的片段將由片元着⾊器處理.這些二維片段就是屏幕上可繪製的像素.

七、片元着色器

片元着⾊器/⽚段着⾊器 輸入:

1. 着⾊器程序——描述片段上執⾏操作的頂點着⾊器程序源代碼/可執⾏文件
2. 輸入變量——光柵化單元用插值爲每個片段生成的頂點着⾊器輸出
3. 統一變量(uniform)——頂點/⽚元着⾊器使用的不變數據
4. 採樣器——代表片元着⾊器使⽤紋理的特殊統一變量類型.

⽚元着⾊器 業務:
1、計算顏⾊
2、獲取紋理值
3、往像素點中填充顏⾊值(紋理值/顏色值);
總結: 它可以用於圖片/視頻/圖形中每個像素的顏色填充(比如給視頻添加濾鏡,實際上就是將視頻中每個圖片的像素點顏色填充進⾏修改.)

varying lowp vec2 varyTexCoord;
uniform sampler2D colorMap;
void main() {
    gl_FragColor = texture2D(colorMap, varyTexCoord);
}

八、逐片段操作

像素歸屬測試: 確定幀緩存區中位置(Xw,Yw)的像素目前是不是歸屬於OpenGL ES所有. 例如,如果一個顯示OpenGL ES幀緩存區View被另外一個View 所遮蔽.則窗⼝系統可以確定被遮蔽的像素不屬於OpenGL ES上下文,從而不全顯示這些像素.⽽像素歸屬測試是OpenGL ES 的⼀部分,它不由開發者人爲控制,而是由OpenGL ES 內部進⾏.
• 裁剪測試: 裁剪測試確定(Xw,Yw)是否位於作爲OpenGL ES狀態的⼀部分裁剪矩形範圍內.如果該片段位於裁剪區域之外,則被拋棄.
• 深度測試: 輸入⽚段的深度值進一步比較,確定片段是否拒絕測試
• 混合: 混合將新生成的片段顏色與保存在幀緩存的位置的顏色值組合起來.
• 抖動: 抖動可用於最小化因爲使用有限精度在幀緩存區中保存顏色值而產生的僞像.