OpenGL ES 初探

OpenGL ES

OpenGL ES是OpenGL的子集
是針對嵌入式設(shè)備及移動終端設(shè)備的高級3D圖形應(yīng)用程序喂饥，例如iOS棘钞、Android字管、Windows等
OpenGL ES 是跨平臺的，不會提供窗口相關(guān)方法侵佃，需要系統(tǒng)各自提供載體

OpenGL ES渲染流程

OpenGL ES允許應(yīng)用程序利用底層圖形處理器的強?功能桑李。iOS設(shè)備上的GPU可以執(zhí)行復(fù)雜的2D和3D繪圖踱蛀，以及最終圖像中每個像素的復(fù)雜著色計算。

OpebGL ES的渲染主要分為兩部分：CPU和GPU

CPU部分

app代碼通過OpenGL ES API贵白，會調(diào)度OpenGL ES Framework
通過OpenGL ES client 調(diào)度 OpenGL ES server率拒，將頂點數(shù)據(jù)等傳遞到GPU
GPU部分:做一些圖形硬件的處理，例如光柵化禁荒、顯示等猬膨。

OpenGL ES圖形管線

API獲得頂點數(shù)據(jù)，將頂點數(shù)據(jù)從內(nèi)存中拷貝至頂點緩沖區(qū)（顯存）
拿到數(shù)據(jù)之后呛伴，通過attribute通道傳遞至頂點著色器勃痴，同時，紋理坐標通過Texture通道傳遞* 到頂點著色器和片元著色器
然后热康，圖元裝配沛申，即圖元的連接方式，一共有9種姐军，常用的有6種铁材，此步驟將頂點變換為圖形
光柵化：確定圖形與屏幕對應(yīng)的位置
片元/片段/像素著色器：處理對應(yīng)像素點的顏色值
在將處理好的每個像素點的顏色值存儲到幀緩存區(qū)尖淘，然后在顯示器中顯示
API：可以通過API操作頂點緩沖區(qū)、頂點著色器著觉、紋理坐標德澈、片段著色器

Apple官方圖示

圖形管道-蘋果官方圖示

App：提供圖元裝配頂點信息，圖片信息
Vertex（頂點著色器）：處理頂點 -- 圖形變換（旋轉(zhuǎn)固惯、縮放、平移）
Geometry（圖元裝配）：圖元裝配 + 裁剪（超出屏幕部分被裁剪）
Fragment（片元著色器）：紋理處理 + 霧化處理
Framebuffer Operation（幀緩沖區(qū)）：透明度混合缴守、模板葬毫、深度測試；最后在混合屡穗，這些操* 作都是在即將顯示時贴捡，在幀緩沖區(qū)中完成的動作

頂點著色器

著?器程序—描述頂點上執(zhí)?操作的頂點著?器程序源代碼/可執(zhí)行?件
2.頂點著?器輸?(屬性) — ?頂點數(shù)組提供每個頂點的數(shù)據(jù)
3.統(tǒng)?變量(uniform)—頂點/?元著色器使?的不變數(shù)據(jù)
采樣器—代表頂點著色器使?紋理的特殊統(tǒng)?變量類型.

頂點著色器

輸入，有3種方式
1村砂、通過attribute通道輸入頂點數(shù)據(jù)烂斋，提供每個頂點的數(shù)據(jù)
2、通過uniform通道輸入統(tǒng)一變量础废，即頂點/片元著色器中使用的不變的數(shù)據(jù)
3汛骂、采樣器：表示頂點著色器使用紋理的特殊統(tǒng)一變量類型
輸出：經(jīng)過處理的最終頂點數(shù)據(jù)，有2種
1评腺、gl_Position帘瞭，是GLSL 的內(nèi)建變量，是將處理后的最終頂點數(shù)據(jù)賦值給它
2蒿讥、gl_PointSize蝶念，是指點的尺寸，即可以在頂點著色器中修改每個點的大小芋绸，使用率較低

頂點著色器處理的業(yè)務(wù)

矩陣變換位置
計算光照公式生成逐頂點顏色（也可以片元著色器）
生成/變換紋理坐標：片元著色器是沒有辦法傳入屬性即attribute的媒殉，可以通過頂點著色器橋接，間接將紋理坐標屬性傳遞到片元著色器

頂點著色器GLSL代碼示例

attribute摔敛、uniform 表示client與server之間的通道
其中的vec4廷蓉、vec2都是向量類型，表示四維向量和二維向量
mat4：4*4矩陣
varying是修飾符：通過varying將紋理坐標傳入到片元著色器
lowp：低精讀
main中的操作
實現(xiàn)了紋理坐標的橋接
實現(xiàn)了頂點旋轉(zhuǎn)矩陣的相乘：列向量與列矩陣相乘马昙，得到旋轉(zhuǎn)后的頂點坐標
將上述得到的頂點坐標苦酱，賦值給gl_Position

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

圖元裝配、光柵化

圖元(Primitive): 點,線,三?形等.
圖元裝配:將頂點數(shù)據(jù)計算成一個個圖元.在這個階段會執(zhí)行裁剪给猾、透視分割和 Viewport變換操作疫萤。
圖元類型和頂點確定將被渲染的單獨圖元。對于每個單獨圖元及其對應(yīng)的頂點敢伸，圖元裝配階段執(zhí)行的操作包括:將頂點著色器的輸出值執(zhí)行裁剪扯饶、透視分割、視?變換后進?光柵化階段。
光柵化：在這個階段繪制對應(yīng)的圖元(點/線/三?角形). 光柵化就是將圖元轉(zhuǎn)化成一組二維?段的過程.?這些轉(zhuǎn)化的?段將由?元著色器處理.這些?維片段就是屏幕上可繪制的像素尾序。

?段著?器/片元著色器

著色器程序—描述?段上執(zhí)行操作的片元著?器程序源代碼/可執(zhí)行文件
2.輸?變量— 光柵化單元用插值為每個片段?成的頂點著色器輸出
3.統(tǒng)?變量(uniform)—頂點/片元著色器使?的不變數(shù)據(jù)
采樣器—代表片元著色器使用紋理的特殊統(tǒng)?變量類型.

片元著色器輸入-輸出

輸入同頂點著色器一樣钓丰，有3種方式
由頂點著色器橋接傳遞過來的紋理坐標等
通過uniform通道輸入統(tǒng)一變量，即頂點/片元著色器中使用的不變的數(shù)據(jù)
采樣器：表示頂點著色器使用紋理的特殊統(tǒng)一變量類型每币，例如紋理就是通過采樣器傳遞
輸出：某個像素點經(jīng)過片元著色器處理后的結(jié)果

片元著色器業(yè)務(wù)

計算顏?
獲取紋理值
往像素點中填充顏色值(紋理值/顏色值);
總結(jié): 它可以?于圖片/視頻/圖形中每個像素的顏?填充(?如給視頻添加濾鏡,實際上就是將視頻中每個圖片的像素點顏?填充進行修改.)

片元著色器GLSL代碼示例

varying：必須和頂點著色器中一模一樣携丁，這樣才能傳遞紋理坐標
sampler2D 采樣器類型
texture2D(紋理采樣器，紋理坐標)：獲取對應(yīng)位置/坐標的顏色值兰怠，簡稱獲得紋素
gl_FragColor（內(nèi)建變量）：將最終的顏色值賦值給它

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

總結(jié)

頂點著色器梦鉴、片元著色器都是代碼段，類似于iOS中的函數(shù)/方法揭保，有返回值
頂點著色器的返回值會被復(fù)制給gl_Position
片元著色器的結(jié)果會賦值給gl_fragColor
這兩個返回值都屬于GLSL中的內(nèi)建變量肥橙，是封裝好的，直接將數(shù)據(jù)賦值給它即可
gl_Position：頂點著色器中某一個頂點經(jīng)過一系列處理后得到的結(jié)果
gl_fragColor：經(jīng)過片元著色器對某一個像素點來進行處理之后的結(jié)果