1、OpenGL ES簡介

OpenGL ES (OpenGL for Embedded Systems) 是以?持和嵌入式為目標(biāo)的?級3D圖形應(yīng)用程序編程接口(API)。OpenGL ES 是目前智能手機中占據(jù)統(tǒng)治地位的圖形API。?持的平臺: iOS, Andriod , BlackBerry ,bada ,Linux ,Windows。
OpenGL ES 蘋果文檔：

The Open Graphics Library (OpenGL) is used for visualizing 2D and 3D data. It is a multipurpose open-
standard graphics library that supports applications for 2D and 3D digital content creation, mechanical
and architectural design, virtual prototyping, flight simulation, video games, and more. You use OpenGL to
configure a 3D graphics pipeline and submit data to it. Vertices are transformed and lit, assembled into
primitives, and rasterized to create a 2D image. OpenGL is designed to translate function calls into
graphics commands that can be sent to underlying graphics hardware. Because this underlying hardware is
dedicated to processing graphics commands, OpenGL drawing is typically very fast.
OpenGL for Embedded Systems (OpenGL ES) is a simplified version of OpenGL that eliminates redundant
functionality to provide a library that is both easier to learn and easier to implement in mobile graphics
hardware.
OpenGL ES 開放式圖形庫(OpenGL的)?于可視化的?維和三維數(shù)據(jù)。它是一個多功能開放標(biāo)準(zhǔn)圖形庫，支持2D和3D數(shù)字內(nèi)容創(chuàng)建，機械和建筑設(shè)計，虛擬原型設(shè)計，?行模擬，視頻游戲等應(yīng)?用程序。您可以使用OpenGL配置3D圖形管道并向其提交數(shù)據(jù)。頂點被變換和點亮，組合成圖元，并光柵化以創(chuàng)建2D圖像。OpenGL旨在將函數(shù)調(diào)用轉(zhuǎn)換為可以發(fā)送到底層圖形硬件的圖形命令。由于此底層硬件專?于處理理圖形命令，因此OpenGL繪圖通常??？?。
OpenGL for Embedded Systems(OpenGL ES)是OpenGL的簡化版本，它消除了冗余功能，提供了一個既易于學(xué)習(xí)?更易于在移動圖形硬件中實現(xiàn)的庫。

2、OpenGL ES 圖形管道

OpenGL ES 圖形管道

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

3、頂點著色器

頂點著色器輸入、輸出

• 輸入(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ù)內(nèi)容

• 1.矩陣變換位置
• 2.計算光照公式?成逐頂點顏?
• 3.?成/變換紋理坐標(biāo)
  它可以?于執(zhí)行?定義計算,實施新的變換,照明或者傳統(tǒng)的固定功能所不允 的基于頂點的效果。

頂點著色器GLSL示例

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; 
}

• attribute、uniform 表示client與server之間的通道
• vec4、vec2：向量類型，表示四維向量和二維向量
• mat4：4*4矩陣
• varying：修飾符，通過varying將紋理坐標(biāo)傳入到片元著色器
• lowp：低精度
• gl_Position(內(nèi)建變量)：將最終的頂點坐標(biāo)賦值給它
• main函數(shù):
  • 1.紋理坐標(biāo)的橋接
  • 2.頂點旋轉(zhuǎn)矩陣的相乘：列向量與列矩陣相乘，得到旋轉(zhuǎn)后的頂點坐標(biāo)
  • 3.最終頂點坐標(biāo)，賦值給gl_Position

gl_Position：頂點著色器中某一個頂點經(jīng)過一系列處理后得到的結(jié)果

4、圖元裝配、光柵化

• 圖元裝配:將頂點數(shù)據(jù)計算成?個個圖元(圖元Primitive：點,線,三?角形等)。在這個階段會執(zhí)?裁剪、透視分割和 Viewport變換操作。
• 圖元類型和頂點索確定將被渲染的單獨圖元。對于每個單獨圖元及其對應(yīng)的頂點，圖元裝配階段執(zhí)行的操作包括:將頂點著?器的輸出值執(zhí)?裁剪、透視分割、視?變換后進(jìn)?入光柵化階段。
• 光柵化：將圖元轉(zhuǎn)化為一組二維片段的過程，由于屏幕是2D的，所以轉(zhuǎn)換的像素點也是二維的。

5、片元著色器(fragment shader)

片元著色器輸入、輸出

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

片元著色器輸入、輸出

片元著色器業(yè)務(wù)內(nèi)容

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

片元著色器GLSL代碼

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

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

gl_fragColor：經(jīng)過片元著色器對某一個像素點來進(jìn)行處理之后的結(jié)果

6、EGL(Embedded Graphics Library)

• 1.OpenGL ES 命令需要渲染上下?和繪制表面才能完成圖形圖像的繪制。
• 2.渲染上下?: 存儲相關(guān)OpenGL ES狀態(tài)，是一個狀態(tài)機。
• 3.繪制表面：?于繪制圖元的表面,需要指定渲染的緩存區(qū)(例如顏?緩、深度和模板)。
• 4.OpenGL ES API并沒有提供如何創(chuàng)建渲染上下文或者上下文如何連接到原生窗口系統(tǒng)。EGL是Khronos渲染API(如OpenGL ES) 和原?窗?系統(tǒng)之間的接?。唯?支持 OpenGL ES 卻不支持EGL的平臺是iOS. Apple 提供?己的EGL API的iOS實現(xiàn),稱為EAGL。
• 5.因為每個窗?系統(tǒng)都有不同的定義,所以EGL提供基本的不透明類型—EGLDisplay, 這 個類型封裝了所有系統(tǒng)相關(guān)性,用于和原生窗?系統(tǒng)接?。

OpenGL ES圖片濾鏡、視頻濾鏡
圖片濾鏡

• 1.獲取圖片中的每一個像素點
• 2.像素點做飽和度處理
• 3.得到處理后的新顏色
• 4.將新的顏色放入幀緩存區(qū)
• 5.進(jìn)行顯示

視頻濾鏡
原理以及處理方式是一模一樣的(GLSL代碼)。
視頻同樣是一幀一幀處理，每一幀就是一張圖片。

• 1.獲得視頻MP4文件。
• 2.獲取h264(視頻壓縮文件) 。
• 3.將視頻解碼(解壓)。還原成一幀一幀的圖片。
• 4.針對每一幀圖片進(jìn)行處理。