一、了解OpenGL ES

1、简介

OpenGL ES (OpenGL for Embedded Systems) 是以⼿持和嵌⼊式为⽬标的⾼级3D图形应
⽤程序编程接⼝(API). OpenGL ES 是⽬前智能⼿机中占据统治地位的图形API.⽀持的平
台: iOS, Andriod , BlackBerry ,bada ,Linux ,Windows

• OpenGL ES是OpenGL的简化版本，它消除了冗余功能，提供了⼀个既易于学习⼜更易于
  在移动图形硬件中实现的库
• OpenGL ES是针对嵌入式设备及移动终端设备的高级3D图形应用程序，例如iOS、Android、Windows等
• OpenGL ES 是跨平台的，不会提供窗口相关方法，需要系统各自提供载体

2、OpenGL ES 的版本介绍

OpenGL ES 1.X :针对固定功能流⽔管线硬件
OpenGL ES 2.X :针对可编程流⽔管线硬件
OpenGL ES 3.X :OpenGL ES 2.0的扩展

3、OpenGL ES渲染流程

之前学习OpenGL的时候也提到过：

• 在cpu中的操作：
  app通过OpenGL ES的API，会调度OpenGL ES Framework；
  通过OpenGL ES Client 调度 OpenGL ES Server，将图片渲染的相关顶点数据等传递给GPU来处理；
• 在gpu中的操作：
  将Client传递过来的数据，交由相应的着色器去处理，最终显示到屏幕上；

4、OpenGL ES 图形管道

image.png

• 我们可以通过调用API直接操作 顶点缓冲区、顶点着色器、纹理坐标、片元着色器
• 顶点数据肯定是先存在于内存中，然后再被拷贝进顶点缓冲区的
• 正常流程：通过API调用，把顶点数据从内存拷贝到显存中（为了GPU调用更高效）--->把顶点数据和纹理坐标传入顶点着色器，进行处理（图形变换等操作）--->根据图形连接方式，进行图元装配 --->在GPU中，进行光栅化 --->传入片元着色器，处理每个像素点对应的颜色值 --->处理好的结果，存入帧缓冲区 --->显示到屏幕上

我们再看下官方的图，其实是一个意思。

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

二、详细分析整个流程

1、顶点着色器

顶点着色器中都要干点什么？
0、gl_Position：拿到处理完最终的结果
1、修改gl_PointSize
2、矩阵变换的计算
3、计算光照公式来生成逐顶点的颜色
4、生成或者变换纹理坐标，然后传给片元（因为片元无法直接接受属性传来的参数，通过顶点着色器桥接一下）

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

举例：（注意：vsh文件不能写中文）

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将纹理坐标传入到片元着色器
  lowp：低精读
*/  
/*
    实现了纹理坐标的桥接
    实现了顶点旋转矩阵的相乘：列向量 与 列矩阵 相乘，得到旋转后的顶点坐标
    将上述得到的顶点坐标，赋值给gl_Position
*/

2、图元装配

图元：点,线,三⻆形等

图元装配：将顶点数据计算成⼀个个图元。在这个阶段会执⾏裁剪、透视分割和视口变换操作。

这个阶段，开发者是无法进行编程的。图元装配完成交给下一步：光栅化

3、光栅化

光栅化就是将图元转化成⼀组⼆维⽚段的过程。（为什么是二维片段？因为我们的屏幕就是二维的）

这个阶段，开发者是无法进行编程的。在这个阶段绘制对应的图元(点/线/三⻆形)，光栅化的结果交由片元着色器进行处理。

4、片元着色器

片元着色器又是干嘛的呢？
0、gl_FragColor 是最后要拿到结果
1、计算每个像素点的颜色
2、获取图片中对应像素的纹理值
3、往像素点中填充纹理或者颜色

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

举例：（注意：fsh文件不能写中文）

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

如果有1000个像素点，就执行1000次片元着色器。那么如何考虑性能问题呢？

• 片元着色器是GPU执行的 能够实现真正的高并发，所以并不需要考虑类似cpu上的性能问题

5、逐片段操作

这个阶段也是我们无法操作编程的。

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

三、了解EGL、EAGL

我们知道，OpenGL ES 命令需要渲染上下⽂和绘制表⾯才能完成图形图像的绘制。但是，OpenGL ES API 并没有提供如何创建渲染上下⽂或者上下⽂如何连接到原⽣窗⼝系统。

• 渲染上下⽂: 存储相关OpenGL ES 状态.
• 绘制表⾯: 是⽤于绘制图元的表⾯,它指定渲染所需要的缓存区类型,例如颜⾊缓存区,深度缓冲区和模板缓存区.

EGL (Embedded Graphics Library )：是Khronos渲染API(如OpenGL ES) 和原⽣窗⼝系统之间的接⼝。但是iOS虽然支持OpenGL ES，但是不支持EGL。

EAGL：因为iOS平台不支持EGL。于是 Apple 提供⾃⼰的EGL API的iOS实现，称为EAGL。