使用 GLSL 语言自定义着色器加载图片

本案例旨在简单的使用 GLSL 语言自定义着色器，实现图片的加载。最终的实现效果如下图所示：

整个流程可分为以下几块

1. 准备工作
2. 重写 layoutSubviews
3. 创建特殊图层
4. 创建上下文
5. 清空缓存区
6. 设置渲染&帧缓存区
7. 开始绘制

一. 准备工作

包括项目的创建、自定义 View 的创建以及自定义着色器的创建

创建自定义着色器文件

1. Command + N，选择 iOS -> Other -> Empty，点击 Next

2. 输入文件名称，点击 Create，创建成功

这里我创建两个文件：shaderv.vsh（顶点着色器）和 shaderv.fsh（片元着色器），后缀名区分

自定义着色器

因为自定义的着色器在 Xcode 中是没有联想和提示的，需要手敲，这里需要格外注意。另外，使用中文注释可能会导致一些问题，建议代码中不要使用中文注释。

顶点着色器

• 定义两个 attribute 修饰的变量，分别表示顶点坐标 position 和纹理坐标 textCoordinate
• 定义一个 varying 修饰的变量 varyTextCoord，用来将纹理坐标从顶点着色器传递到片元着色器
• main 函数：如果顶点没有任何变换操作，则直接将顶点坐标赋值给内建变量gl_Position，如果顶点有变换，将变换后的结果 即最终的顶点坐标数据，赋值给内建变量

attribute vec4 position;
attribute vec2 textCoordinate;
varying lowp vec2 varyTextCoord;

void main() {
    varyTextCoord = textCoordinate;
    gl_Position = position;
}

片元着色器

• 定义默认精度，如果不写，可能会报一些异常的错误
• 定义一个与顶点着色器的桥接变量 varyTextCoord，必须与顶点着色器中一模一样，如果不一致，纹理坐标数据将无法传递
• 定义一个 unifom 修饰的纹理采样器 colorMap，用于获取纹理坐标每个像素点的纹素
• main 函数：主要是纹理颜色的填充，即将最终的颜色值结果赋值给内建变量 gl_FragColor

precision highp float;
varying lowp vec2 varyTextCoord;
uniform sampler2D colorMap;

void main() {
    gl_FragColor = texture2D(colorMap, varyTextCoord);
}

创建图层

layer 主要是用于显示 OpenGL ES 绘制内容的载体

• 创建特殊图层

因为我们要使用的是 CAEAGLLayer，而 UIView 中自带的 layer 是继承自 CALayer 的，所以需要重写类方法：

+ (Class)layerClass {
    return [CAEAGLLayer class];
}

• 设置 scale，与屏幕大小一致

[self setContentScaleFactor:[UIScreen mainScreen].scale];

• 设置属性

self.myEagLayer.drawableProperties = [NSDictionary dictionaryWithObjectsAndKeys:@false,kEAGLDrawablePropertyRetainedBacking,kEAGLColorFormatRGBA8, kEAGLDrawablePropertyColorFormat, nil];

属性	属性说明	默认值
kEAGLDrawablePropertyRetainedBacking	表示绘图表面显示后，是否保留其内容	false
kEAGLDrawablePropertyColorFormat	可绘制表面的内部颜色缓存区格式	kEAGLColorFormatRGBA8

颜色缓存区格式枚举

枚举值	描述
kEAGLColorFormatRGBA8	32位的RGBA颜色值（每个表示8位，所以4*8=32位）
kEAGLColorFormatRGB565	16位的RGB颜色值
kEAGLColorFormatRGBA8	sRGB代表了标准的红、绿、蓝，即CRT显示器、LCD显示器、投影机、打印机以及其他设备中色彩再现所使用的三个基本色素。sRGB的色彩空间基于独立的色彩坐标，可以使色彩在不同的设备使用传输中对应于同一个色彩坐标体系，而不受这些设备各自具有的不同色彩坐标的影响

创建上下文

用于保存 OpenGL ES 中的状态，是一个状态机，不论是 GLKIt 还是 GLSL，都需要 context。

• 创建 Context，并指定 OpenGL ES 渲染 API 的版本号，判断是否创建成功
• 设置当前的 Context 为上一步创建的 context，判断设置是否成功

    //1.指定OpenGL ES 渲染API版本，我们使用2.0
    EAGLRenderingAPI api = kEAGLRenderingAPIOpenGLES2;
    //2.创建图形上下文
    EAGLContext *context = [[EAGLContext alloc]initWithAPI:api];
    //3.判断是否创建成功
    if (!context) {
        NSLog(@"Create context failed!");
        return;
    }
    //4.设置图形上下文
    if (![EAGLContext setCurrentContext:context]) {
        NSLog(@"setCurrentContext failed!");
        return;
    }

清空缓存区

清除残留数据，防止残留数据对本次操作造成影响，包括RenderBuffer & FrameBuffer

//清空渲染缓存区
glDeleteBuffers(1, &_myColorRenderBuffer);
self.myColorRenderBuffer = 0;

//清空帧缓存区
glDeleteBuffers(1, &_myColorFrameBuffer);
self.myColorFrameBuffer = 0;

设置 RenderBuffer & 设置 FrameBuffer

buffer 分为 frame buffer 和 render buffer 2个大类。其中 frame buffer 相当于 render buffer的管理者。frame buffer object 即称 FBO。 render buffer 则又可分为3类：colorBuffer、depthBuffer、stencilBuffer。

setupRenderBuffer

创建 BufferID 并申请标识符，将标识符绑定至 GL_RENDERBUFFER，并且将 layer 的相关存储绑定到 RenderBuffer 对象

//1.定义一个缓存区ID
GLuint buffer;

//2.申请一个缓存区标志
glGenRenderbuffers(1, &buffer);

//3.
self.myColorRenderBuffer = buffer;

//4.将标识符绑定到GL_RENDERBUFFER
glBindRenderbuffer(GL_RENDERBUFFER, self.myColorRenderBuffer);

//5.将可绘制对象drawable object's  CAEAGLLayer的存储绑定到OpenGL ES renderBuffer对象
[self.myContext renderbufferStorage:GL_RENDERBUFFER fromDrawable:self.myEagLayer];

setupFrameBuffer

创建 BufferID 并申请标识符，将标识符绑定至 GL_FRAMEBUFFER，然后将RenderBuffer通过glFramebufferRenderbuffer函数绑定到FrameBuffer中的GL_COLOR_ATTACHMENT0附着点上，通过FrameBuffer来管理RenderBuffer，RenderBuffer存储相关数据到相应缓存区

GLuint buffer;
glGenBuffers(1, &buffer);

self.myColorFrameBuffer = buffer;

glBindFramebuffer(GL_FRAMEBUFFER, self.myColorFrameBuffer);

/*
参数1：绑定到的目标
参数2：FrameBuffer的附着点
参数3：需要绑定的渲染缓冲区目标
参数4：渲染缓冲区
*/
glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_RENDERBUFFER, self.myColorRenderBuffer);

绘制

和之前 OpenGL 绘制一样，要初始化背景颜色，清理缓存，并设置视口大小；然后自定义着色器的编译、加载；顶点数据的处理；纹理加载；最后开始绘制。

初始化

//设置清屏颜色
glClearColor(0.3f, 0.45f, 0.5f, 1.0f);
//清除屏幕
glClear(GL_COLOR_BUFFER_BIT);

//1.设置视口大小
CGFloat scale = [[UIScreen mainScreen]scale];
glViewport(self.frame.origin.x * scale, self.frame.origin.y * scale,       self.frame.size.width * scale, self.frame.size.height * scale);

加载自定义着色器

包括读取自定义着色器、编译、加载、使用 program

读取顶点、片元着色程序

NSString *vertFile = [[NSBundle mainBundle]pathForResource:@"shaderv" ofType:@"vsh"];
NSString *fragFile = [[NSBundle mainBundle]pathForResource:@"shaderf" ofType:@"fsh"];

编译

• 根据文件路径读取着色器文件中的源码字符串，并将其转换为 c 中的字符串
• 根据 loadShaders: Withfrag: 传入的着色器类型 type，创建一个 shader
• 将读取的着色器源码通过 glShaderSource 函数附加到创建的 shader 上
• 通过 glCompileShade r函数将 shader 上附加的源码编译成目标代码

- (void)compileShader:(GLuint *)shader type:(GLenum)type file:(NSString *)file {
    
    //1.读取文件路径字符串
    NSString* content = [NSString stringWithContentsOfFile:file encoding:NSUTF8StringEncoding error:nil];
    const GLchar* source = (GLchar *)[content UTF8String];
    
    //2.创建一个shader（根据type类型）
    *shader = glCreateShader(type);
    
    //3.将着色器源码附加到着色器对象上。
    //参数1：shader,要编译的着色器对象 *shader
    //参数2：numOfStrings,传递的源码字符串数量 1个
    //参数3：strings,着色器程序的源码（真正的着色器程序源码）
    //参数4：lenOfStrings,长度，具有每个字符串长度的数组，或NULL，这意味着字符串是NULL终止的
    glShaderSource(*shader, 1, &source,NULL);
    
    //4.把着色器源代码编译成目标代码
    glCompileShader(*shader);
}

加载

顶点着色器和片元着色器编译完成后，并返回着色器对应的ID，然后通过 glAttachShader 函数将顶点和片元的 shader 分别附着到 program 上，然后释放不再使用的 shader，并赋值给全局的 program

-(GLuint)loadShaders:(NSString *)vert Withfrag:(NSString *)frag {
    //1.定义2个零时着色器对象
    GLuint verShader, fragShader;
    //创建program
    GLint program = glCreateProgram();
    
    //2.编译顶点着色程序、片元着色器程序
    //参数1：编译完存储的底层地址
    //参数2：编译的类型，GL_VERTEX_SHADER（顶点）、GL_FRAGMENT_SHADER(片元)
    //参数3：文件路径
    [self compileShader:&verShader type:GL_VERTEX_SHADER file:vert];
    [self compileShader:&fragShader type:GL_FRAGMENT_SHADER file:frag];
    
    //3.创建最终的程序
    glAttachShader(program, verShader);
    glAttachShader(program, fragShader);
    
    //4.释放不需要的shader
    glDeleteShader(verShader);
    glDeleteShader(fragShader);
    
    return program;
}

链接 program

• 通过 glLinkProgram 函数链接 program
• 可以通过 glGetProgramiv 函数通过制定值 GL_LINK_STATUS 获取链接的状态
• 可以通过 glGetProgramIngoLog 函数获取错误信息日志

// 链接
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(@"Program Link Error:%@",messageString);
    return;
}

使用 program

通过 glUseProgram 函数来使用链接成功的 program

// 使用program
glUseProgram(self.myPrograme);

顶点数据处理

通过数组存储顶点数据，并将顶点坐标和纹理坐标读取到自定义的顶点着色器中

设置顶点数据

//前3个是顶点坐标，后2个是纹理坐标
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,
};

开辟顶点缓存区

//(1)顶点缓存区
GLuint attrBuffer;
//(2)申请一个缓存区标识符
glGenBuffers(1, &attrBuffer);
//(3)将attrBuffer绑定到GL_ARRAY_BUFFER标识符上
glBindBuffer(GL_ARRAY_BUFFER, attrBuffer);
//(4)把顶点数据从CPU内存复制到GPU上
glBufferData(GL_ARRAY_BUFFER, sizeof(attrArr), attrArr, GL_DYNAMIC_DRAW);

打开顶点/片元的通道

由于 iOS 中，attribute 通道默认是关闭的，需要手动开启。数据有顶点坐标和纹理坐标两种，需要开启两次。

这里我们使用的是自定义的着色器，需要自己获取（GLKit 有封装好的固定着色器），通过 glGetAttribLocation 获取 vertex attribute 的入口。

⚠️注意：
第二个参数的字符串必须与着色器文件中对应的变量名一模一样！一模一样！一模一样！

例如处理顶点数据：

//(1)注意：第二参数字符串必须和shaderv.vsh中的输入变量：position保持一致
GLuint position = glGetAttribLocation(self.myPrograme, "position");

//(2).设置合适的格式从buffer里面读取数据
glEnableVertexAttribArray(position);

//(3).设置读取方式
//参数1：index,顶点数据的索引
//参数2：size,每个顶点属性的组件数量，1，2，3，或者4.默认初始值是4.
//参数3：type,数据中的每个组件的类型，常用的有GL_FLOAT,GL_BYTE,GL_SHORT。默认初始值为GL_FLOAT
//参数4：normalized,固定点数据值是否应该归一化，或者直接转换为固定值。（GL_FALSE）
//参数5：stride,连续顶点属性之间的偏移量，默认为0；
//参数6：指定一个指针，指向数组中的第一个顶点属性的第一个组件。默认为0
glVertexAttribPointer(position, 3, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 5, NULL);

加载纹理

这一步主要是将 png/jpg 图片解压成位图，通过自定义着色器读取纹理每个像素点的纹素。

• 将 UIImage 对象转化成 CGImageRef
• 使用 CGContextRef 创建的上下文，调用 CGContextDrawImage 函数使用默认方式进行绘制，再绘制之前，需要获取图片的大小、宽、高等数据，因为绘制时需要使用这些数据
• 绑定纹理：当只有一个纹理的时候，默认的纹理ID是0，且0一直是激活状态，因此是可以省略 glGenTexture这一步
• 设置纹理参数：过滤方式&环绕方式
• 载入纹理
• 释放指针

- (GLuint)setupTexture:(NSString *)fileName {
    
    //1、将 UIImage 转换为 CGImageRef
    CGImageRef spriteImage = [UIImage imageNamed:fileName].CGImage;
    
    //判断图片是否获取成功
    if (!spriteImage) {
        NSLog(@"Failed to load image %@", fileName);
        exit(1);
    }
    
    //2、读取图片的大小，宽和高
    size_t width = CGImageGetWidth(spriteImage);
    size_t height = CGImageGetHeight(spriteImage);
    
    //3.获取图片字节数 宽*高*4（RGBA）
    GLubyte * spriteData = (GLubyte *) calloc(width * height * 4, sizeof(GLubyte));
    
    //4.创建上下文
    /*
     参数1：data,指向要渲染的绘制图像的内存地址
     参数2：width,bitmap的宽度，单位为像素
     参数3：height,bitmap的高度，单位为像素
     参数4：bitPerComponent,内存中像素的每个组件的位数，比如32位RGBA，就设置为8
     参数5：bytesPerRow,bitmap的没一行的内存所占的比特数
     参数6：colorSpace,bitmap上使用的颜色空间  kCGImageAlphaPremultipliedLast：RGBA
     */
    CGContextRef spriteContext = CGBitmapContextCreate(spriteData, width, height, 8, width*4,CGImageGetColorSpace(spriteImage), kCGImageAlphaPremultipliedLast);
    

    //5、在CGContextRef上--> 将图片绘制出来
    /*
     CGContextDrawImage 使用的是Core Graphics框架，坐标系与UIKit 不一样。UIKit框架的原点在屏幕的左上角，Core Graphics框架的原点在屏幕的左下角。
     CGContextDrawImage 
     参数1：绘图上下文
     参数2：rect坐标
     参数3：绘制的图片
     */
    CGRect rect = CGRectMake(0, 0, width, height);
   
    //6.使用默认方式绘制
    CGContextDrawImage(spriteContext, rect, spriteImage);
   
    //7、画图完毕就释放上下文
    CGContextRelease(spriteContext);
    
    //8、绑定纹理到默认的纹理ID（
    glBindTexture(GL_TEXTURE_2D, 0);
    
    //9.设置纹理属性
    /*
     参数1：纹理维度
     参数2：线性过滤、为s,t坐标设置模式
     参数3：wrapMode,环绕模式
     */
    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;
    
    //10.载入纹理2D数据
    /*
     参数1：纹理模式，GL_TEXTURE_1D、GL_TEXTURE_2D、GL_TEXTURE_3D
     参数2：加载的层次，一般设置为0
     参数3：纹理的颜色值GL_RGBA
     参数4：宽
     参数5：高
     参数6：border，边界宽度
     参数7：format
     参数8：type
     参数9：纹理数据
     */
    glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, fw, fh, 0, GL_RGBA, GL_UNSIGNED_BYTE, spriteData);
    
    //11.释放spriteData
    free(spriteData);   
    return 0;
}

设置纹理采样器

获取纹理中对应像素点的的颜色值，即纹素

• 通过 glGetUniformLocation 函数，获取 fragment uniform 的入口，需要传入两个参数，一个是 program，一个是自定义片元着色器文件中变量名字符串 colorMap，第二个参数的字符串必须与着色器文件中对应的变量名保持一致！

• 通过 glUniform1i 函数获取纹素，第一个参数是 fragment uniform 的入口，本质也是一个 ID，第二个参数是纹理的 ID，使用的是默认的 ID 0

//11. 设置纹理采样器 sampler2D
glUniform1i(glGetUniformLocation(self.myPrograme, "colorMap"), 0);

绘制

• 调用 glDrawArrays 函数指定图元连接方式进行绘制
• context 调用 presentRenderbuffe r函数将绘制好的图片渲染到屏幕上进行显示

//绘图
glDrawArrays(GL_TRIANGLES, 0, 6);
    
// 从渲染缓存区显示到屏幕上
[self.myContext presentRenderbuffer:GL_RENDERBUFFER];

完整代码见GitHub 自定义着色器