OpenGL ES初探（上）

一、简介

在之前，我写了几篇学习 OpenGL 的文章，大家有兴趣的可以去看一下，在学习了 OpenGL 的基础上，现在再来学习一下它的简化版本—— OpenGL ES。

OpenGL ES（OpenGL for Embedded Systems）是以手持和嵌⼊式设备为⽬标的⾼级 3D 图形应⽤程序编程接口（API）。 OpenGL ES 是目前智能手机中占据统治地位的图形 API。支持的平台包括：iOS，Andriod，BlackBerry，bada，Linux 和 Windows，它还是基于浏览器的 3D 图形 Web 标准WebGL 的基础。

OpenGL ES 是 OpenGL 的简化版本，它消除了冗余功能，提供了一个既易于学习又更易于在移动图形硬件中实现的库。OpenGL ES允许应⽤程序利⽤底层图形处理器的强大功能。iOS 设备上的 GPU 可以执行复杂的 2D 和 3D 绘图，以及最终图像中每个像素的复杂着色计算。

OpenGl渲染流程.png

简单的来说，OpenGL ES 和 OpenGL 学习起来大致一样，有很多重复的知识点。整个渲染管线流程如上图，还是以前那一套，具体流程可以看我之前写过的 《OpenGL基础渲染》。所以这篇文章就不再赘述渲染流程，而是着重介绍 OpenGL ES 中几个重要的步骤。
可编程管线中，我们只能操作 顶点着色器 和 片元着色器。

二、关键步骤介绍

1、顶点着色器

1）顶点着色器的输入输出：

顶点着色器 实现了顶点操作的通用可编程方法。

顶点着色器 的 输入 包括：

• 着色器程序 —— 描述顶点上执⾏操作的顶点着色器程序源代码（GLSL代码）或者可执行⽂文件。
• 顶点着色器输入（或者属性Attributes）—— 用顶点数组提供的每个顶点的数据。
• 统一变量（uniform）—— 顶点（或者片段）着色器使用的不变数据（例如旋转矩阵）。
• 采样器 —— 代表顶点着色器使用纹理的特殊统一变量类型。

图形表述如下图所示：

OpenGL ES顶点着色器.png

2）顶点着色器的业务：

1、通过矩阵变换位置
2、计算光照公式生成逐顶点颜色
3、生成或变换纹理坐标
此外，因为顶点着色器由应用程序规定，所以它可以用于执行自定义计算，实施新的变换、照明或者较传统的固定功能管线所不允许的基于顶点的效果。

3）GLSL 代码的简单认识：

格式：通道修饰符 类型 变量名

attribute vec4 position;
attribute vec2 textCoordinate;
uniform mat4 rotateMatrix;

• attribute 和 uniform 对应 通道修饰符 ，
  分别是 attribute属性通道 和 uniform 通道。
• vec4、vec2 和 mat4 对应 类型，
  vec4 代表 4 维向量，
  vec2 代表 2 维向量，
  mat4 代表 4 行 4 列的矩阵类型。
• position 和 textCoordinate 对应 变量名，可以随便起。

varying lowp vec2 varyTextCoord;

varying 代表的也是一种通道，
lowp 是一个精度，低精度、高精度等，可以不写。

• 这里 position 声明的是 顶点坐标，
  textCoordinate 声明的是 纹理坐标。
  rotateMatrix 声明的是个 旋转矩阵。

4）顶点着色器的代码案例：

attribute vec4 position;
attribute vec2 textCoordinate;
uniform mat4 rotateMatrix;
varying lowp vec2 varyTextCoord;
void main()
{
// 把textCoordinate交给varyTextCoord，就可以把纹理坐标传递到片元着色器里面去。
    varyTextCoord = textCoordinate;

    vec4 vPos = position;
    vPos = vPos * rotateMatrix;// 让每一个顶点都和旋转矩阵相乘
    
    gl_Position = vPos;// gl_Position是一个内建变量，是vec4类型的，必须给它赋值。
}

GPU 来执行上述代码，有几个顶点就会执行其次，GPU 是并行的，所以会并行把所有顶点都执行了。

2、图元装配

顶点着色器之后，OpenGL ES 3.0 图形管线的下一阶段是 图元装配。
图元（Primitive）：是三角形、直线或者点精灵等几何对象。图元装配：将顶点数据计算组合成一个个图元，在这个阶段会执行裁剪、透视分割和 Viewport 变换操作。
在这之后将进⼊ 光栅化 阶段。

3、光栅化

在此阶段绘制对应的图元（点精灵、直线或者三角形）。光栅化是将图元转化为一组二维片段的过程，然后这些片段由片元着色器处理。这些二维片段代表着可在屏幕上绘制的像素。 光栅化阶段.png

4、片元（片段）着色器

1）片元着色器的输入输出：

片元/⽚段着色器 的 输入 包括：

• 着色器程序 —— 描述⽚段上执⾏操作的片元着⾊器程序源代码/可执行⽂件。
• 输入变量—— 光栅化单元用插值为每个片段生成的顶点着⾊器输出。
• 统一变量（uniform）—— 顶点（或者片段）着色器使用的不变数据。
• 采样器 —— 代表⽚元着色器使⽤纹理的特殊统一变量类型。

图形表述如下图所示：

ES 片元着色器.png

2）片元着色器的业务：

1、计算颜色
2、获取纹理值
3、往像素点中填充颜色值【纹理值/颜色值】
总结：它可以用于图片/视频/图形中每个像素的颜色填充（比如给视频添加滤镜，实际上就是将视频中每个图片的像素点颜色填充进行修改）。

3）片元着色器的代码案例：

varying lowp vec2 varyTextCoord;
uniform sampler2D colorMap;
void main()
{
    // texture2D(纹理采样器, 纹理坐标); 为了取得纹素（纹理对应坐标上的颜色值），比如取到了一个rgba四维变量
    gl_FragColor = texture2D(colorMap, varyTextCoord);
}

顶点着色器 里的 varying lowp vec2 varyTextCoord;
和 片元着色器 里的 varying lowp vec2 varyTextCoord;
必须定义的一模一样才行，包括通道、精度、类型和变量名都要一致，这样才能从顶点着色器传进来。
uniform sampler2D colorMap 是由 uniform 通道传进来的纹理采样器，通过它可以拿到对应的纹理。

5、逐片段操作

片元着色器之后，下一阶段就是 逐片段操作。

逐片段操作.png

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

6、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，这个类型封装了所有统相关性，⽤于和原⽣生窗⼝系统接口。

至此，我们完成了 OpenGL ES 的初探（上）。后面我还会继续分享深入学习 OpenGL ES 的学习成果给大家，点击进入
《OpenGL ES初探（下）—— GLKit》

以上的总结参考了并部分摘抄了以下文章，非常感谢以下作者的分享！：
《OPENGL ES 3.0编程指南 原书第2版》

转载请备注原文出处，不得用于商业传播——凡几多