学习OpenGL ES之什么是Shader？-白红宇

上一篇文章中我们有说到OpenGL的渲染流程。

这其中Vertex Shader和Fragment Shader两步是可编程的。简而言之，Vertex Shader负责将顶点数据进一步处理，Fragment Shader将像素数据进一步处理。所以Vertex Shader中的代码针对每个点都会调用一次，Fragment Shader中的代码针对每个像素都会调用一次。接下来我就分三个部分讲解Shader的相关知识。

如何使用Shader

要使用Shader首先要编译Shader代码。

bool compileShader(GLuint *shader, GLenum type, const GLchar *source) {    GLint status;        if (!source) {        printf("Failed to load vertex shader");        return false;    }        *shader = glCreateShader(type);    glShaderSource(*shader, 1, &source, NULL);    glCompileShader(*shader);        GLint logLength;    glGetShaderiv(*shader, GL_INFO_LOG_LENGTH, &logLength);    #if Debug    if (logLength > 0) {        GLchar *log = (GLchar *)malloc(logLength);        glGetShaderInfoLog(*shader, logLength, &logLength, log);        printf("Shader compile log:\n%s", log);        printf("Shader: \n %s\n", source);        free(log);    }#endif        glGetShaderiv(*shader, GL_COMPILE_STATUS, &status);    if (status == 0) {        glDeleteShader(*shader);        return false;    }        return true;}复制代码

然后把编译好的Shader附加到Program上，Program可以理解为一个跑在GPU上的小程序。

// Attach vertex shader to program.glAttachShader(program, vertShader);    // Attach fragment shader to program.glAttachShader(program, fragShader);复制代码

然后链接Program

if (!linkProgram(program)) {        printf("Failed to link program: %d", program);                if (vertShader) {            glDeleteShader(vertShader);            vertShader = 0;        }        if (fragShader) {            glDeleteShader(fragShader);            fragShader = 0;        }        if (program) {            glDeleteProgram(program);            program = 0;        }        return false;    }复制代码

bool linkProgram(GLuint prog) {    GLint status;    glLinkProgram(prog);    #if Debug    GLint logLength;    glGetProgramiv(prog, GL_INFO_LOG_LENGTH, &logLength);    if (logLength > 0) {        GLchar *log = (GLchar *)malloc(logLength);        glGetProgramInfoLog(prog, logLength, &logLength, log);        printf("Program link log:\n%s", log);        free(log);    }#endif        glGetProgramiv(prog, GL_LINK_STATUS, &status);    if (status == 0) {        return false;    }        return true;}复制代码

链接完后就可以使用了。所有和GPU交互的代码都会用到program的值。激活Vertex Shader属性的代码就用到了program。

GLuint positionAttribLocation = glGetAttribLocation(self.shaderProgram, "position");glEnableVertexAttribArray(positionAttribLocation);GLuint colorAttribLocation = glGetAttribLocation(self.shaderProgram, "color");glEnableVertexAttribArray(colorAttribLocation);复制代码

Vertex Shader的语法

为了介绍Shader中的uniform变量，我特地在上一篇文章的基础上修改了Vertex Shader，如下。

attribute vec4 position;attribute vec4 color;uniform float elapsedTime;varying vec4 fragColor;void main(void) {    fragColor = color;    float angle = elapsedTime * 1.0;    float xPos = position.x * cos(angle) - position.y * sin(angle);    float yPos = position.x * sin(angle) + position.y * cos(angle);    gl_Position = vec4(xPos, yPos, position.z, 1.0);}复制代码

Shader的变量声明格式为：变量类型变量数据类型变量名; 变量类型有三种：

attribute：就是顶点数据(Vertex Data)包含的属性，位置，颜色或是其他，顶点数据包含多少属性，这里就可以写多少，通过glEnableVertexAttribArray和glVertexAttribPointer激活和传值。

varying: 传递给Fragment Shader的变量，Fragment Shader是无法直接接受顶点数据的，因为它处理的是像素级别的数据。传递给Fragment Shader的值是根据像素位置插值计算之后的值。

uniform: 可以理解为全局变量，所有顶点处理程序共享这个变量。

变量数据类型有：

vecX: vec开头的有vec2,vec3,vec4,分别代表二维，三维，四维向量。初始化方式分别为，vec2(x,y),vec3(x,y,z),vec4(x,y,z,w)

float: 浮点数，记住，shader中int是不会自动转换为float的，所有需要使用float的地方必须写成浮点数格式，比如1要写成1.0，0要写成0.0。

int: 整型

matX: vec开头的有mat2,mat3,mat4,分别代表二维，三维，四维矩阵。主要用来传递变换矩阵，后面使用到时会介绍。

上面的代码的uniform变量elapsedTime表示的是程序运行经过时间的秒数。

float angle = elapsedTime * 1.0;//修改1.0为其他值可以调整转速float xPos = position.x * cos(angle) - position.y * sin(angle);float yPos = position.x * sin(angle) + position.y * cos(angle);gl_Position = vec4(xPos, yPos, position.z, 1.0);复制代码

将position围绕(0,0,0)点旋转角度angle，然后将旋转后的点赋给gl_Position，就是交给OpenGL进行后续处理。angle会根据elapsedTime变化，所以点的位置也会根据elapsedTime变化。

我增加了两行代码来为uniform elapsedTime赋值。

- (void)glkView:(GLKView *)view drawInRect:(CGRect)rect {    // 清空之前的绘制    glClearColor(1, 0.2, 0.2, 1);    glClear(GL_COLOR_BUFFER_BIT);        // 使用fragment.glsl 和 vertex.glsl中的shader    glUseProgram(self.shaderProgram);    // 设置shader中的 uniform elapsedTime 的值    GLuint elapsedTimeUniformLocation = glGetUniformLocation(self.shaderProgram, "elapsedTime");    glUniform1f(elapsedTimeUniformLocation, (GLfloat)self.elapsedTime);        [self drawTriangle];}复制代码

先获取uniform elapsedTime的位置，因为elapsedTime是float类型，所以使用glUniform1f进行赋值。如果是其他类型的uniform，就需要使用其他的glUniformXXX方法赋值了。后面用到的时候再详细介绍。

这个Shader具体的效果如下：

每个顶点都会旋转，所以最后整个三角形都在旋转。如果你乐意的话，还可以在Vertex Shader中对顶点位置进行缩放或者移动。试试看会有什么样的效果。

Fragment Shader的语法

varying lowp vec4 fragColor;uniform highp float elapsedTime;void main(void) {    highp float processedElapsedTime = elapsedTime;    highp float intensity = (sin(processedElapsedTime) + 1.0) / 2.0;    gl_FragColor = fragColor * intensity;}复制代码

Fragment Shader的变量只能是uniform和varying，这里的varying是从Vertex Shader传过来的值。与Vertex Shader不同的是，这里的变量都要声明精度，比如highp float processedElapsedTime = elapsedTime;中的highp代表高精度。精度包括lowp highp mediump,低精度，高精度，中等精度。如果你不想为每一个变量都指定精度可以在第一行写上precision highp float;，当然这只是为float指定默认精度highp。要为其他类型指定精度的话继续加就好了。比如再加上precision highp vec2;。上面的Fragment Shader中我把传递过来的颜色根据当前的elapsedTime进行了计算，颜色的强度会随着(sin(processedElapsedTime) + 1.0) / 2.0;的曲线变化。这里我做了vec4 * float的运算，结果仍然是vec4。vec4(a,b,c,d) * f的运算结果是vec4(a*f,b*f,c*f,d*f)。使用了这个Fragment Shader后效果如下。

本文主要通过Shader的两个小动画介绍了Vertex Shader和Fragment Shader的基本语法和功能。如果你想要了解更多Shader中的运算规则和内置函数请参见：我还发现了一个比较有意思的网站，可以直接在线编辑预览Fragment Shader。 http://haxiomic.github.io/webgl-workshop/editor//index.html

time是一个默认的uniform，会随着时间改变。uv是纹理坐标，有两个值s和t，值从0到1。有兴趣的可以去玩玩。