OpenGL ES(OpenGL for Embedded Systems) 是以手持和嵌入式为目标的高级3D图形应用程序编程接口(API). OpenGL ES 是目前智能⼿机中占据统治地位的图形API.支持的平台: iOS, Andriod , BlackBerry ,bada ,Linux ,Windows.

OpenGL ES 开放式图形库(OpenGL的)⽤于可视化的二维和三维数据。它是一个多功能开放标准图形库，支持2D和3D数字内容创建，机械和建筑设计，虚拟原型设计，⻜行模拟，视频游戏等应用程序。您可以使用OpenGL配置3D图形管道并向其提交数据。顶点被变换和点亮，组合成图元，并光栅化以创建2D图像。OpenGL旨在将函数调用转换为可以发送到底层图形硬件的图形命令。由于此底层硬件专用于处理图形命令，因此OpenGL绘图通常⾮常快。
OpenGL ES是OpenGL的简化版本，它消除了冗余功能，提供了⼀个既易于学习⼜更易于在移动图形硬件中实现的库
OpenGL ES是跨平台的，不会提供窗口相关方法，需要系统各自提供载体

OpenGL ES渲染流程
OpenGL ES的渲染主要分为两部分：CPU和GPU

CPU部分

app代码通过OpenGL ES API，会调度OpenGL ES Framework
通过OpenGL ES client 调度 OpenGL ES server，将顶点数据等传递到GPU

GPU部分

做一些图形硬件的处理，例如光栅化、显示等

OpenGL ES 图形管道
API：可以通过API操作顶点缓冲区、顶点着色器、纹理坐标、片段着色器

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

苹果官方图

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

顶点着色器 （vertex shader）

顶点着色器

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

顶点着色器的业务内容：

1. 矩阵变换位置
2. 计算光照公式⽣成逐顶点颜⾊
3. ⽣成/变换纹理坐标

总结: 它可以⽤于执行⾃自定义计算,实施新的变换,照明或者传统的固定功能所不允许 的基于顶点的效果。

顶点着色器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; 
}

图元装配

顶点着⾊器之后,下⼀个阶段就是图元装配.
图元(Primitive): 点,线,三⻆角形等.
图元装配: 将顶点数据计算成⼀个个图元.在这个阶段会执⾏裁剪、透视分割和 Viewport变换操作。
图元类型和顶点索确定将被渲染的单独图元。对于每个单独图元及其对应的顶点，图元装配阶段执行的操作包括:将顶点着⾊器的输出值执⾏裁剪、透视分割、视⼝变换后进⼊入光栅化阶段。

光栅化

将图元转化为一组二维片段的过程，主要是由于屏幕是2D的，所以转换的像素点也是二维的

光栅化

片源着色器（fragment shader）

片源着色器

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

片元着色器的业务内容：
1.计算颜色
2.获取纹理值
3.往像素点中填充颜色值（纹理值/颜色值）

总结: 它可以⽤于图片/视频/图形中每个像素的颜⾊填充(⽐如给视频添加滤镜,实际上就是将视频中每个图⽚的像素点颜⾊填充进行修改.)

片元着色器GLSL代码示例

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

逐片段操作

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

image

• 像素归属测试: 确定帧缓存区中位置(Xw,Yw)的像素⽬前是不是归属于OpenGL ES所 有. 例如,如果一个显示OpenGL ES帧缓存区View被另外一个View 所遮蔽.则窗口系统可以确定被遮蔽的像素不属于OpenGL ES上下文.从而不全显示这些像素.而像素归属测试是OpenGL ES 的⼀部分,它不由开发者开人为控制,⽽是由OpenGL ES内部进⾏.
• 裁剪测试: 裁剪测试确定(Xw,Yw)是否位于作为OpenGL ES状态的⼀部分裁剪矩形范围内.如果该⽚段位于裁剪区域之外,则被抛弃.
• 深度测试: 输⼊片段的深度值进步⽐较,确定⽚段是否拒绝测试
• 混合: 混合将新生成的⽚段颜色与保存在帧缓存的位置的颜色值组合起来.
• 抖动: 抖动可⽤于最⼩化因为使⽤有限精度在帧缓存区中保存颜⾊值⽽产生的伪像.

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