OpenGL shader编程

前言

在本文中，我们将学习OpenGL ES 渲染管线，顶点着色器和片元着色器相关知识，然后使用可编程管线在屏幕上描绘一个简单三角形。

一，渲染管线

在 OpenGL ES 1.0 版本中，支持固定管线，而 OpenGL ES 2.0 版本不再支持固定管线，只支持可编程管线。什么是管线？什么又是固定管线和可编程管线？管线（pipeline）也称渲染管线，因为 OpenGL ES在渲染处理过程中会顺序执行一系列操作，这一系列相关的处理阶段就被称为OpenGL ES 渲染管线。pipeline 来源于福特汽车生产车间的流水线作业，在OpenGL ES 渲染过程中也是一样，一个操作接着一个操作进行，就如流水线作业一样，这样的实现极大地提供了渲染的效率。整个渲染管线如下图所示：

图中阴影部分的 Vertex Shader 和 Fragment Shader 是可编程管线。可编程管线就是说这个操作可以动态编程实现而不必固定写死在代码中。可动态编程实现这一功能一般都是脚本提供的，在OpenGL ES 中也一样，编写这样脚本的能力是由着色语言(Shader Language)提供的。那可编程管线有什么好处呢？方便我们动态修改渲染过程，而无需重写编译代码，当然也和很多脚本语言一样，调试起来不太方便。

再回到上图，这张图就是 OpenGL ES 的“架构图”，学习OpenGL ES 就是学习这张图中的每一个部分，在这里先粗略地介绍一下。

Vertex Array/Buffer objects：顶点数据来源，这时渲染管线的顶点输入，通常使用 Buffer objects效率更好。在今天的示例中，简单起见，使用的是 Vertex Array；

Vertex Shader：顶点着色器通过可编程的方式实现对顶点的操作，如进行坐标空间转换，计算 per-vertex color以及纹理坐标；

Primitive Assembly：图元装配，经过着色器处理之后的顶点在图片装配阶段被装配为基本图元。OpenGL ES 支持三种基本图元：点，线和三角形，它们是可被 OpenGL ES 渲染的。接着对装配好的图元进行裁剪（clip）：保留完全在视锥体中的图元，丢弃完全不在视锥体中的图元，对一半在一半不在的图元进行裁剪；接着再对在视锥体中的图元进行剔除处理（cull）：这个过程可编码来决定是剔除正面，背面还是全部剔除。

Rasterization：光栅化。在光栅化阶段，基本图元被转换为二维的片元(fragment)，fragment 表示可以被渲染到屏幕上的像素，它包含位置，颜色，纹理坐标等信息，这些值是由图元的顶点信息进行插值计算得到的。这些片元接着被送到片元着色器中处理。这是从顶点数据到可渲染在显示设备上的像素的质变过程。

Fragment Shader：片元着色器通过可编程的方式实现对片元的操作。在这一阶段它接受光栅化处理之后的fragment，color，深度值，模版值作为输入。

Per-Fragment Operation：在这一阶段对片元着色器输出的每一个片元进行一系列测试与处理，从而决定最终用于渲染的像素。这一系列处理过程如下：

Pixel ownership test：该测试决定像素在 framebuffer 中的位置是不是为当前 OpenGL ES 所有。也就是说测试某个像素是否对用户可见或者被重叠窗口所阻挡；

Scissor Test：剪裁测试，判断像素是否在由 glScissor 定义的剪裁矩形内，不在该剪裁区域内的像素就会被剪裁掉；

Stencil Test：模版测试，将模版缓存中的值与一个参考值进行比较，从而进行相应的处理；

Depth Test：深度测试，比较下一个片段与帧缓冲区中的片段的深度，从而决定哪一个像素在前面，哪一个像素被遮挡；

Blending：混合，混合是将片段的颜色和帧缓冲区中已有的颜色值进行混合，并将混合所得的新值写入帧缓冲；

Dithering：抖动，抖动是使用有限的色彩让你看到比实际图象更多色彩的显示方式，以缓解表示颜色的值的精度不够大而导致的颜色剧变的问题。

Framebuffer：这是流水线的最后一个阶段，Framebuffer 中存储这可以用于渲染到屏幕或纹理中的像素值，也可以从Framebuffer 中读回像素值，但不能读取其他值（如深度值，模版值等）。

二，顶点着色器

下面来仔细看看顶点着色器：

顶点着色器是一个可编程的处理单元，并且执行顶点的变换、纹理坐标的变换、光照、材质的应用等顶点的相关操作，每顶点执行一次。

顶点着色器替代了顶点变换、光照以及纹理坐标的处理，开发人员可以根据自己的需求自行开发顶点变换、光照以及纹理坐标的处理，大大增加了程序的灵活性。

顶点着色器主要是传入相应的Attribute变量、Uniforms变量、采样器以及临时变量，经过顶点着色器后生成Varying变量。

顶点着色器接收的输入：

Attributes：由 vertext array 提供的顶点数据，如空间位置，法向量(法向量是空间解析几何的一个概念，垂直于平面的直线所表示的向量为该平面的法向量)，纹理坐标以及顶点颜色，它是针对每一个顶点的数据。属性只在顶点着色器中才有，片元着色器中没有属性。属性可以理解为针对每一个顶点的输入数据。OpenGL ES 2.0 规定了所有实现应该支持的最大属性个数不能少于 8 个。

Uniforms：uniforms保存由应用程序传递给着色器的只读常量数据。在顶点着色器中，这些数据通常是变换矩阵，光照参数，颜色等。由 uniform 修饰符修饰的变量属于全局变量，该全局性对顶点着色器与片元着色器均可见，也就是说，这两个着色器如果被连接到同一个应用程序中，它们共享同一份 uniform 全局变量集。因此如果在这两个着色器中都声明了同名的 uniform 变量，要保证这对同名变量完全相同：同名+同类型，因为它们实际是同一个变量。此外，uniform 变量存储在常量存储区，因此限制了 uniform 变量的个数，OpenGL ES 2.0 也规定了所有实现应该支持的最大顶点着色器 uniform 变量个数不能少于 128 个，最大的片元着色器 uniform 变量个数不能少于 16 个。

Samplers：一种特殊的 uniform，用于呈现纹理。sampler 可用于顶点着色器和片元着色器。

Shader program：由 main 申明的一段程序源码，描述在顶点上执行的操作：如坐标变换，计算光照公式来产生 per-vertex 颜色或计算纹理坐标。

顶点着色器的输出：

Varying：varying 变量用于存储顶点着色器的输出数据，当然也存储片元着色器的输入数据，varying 变量最终会在光栅化处理阶段被线性插值。顶点着色器如果声明了 varying 变量，它必须被传递到片元着色器中才能进一步传递到下一阶段，因此顶点着色器中声明的 varying 变量都应在片元着色器中重新声明同名同类型的 varying 变量。OpenGL ES 2.0 也规定了所有实现应该支持的最大 varying 变量个数不能少于 8 个。

在顶点着色器阶段至少应输出位置信息-即内建变量：gl_Position，其它两个可选的变量为：gl_FrontFacing和 gl_PointSize。

三，片元着色器

接下来仔细看看片元着色器：

片元着色器是一个处理片元值及其相关联数据的可编程单元，片元着色器可执行纹理的访问、颜色的汇总、雾化等操作，每片元执行一次。

片元着色器替代了纹理、颜色求和、雾以及Alpha测试，这一部分是需要开发者自己开发的。

片元管理器接受如下输入： 

Varyings：这个在前面已经讲过了，顶点着色器阶段输出的 varying 变量在光栅化阶段被线性插值计算之后输出到片元着色器中作为它的输入，即上图中的 gl_FragCoord，gl_FrontFacing 和 gl_PointCoord。OpenGL ES 2.0 也规定了所有实现应该支持的最大 varying 变量个数不能少于 8 个。

Uniforms：前面也已经讲过，这里是用于片元着色器的常量，如雾化参数，纹理参数等；OpenGL ES 2.0 也规定了所有实现应该支持的最大的片元着色器 uniform 变量个数不能少于 16 个。

Samples：一种特殊的 uniform，用于呈现纹理。

Shader program：由 main 申明的一段程序源码，描述在片元上执行的操作。

在顶点着色器阶段只有唯一的 varying 输出变量-即内建变量：gl_FragColor。

shader操作步骤：

1)，创建/删除 shader

函数 glCreateShader 用来创建 shader，参数 GLenum type 表示我们要处理的 shader 类型，它可以是 GL_VERTEX_SHADER 或 GL_FRAGMENT_SHADER，分别表示顶点 shader 或 片元 shader。它返回一个句柄指向创建好的 shader 对象。

函数 glDeleteShader 用来销毁 shader，参数为 glCreateShader 返回的 shader 对象句柄。

2)，装载 shader

函数 glShaderSource 用来给指定 shader 提供 shader 源码。第一个参数是 shader 对象的句柄；第二个参数表示 shader 源码字符串的个数；第三个参数是 shader 源码字符串数组；第四个参数一个 int 数组，表示每个源码字符串应该取用的长度，如果该参数为 NULL，表示假定源码字符串是 \0 结尾的，读取该字符串的内容指定 \0 为止作为源码，如果该参数不是 NULL，则读取每个源码字符串中前 length（与每个字符串对应的 length）长度个字符作为源码。

3)，编译 shader

函数 glCompileShader 用来编译指定的 shader 对象，这将编译存储在 shader 对象中的源码。我们可以通过函数 glGetShaderiv 来查询 shader 对象的信息，如本例中查询编译情况，此外还可以查询 GL_DELETE_STATUS，GL_INFO_LOG_STATUS，GL_SHADER_SOURCE_LENGTH 和 GL_SHADER_TYPE。在这里我们查询编译情况，如果返回 0，表示编译出错了，错误信息会写入 info 日志中，我们可以查询该 info 日志，从而获得错误信息。