OpenGL/OpenGL ES入門： 頂點着色器與片元着色器（OpenGL過渡OpenGL ES）

系列推薦文章：
OpenGL/OpenGL ES入門：圖形API以及專業名詞解析
OpenGL/OpenGL ES入門：渲染流程以及固定存儲着色器
OpenGL/OpenGL ES入門：圖像渲染實現以及渲染問題
OpenGL/OpenGL ES入門：基礎變換 - 初識向量/矩陣
OpenGL/OpenGL ES入門：紋理初探 - 經常使用API解析
OpenGL/OpenGL ES入門： 紋理應用 - 紋理座標及案例解析(金字塔)
OpenGL/OpenGL ES入門： 頂點着色器與片元着色器（OpenGL過渡OpenGL ES）
OpenGL/OpenGL ES入門： GLKit以及API簡介
OpenGL/OpenGL ES入門： GLKit使用以及案例

以前幾篇文章，都是講述了固定管線相關的知識，主要目的是爲了後面的內容可編程管線做鋪墊。
固定管線
使用固定管線時，不須要開發者過多的去關心渲染的流程，也不容許去幹涉頂點渲染和像素渲染的過程，OpenGL內部會幫咱們生產一套完整的渲染流程，咱們只需傳特定的參數給固定管線，便可完成渲染.

可編程管線
可編程管線的定製性高，開發者能夠根據須要編寫頂點渲染與像素渲染中的幾個環節，有屬於頂點渲染的頂點着色器，幾何着色器，細分着色器和屬於像素渲染的片元着色器(像素着色器)，着色器可理解爲一個小程序，通常咱們開發者比較多也必須編寫的是頂點着色器和片元着色器，而幾何着色器和細分着色器是有默認的，使用默認的便可.

話很少說，直接進入相關內容。

OpenGL ES簡介

OpenGL ES (OpenGL for Embedded Systems) 是以⼿持和嵌入式爲目標的高級3D圖形應用程序編程接口(API)。

OpenGL ES是目前智能手機中佔據統治地位的圖形API.支持的平臺: iOS, Andriod , BlackBerry ,bada ,Linux ,Windows.

OpenGL ES 開放式圖形庫(OpenGL的)用於可視化的二維和三維數據。它是一個多功能開放標準圖形庫，⽀持2D和3D數字內容建立，機械和建築設計，虛擬原型設計，飛⾏模擬，視頻遊戲等應用程序。您可使⽤OpenGL配置3D圖形管道並向其提交數據。頂點被變換和點亮，組合成圖元，並光柵化以建立2D圖像。 OpenGL旨在將函數調用轉換爲能夠發送到底層圖形硬件的圖形命令。因爲此底層硬件專用於處理圖形命令，所以OpenGL繪圖一般⾮常快。 OpenGL for Embedded Systems(OpenGL ES)是OpenGL的簡化版本，它消除了了冗餘功能，提供了⼀個既易於學習⼜更易於在移動圖形硬件中實現的庫。

管道渲染流程

頂點着色器

頂點着色器的輸入：

• 着色器程序 -- 描述頂點上執行操做的頂點着色器程序源代碼/可執行文件
• 頂點着⾊器輸入(屬性) -- 用頂點數組提供每一個頂點的數據
• 統一變量(uniform) -- 頂點/片元着⾊器使用的不變數據
• 採樣器 -- 表明頂點着色器使用紋理的特殊統一變量類型，通常是ID類型，GLSL會根據ID標籤查找到紋理

圖元裝配 圖元(Primitive)：點、線、三角形等
圖元裝配：將頂點數據計算成一個個圖元，在這個階段會執行裁剪、透視分割和Viewport變換操做。即肯定頂點造成的圖形，點或線或三角形等。

對於每一個圖元，必須肯定圖元是否位於視錐體(屏幕上可見的3D空間區域)內：

• 圖元沒有徹底在視錐體內，可能須要進行裁剪。
• 圖元徹底處於該區域以外，它就會被拋棄

光柵化 繪製對應的圖片(點、線、三角形)，將圖元轉化成一組二維片斷的過程，就是將頂點數據計算成的圖片轉化成片元，而後這些片元由片元着色器處理。

頂點着色器業務：

• 矩陣變換位置
• 計算光照公式生成逐頂點顏色
• 生成/變換紋理座標

頂點着色代碼案例：

// 屬性 -- 頂點座標 四維向量
attribute vec4 position;
// 屬性 -- 紋理座標 二維向量
attribute vec2 textCoordinate; 
// uniform 旋轉矩陣
uniform mat4 rotateMatrix; 
// 通道 可利用該值傳遞值到片元着色器
varying lowp vec2 varyTextCoord; 
void main()
{
    varyTextCoord = textCoordinate; 
    vec4 vPos = position;
    vPos = vPos * rotateMatrix; 
    // 輸出
    gl_Position = vPos;
}
複製代碼

片元着色器

片元着色器又叫片斷着色器或像素着色器。

片元着色器的輸入：

• 着色器程序 -- 描述片斷上執行操做的片元着色器程序源代碼/可執行文件。
• 輸入變量 -- 光柵化單元用插值爲每一個片斷生成的頂點着色器輸出
• 統一變量(uniform) -- 頂點或片元着色器使用的不變數據
• 採樣器 -- 表明片元着色器使用紋理的特殊統一變量

插值(Interpolation)：
光柵器在三角形的三個頂點之間進行插值（或者經過另一種技術一行一行的插值）並執行片元着色器遍歷三角形的每個像素。片元着色器會返回光柵器存在顏色緩存中用於顯示的像素顏色值（在其餘一些額外的檢測以後，好比：深度測試depth test等）

片元着色器業務：

• 計算顏色
• 獲取紋理值
• 往像素點中填充顏色值(紋理值/顏色值)

它能夠⽤於圖⽚/視頻/圖形中每一個像素的顏色填充(好比給視頻添加濾鏡,實際上就是將視頻中每一個圖片的像素點顏色填充進行修改.)

片元着色代碼案例：

// 紋理座標 從頂點着色器傳遞過來 命名、類型要一致
varying lowp vec2 varyTextCoord; 
// 紋理採樣器 
uniform sampler2D colorMap; 
void main()
{
    // 輸出值 -- gl_FragColor
    // texture2D(紋理採樣器, 紋理座標) -- 獲取紋理像素
    gl_FragColor = texture2D(colorMap, varyTextCoord); 
}
複製代碼

逐片斷操做：

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

EGL (Embedded Graphics Library )

• OpenGL ES命令須要渲染上下文和繪製表面才能完成圖形圖像的繪製.
• 渲染上下文: 存儲相關OpenGL ES狀態.
• 繪製表面: 是用於繪製圖元的表面，它指定渲染所須要的緩存區類型，例如顏色緩衝區，深度緩衝區和模板緩衝區.
• OpenGL ES API並無提供如何建立渲染上下⽂或者上下⽂如何鏈接到原生窗口系統。 EGL是Khronos渲染API(如OpenGL ES)和原⽣窗口系統之間的接口。惟一⽀持OpenGL ES卻不⽀持EGL的平臺是iOS。Apple提供⾃己的EGL API的iOS實現,稱爲EAGL。
• 由於每一個窗口系統都有不一樣的定義，因此EGL提供基本的不透明類型EGLDisplay，這個類型封裝了全部系統相關性，用於和原生窗口系統接口.

因爲OpenGL ES是基於C的API，所以它⾮常便攜且受到普遍支持。做爲C的API，它與 Objective-C Cocoa Touch應⽤程序⽆縫集成。OpenGL ES規範沒有定義窗口層; 相 反，託管操做系統必須提供函數來建立一個接受命令的OpenGL ES渲染上下文和一個幀 緩衝區，其中寫入任何繪圖命令的結果。在iOS上使用OpenGL ES須要使⽤iOS類來設置 和呈現繪圖表面，並使用平臺中立的API來呈現其內容。