OpenGL ES之GLSL加载图片

最后图片效果图

整体流程可以分为4步：

1. 创建工程及自定义视图，新建自定义顶点、片元着色器文件
2. 编写顶点、片元着色器文件
3. 在自定义视图view里，设置图层layer，设置上下文context，清空缓冲区，设置渲染缓冲区RenderBuffer和帧缓冲区FrameBuffer
4. 生成加载编译着色器，链接到program，并使用program
5. 处理顶点数据，将顶点数据从CPU传递到GPU，供着色器读取
6. 加载纹理，绘制到屏幕上

1. 准备工作：

设置Main.Storyboard的根控制器的view类型为我们自定义的视图

在viewController的实现中，设置当前view为我们自定义的视图view

- (void)viewDidLoad {
    [super viewDidLoad];
    self.myView = (KKView *)self.view;
}

分别创建GLSL顶点着色器、片元着色器文件

将文件后缀修改为.vsh和.fsh（或者都修改为.glsl或其他任意字符串），并清空文件内的数据

2. 着色器编写

这两个自定义着色器文件实质上两个字符串，为了方便阅读和管理，采取了文件的方式创建。也就是里面是我们传输的顶点和纹理的数据，后面会以字符串的方式加载到程序中。由于编写时没有提示，要格外慎重。最好不要在里面写一些注释，可能会引起编译错误，虽然会提示错误的行数，但是不够准确。

• 在shaderv.vsh顶点着色器文件中

//传入的顶点坐标
attribute vec4 position;
//传入的纹理坐标
attribute vec2 textCoordinate;
//桥接用的纹理坐标
varying lowp vec2 varyTextCoord;

void main(){
    //通过varying 修饰的varyTextCoord,将纹理坐标textCoordinate传递到片元着色器
    varyTextCoord = textCoordinate;
    //给内建变量gl_Position赋值
    gl_Position = position;
}

attribute代表使用的传输方式，vec4、vec2代表四维和二维的向量类型，position和textCoordinate代表顶点坐标和纹理坐标，varyTextCoord是用于将纹理坐标textCoordinate传递给片元着色器的变量，通过varying桥接到片元着色器中，lowp低精度，gl_Position是一个内建变量，用于接收顶点坐标变换后的结果。

• 在shaderv.fsh片元着色器文件中

//指定float的默认精度为高精度，为了像素颜色更精确
precision highp float;
//从顶点着色器桥接过来的纹理坐标，名字必须保持一致
varying lowp vec2 varyTextCoord;
//纹理采样器（获取对应的纹理ID），将纹理对象传递给片元着色器
uniform sampler2D colorMap;

void main(){
    //texture2D(纹理采样器，纹理坐标)，获取对应坐标纹素
    //纹理坐标添加到对应像素点上，即将读取的纹素赋值给内建变量 gl_FragColor
    gl_FragColor = texture2D(colorMap, varyTextCoord);
}

使用uniform的方式传递纹理对象，sampler2D是二维的纹理类型，sampler1D，sampler2D，sampler3D 表示不同维度的纹理类型，gl_FragColor 内建变量用于接收纹理坐标对应的纹素，有多少个像素点就会执行多少次这个操作。

3. 设置渲染环境

在自定义view的- (void)layoutSubviews中处理我们的配置。

3.1 设置图层

self.myEagLayer = (CAEAGLLayer *)self.layer;
[self setContentScaleFactor:[UIScreen mainScreen].scale];
self.myEagLayer.drawableProperties = @{kEAGLDrawablePropertyRetainedBacking:@(0), kEAGLDrawablePropertyColorFormat:kEAGLColorFormatRGBA8};

需要将self.layer继承自CAEAGLLayer

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

你也可以在self.view上添加子视图CAEAGLLayer，就不需要将当前view重新继承了。

[self setContentScaleFactor:[UIScreen mainScreen].scale];设置将当前视图layer的scale，跟屏幕分辨率一致。

设置layer的绘制表面属性使用到以下key：

• kEAGLDrawablePropertyRetainedBacking： 表示绘图表面显示后，是否保留其内容。
• kEAGLDrawablePropertyColorFormat：可绘制表面的内部颜色缓存区格式，这个key对应的值是一个NSString指定特定颜色缓存区对象。默认是kEAGLColorFormatRGBA8。

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

3.2 设置图形上下文

//创建图形上下文，指定OpenGL ES 渲染API版本，我们使用2.0
    self.myContext = [[EAGLContext alloc] initWithAPI:kEAGLRenderingAPIOpenGLES2];
    if (!self.myContext) {
        NSLog(@"create context failed.....");
        return;
    }
    //设置为图形上下文
    if (![EAGLContext setCurrentContext:self.myContext]) {
        NSLog(@"setCurrentContext failed...");
        return;
    }

kEAGLRenderingAPIOpenGLES2是一个枚举值，2.0版本和3.0区别不大

typedef NS_ENUM(NSUInteger, EAGLRenderingAPI)
{
    kEAGLRenderingAPIOpenGLES1 = 1,
    kEAGLRenderingAPIOpenGLES2 = 2,
    kEAGLRenderingAPIOpenGLES3 = 3,
};

3.3 清空缓冲区

glDeleteRenderbuffers(1, &_myColorRenderBuffer);
    _myColorRenderBuffer = 0;
    glDeleteFramebuffers(1, &_myColorFrameBuffer);
    _myColorFrameBuffer = 0;

buffer分为frame buffer 和 render buffer2个大类。
其中frame buffer 相当于render buffer的管理者。
frame buffer object即称FBO。
render buffer则又可分为3类。colorBuffer、depthBuffer、stencilBuffer。
他们之间的关系可以通过下图清晰可见

3.4 设置 render buffer和frame buffer

设置Renderbuffer

//1.定义一个缓存区ID
    GLuint buffer;
    
    //2.申请一个缓存区标志
    glGenRenderbuffers(1, &buffer);
    
    //3.设置全局renderBuffer
    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];

设置Framebuffer，生成帧缓存区之后，则需要将renderbuffer跟framebuffer进行绑定，调用glFramebufferRenderbuffer函数进行绑定到对应的附着点上，后面的绘制才能起作用

//1.定义一个缓存区ID
    GLuint buffer;
    
    //2.申请一个缓存区标志
    //glGenRenderbuffers(1, &buffer);
    //glGenFramebuffers(1, &buffer);
    glGenBuffers(1, &buffer);
    
    //3.设置全局frameBuffer
    self.myColorFrameBuffer = buffer;
    
    //4.将标识符绑定到GL_FRAMEBUFFER
    glBindFramebuffer(GL_FRAMEBUFFER, self.myColorFrameBuffer);
    
    //5.将渲染缓存区myColorRenderBuffer 通过glFramebufferRenderbuffer函数绑定到 GL_COLOR_ATTACHMENT0上。
 /*
     glFramebufferRenderbuffer (GLenum target, GLenum attachment, GLenum renderbuffertarget, GLuint renderbuffer)
     参数1：绑定到的目标
     参数2：FrameBuffer的附着点
     参数3：需要绑定的渲染缓冲区目标
     参数4：渲染缓冲区
     */
    glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_RENDERBUFFER, self.myColorRenderBuffer);

4. 着色器加载编译链接

初始化背景颜色，清理缓存，并设置视口大小，读取前面自定义的着色文件

//设置清屏颜色
    glClearColor(0.3f, 0.4f, 0.8f, 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);
    
    //2.读取顶点着色程序、片元着色程序
    NSString *vertFile = [[NSBundle mainBundle]pathForResource:@"shaderv" ofType:@"vsh"];
    NSString *fragFile = [[NSBundle mainBundle]pathForResource:@"shaderf" ofType:@"fsh"];
    
    NSLog(@"vertFile:%@",vertFile);
    NSLog(@"fragFile:%@",fragFile);

加载着色器并链接到program

//3.加载shader
    self.myPrograme = [self loadShaders:vertFile fragFile:fragFile];
    //4.链接
    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 *messStr = [NSString stringWithUTF8String:message];
        NSLog(@"linkProgramFailed, error:%@",messStr);
        return;
    }
    NSLog(@"Program Link Success!");
    //5.使用program
    glUseProgram(self.myPrograme);

创建program，编译着色器程序并附着到program，返回program

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

创建着色器对象，将着色器源码附着到着色器并编译

- (void)compileShader:(GLuint *)shader type:(GLenum)type file:(NSString *)file {
    //1.读取文件路径字符串
    NSString *content = [NSString stringWithContentsOfFile:file encoding:NSUTF8StringEncoding error:nil];
    const GLchar *cContent = (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, &cContent, NULL);
    //4.把着色器源代码编译成目标代码
    glCompileShader(*shader);
}

5. 处理顶点数据，将顶点数据从CPU传递到GPU，供着色器读取

5.1 设置顶点、纹理坐标，传入顶点缓冲区

//6.设置顶点、纹理坐标
    //前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,
    };
    //7.-----处理顶点数据--------
    //(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_STATIC_DRAW);
    

纹理坐标系取值范围[0,1]；原点是左下角(0,0)，故而(0,0)是纹理图像的左下角，点(1,1)是右上角。
顶点数组: 开发者可以选择设定函数指针，在调用绘制方法的时候，直接由内存传入顶点数据，也就是说这部分数据之前是存储在内存当中的，被称为顶点数组
顶点缓存区: 性能更高的做法是，提前分配一块显存，将顶点数据预先传入到显存当中。这部分的显存，就被称为顶点缓冲区

5.2 通过myPrograme传递顶点数据到顶点着色程序指定的属性，开启通道，设置读取方式

    //8.将顶点数据通过myPrograme传递到顶点着色程序的position
    //1.glGetAttribLocation,用来获取vertex attribute的入口的.
    //2.告诉OpenGL ES,通过glEnableVertexAttribArray，
    //3.最后数据是通过glVertexAttribPointer传递过去的。
    
    //(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);
    
    //9.----处理纹理数据-------
    //(1).glGetAttribLocation,用来获取vertex attribute的入口的.
    //注意：第二参数字符串必须和shaderv.vsh中的输入变量：textCoordinate保持一致
    GLuint textCoord = glGetAttribLocation(self.myPrograme, "textCoordinate");
    //(2).设置合适的格式从buffer里面读取数据
    glEnableVertexAttribArray(textCoord);
    //(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(textCoord, 2, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 5, (float *)NULL + 3);

打开读取通道：
在iOS中, 默认情况下，出于性能考虑，所有顶点着色器的属性（Attribute）变量都是关闭的，意味着，顶点数据在着色器端(服务端)是不可用的。即使你已经使用glBufferData方法，将顶点数据从内存拷贝到顶点缓存区中(GPU显存中)。
所以，必须由glEnableVertexAttribArray 方法打开通道，指定访问属性，才能让顶点着色器能够访问到从CPU复制到GPU的数据.
注意: 数据在GPU端是否可见，即，着色器能否读取到数据，由是否启用了对应的属性决定，这就是glEnableVertexAttribArray的功能，允许顶点着色器读取GPU（服务器端）数据。
注意：glGetAttribLocation第二个参数，必须跟我们着色器文件中的变量名一致

6. 加载纹理并绘制

将图片解压成位图，加载纹理返回纹理id

//从图片中加载纹理
- (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第二个参数，必须跟我们着色器文件中的变量名一致。
glUniform1i 第一个参数代表片元着色器中的纹理采样器，第二个参数表示对应哪个纹理单元，默认为0，第一个纹理单元。

//10.加载纹理，
    [self loadTexture:@"yekong"];
    
    //11. 设置纹理采样器 sampler2D
    glUniform1i(glGetUniformLocation(self.myPrograme, "colorMap"), 0);
    //12.绘图
    glDrawArrays(GL_TRIANGLES, 0, 6);
    //13.从渲染缓存区显示到屏幕上
    [self.myContext presentRenderbuffer:GL_RENDERBUFFER];

至此，完成了GLSL加载图片的全过程。
但是我们通过效果图可以发现，图片显示是倒过来的。下一篇我将通过5种方式来将纹理翻转。