OpenGL ES入门02-OpenGL ES着色器

前言

本文是关于OpenGL ES的系统性学习过程，记录了自己在学习OpenGL ES时的收获。
这篇文章的目标是学习OpenGL ES着色器语言。
环境是Xcode8.1+OpenGL ES 2.0
目前代码已经放到github上面，OpenGL ES入门02-OpenGL ES着色器

欢迎关注我的 OpenGL ES入门专题

概述

着色器(Shader)是运行在GPU上的小程序。这些小程序为图形渲染管线的某个特定部分而运行。从基本意义上来说，着色器只是一种把输入转化为输出的程序。着色器也是一种非常独立的程序，因为它们之间不能相互通信；它们之间唯一的沟通只有通过输入和输出。

效果

三角形绘制

着色器语言

着色器是使用一种叫GLSL的类C语言写成的。GLSL是为图形计算量身定制的，它包含一些针对向量和矩阵操作的有用特性。

着色器分类

顶点着色器 是一个可编程的处理单元，执行顶点变换、纹理坐标变换、光照、材质等顶点的相关操作，每顶点执行一次。替代了传统渲染管线中顶点变换、光照以及纹理坐标的处理。

attribute vec3 position;
attribute vec3 color;
varying vec3 outColor;

void main()
{
    gl_Position = vec4(position, 1.0);
    outColor = color;
}

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

precision mediump float;
varying vec3 outColor;
void main()
{
    gl_FragColor = vec4(outColor, 1.0);
}

数据类型

类型	说明
float	浮点型
bool	布尔型
int	整形
vec2	包含了2个浮点数的向量
vec3	包含了3个浮点数的向量
vec4	包含了4个浮点数的向量
ivec2	包含了2个整数的向量
ivec3	包含了3个整数的向量
ivec4	包含了4个整数的向量
bvec2	包含了2个布尔数的向量
bvec3	包含了3个布尔数的向量
bvec4	包含了4个布尔数的向量
mat2	2*2维矩阵
mat3	3*3维矩阵
mat4	4*4维矩阵
sampler1D	1D纹理采样器
sampler2D	2D纹理采样器
sampler3D	3D纹理采样器
samplerCube	Cube纹理采样器

常量

const 可以用来修饰任何基本数据类型。通常const变量在声明的同时要进行初始化，结构体字段不能使用const修饰吗，但是变量可以，并通过构造器进行初始化。包含数组的数组和结构体不能声明为常量，因为它们不能被初始化。

onst vec4 color = vec4 (1.0, 1.0, 1.0, 1.0);

存储修饰符

attribute 变量(属性变量)只能用于顶点着色器中，不能用于片元着色器。 一般用该变量来表示一些顶点数据，如：顶点坐标、纹理坐标、颜色等。

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

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

varying 变量(易变变量)是从顶点着色器传递到片元着色器的数据变量。顶点着色器可以使用易变变量来传递需要插值的颜色、法向量、纹理坐标等任意值。 在顶点与片元shader程序间传递数据是很容易的，一般在顶点shader中修改varying变量值，然后片元shader中使用该值，当然，该变量在顶点及片元这两段shader程序中声明必须是一致的 。例如：上面代码中应用程序中由顶点着色器传入片元着色器中的vColor变量。

精度修饰符

精度修饰符

precision 可以用来确定默认精度修饰符。类型可以是int或float或采样器类型，precision-qualifier可以是lowp, mediump, 或者highp。任何其他类型和修饰符都会引起错误。如果type是float类型，那么该精度（precision-qualifier）将适用于所有无精度修饰符的浮点数声明（标量，向量，矩阵）。如果type是int类型，那么该精度（precision-qualifier）将适用于所有无精度修饰符的整型数声明（标量，向量）。包括全局变量声明，函数返回值声明，函数参数声明，和本地变量声明等。没有声明精度修饰符的变量将使用和它最近的precision语句中的精度。

precision highp float;
precision highp int;
precision lowp sampler2D;
precision lowp samplerCube;

内建变量

gl_Position 顶点着色器内建变量，表示变换后点的空间位置。 顶点着色器从应用程序中获得原始的顶点位置数据，这些原始的顶点数据在顶点着色器中经过平移、旋转、缩放等数学变换后，生成新的顶点位置。新的顶点位置通过在顶点着色器中写入gl_Position传递到渲染管线的后继阶段继续处理。

*** gl_PointSize*** 顶点着色器内置变量,设置栅格化点的直径,也就是点的大小，通常用于点精灵，粒子等绘制。

gl_FragColor 片元着色器内置变量，用来保存片元着色器计算完成的片元颜色值，此颜色值将送入渲染管线的后继阶段进行处理。

加载着色器

static GLuint createGLShader(const char *shaderText, GLenum shaderType)
{
    GLuint shader = glCreateShader(shaderType);
    glShaderSource(shader, 1, &shaderText, NULL);
    glCompileShader(shader);
    
    int compiled = 0;
    glGetShaderiv(shader, GL_COMPILE_STATUS, &compiled);
    if (!compiled) {
        GLint infoLen = 0;
        glGetShaderiv (shader, GL_INFO_LOG_LENGTH, &infoLen);
        if (infoLen > 1) {
            char *infoLog = (char *)malloc(sizeof(char) * infoLen);
            if (infoLog) {
                glGetShaderInfoLog (shader, infoLen, NULL, infoLog);
                GLlog("Error compiling shader: %s\n", infoLog);
                free(infoLog);
            }
        }
        glDeleteShader(shader);
        return 0;
    }
    return shader;
}

1、创建着色器，通过glCreateShader创建着色器，type为着色器的类型GL_VERTEX_SHADER 和 GL_FRAGMENT_SHADER

glCreateShader (GLenum type) //type: GL_VERTEX_SHADER 或者 GL_FRAGMENT_SHADER

2、添加着色器源程序，将着色器源码关联到一个着色器对象shader上。string是一个有count行GLchar类型的字符串组成的数组，用来表示着色器的源代码数据。string可以以NULL结尾，也可以不是。如果length为NULL则string给出的每行都是以NULL结尾，否则length中必须有count个表示string长度的元素。（也就是说字符串以NULL结尾我们不用指定长度，否则必须制定每行的长度）

glShaderSource (GLuint shader, GLsizei count, const GLchar* const *string, const GLint* length)

3、编译着色器源程序

glCompileShader (GLuint shader)

4、删除着色器

glDeleteShader (GLuint shader)

5、容错处理，通过glGetShaderiv获取编译状态，通过glGetShaderInfoLog获取错误信息。

#define GL_COMPILE_STATUS                                0x8B81
#define GL_INFO_LOG_LENGTH                               0x8B84
glGetShaderiv (GLuint shader, GLenum pname, GLint* params) 
glGetShaderInfoLog (GLuint shader, GLsizei bufsize, GLsizei* length, GLchar* infolog)

创建着色器程序

GLuint createGLProgram(const char *vertext, const char *frag)
{
    GLuint program = glCreateProgram();
    
    GLuint vertShader = createGLShader(vertext, GL_VERTEX_SHADER);
    GLuint fragShader = createGLShader(frag, GL_FRAGMENT_SHADER);
    
    if (vertShader == 0 || fragShader == 0) {
        return 0;
    }
    
    glAttachShader(program, vertShader);
    glAttachShader(program, fragShader);
    
    glLinkProgram(program);
    GLint success;
    glGetProgramiv(program, GL_LINK_STATUS, &success);
    if (!success) {
        GLint infoLen;
        glGetProgramiv(program, GL_INFO_LOG_LENGTH, &infoLen);
        if (infoLen > 1) {
            GLchar *infoText = (GLchar *)malloc(sizeof(GLchar)*infoLen + 1);
            if (infoText) {
                memset(infoText, 0x00, sizeof(GLchar)*infoLen + 1);
                glGetProgramInfoLog(program, infoLen, NULL, infoText);
                GLlog("%s", infoText);
                free(infoText);
            }
        }
        glDeleteShader(vertShader);
        glDeleteShader(fragShader);
        glDeleteProgram(program);
        return 0;
    }
    
    glDetachShader(program, vertShader);
    glDetachShader(program, fragShader);
    glDeleteShader(vertShader);
    glDeleteShader(fragShader);
  
    return program;
}

1、创建着色器程序

 glCreateProgram (void)

2、装配着色器

glAttachShader (GLuint program, GLuint shader)

3、链接着色器程序

glLinkProgram (GLuint program)

4、卸载着色器程序

glDetachShader (GLuint program, GLuint shader)

5、使用着色器程序

 glUseProgram (GLuint program)

6、容错处理

#define GL_LINK_STATUS                                   0x8B82
#define GL_INFO_LOG_LENGTH                               0x8B84
glGetProgramiv (GLuint program, GLenum pname, GLint* params)
glGetProgramInfoLog (GLuint program, GLsizei bufsize, GLsizei* length, GLchar* infolog)

三角形绘制

- (void)setupGLProgram
{
    NSString *vertFile = [[NSBundle mainBundle] pathForResource:@"vert.glsl" ofType:nil];
    NSString *fragFile = [[NSBundle mainBundle] pathForResource:@"frag.glsl" ofType:nil];
    _program = createGLProgramFromFile(vertFile.UTF8String, fragFile.UTF8String);
    
    glUseProgram(_program);
}

- (void)setupVertexData
{
   // 需要加static关键字，否则数据传输存在问题 
   static GLfloat vertices[] = {
        0.0f,  0.5f, 0.0f,
        -0.5f, -0.5f, 0.0f,
        0.5f, -0.5f, 0.0f
    };
    GLint posSlot = glGetAttribLocation(_program, "position");
    glVertexAttribPointer(posSlot, 3, GL_FLOAT, GL_FALSE, 0, vertices);
    glEnableVertexAttribArray(posSlot);
    
   //颜色数据
    static GLfloat colors[] = {
        0.0f, 1.0f, 1.0f,
        1.0f, 0.0f, 1.0f,
        1.0f, 1.0f, 0.0f
    };
    GLint colorSlot = glGetAttribLocation(_program, "color");
    glVertexAttribPointer(colorSlot, 3, GL_FLOAT, GL_FALSE, 0, colors);
    glEnableVertexAttribArray(colorSlot);
}

- (void)render
{
    glClearColor(1.0, 1.0, 0.0, 1.0);
    glClear(GL_COLOR_BUFFER_BIT);
    
    glViewport(0, 0, self.frame.size.width, self.frame.size.height);

// 在这里初始化数据，可以加static关键字，也可以不加
//    GLfloat vertices[] = {
//         0.0f,  0.5f, 0.0f,
//        -0.5f, -0.5f, 0.0f,
//         0.5f, -0.5f, 0.0f
//    };
//    GLint posSlot = glGetAttribLocation(_program, "position");
//    glVertexAttribPointer(posSlot, 3, GL_FLOAT, GL_FALSE, 0, vertices);
//    glEnableVertexAttribArray(posSlot);
//    
//    GLfloat colors[] = {
//        0.0f, 1.0f, 0.0f,
//        0.0f, 1.0f, 0.0f,
//        0.0f, 1.0f, 0.0f
//    };
//    GLint colorSlot = glGetAttribLocation(_program, "color");
//    glVertexAttribPointer(colorSlot, 3, GL_FLOAT, GL_FALSE, 0, colors);
//    glEnableVertexAttribArray(colorSlot);
    
    [self setupVertexData];
    
    glDrawArrays(GL_TRIANGLES, 0, 3);
    
    //将指定 renderbuffer 呈现在屏幕上，在这里我们指定的是前面已经绑定为当前 renderbuffer 的那个，在 renderbuffer 可以被呈现之前，必须调用renderbufferStorage:fromDrawable: 为之分配存储空间。
    [_context presentRenderbuffer:GL_RENDERBUFFER];
}

glVertexAttribPointer (GLuint indx, GLint size, GLenum type, GLboolean normalized, GLsizei stride, const GLvoid* ptr)
indx 指定要修改的顶点着色器中顶点变量id；
size 指定每个顶点属性的组件数量。必须为1、2、3或者4。
type 指定数组中每个组件的数据类型。可用的符号常量有GL_BYTE, GL_UNSIGNED_BYTE, GL_SHORT,GL_UNSIGNED_SHORT, GL_FIXED, 和 GL_FLOAT，初始值为GL_FLOAT；
normalized 指定当被访问时，固定点数据值是否应该被归一化（GL_TRUE）或者直接转换为固定点值（GL_FALSE）；
stride 指定连续顶点属性之间的偏移量。如果为0，那么顶点属性会被理解为：它们是紧密排列在一起的。初始值为0；
ptr 顶点数据指针。

参考链接

https://www.khronos.org/opengles/sdk/docs/reference_cards/OpenGL-ES-2_0-Reference-card.pdf

http://www.cnblogs.com/kesalin/archive/2012/11/25/opengl_es_tutorial_02.html