OpenGL ES
1.OpenGL ES是OpenGL的子集
2.是針對嵌入式設(shè)備及移動終端設(shè)備的高級3D圖形應(yīng)用程序咙轩，例如iOS获讳、Android、Windows等
3.OpenGL ES 是跨平臺的活喊，不會提供窗口相關(guān)方法丐膝，需要系統(tǒng)各自提供載體
OpenGL ES渲染流程
下圖出自蘋果官方文檔OpenGL ES as a Client-Server Architecture
OpenGL ES的渲染主要分為兩部分：CPU和GPU
CPU部分
1.app代碼通過OpenGL ES API,會調(diào)度OpenGL ES Framework
2.通過OpenGL ES client 調(diào)度 OpenGL ES sever，將頂點(diǎn)數(shù)據(jù)等傳遞到GPU
GPU部分
做一些圖形硬件的處理，例如光柵化帅矗、顯示界面等偎肃。
以上圖片的過程
1.API獲得頂點(diǎn)數(shù)據(jù)，將頂點(diǎn)數(shù)據(jù)從內(nèi)存中拷貝至頂點(diǎn)緩沖區(qū)（顯存）
2.拿到數(shù)據(jù)之后浑此，通過attribute通道傳遞至頂點(diǎn)著色器累颂，同事，紋理坐標(biāo)通過Texture通道傳遞到頂點(diǎn)著色器和片元著色器凛俱。
3.圖元裝配紊馏，即圖元的鏈接方式，一共有9種最冰，常用的有6種瘦棋，此步驟將頂點(diǎn)變換為圖形
4.光柵化: 確定圖形與屏幕對應(yīng)的位置
5.片元(片段/像素)著色器：處理對應(yīng)像素點(diǎn)的顏色值
6.將處理好的每個像素點(diǎn)的顏色值存儲到幀緩存區(qū)稀火，然后顯示器中顯示
7.API:可以通過API操作頂點(diǎn)緩沖區(qū)暖哨、頂點(diǎn)著色器、紋理坐標(biāo)凰狞、片元著色器
Apple官方圖示
來自蘋果官方文檔OpenGL ES as a Graphics Pipeline
1.APP:提供圖元裝配頂點(diǎn)信息篇裁，圖片信息
2.Vertex(頂點(diǎn)著色器)：處理頂點(diǎn) -> 圖形變換（旋轉(zhuǎn)、縮放赡若、平移）
3.Geometry(圖元裝配)：圖元裝配 + 裁剪（超出屏幕部分被裁剪）
4.Fragment(片元著色器) ：紋理處理+霧化處理
5.Framebuffer Operation(幀緩沖區(qū)) ：透明度混合达布、模板、深度測試逾冬；最后在混合
頂點(diǎn)著?器
輸入黍聂，有3種方式
1.通過attribute通道輸入頂點(diǎn)數(shù)據(jù)，提供每個頂點(diǎn)的數(shù)據(jù)
2.通過uniform通道輸入統(tǒng)一變量身腻，即頂點(diǎn)/片元著色器中使用的不變數(shù)據(jù)
3.采樣器：表示頂點(diǎn)著色器使用紋理的特殊統(tǒng)一變量類型
輸出：經(jīng)過處理的最終頂點(diǎn)數(shù)據(jù)产还，有2種
gl_Position是GLSL的內(nèi)建變量，是將處理后的最終頂點(diǎn)數(shù)據(jù)復(fù)制給它嘀趟。gl_PointSize是指頂點(diǎn)尺寸脐区，即可以在頂點(diǎn)著色器中修改每個點(diǎn)的大小，使用率較低她按。
頂點(diǎn)著色器處理的業(yè)務(wù)
1.矩陣變換位置
2.計算光照公式生成逐頂點(diǎn)顏色（也可以片元著色器）
3.生成/變換紋理坐標(biāo)：片元著色器是沒有辦法傳入屬性即attribute的牛隅，可以通過頂點(diǎn)著色器橋接，間接將紋理坐標(biāo)屬性傳遞到片元著色器
頂點(diǎn)著色器GLSL代碼示例
1.attribute酌泰、uniform 表示client與server之間的通道
2.其中的vec4媒佣、vec2都是向量類型，表示四維向量和二維向量
3.mat4：4*4矩陣
4.varying是修飾符：通過varying將紋理坐標(biāo)傳入到片元著色器
5.lowp：低精讀
6.main中的操作
- 實(shí)現(xiàn)了紋理坐標(biāo)的橋接
- 實(shí)現(xiàn)了頂點(diǎn)旋轉(zhuǎn)矩陣的相乘：列向量 與 列矩陣 相乘陵刹，得到旋轉(zhuǎn)后的頂點(diǎn)坐標(biāo)
- 將上述得到的頂點(diǎn)坐標(biāo)默伍，賦值給
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;
}
圖元裝配、光柵化
1.圖元裝配：將頂點(diǎn)數(shù)據(jù)計算成一個個圖元
2.光柵化：將圖元轉(zhuǎn)化為一組二維片段的過程，主要是由于屏幕是2D的巡验，所以轉(zhuǎn)換的像素點(diǎn)也是二維的
片元著色器
輸入同頂點(diǎn)著色器一樣际插，有3種方式
1.由頂點(diǎn)著色器橋接傳遞過來的紋理坐標(biāo)等
2.通過uniform通道輸入統(tǒng)一變量，即頂點(diǎn)/片元著色器中使用的不變數(shù)據(jù)
3.采樣器：表示頂點(diǎn)著色器使用紋理的特殊統(tǒng)一變量類型显设，例如紋理就是通過采樣器來傳遞
4.輸出：某個像素點(diǎn)經(jīng)過片元著色器處理后的結(jié)果
片元著色器業(yè)務(wù)
1.計算顏色
2.獲取紋理值
3.往像素點(diǎn)填充顏色值（紋理值/顏色值）
片元著色器GLSL代碼示例
1.varying：必須和頂點(diǎn)著色器中一模一樣框弛，這樣才能傳遞紋理坐標(biāo)
2.sampler2D 采樣器類型
3.texture2D(紋理采樣器，紋理坐標(biāo))：獲取對應(yīng)位置/坐標(biāo)的顏色值捕捂，簡稱獲得紋素
4.gl_FragColor（內(nèi)建變量）：將最終的顏色值賦值給它
varying lowp vec2 varyTextCoord;
uniform sampler2D colorMap;
void main() {
gl_FragColor = texture2D(colorMap, varyTextCoord); }
總結(jié)
1.頂點(diǎn)著色器瑟枫、片元著色器都是代碼段，類似于iOS中的函數(shù)/方法指攒，有返回值
1.1 頂點(diǎn)著色器的返回值會被復(fù)制給gl_Position
1.2 片元著色器的結(jié)果會賦值給gl_fragColor
2.這兩個返回值都屬于GLSL中的內(nèi)建變量慷妙，是封裝好的，直接將數(shù)據(jù)賦值給它即可
2.1gl_Position頂點(diǎn)著色器中某一個頂點(diǎn)經(jīng)過一系列處理后得到的結(jié)果
2.2gl_fragColor經(jīng)過片元著色器對某一個像素點(diǎn)來進(jìn)行處理之后的結(jié)果
逐片段操作
這個過程都是GPU內(nèi)部處理的允悦，開發(fā)者并不需要關(guān)心膝擂，將處理好的數(shù)據(jù)存儲到幀緩存區(qū)，最后讀取幀緩存區(qū)將圖形顯示到屏幕上
OpenGL ES的應(yīng)用
圖片濾鏡
1.獲取圖片中的每一個像素點(diǎn)
2.像素點(diǎn)做飽和度處理
3.得到新的顏色
4.將新的顏色翻入幀緩存區(qū)
5.最后進(jìn)行顯示
視頻濾鏡
- 原理以及處理方式是一樣的（GLSL代碼）隙弛，視頻也是一幀一幀處理的架馋，而一幀就是一張圖片
1.獲得視頻MP4文件
2.拿到h264（視頻壓縮文件）
3.將視頻解碼（解壓），還原成一幀一幀的圖片
4.針對一幀一幀的圖片進(jìn)行處理
EGL(Embedded Graphics Library)
- OpenGL ES 命令需要
渲染上下?和繪制表面才能完成圖形圖像的繪制
2.渲染上下?: 存儲相關(guān)OpenGL ES狀態(tài)全闷，是一個狀態(tài)機(jī)
繪制表面：?于繪制圖元的表面,需要指定渲染的緩存區(qū),例如顏?緩叉寂、深度和模板
3.OpenGL ES API 并沒有提供如何創(chuàng)建渲染上下文或者上下文如何連接到原生窗口系 統(tǒng). EGL 是Khronos 渲染API(如OpenGL ES) 和原?窗?系統(tǒng)之間的接?.
唯?支持 OpenGL ES 卻不支持EGL的平臺是iOS. Apple 提供?己的EGL API的iOS實(shí)現(xiàn),稱為EAGL
4.因為每個窗?系統(tǒng)都有不同的定義,所以EGL提供基本的不透明類型—EGLDisplay, 這 個類型封裝了所有系統(tǒng)相關(guān)性,用于和原生窗?系統(tǒng)接?
