第一节—OpenGL ES简介

本文为L_Ares个人写作，包括图片皆为个人亲自操作，如需转载请表明原文出处。

OpenGL ES是常用于手持式设备和嵌入式系统的高级3D图形应用API。应用于可视化的二维和三维数据，是OpenGL的简化版本，更适用于移动设备的图形绘制。

一、OpenGL ES渲染流程

其实OpenGL ES的渲染流程和OpenGL是相似的，整个框架的渲染流程可见OpenGL合集中的第四节—OpenGL渲染流程。OpenGL ES的渲染也分为客户端和服务端，其客户端主要的操作都是对OpenGL ES的framework进行的操作，而关于着色器的利用则主要是通过服务端完成。简单的流程如下图1.1所示：

1.1.png

OpenGL ES 3.0的图形管线，如下图1.2所示：

1.2.png

图中红色虚线以上的部分是我们可以操控的，或者说可以接触的，而红色虚线以下的部分则是OpenGL ES内部来完成的，是不需要也不能够被我们控制的。

这是一个数据变换为图形显示的流程，其中比较重点的两个着色器会在下面着重来说。

关于图中的图元装配，就是告知OpenGL ES这个图形的顶点数据将要以什么样的形式来连接，比如说GL_TRIANGLE_FAN这种形式，或者以线段的形式连接等等。也就是说图元装配告知了OpenGL ES从顶点着色器传过来的顶点要变成什么样的形状。但是这里只是确定好了顶点的位置和连接方式，但是不能确定图形对应的像素点！！！

光栅化则是在我们已经确定好了顶点的位置之后，要开始确定像素点了。光栅化就是让图形确定好其在屏幕上对应的的像素点是哪些，在哪些像素点上填充颜色。官方一点的说法就是把顶点数据转换为图元的过程，将物体的数学描述和颜色信息转化为屏幕上对应位置的像素点和这些像素点要填充的颜色。就是将模拟信号转换成为离散信号。但是这里要清楚，光栅化只是把传进来的颜色和像素点对应上了，但是并没有确定这个像素点就一定是这个颜色！！！

二、关于顶点着色器

在顶点着色器里面要做的事情：

着色器程序：GLSL代码，输入顶点数据，顶点数据最后是以源代码或者可执行文件的格式存在的。
顶点着色器输入属性(Attribute)：用顶点数组提供顶点数据。
统一变量(Uniform)：制式数据，就是不经常改变的数据，顶点和片元着色器都可以接收，比如旋转矩阵等。
采样器：着色器使用纹理的统一变量类型，相当于一个标识符。后面再仔细写。

顶点着色器处理的业务:

矩阵变换位置
计算光照公式，逐个生成顶点颜色
生成/变换纹理坐标

另外，在写完上述这些内容之后，顶点着色器必须给内建变量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;

}

解析:

attribute : 一个修饰符，就像static一样，它定义的是变量是通过属性通道传入的。

vec4和vec2：四维向量和二维向量的意思。也就是数据的类型。

uniform：也是定义变量是用的制式通道传入的。

mat4 : 四维矩阵。

varying：就是一个通道，在顶点着色器和片元着色器之间传递数据的。后面细说。

lowp：就是一个精度，这个是低精度。

三、图元装配和光栅化

在顶点着色器执行完成之后，就要进行图元装配，OpenGL ES的图元和OpenGL是一样的也是点、线、三角形。

图元装配就是将顶点数据计算成为一个个的图元，在这个阶段它会执行剪裁、透视分割、Viewport变换操作。

在图元装配之后，进行光栅化，光栅化就是把图元装配输出的图元转换成二维片段的过程，这些二维片段就是屏幕上可以绘制的像素点，最后这些二维片段会输出给片元着色器，进行颜色的设置。

四、片元着色器

在片元着色器中要做的事情：

着色器程序：描述在片元上执行的着色器源码或可执行文件
输入变量：注意这里是变量而不是属性了，因为属性只能输入到顶点着色器里面。这个变量是从顶点着色器里面来的，经过了图元装配和光栅化的数据。
统一变量(Uniform)：和顶点着色器的是一样的，不经常改变的制式数据。

片元着色器的业务：

计算颜色
获取纹理值
向像素点中填充颜色或者纹理值。

在写完上述的内容代码后，也要将它的值输出给内建变量gl_FragColor，否则还是执行无效果。

例如：


varying lowp vec2 varyTextCoord;
uniform sampler2D colorMap;
void main ()
{

    gl_FragColor = texture2D(colorMap,varyTextCoord);

}

解析：

相同的就不说了，说一下不同的。

sampler2D : 这是通过uniform传进来的纹理采样器，通过它可以拿到对应的纹理。

texture2D：这个函数有两个参数，第一个参数是纹理采样器，第二个参数是纹理坐标。这个函数就是为了取得文素，就是说从纹理采样器标示的纹理中，取得纹理坐标对应位置上的颜色值。这里的纹理坐标指的是对应的顶点的纹理坐标，而不是像素的纹理坐标。

另外，这里的varying lowp vec2 varyTextCoord;要和顶点着色器里面的一模一样，这才能确定这个纹理坐标是从顶点着色器里面传过来的，差一个字母都不行。

五、关于逐片段操作

逐片段操作的流程图如下图5.1所示：

5.1.png

像素归属测试：确定帧缓存区中(x,y)位置的像素是不是归属OpenGL ES所有。
比如：一个OpenGL ES帧缓存区的View1被另外一个View2遮挡了，窗口系统可以判定View2遮挡的像素是不属于OpenGL ES的上下文。也就不全部显示所有的像素，被遮挡的就不显示了。这个过程是由OpenGL ES内部来完成的，不是开发者可以来控制的。
剪裁测试：用来确定(x,y)是否位于OpenGL ES的剪裁区域内，如果它在剪裁区域外，就不用渲染了，直接抛弃。
深度测试：输入片段的深度值比较，确定片段是否拒绝测试。
混合：将新生成的片段颜色与帧缓存对应位置的颜色进行混合。
抖动：因为精度有限的情况下，在帧缓存区中保存的颜色可能出现伪象情况，抖动可以最小化这个伪象情况。

六、关于EGL

因为OpenGL ES的API并没有给我们如何创建上下文，或者说将上下文如何区链接到原生窗口系统，所以OpenGL ES的命令想要执行起来，必须满足两个条件：

(1)、渲染上下文：存储相关OpenGL ES相关状态。在OpenGL中已经有了状态机了，不用手动再去创建渲染上下文了，但是OpenGL ES必须自己手动创建。

(2)、绘制表面：用于绘制图元的表面，它指定渲染所需要的缓存区类型。就比如：颜色缓冲区、深度缓冲区、模版缓冲区等等。

唯一支持OpenGL ES却不支持EGL的平台就是iOS平台，Apple提供了自己的EGL API的iOS实现——EAGL。

因为每个窗口系统都有不同的定义，所以EGL提供了基础的不透明类型——EGLDisplay，这个类型封装了所有系统的相关性，可用于原生窗口系统接口。