1. OpenGL ES

• OpenGL ES是OpenGL的子集
• 是针对嵌入式设备及移动终端设备的高级3D图形应用程序，例如iOS、Android、Windows等
• OpenGL ES 是跨平台的，不会提供窗口相关方法，需要系统各自提供载体

在本文中，主要讲述的是iOS中的OpenGL ES，OpenGL ES API、OpenGL ES Programming Guide

OpenGL ES渲染流程
下图出自苹果官方文档OpenGL ES as a Client-Server Architecture

image

OpebGL ES的渲染主要分为两部分：CPU和GPU

• CPU部分
  • app代码通过OpenGL ES API，会调度OpenGL ES Framework
  • 通过OpenGL ES client 调度 OpenGL ES server，将顶点数据等传递到GPU
• GPU部分:做一些图形硬件的处理，例如光栅化、显示等

OpenGL ES 图形管道

OpenGL ES 图形管道有以下两种图示，其中原理都是一致的，只是描述方式不同
图示一

image

• API获得顶点数据，将顶点数据从内存中拷贝至顶点缓冲区（显存）
• 拿到数据之后，通过attribute通道传递至顶点着色器，同时，纹理坐标通过Texture通道传递到顶点着色器和片元着色器
• 然后，图元装配，即图元的连接方式，一共有9种，常用的有6种，此步骤将顶点变换为图形
• 光栅化：确定图形与屏幕对应的位置
• 片元/片段/像素着色器：处理对应像素点的颜色值
• 在将处理好的每个像素点的颜色值存储到帧缓存区，然后在显示器中显示
• API：可以通过API操作顶点缓冲区、顶点着色器、纹理坐标、片段着色器

Apple官方图示

来自苹果官方文档OpenGL ES as a Graphics Pipeline

image

• App：提供图元装配顶点信息，图片信息
• Vertex（顶点着色器）：处理顶点 -- 图形变换（旋转、缩放、平移）
• Geometry（图元装配）：图元装配 + 裁剪（超出屏幕部分被裁剪）
• Fragment（片元着色器）：纹理处理 + 雾化处理
• Framebuffer Operation（帧缓冲区）：透明度混合、模板、深度测试；最后在混合，这些操作都是在即将显示时，在帧缓冲区中完成的动作

顶点着色器

简单来说就是处理顶点的着色器程序，如图所示

image

• 输入，有3种方式
  • 通过attribute通道输入顶点数据，提供每个顶点的数据
  • 通过uniform通道输入统一变量，即顶点/片元着色器中使用的不变的数据
  • 采样器：表示顶点着色器使用纹理的特殊统一变量类型
• 输出：经过处理的最终顶点数据，有2种
  • gl_Position，是GLSL 的内建变量，是将处理后的最终顶点数据赋值给它
  • gl_PointSize，是指点的尺寸，即可以在顶点着色器中修改每个点的大小，使用率较低

顶点着色器处理的业务

• 矩阵变换位置
• 计算光照公式生成逐顶点颜色（也可以片元着色器）
• 生成/变换纹理坐标：片元着色器是没有办法传入属性即attribute的，可以通过顶点着色器桥接，间接将纹理坐标属性传递到片元着色器

顶点着色器GLSL代码示例

• attribute、uniform 表示client与server之间的通道
• 其中的vec4、vec2都是向量类型，表示四维向量和二维向量
• mat4：4*4矩阵
• varying是修饰符：通过varying将纹理坐标传入到片元着色器
• lowp：低精读
• main中的操作
  • 实现了纹理坐标的桥接
  • 实现了顶点旋转矩阵的相乘：列向量 与 列矩阵 相乘，得到旋转后的顶点坐标
  • 将上述得到的顶点坐标，赋值给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; 
}

图元装配、光栅化

• 图元装配：将顶点数据计算成一个个图元
• 光栅化：将图元转化为一组二维片段的过程，主要是由于屏幕是2D的，所以转换的像素点也是二维的

片元着色器

下图表示片元着色器中有哪些输入和输出

image

• 输入同顶点着色器一样，有3种方式
  • 由顶点着色器桥接传递过来的纹理坐标等
  • 通过uniform通道输入统一变量，即顶点/片元着色器中使用的不变的数据
  • 采样器：表示顶点着色器使用纹理的特殊统一变量类型，例如纹理就是通过采样器传递
• 输出：某个像素点经过片元着色器处理后的结果

片元着色器业务

• 计算颜色
• 获取纹理值
• 往像素点中填充颜色值（纹理值/颜色值）

片元着色器GLSL代码示例

• varying：必须和顶点着色器中一模一样，这样才能传递纹理坐标
• sampler2D 采样器类型
• texture2D(纹理采样器，纹理坐标)：获取对应位置/坐标的颜色值，简称获得纹素
• gl_FragColor（内建变量）：将最终的颜色值赋值给它

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

总结

• 顶点着色器、片元着色器都是代码段，类似于iOS中的函数/方法，有返回值
  • 顶点着色器的返回值会被复制给gl_Position
  • 片元着色器的结果会赋值给gl_fragColor
• 这两个返回值都属于GLSL中的内建变量，是封装好的，直接将数据赋值给它即可
  • gl_Position：顶点着色器中某一个顶点经过一系列处理后得到的结果
  • gl_fragColor：经过片元着色器对某一个像素点来进行处理之后的结果

逐片段操作

这个过程都是GPU内部处理的，开发者并不需要关心，将处理好的数据存储到帧缓存区，最后读取帧缓存区将图形显示到屏幕上

OpenGL ES的应用

图片滤镜

• 获取图片中的每一个像素点
• 像素点做饱和度处理
• 得到新的颜色
• 将新的颜色翻入帧缓存区
• 最后进行显示

视频滤镜
原理以及处理方式是一样的（GLSL代码），视频也是一帧一帧处理的，而一帧就是一张图片

• 获得视频MP4文件
• 拿到h264（视频压缩文件） -
• 将视频解码（解压），还原成一帧一帧的图片
• 针对一帧一帧的图片进行处理

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, 这 个类型封装了所有系统相关性,用于和原生窗⼝系统接⼝

2. GLKit 简述

先了解GLKit框架前，先附上GLKit的苹果官方文档GLKitAPI

GLKit框架的设计目的是为了简化基于OpenGL/OpenGL ES的应用开发，加快了OpenGL/OpenGL ES应用程序开发

GLKit功能

• 提供高性能的数学运算（Math libraries）：提供常用的向量，四元数和矩阵运算。
• 加载纹理（Texture loading）：允许加载各种纹理，且可以后台加载，通过GLKTextureLoader类来加载
• 提供常见的着色器（effect）：包含以下3种着色器
  • GLKBaseEffect
  • GLKReflectionMapEffect
  • GLKSkyboxEffect
• 提供视图视图以及视图控制器：GLKView和GLKViewController
  • GLKView：提供绘制场所，继承自UIView
  • GLKViewController：⽤于绘制视图内容的管理与呈现，继承自UIViewController)

使用GLKit视图呈现OpenGL ES 内容

下图来自Apple官方文档Drawing with OpenGL ES and GLKit

image

通过GLKit展示图片，主要有以下三个步骤

• GLKView的创建和配置
• 使用GLKView对象绘制图形，并存储到帧缓存区
• 从帧缓存区中读取数据，显示到屏幕上

GLKit 常用API

GLKit 纹理加载

GLKTextureInfo 创建OpenGL 纹理信息

常见的属性如表所示

属性	说明
name	OpenGL 上下⽂文中纹理名称
target	纹理绑定的目标
height	加载的纹理高度
width	加载纹理的宽度
textureOrigin	加载纹理中的原点位置
alphaState	加载纹理中alpha分量状态
containsMipmaps	布尔值,加载的纹理是否包含mip贴图

GLTextureLoader 简化从各种资源⽂件中加载纹理

• 初始化

初始化方法	说明
- initWithSharegroup:	初始化⼀个新的纹理加载到对象中
- initWithShareContext:	初始化一个新的纹理加载对象

• 从文件中加载处理

从文件中加载处理方法	说明
+ textureWithContentsOfFile:options:errer:	从⽂件加载2D纹理图像并从数据中创建新的纹理
- textureWithContentsOfFile:options:queue:completionHandler:	从⽂件中异步加载2D纹理图像,并根据数据创建新纹理

• 从URL加载处理

从URL加载纹理方法	说明
- textureWithContentsOfURL:options:error:	从URL加载2D纹理图像并从数据创建新纹理
- textureWithContentsOfURL:options:queue:completionHandler:	从URL异步加载2D纹理图像,并根据数据创建新纹理

• 从内存中表示创建纹理

从内存中表示创建纹理方法	说明
+ textureWithContentsOfData:options:errer:	从内存空间加载2D纹理图像,并根据数据创建新纹理
- textureWithContentsOfData:options:queue:completionHandler:	从内存空间异步加载2D纹理图像,并从数据中创建新纹理

• 从CGImages创建纹理

从CGImages创建纹理方法	说明
- textureWithCGImage:options:error:	从Quartz图像 加载2D纹理图像并从数据创建新纹理
- textureWithCGImage:options:queue:completionHandler:	从Quartz图像异步加载2D纹理图像,并根据数据创建新纹理

• 从URL加载多维创建纹理

从URL加载多维创建纹理方法	说明
+ cabeMapWithContentsOfURL:options:errer:	从单个URL加载⽴立⽅方体贴图纹理图像,并根据数据创建新纹理
- cabeMapWithContentsOfURL:options:queue:completionHandler:	从单个URL异步加载⽴方体贴图纹理图像,并根据数据创建新纹理

• 从文件加载多维数据创建纹理

文件加载多维数据创建纹理方法	说明
+ cubeMapWithContentsOfFile:options:errer:	从单个文件加载⽴方体贴图纹理对象,并从数据中创建新纹理
- cubeMapWithContentsOfFile:options:queue:completionHandler:	从单个⽂件异步加载⽴方体贴图纹理对象,并从数据中创建新纹理
+ cubeMapWithContentsOfFiles:options:errer:	从⼀系列文件中加载⽴方体贴图纹理图像,并从数据中创建新纹理
-cubeMapWithContentsOfFiles:options:options:queue:completionHandler:	从⼀系列⽂件异步加载⽴方体贴图纹理图像,并从数据中创建新纹理

GLKit OpenGL ES视图渲染 API

GLKView
使⽤OpenGL ES 绘制内容的视图默认实现，常用API及属性如下所示

• 初始化视图

属性	说明
- initWithFrame:context:	初始化新视图

• 设置代理

属性	说明
delegate	视图的代理

• 配置帧缓存区对象

属性	说明
配置帧缓存区对象	drawableColorFormat	颜⾊渲染缓存区格式
drawableDepthFormat	深度渲染缓存区格式
drawableStencilFormat	模板渲染缓存区的格式
drawableMultisample	多重采样缓存区的格式

-帧缓存区属性

属性	说明
drawableHeight	底层缓存区对象的⾼度(以像素为单位)
drawableWidth	底层缓存区对象的宽度(以像素为单位)

• 绘制视图的内容

属性	说明
context	绘制视图内容时使⽤用的OpenGL ES 上下⽂文
drawableStencilFormat	将底层FrameBuffer 对象绑定到OpenGL ES
enableSetNeedsDisplay	布尔值,指定视图是否响应使得视图内容⽆效的消息
snapshot	绘制视图内容并将其作为新图像对象返回

方法	说明
- bindDrawable	深度渲染缓存区格式
- display	⽴即重绘视图内容

• 删除视图FrameBuffer对象

方法	说明
- deleteDrawable	删除与视图关联的可绘制对象

GLKViewDelegate ⽤于GLKView 对象回调方法

• 绘制视图的内容（必须实现代理！！！！）

属性	说明
- glkView:drawInRect:	绘制视图内容 (必须实现代理)

GLKViewController
管理OpenGL ES 渲染循环的视图控制器，常用的API如下

• 更新

方法	说明
- (void) update	更新视图内容
- (void) glkViewControllerUpdate:	更新视图控制器显示

• 配置帧速率

属性	说明
preferredFramesPerSecond	视图控制器调⽤视图以及更新视图内容的速率
framesPerSencond	视图控制器调⽤视图以及更新其内容的实际速率

• 配置GLKViewDelegate代理

属性	说明
delegate	视图控制器的代理

• 控制帧更新

resumeOnDidBecomeActive 布尔值,当前程序变为活动状态时视图控制是否⾃自动恢复呈现循环

属性	说明
paused	布尔值,渲染循环是否已暂停
pausedOnWillResignActive	布尔值,当前程序重新激活活动状态时视图控制器器是否自动暂停渲染循环
resumeOnDidBecomeActive	布尔值,当前程序变为活动状态时视图控制是否⾃自动恢复呈现循环

• 获取有关View 更新信息

属性	说明
frameDisplayed	视图控制器自创建以来发送的帧更新数
timeSinceFirstResume	自视图控制器第⼀次恢复发送更新事件以来经过的时间量
timeSinceLastResume	自上次视图控制器恢复发送更新事件以来更新的时间量
timeSinceLastUpdate	自上次视图控制器调⽤委托⽅法以及经过的时间量
timeSinceLastDraw	⾃上次视图控制器调⽤委托⽅法以及经过的时间量

**GLKViewControllerDelegate **
渲染循环回调⽅方法

• 处理理更更新事件

回调方法	说明
- glkViewControllerUpdate:	在显示每个帧之前调⽤，类似OpenGL中RenderScene函数

• 暂停/恢复通知

回调方法	说明
- glkViewController : willPause:	在渲染循环暂停或恢复之前调⽤

GLKBaseEffect

一种简单光照/着色系统,⽤于基于着⾊器的OpenGL渲染

• 命名Effect

属性	说明
label	给Effect(效果)命名

• 配置模型视图转换

属性	说明
transform	绑定效果时应⽤于顶点数据的模型视图,投影和纹理变换

• 配置光照效果

属性	说明
lightingType	用于计算每个片段的光照策略,GLKLightingType

GLKLightingType枚举	说明
GLKLightingTypePerVertex	表示在三角形中每个顶点执⾏光照计算,然后在三角形进⾏插值
GLKLightingTypePerPixel	表示光照计算的输⼊在三角形内插入,并且在每个片段执行光照计算

• 配置光照

属性	说明
lightModelTwoSided	布尔值,表示为基元的两侧计算光照
material	计算渲染图元光照使⽤的材质属性
lightModelAmbientColor	环境颜⾊,应⽤效果渲染的所有图元.
light0	场景中第⼀个光照属性
light1	场景中第⼆个光照属性
light2	场景中第三个光照属性

• 配置纹理

属性	说明
texture2d0	第一个纹理属性
texture2d1	第⼆个纹理属性
textureOrder	纹理应用于渲染图元的顺序

• 配置雾化

属性	说明
fog	应⽤于场景的雾属性

• 配置颜色信息

属性	说明
colorMaterialEnable	布尔值,表示计算光照与材质交互时是否使⽤颜⾊顶点属性
useConstantColor	布尔值,指示是否使用常量颜⾊
constantColor	不提供每个顶点颜色数据时使⽤常量颜⾊

• 准备绘制效果

方法	说明
- prepareToDraw	准备渲染效果

注意
1、GLKit中最多只有3个光照，2个纹理
2、常量颜色：黑色