OpenGL学习（八）-- OpenGL ES 初探（上）

个人 OpenGL 专题学习目录，但愿和你们一块儿学习交流进步！

• OpenGL学习（一）-- 术语了解
• OpenGL学习（二）-- Xcode 搭建 OpenGL 环境
• OpenGL学习（三）-- OpenGL 基础渲染
• OpenGL学习（四）-- 正面&背面剔除和深度测试
• OpenGL学习（五）-- 裁剪与混合
• OpenGL学习（六）-- 基础纹理
• OpenGL学习（七）-- 基础变化综合练习实践总结
• OpenGL学习（八）-- OpenGL ES 初探（上）
• OpenGL学习（九）-- OpenGL ES 初探（下）GLKit
• OpenGL学习（十）-- 着色语言 GLSL 语法介绍
• OpenGL学习（十一）-- 用 GLSL 实现加载图片
• OpenGL学习（十二）-- OpenGL ES 纹理翻转的策略对比

---

1、简介

在以前，我写了几篇学习 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 ES 和 OpenGL 学习起来大体同样，有不少重复的知识点。整个渲染管线流程如上图，仍是之前那一套，具体流程能够看我以前写过的 《OpenGL基础渲染》。因此这篇文章就再也不赘述渲染流程，而是着重介绍 OpenGL ES 中几个重要的步骤。 可编程管线中，咱们只能操做 顶点着色器 和 片元着色器。

2、关键步骤介绍

一、顶点着色器

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

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

顶点着色器 的 输入 包括：

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

图形表述以下图所示：

2）顶点着色器的业务：

• 一、经过矩阵变换位置
• 二、计算光照公式生成逐顶点颜色
• 三、生成或变换纹理坐标

此外，由于顶点着色器由应用程序规定，因此它能够用于执行自定义计算，实施新的变换、照明或者较传统的固定功能管线所不容许的基于顶点的效果。

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 是并行的，因此会并行把全部顶点都执行了。

二、图元装配

顶点着色器以后，OpenGL ES 3.0 图形管线的下一阶段是 图元装配。

图元（Primitive）： 是三角形、直线或者点精灵等几何对象。

图元装配： 将顶点数据计算组合成一个个图元，在这个阶段会执行裁剪、透视分割和 Viewport 变换操做。 在这以后将进⼊ 光栅化 阶段。

三、光栅化

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

四、片元（片断）着色器

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

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

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

图形表述以下图所示：

2）片元着色器的业务：

• 一、计算颜色
• 二、获取纹理值
• 三、往像素点中填充颜色值【纹理值/颜色值】

总结： 它能够用于图片/视频/图形中每一个像素的颜色填充（好比给视频添加滤镜，实际上就是将视频中每一个图片的像素点颜色填充进行修改）。

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 通道传进来的纹理采样器，经过它能够拿到对应的纹理。

五、逐片断操做

片元着色器以后，下一阶段就是 逐片断操做。

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

六、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版》

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