1. OpenGL ES

• OpenGL ES是OpenGL的子集
• 是針對(duì)嵌入式設(shè)備及移動(dòng)終端設(shè)備的高級(jí)3D圖形應(yīng)用程序，例如iOS泳秀、Android悦析、Windows等
• OpenGL ES 是跨平臺(tái)的鼓拧，不會(huì)提供窗口相關(guān)方法卦睹，需要系統(tǒng)各自提供載體

在本文中逗物，主要講述的是iOS中的OpenGL ES，OpenGL ES API吕嘀、OpenGL ES Programming Guide

OpenGL ES渲染流程
下圖出自蘋(píng)果官方文檔OpenGL ES as a Client-Server Architecture

image

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

• CPU部分
  • app代碼通過(guò)OpenGL ES API违寞，會(huì)調(diào)度OpenGL ES Framework
  • 通過(guò)OpenGL ES client 調(diào)度 OpenGL ES server，將頂點(diǎn)數(shù)據(jù)等傳遞到GPU
• GPU部分:做一些圖形硬件的處理偶房，例如光柵化趁曼、顯示等

OpenGL ES 圖形管道

OpenGL ES 圖形管道有以下兩種圖示，其中原理都是一致的蝴悉，只是描述方式不同
圖示一

image

• API獲得頂點(diǎn)數(shù)據(jù)彰阴，將頂點(diǎn)數(shù)據(jù)從內(nèi)存中拷貝至頂點(diǎn)緩沖區(qū)（顯存）
• 拿到數(shù)據(jù)之后瘾敢，通過(guò)attribute通道傳遞至頂點(diǎn)著色器拍冠，同時(shí)，紋理坐標(biāo)通過(guò)Texture通道傳遞到頂點(diǎn)著色器和片元著色器
• 然后簇抵，圖元裝配庆杜，即圖元的連接方式，一共有9種碟摆，常用的有6種晃财，此步驟將頂點(diǎn)變換為圖形
• 光柵化：確定圖形與屏幕對(duì)應(yīng)的位置
• 片元/片段/像素著色器：處理對(duì)應(yīng)像素點(diǎn)的顏色值
• 在將處理好的每個(gè)像素點(diǎn)的顏色值存儲(chǔ)到幀緩存區(qū)，然后在顯示器中顯示
• API：可以通過(guò)API操作頂點(diǎn)緩沖區(qū)、頂點(diǎn)著色器断盛、紋理坐標(biāo)罗洗、片段著色器

Apple官方圖示

來(lái)自蘋(píng)果官方文檔OpenGL ES as a Graphics Pipeline

image

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

頂點(diǎn)著色器

簡(jiǎn)單來(lái)說(shuō)就是處理頂點(diǎn)的著色器程序淑倾，如圖所示

image

• 輸入，有3種方式
  • 通過(guò)attribute通道輸入頂點(diǎn)數(shù)據(jù)征椒，提供每個(gè)頂點(diǎn)的數(shù)據(jù)
  • 通過(guò)uniform通道輸入統(tǒng)一變量娇哆，即頂點(diǎn)/片元著色器中使用的不變的數(shù)據(jù)
  • 采樣器：表示頂點(diǎn)著色器使用紋理的特殊統(tǒng)一變量類(lèi)型
• 輸出：經(jīng)過(guò)處理的最終頂點(diǎn)數(shù)據(jù)，有2種
  • gl_Position勃救，是GLSL 的內(nèi)建變量迂尝，是將處理后的最終頂點(diǎn)數(shù)據(jù)賦值給它
  • gl_PointSize，是指點(diǎn)的尺寸剪芥，即可以在頂點(diǎn)著色器中修改每個(gè)點(diǎn)的大小垄开，使用率較低

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

• 矩陣變換位置
• 計(jì)算光照公式生成逐頂點(diǎn)顏色（也可以片元著色器）
• 生成/變換紋理坐標(biāo)：片元著色器是沒(méi)有辦法傳入屬性即attribute的，可以通過(guò)頂點(diǎn)著色器橋接税肪，間接將紋理坐標(biāo)屬性傳遞到片元著色器

頂點(diǎn)著色器GLSL代碼示例

• attribute溉躲、uniform 表示client與server之間的通道
• 其中的vec4、vec2都是向量類(lèi)型益兄，表示四維向量和二維向量
• mat4：4*4矩陣
• varying是修飾符：通過(guò)varying將紋理坐標(biāo)傳入到片元著色器
• lowp：低精讀
• 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; 
}

圖元裝配净捅、光柵化

• 圖元裝配：將頂點(diǎn)數(shù)據(jù)計(jì)算成一個(gè)個(gè)圖元
• 光柵化：將圖元轉(zhuǎn)化為一組二維片段的過(guò)程疑枯，主要是由于屏幕是2D的，所以轉(zhuǎn)換的像素點(diǎn)也是二維的

片元著色器

下圖表示片元著色器中有哪些輸入和輸出

image

• 輸入同頂點(diǎn)著色器一樣蛔六，有3種方式
  • 由頂點(diǎn)著色器橋接傳遞過(guò)來(lái)的紋理坐標(biāo)等
  • 通過(guò)uniform通道輸入統(tǒng)一變量荆永，即頂點(diǎn)/片元著色器中使用的不變的數(shù)據(jù)
  • 采樣器：表示頂點(diǎn)著色器使用紋理的特殊統(tǒng)一變量類(lèi)型，例如紋理就是通過(guò)采樣器傳遞
• 輸出：某個(gè)像素點(diǎn)經(jīng)過(guò)片元著色器處理后的結(jié)果

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

• 計(jì)算顏色
• 獲取紋理值
• 往像素點(diǎn)中填充顏色值（紋理值/顏色值）

片元著色器GLSL代碼示例

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

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

總結(jié)

• 頂點(diǎn)著色器液兽、片元著色器都是代碼段骂删，類(lèi)似于iOS中的函數(shù)/方法，有返回值
  • 頂點(diǎn)著色器的返回值會(huì)被復(fù)制給gl_Position
  • 片元著色器的結(jié)果會(huì)賦值給gl_fragColor
• 這兩個(gè)返回值都屬于GLSL中的內(nèi)建變量，是封裝好的宁玫，直接將數(shù)據(jù)賦值給它即可
  • gl_Position：頂點(diǎn)著色器中某一個(gè)頂點(diǎn)經(jīng)過(guò)一系列處理后得到的結(jié)果
  • gl_fragColor：經(jīng)過(guò)片元著色器對(duì)某一個(gè)像素點(diǎn)來(lái)進(jìn)行處理之后的結(jié)果

逐片段操作

這個(gè)過(guò)程都是GPU內(nèi)部處理的粗恢，開(kāi)發(fā)者并不需要關(guān)心，將處理好的數(shù)據(jù)存儲(chǔ)到幀緩存區(qū)欧瘪，最后讀取幀緩存區(qū)將圖形顯示到屏幕上

OpenGL ES的應(yīng)用

圖片濾鏡

• 獲取圖片中的每一個(gè)像素點(diǎn)
• 像素點(diǎn)做飽和度處理
• 得到新的顏色
• 將新的顏色翻入幀緩存區(qū)
• 最后進(jìn)行顯示

視頻濾鏡
原理以及處理方式是一樣的（GLSL代碼）适滓，視頻也是一幀一幀處理的，而一幀就是一張圖片

• 獲得視頻MP4文件
• 拿到h264（視頻壓縮文件） -
• 將視頻解碼（解壓）恋追，還原成一幀一幀的圖片
• 針對(duì)一幀一幀的圖片進(jìn)行處理

EGL(Embedded Graphics Library)

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

2. GLKit 簡(jiǎn)述

先了解GLKit框架前苦囱，先附上GLKit的蘋(píng)果官方文檔GLKitAPI

GLKit框架的設(shè)計(jì)目的是為了簡(jiǎn)化基于OpenGL/OpenGL ES的應(yīng)用開(kāi)發(fā)嗅绸，加快了OpenGL/OpenGL ES應(yīng)用程序開(kāi)發(fā)

GLKit功能

• 提供高性能的數(shù)學(xué)運(yùn)算（Math libraries）：提供常用的向量，四元數(shù)和矩陣運(yùn)算撕彤。
• 加載紋理（Texture loading）：允許加載各種紋理鱼鸠，且可以后臺(tái)加載，通過(guò)GLKTextureLoader類(lèi)來(lái)加載
• 提供常見(jiàn)的著色器（effect）：包含以下3種著色器
  • GLKBaseEffect
  • GLKReflectionMapEffect
  • GLKSkyboxEffect
• 提供視圖視圖以及視圖控制器：GLKView和GLKViewController
  • GLKView：提供繪制場(chǎng)所羹铅，繼承自UIView
  • GLKViewController：?于繪制視圖內(nèi)容的管理與呈現(xiàn)蚀狰，繼承自UIViewController)

使用GLKit視圖呈現(xiàn)OpenGL ES 內(nèi)容

下圖來(lái)自Apple官方文檔Drawing with OpenGL ES and GLKit

image

通過(guò)GLKit展示圖片，主要有以下三個(gè)步驟

• GLKView的創(chuàng)建和配置
• 使用GLKView對(duì)象繪制圖形职员，并存儲(chǔ)到幀緩存區(qū)
• 從幀緩存區(qū)中讀取數(shù)據(jù)麻蹋，顯示到屏幕上

GLKit 常用API

GLKit 紋理加載

GLKTextureInfo 創(chuàng)建OpenGL 紋理信息

常見(jiàn)的屬性如表所示

GLTextureLoader 簡(jiǎn)化從各種資源?件中加載紋理

• 初始化

• 從文件中加載處理

• 從URL加載處理

• 從內(nèi)存中表示創(chuàng)建紋理

• 從CGImages創(chuàng)建紋理

• 從URL加載多維創(chuàng)建紋理

• 從文件加載多維數(shù)據(jù)創(chuàng)建紋理

GLKit OpenGL ES視圖渲染 API

GLKView
使?OpenGL ES 繪制內(nèi)容的視圖默認(rèn)實(shí)現(xiàn)，常用API及屬性如下所示

• 初始化視圖

• 設(shè)置代理

• 配置幀緩存區(qū)對(duì)象

-幀緩存區(qū)屬性

• 繪制視圖的內(nèi)容

• 刪除視圖FrameBuffer對(duì)象

GLKViewDelegate ?于GLKView 對(duì)象回調(diào)方法

• 繪制視圖的內(nèi)容（必須實(shí)現(xiàn)代理：盖小０缡凇！Ｗǚ尽）

GLKViewController
管理OpenGL ES 渲染循環(huán)的視圖控制器刹勃，常用的API如下

• 更新

• 配置幀速率

• 配置GLKViewDelegate代理

• 控制幀更新

resumeOnDidBecomeActive 布爾值,當(dāng)前程序變?yōu)榛顒?dòng)狀態(tài)時(shí)視圖控制是否?自動(dòng)恢復(fù)呈現(xiàn)循環(huán)

• 獲取有關(guān)View 更新信息

**GLKViewControllerDelegate **
渲染循環(huán)回調(diào)?方法

• 處理理更更新事件

• 暫停/恢復(fù)通知

GLKBaseEffect

一種簡(jiǎn)單光照/著色系統(tǒng),?于基于著?器的OpenGL渲染

• 命名Effect

• 配置模型視圖轉(zhuǎn)換

• 配置光照效果

• 配置光照

• 配置紋理

• 配置霧化

• 配置顏色信息

• 準(zhǔn)備繪制效果

注意
1荔仁、GLKit中最多只有3個(gè)光照，2個(gè)紋理
2芽死、常量顏色：黑色