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、常量颜色：黑色

了解 OpenGL ES 和GLKit常见API

1. OpenGL ES

OpenGL ES 图形管道

顶点着色器

图元装配、光栅化

片元着色器

逐片段操作

OpenGL ES的应用

EGL(Embedded Graphics Library)

2. GLKit 简述

GLKit 常用API

GLKit 纹理加载

GLKit OpenGL ES视图渲染 API

你可能感兴趣的:(了解 OpenGL ES 和GLKit常见API)