使用GLSL语言自定义着色器案例

之前我们学习中，不管是使用OpenGL，还是OpenGL ES下的GLKit加载图片的时候，我们使用的着色器都是固定管线下的固定着色器，也就是系统提供的着色器。今天我们先学习如何使用GLSL语言来自定义着色器。OpenGL ES入门的文章里，我们了解了一下EGL的一些概念，然后我们还需要知道EGL的主要功能：

和本地窗口系统(native windowing system)通讯
查询可用的配置
创建OpenGL ES可用的“绘图表面“（drawing surface）
同步不同类别的API之间的渲染，比如在OpenGL ES和OpenVG之间同步，或者在OpenGL和本地窗口的绘图命令之间
管理”渲染资源“，比如纹理映射（Rendering map）

GLSL语言

xcode中不支持GLSL语言对顶点/片元着色器的编译和连接，因此需要在项目中创建两个空文件如下图：

文件名可以随意编写，但是为了区分，一般默认顶点着色器后缀为vsh，片元着色器的后缀为fsh。在iOS中，顶点着色器和片元着色器可以认为是字符串。注意：最好不要使用中文注释，因为可能会发生未知错误。接下来看看GLSL语言的API总结。

向量数据类型

类型	描述
vec2,vec3,vec4（默认）	2分量、3分量、4分量浮点向量
ivec2,ivec3,ivec4	2分量、3分量、4分量整型向量
uvec2,uvec3,uvec4	2分量、3分量、4分量无符号整型向量
bvec2,bvec3,bvec4	2分量、3分量、4分量bool型向量

矩阵数据类型

类型	描述
mat2,mat2x2	两⾏两列
mat3,mat3x3 （常用）	三行三列
mat4,mat4x4（常用）	四行四列
mat2x3	三行两列
mat2x4	四行两列
mat3x2	两行三列
mat3x4	四行三列
mat4x2	两行四列
mat4x3	三行四列

变量存储限定符

限定符	描述
<none>	只是普通的本地变量，外部不见，外部不可访问
const	⼀个编译常量，或者说是⼀个对函数来说为只读的参数
in/varying	从以前阶段传递过来的变量
in/varying centroid	⼀个从以前的阶段传递过来的变量，使⽤质⼼插值
out/attribute	传递到下⼀个处理阶段或者在⼀个函数中指定⼀个返回值
out/attribute centroid	传递到下⼀个处理阶段，质心插值
uniform	⼀个从客户端代码传递过来的变量，在顶点之间不做改变

我们先简单自定义两个着色器然后看看如何编写：
顶点着色器代码

attribute vec4 position;
attribute vec2 textCoordinate;
varying lowp vec2 varyTextCoord;
void main()
{
    varyTextCoord = textCoordinate;
    gl_Position = position;
}

attribute，uniform跟我们之前文章里讲述的修饰方法，和作用对象完全一致：

1.attribute用来修饰纹理坐标和顶点坐标attribute vec4和attribute vec2
2.从顶点着色器往片元着色器传递纹理坐标的方法，就是用varying在顶点着色器里定义一个纹理坐标，然后在片元着色器里，定义一个一模一样名字的纹理坐标。即varyTextCoord
3.最后把顶点着色器计算的顶点数据赋值给gl_Position

片元着色器代码

//float 在片元着色器里的精度
precision highp float;
varying lowp vec2 varyTextCoord;
uniform sampler2D colorMap;
void main()
{
    gl_FragColor = texture2D(colorMap, varyTextCoord);
}

1.uniform可以从OpenGL ES客户端传递到顶点和片元着色器，一般为常量。
2.片元着色器需要使用内建函数texture2D来计算纹素，即纹理坐标下的像素值，然后赋值给内建变量gl_FragColor。

OpenGL ES 错误处理

如果不正确使用OpenGL ES命令，应用程序就会产生一个错误编码，可以用glGetError查询，一旦查询到错误代码，当前的错误代码就会复位为GL_NO_ERROR

错误代码	描述
GL_NO_ERROR	从上⼀次调⽤glGetError以来没有生成任何错误
GL_INVALID_ENUM	GLenum 参数超出范围,忽略生成错误命令
GL_INVALID_VALUE	数值型参数超出范围,忽略生成错误命令
GL_INVALID_OPERATION	特定命令在当前OpenGL ES 状态⽆法执⾏
GL_OUT_OF_MEMORY	内存不足时执⾏该命令,如果遇到这个错误,除⾮当前错误代码,否则OpenGL ES管线的状态被认为未定义

GLSL案例

下面是我们这次的重点，用实际案例，来说明如何使用GLSL语言自定义着色器实现纹理加载，首先我们需要知道，着色器和程序之间的流程图（图着色器和程序）。熟悉了这个流程我们才能使用它进行纹理的渲染。接下来我们看看这个流程下的GLSL语法的API。

获取连接后的着色器对象步骤

着色器和程序

1.创建着色器

//type — 创建着⾊器的类型,GL_VERTEX_SHADER 或者GL_FRAGMENT_SHADER 
//返回值 — 是指向新着⾊器对象的句柄.可以调⽤glDeleteShader 删除
GLuint glCreateShader(GLenum type);

2.链接着色器

//shader — 指向着⾊器对象的句柄
//count — 着⾊器源字符串的数量,着⾊器可以由多个源字符串组成,但是每个着⾊器只有⼀个main函数
//string — 指向保存数量的count 的着⾊器源字符串的数组指针
//length — 指向保存每个着⾊器字符串⼤⼩且元素数量为count 的整数数组指针
void glShaderSource(GLuint shader , GLSizei count ,const GLChar * const *string, const GLint*length);

3.编译着色器

//shader — 需要编译的着⾊器对象句柄
void glCompileShader(GLuint shader); 

//shader — 需要编译的着⾊器对象句柄
//pname — 获取的信息参数,可以为 GL_COMPILE_STATUS/GL_DELETE_STATUS/
//GL_INFO_LOG_LENGTH/GL_SHADER_SOURCE_LENGTH/ GL_SHADER_TYPE 
//params — 指向查询结果的整数存储位置的指针.
void glGetShaderiv(GLuint shader , GLenum pname , GLint *params ); 

//shader — 需要获取信息⽇志的着⾊器对象句柄
//maxLength — 保存信息⽇志的缓存区⼤⼩
//length — 写⼊的信息⽇志的⻓度(减去null 终⽌符); 如果不需要知道⻓度. 这个参数可以为Null 
//infoLog — 指向保存信息⽇志的字符缓存区的指针
void glGetShaderInfolog(GLuint shader , GLSizei maxLength, GLSizei *length , GLChar *infoLog);

4.创建程序对象

//创建⼀个程序对象,返回值: 返回⼀个执⾏新程序对象的句柄
GLUint glCreateProgram() 

//program : 指向需要删除的程序对象句柄
void glDeleteProgram( GLuint program )

5.链接着色器和程序

//着⾊器与程序连接/附着
//program : 指向程序对象的句柄
//shader : 指向程序连接的着⾊器对象的句柄
void glAttachShader( GLuint program , GLuint shader ); 

//断开连接
//program : 指向程序对象的句柄
//shader : 指向程序断开连接的着⾊器对象句柄
void glDetachShader(GLuint program);

6.链接和使用

//program: 指向程序对象句柄
glLinkProgram(GLuint program) 

//链接程序之后, 需要检查链接是否成功. 你可以使⽤glGetProgramiv 检查链接状态: 
//program: 需要获取信息的程序对象句柄
//pname : 获取信息的参数
//params : 指向查询结果整数存储位置的指针
void glGetProgramiv (GLuint program,GLenum pname, GLint *params); 

//从程序信息⽇志中获取信息
//program : 指向需要获取信息的程序对象句柄
//maxLength : 存储信息⽇志的缓存区⼤⼩
//length : 写⼊的信息⽇志⻓度(减去null 终⽌符),如果不需要知道⻓度,这个参数可以为Null. 
//infoLog : 指向存储信息⽇志的字符缓存区的指针
void glGetPorgramInfoLog( GLuint program ,GLSizei maxLength, GLSizei *length , GLChar *infoLog) 

//program: 设置为活动程序的程序对象句柄.
void glUseProgram(GLuint program)

我们可以用方法检查一下日志信息，
接下来是整个案例的流程（如下图），流程比较长，代码比较多，但是我尽量详细描述。

渲染流程

1.设置图层

CAEAGLLayer主要是用于显示OpenGL ES绘制内容的载体,这个图层是核心动画里的特殊图层，中间的EAGL就是我们之前说的为OpenGL ES提供载体的图层。创建一个特殊图层[[CAEAGLLayer alloc] init]然后添加到视图的layer上。

-(void)setupLayer{
    self.myLayer = [[CAEAGLLayer alloc]init];
    self.myLayer.frame = CGRectMake(0, 0, self.frame.size.width, self.frame.size.height);
    [self.layer addSublayer:self.myLayer];
    self.myLayer.drawableProperties = [NSDictionary dictionaryWithObjectsAndKeys:
                                       @false,
                                       kEAGLDrawablePropertyRetainedBacking,
                                       kEAGLColorFormatRGBA8,
                                       kEAGLDrawablePropertyColorFormat,nil];
}

2.设置上下文

上下文主要是用于保存OpenGL ES中的状态，是一个状态机，可以理解为一个管理绘制过程的统筹对象，所有的绘制相关的状态，都交给context来保存。

-(void)setupContext{
    self.myContext = [[EAGLContext alloc]initWithAPI:kEAGLRenderingAPIOpenGLES2];
    if (!self.myContext) {
        NSLog(@"create context failed");
        return;
    }
    if (![EAGLContext setCurrentContext:self.myContext]) {
        NSLog(@"set context failed");
        return;
    }
}

3.清空缓存区

需要清空两个缓存区：RenderBuffer和FrameBuffer。

-(void)deleteRenderAndFrameBuffer{
    glDeleteBuffers(1, &_myColorRenderBuffer);
    self.myColorRenderBuffer = 0;
    glDeleteBuffers(1, &_myColorFrameBuffer);
    self.myColorFrameBuffer = 0;
}

4.创建渲染缓冲区

frameBuffer和renderBuffer的关系：frameBuffer(FBO)是renderBuffer的管理着，或者叫做附着点。frameBuffer不存储内容，所有关于纹理的颜色，深度和模板等都存在renderBuffer中。具体关系如下图：

-(void)setupRenderBuffer{
    glGenRenderbuffers(1, &_myColorRenderBuffer);
    glBindRenderbuffer(GL_RENDERBUFFER, self.myColorRenderBuffer);
    [self.myContext renderbufferStorage:GL_RENDERBUFFER fromDrawable:self.myLayer];
}

5.创建帧缓冲区

-(void)setupFrameBuffer{
    glGenRenderbuffers(1, &_myColorFrameBuffer);
    glBindRenderbuffer(GL_RENDERBUFFER, self.myColorFrameBuffer);
    glFramebufferRenderbuffer(GL_FRAMEBUFFER,
                              GL_COLOR_ATTACHMENT0,
                              GL_RENDERBUFFER,
                              self.myColorRenderBuffer);
}

6.开始绘制

初始化：初始化背景颜色，清理缓存，并设置视口大小
GLSL自定义着色器加载：对自定义着色器进行加载，步骤就是我们上文中讲述的。创建->链接着色器->编译着色器->创建程序->链接程序着色器->使用。
顶点数据设置及处理：将顶点坐标和纹理坐标读取到自定义的顶点着色器中，并且打开通道。
加载纹理：将png/jpg图片解压成位图，并读取纹理每个像素点的纹素
绘制：开始绘制。把渲染缓冲区的内容显示到屏幕上。

-(void)renderLayer{
    glClearColor(0.3, 0.2, 0.1, 1);
    glClear(GL_COLOR_BUFFER_BIT);
    glViewport(self.frame.origin.x, self.frame.origin.y, self.frame.size.width, self.frame.size.height);
    NSString *vertFile = [[NSBundle mainBundle] pathForResource:@"shader" ofType:@"vsh"];
    NSString *fragFile = [[NSBundle mainBundle] pathForResource:@"shader" ofType:@"fsh"];
    self.myPrograme = [self loaderShaders:vertFile withFrag:fragFile];
    glLinkProgram(self.myPrograme);
    GLint linkStatus;
    glGetProgramiv(self.myPrograme, GL_LINK_STATUS, &linkStatus);
    if (linkStatus == GL_FALSE) {
        GLchar message[512];
        glGetProgramInfoLog(self.myPrograme, sizeof(message), 0, &message[0]);
        NSString *messageString = [NSString stringWithUTF8String:message];
        NSLog(@"程序连接着色器失败");
    }
    glUseProgram(self.myPrograme);
    GLfloat attrArr[] =
    {
        0.5f, -0.5f, -1.0f,     1.0f, 0.0f,
        -0.5f, 0.5f, -1.0f,     0.0f, 1.0f,
        -0.5f, -0.5f, -1.0f,    0.0f, 0.0f,
        
        0.5f, 0.5f, -1.0f,      1.0f, 1.0f,
        -0.5f, 0.5f, -1.0f,     0.0f, 1.0f,
        0.5f, -0.5f, -1.0f,     1.0f, 0.0f,
    };
    GLuint attrBuffer;
    glGenBuffers(1, &attrBuffer);
    glBindBuffer(GL_ARRAY_BUFFER, attrBuffer);
    glBufferData(GL_ARRAY_BUFFER, sizeof(attrArr), attrArr, GL_DYNAMIC_DRAW);
    GLuint position = glGetAttribLocation(self.myPrograme, "position");
    glEnableVertexAttribArray(position);
    glVertexAttribPointer(position, 3, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 5, NULL);
    GLuint textCoor = glGetAttribLocation(self.myPrograme, "textCoordinate");
    glEnableVertexAttribArray(textCoor);
    glVertexAttribPointer(textCoor, 2, GL_FLOAT, GL_FALSE, sizeof(GLfloat)*5, (float *)NULL + 3);
    [self setupTexture:@"tutu"];
    glUniform1i(glGetUniformLocation(self.myPrograme, "colorMap"), 0);
    glDrawArrays(GL_TRIANGLES, 0, 6);
    [self.myContext presentRenderbuffer:GL_RENDERBUFFER];
}
-(GLuint)setupTexture:(NSString *)fileName{
     CGImageRef spriteImage = [UIImage imageNamed:fileName].CGImage;
     if (!spriteImage) {
         NSLog(@"Failed to load image %@", fileName);
         exit(1);
     }
     size_t width = CGImageGetWidth(spriteImage);
     size_t height = CGImageGetHeight(spriteImage);
     GLubyte * spriteData = (GLubyte *) calloc(width * height * 4, sizeof(GLubyte));
     CGContextRef spriteContext = CGBitmapContextCreate(spriteData,
                                                        width,
                                                        height,
                                                        8,
                                                        width*4,
                                                        CGImageGetColorSpace(spriteImage),
                                                        kCGImageAlphaPremultipliedLast);
     CGRect rect = CGRectMake(0, 0, width, height);
     CGContextDrawImage(spriteContext, rect, spriteImage);
     CGContextRelease(spriteContext);
     glBindTexture(GL_TEXTURE_2D, 0);
     glTexParameteri( GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR );
     glTexParameteri( GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR );
     glTexParameteri( GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
     glTexParameteri( GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
     float fw = width, fh = height;
     glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, fw, fh, 0, GL_RGBA, GL_UNSIGNED_BYTE, spriteData);
     free(spriteData);
     return 0;
}

完整Demo