1、概述

在上一篇文章OpenGL ES 3.0（一）综述 中提到，着色器(Shader)是运行在GPU上的小程序。这些小程序为图形渲染管线的某个特定部分而运行。从本质上来说，着色器只是一种把输入转化为输出的程序。着色器也是一种非常独立的程序，因为它们之间不能相互通信，它们之间唯一的沟通只有通过输入和输出。这篇文章主要讨论用一种更加广泛的形式详细解释着色器，特别是OpenGL着色器语言(GLSL)。

2、GLSL

着色器是使用一种叫GLSL的类C语言写成的。GLSL是为图形计算量身定制的，它包含一些针对向量和矩阵操作的有用特性。着色器的开头总是要声明版本，接着是输入和输出变量、uniform和main函数。每个着色器的入口点都是main函数，在这个函数中我们处理所有的输入变量，并将结果输出到输出变量中。后面会进行讲解。一个典型的着色器有下面的结构：

#version version_number

in type in_variable_name;

in type in_variable_name;

out type out_variable_name;

uniform type uniform_name;

int main()

{

  // 处理输入并进行一些图形操作

  ...

  // 输出处理过的结果到输出变量

  out_variable_name = weird_stuff_we_processed;

}

当讨论到顶点着色器的时候，每个输入变量也叫顶点属性(Vertex Attribute)。能声明的顶点属性是有上限的，它一般由硬件来决定。OpenGL ES确保至少有16个包含4分量的顶点属性可用，但是有些硬件或许允许更多的顶点属性，可以查询GL_MAX_VERTEX_ATTRIBS来获取具体的上限：

var maxVertexAttribute = IntBuffer.allocate(1)

GLES30.glGetIntegerv(GL_MAX_VERTEX_ATTRIBS, maxVertexAttribute)

Log.d(TAG, "maxVertexAttribute:" + maxVertexAttribute.get(0))

3、数据类型

和其他编程语言一样，GLSL有数据类型可以来指定变量的种类。GLSL中包含C等其它语言大部分的默认基础数据类型：int、float、double、uint和bool。GLSL也有两种容器类型，分别是向量(Vector)和矩阵(Matrix)，其中矩阵会单独出一篇文章讨论。

GLSL中的向量是一个可以包含有1、2、3或者4个分量的容器，分量的类型可以是前面默认基础类型的任意一个。它们可以是下面的形式（n代表分量的数量）。

类型	含义
vecn	包含n个float分量的默认向量
bvecn	包含n个bool分量的向量
ivecn	包含n个int分量的向量
uvecn	包含n个unsigned int分量的向量
dvecn	包含n个double分量的向量

大多数时候使用vecn，因为float足够满足大多数要求了。一个向量的分量可以通过vec.x这种方式获取，这里x是指这个向量的第一个分量。你可以分别使用.x、.y、.z和.w来获取它们的第1、2、3、4个分量。GLSL也允许你对颜色使用rgba，或是对纹理坐标使用stpq访问相同的分量。

向量这一数据类型也允许一些有趣而灵活的分量选择方式，叫做重组(Swizzling)。重组允许这样的语法：

vec2 someVec;

vec4 differentVec = someVec.xyxx;

vec3 anotherVec = differentVec.zyw;

vec4 otherVec = someVec.xxxx + anotherVec.yxzy;

可以使用上面4个字母任意组合来创建一个和原来向量一样长的（同类型）新向量，只要原来向量有那些分量即可；但是不允许在一个vec2向量中去获取.z元素。也可以把一个向量作为一个参数传给不同的向量构造函数，以减少需求参数的数量：

vec2 vect = vec2(0.5, 0.7);

vec4 result = vec4(vect, 0.0, 0.0);

vec4 otherResult = vec4(result.xyz, 1.0);

4、输入与输出

虽然着色器是各自独立的小程序，但是它们都是一个整体的一部分，出于这样的原因，会希望每个着色器都有输入和输出，这样才能进行数据交流和传递。GLSL定义了in和out关键字专门来实现这个目的。每个着色器使用这两个关键字设定输入和输出，只要一个输出变量与下一个着色器阶段的输入匹配，它就会传递下去。但在顶点和片段着色器中会有点不同。

顶点着色器应该接收的是一种特殊形式的输入，否则就会效率低下。顶点着色器的输入特殊在，它从顶点数据中直接接收输入。为了定义顶点数据该如何管理，使用location这一元数据指定输入变量，这样才可以在CPU上配置顶点属性。在前面的文章已经看过这个了，layout (location = 0)。顶点着色器需要为它的输入提供一个额外的layout标识，这样才能把它链接到顶点数据。也可以忽略layout (location = 0)标识符，通过在OpenGL ES代码中使用glGetAttribLocation()查询属性位置值(Location)，但是在着色器中设置它们，会更容易理解而且节省工作量。

另一个例外是片段着色器，它需要一个vec4颜色输出变量，因为片段着色器需要生成一个最终输出的颜色。如果在片段着色器没有定义输出颜色，OpenGL会把物体渲染为黑色（或白色）。所以，如果打算从一个着色器向另一个着色器发送数据，必须在发送方着色器中声明一个输出，在接收方着色器中声明一个类似的输入。当类型和名字都一样的时候，OpenGL ES就会把两个变量链接到一起，它们之间就能发送数据了（这是在链接程序对象时完成的）。为了展示这是如何工作的，稍微改动一下前面一篇文章里的那个着色器，让顶点着色器为片段着色器决定颜色。

// 顶点着色器

private val vertexShaderCode =

        "#version 300 es \n" +

        "out vec4 ourColor;" +

        " layout (location = 0) in vec3 aPos;" +

        "void main() {" +

                " gl_Position = vec4(aPos.x, aPos.y, aPos.z, 1.0);" +

                " ourColor = vec4(0.5, 0.2, 0.1, 1.0);" +

        "}"

// 片段着色器

private val fragmentShaderCode = 

            "#version 300 es \n " +

                    "#ifdef GL_ES\n"+

                    "precision highp float;\n"+

                    "#endif\n"+

                    "out vec4 FragColor; " +

                    "in vec4 ourColor; " +

                  // "uniform vec4 outColor; " +

                    "void main() {" +

                    "  FragColor = ourColor ;" +

                    "}"

可以看到在顶点着色器中声明了一个ourColor变量作为vec4输出，并在片段着色器中声明了一个类似的ourColor。由于它们名字相同且类型相同，片段着色器中的ourColor就和顶点着色器中的ourColor链接了。就可以通过这样的方式将顶点着色器中的数据传递至片段着色器。下面的图片展示了输出结果：

着色器间传递数据

5、Uniform

Uniform是一种从CPU中的应用向GPU中的着色器发送数据的方式，但uniform和顶点属性有些不同。首先，uniform是全局的(Global)。全局意味着uniform变量必须在每个着色器程序对象中都是独一无二的，而且它可以被着色器程序的任意着色器在任意阶段访问。第二，无论把uniform值设置成什么，uniform会一直保存它们的数据，直到它们被重置或更新。

可以在一个着色器中添加uniform关键字至类型和变量名前来声明一个GLSL的uniform。从此处开始就可以在着色器中使用新声明的uniform了。通过uniform设置三角形的颜色：

private val fragmentShaderCode =

            "#version 300 es \n " +

                    "#ifdef GL_ES\n"+

                    "precision mediump float;\n"+

                    "#endif\n"+

                    "out vec4 FragColor; " +

                    //"in vec4 ourColor; " +

                    "uniform vec4 outColor; " +

                    "void main() {" +

                    "  FragColor = ourColor ;" +

                    "}"

在片段着色器中声明了一个uniform vec4的ourColor，并把片段着色器的输出颜色设置为uniform值的内容。因为uniform是全局变量，可以在任何着色器中定义它们，而无需通过顶点着色器作为中介。顶点着色器中不需要这个uniform，所以不用在那里定义它。如果声明了一个uniform却在GLSL代码中没用过，编译器会静默移除这个变量，导致最后编译出的版本中并不会包含它。

这个uniform现在还是空的，还没有给它添加任何数据。接下来首先需要找到着色器中uniform属性的索引/位置值。当得到uniform的索引/位置值后，就可以更新它的值了。这次不去给像素传递单独一个颜色，而是让它随着时间改变颜色：

// Triangle.kt

fun draw() {

        ...

        val timeValue = System.currentTimeMillis()

        val greenValue = Math.sin((timeValue / 300 % 50).toDouble()) / 2 + 0.5

        GLES30.glUseProgram(mProgram)

        val vertexColorLocation = GLES30.glGetUniformLocation(mProgram, "ourColor")

        ...

    }

// MyGLSurfaceView.kt

init {

        ...

        //renderMode = GLSurfaceView.RENDERMODE_WHEN_DIRTY

    }

首先通过System.currentTimeMillis()当前时间。然后使用sin函数让颜色在0.0到1.0之间改变，最后将结果储存到greenValue里。接着，用glGetUniformLocation()查询uniform ourColor的位置值。为查询函数提供着色器程序和uniform的名字,这时候获得的是查询的属性的位置值。如果glGetUniformLocation返回-1就代表没有找到这个位置值。最后，可以通过glUniform4f()设置uniform值。注意，查询uniform地址不要求之前使用过着色器程序，但是更新一个uniform之前必须先使用程序,即调用glUseProgram()，因为它是在当前激活的着色器程序中设置uniform的。

因为OpenGL ES在其核心是一个C库，所以它不支持类型重载，在函数参数不同的时候就要为其定义新的函数；glUniform是一个典型例子。这个函数有一个特定的后缀，标识设定的uniform的类型。可能的后缀有：

后缀	含义
f	函数需要一个float作为它的值
i	函数需要一个int作为它的值
ui	函数需要一个unsigned int作为它的值
3f	函数需要3个float作为它的值
fv	函数需要一个float向量/数组作为它的值

每当打算配置一个OpenGL ES的选项时就可以简单地根据这些规则选择适合的数据类型的重载函数。在例子里，希望分别设定uniform的4个float值，所以通过glUniform4f传递数据。

这边要注意下需要将MyGLSurfaceView.kt里面的renderMode = GLSurfaceView.RENDERMODE_WHEN_DIRTY 这个模式注释掉，不然不会自动刷新数据。最终效果如下：

变换效果

6、更多属性

在前面的文章中，提到了如何填充VBO、配置顶点属性指针以及如何把它们都储存到一个VAO里。这次，同样打算把颜色数据加进顶点数据中。将把颜色数据添加为3个float值至vertices数组。将把三角形的三个角分别指定为红色、绿色和蓝色：

internal var vertices = floatArrayOf(// 按逆时针顺序

                // 位置              // 颜色

                0.5f, -0.5f, 0.0f,  1.0f, 0.0f, 0.0f,  // 右下

                -0.5f, -0.5f, 0.0f,  0.0f, 1.0f, 0.0f,  // 左下

                0.0f,  0.5f, 0.0f,  0.0f, 0.0f, 1.0f    // 顶部

        )

由于现在有更多的数据要发送到顶点着色器，有必要去调整一下顶点着色器，使它能够接收颜色值作为一个顶点属性输入。需要注意的是用layout标识符来把aColor属性的位置值设置为1：

private val vertexShaderCode =

            "#version 300 es \n" +

                    " layout (location = 0) in vec3 aPos;" +

                    "layout (location = 1) in vec3 aColor;" +

                    "out vec3 ourColor;" +

                    "void main() {" +

                    " gl_Position = vec4(aPos, 1.0);" +

                    " ourColor = aColor;" +

                    "}"

由于不再使用uniform来传递片段的颜色了，现在使用ourColor输出变量，必须再修改一下片段着色器：

private val fragmentShaderCode =

            "#version 300 es \n " +

                    "#ifdef GL_ES\n" +

                    "precision highp float;\n" +

                    "#endif\n" +

                    "out vec4 FragColor; " +

                    "in vec3 ourColor; " +

                    "void main() {" +

                    "  FragColor = vec4(ourColor, 1.0) ;" +

                    "}"

因为添加了另一个顶点属性，并且更新了VBO的内存，就必须重新配置顶点属性指针。更新后的VBO内存中的数据现在看起来像这样：

VBO中数据存储格式

此时就需要使用glVertexAttribPointer()更新顶点格式,并且启用索引为1的顶点数组:

init {

        GLES30.glVertexAttribPointer(0,3, GLES30.GL_FLOAT, false, vertexStride, 0)

        GLES30.glVertexAttribPointer(1, 3, GLES30.GL_FLOAT, false, vertexStride, 3*4)

}

fun draw() {

        GLES30.glEnableVertexAttribArray(0);

        GLES30.glEnableVertexAttribArray(1);

        GLES30.glUseProgram(mProgram)

        GLES30.glBindVertexArray(VAOids.get(0))

        GLES30.glDrawElements(GLES30.GL_TRIANGLES, 3, GLES30.GL_UNSIGNED_INT, 0);

        GLES30.glDisableVertexAttribArray(0)

        GLES30.glDisableVertexAttribArray(1);

    }

companion object {

        internal val COORDS_PER_VERTEX = 6

        internal val vertexStride = COORDS_PER_VERTEX * 4

        internal var indices = intArrayOf(// 按逆时针顺序

                0, 1, 2

        )

        internal var vertices = floatArrayOf(// 按逆时针顺序

                // 位置              // 颜色

                0.5f, -0.5f, 0.0f,  1.0f, 0.0f, 0.0f,  // 右下

                -0.5f, -0.5f, 0.0f,  0.0f, 1.0f, 0.0f,  // 左下

                0.0f,  0.5f, 0.0f,  0.0f, 0.0f, 1.0f    // 顶部

        )

    }

glVertexAttribPointer()的前几个参数比较明了。这次配置属性位置值为1的顶点属性。每个颜色值占3个float，并且数据就是标准化的不需要再次标准化。

由于现在有了两个顶点属性，需要重新计算步长值。为获得数据队列中下一个属性值（比如位置向量的下个x分量）必须向右移动6个float，其中3个是位置值，另外3个是颜色值。所以步长值为6乘以float的字节数（=24字节）。

同样，这次必须指定一个偏移量。对于每个顶点来说，位置顶点属性在前，所以它的偏移量是0。颜色属性紧随位置数据之后，所以偏移量就是3 * float的字节数，用字节来计算就是12字节。

运行程序结果如下：

赋值顶点颜色效果

虽然只提供了3个颜色，但出现的效果确实一个大调色板。这是在片段着色器中进行的所谓片段插值(Fragment Interpolation)的结果。当渲染一个三角形时，光栅化(Rasterization)阶段通常会造成比原指定顶点更多的片段。光栅会根据每个片段在三角形形状上所处相对位置决定这些片段的位置。

基于这些位置，它会插值(Interpolate)所有片段着色器的输入变量。比如说，有一个线段，上面的端点是绿色的，下面的端点是蓝色的。如果一个片段着色器在线段的70%的位置运行，它的颜色输入属性就会是一个绿色和蓝色的线性结合；更精确地说就是30%蓝 + 70%绿。

这个三角形也是如此，有3个顶点，和相应的3个颜色，片段着色器为这三个点围起来的这些像素进行插值颜色。

Tips：在最前面的OpenGL ES 2.0 显示图形（上）这篇文章中对于GLSL中的输入输出并并不是用关键字in 和 out来表示的而是用vary、atrribute。其实这两者对应与一个意思。会出现不一样 这是由于GLSL的版本不同，在OpenGL ES 3.0版本中已经将vary、atrribute废弃而使用in和out。由于OpenGL ES 2.0 的GLSL还是使用老版本，这也是我在这个系列中使用3.0为例子而不是2.0的其中一个原因。