OpenGL学习（十一）-- 用 GLSL 实现加载图片

个人 OpenGL 专题学习目录，但愿和你们一块儿学习交流进步！

• OpenGL学习（一）-- 术语了解
• OpenGL学习（二）-- Xcode 搭建 OpenGL 环境
• OpenGL学习（三）-- OpenGL 基础渲染
• OpenGL学习（四）-- 正面&背面剔除和深度测试
• OpenGL学习（五）-- 裁剪与混合
• OpenGL学习（六）-- 基础纹理
• OpenGL学习（七）-- 基础变化综合练习实践总结
• OpenGL学习（八）-- OpenGL ES 初探（上）
• OpenGL学习（九）-- OpenGL ES 初探（下）GLKit
• OpenGL学习（十）-- 着色语言 GLSL 语法介绍
• OpenGL学习（十一）-- 用 GLSL 实现加载图片
• OpenGL学习（十二）-- OpenGL ES 纹理翻转的策略对比

---

1、前言

上次我写了一篇 OpenGL学习（九）-- OpenGL ES 初探（下）GLKit，使用 GLKit 加载了一个立体图形，可是咱们知道苹果提供的 GLKit 的功能是有限的，因此此次咱们就不用 GLKit 的 GLKBaseEffect，而使用编译连接自定义的着色器 （shader），用简单的 GLSL 语言来实现顶点、片元着色器，并实现加载一张图片。 上一篇 OpenGL学习（十）-- 着色语言 GLSL 语法介绍 已经对 GLSL 的语法进行了介绍，有语法不懂的地方能够去看看。

2、GLSL 加载图片的完整流程

学习时，最好是先总结出思惟导图，能够帮助咱们理解并记忆流程步骤，下面是我画的一张用 GLSL 加载图片的完整的思惟导图，里面的如 setuplayer、setupContext 等函数是我根据步骤本身封装出来的，具体可看文末的总体源码。

下面着重把绘制的步骤拆分开来，绘制了绘制部分的思惟导图：

3、编写GLSL文件

咱们写的 GLSL 代码对 xcode 来讲就是一长串的字符串，因此后缀名用什么都无所谓，当咱们阅读 GPUImage 源码、ijkplayer 源码的时候，能够发现它们的 shader 就是用普通的字符串来存储的，这是没有任何问题的，缺点只是不易于阅读和书写。

因此咱们通常会建立一个文件，后缀为 “.vsh” 和 ".fsh"，“.vsh” 表明 verterx shader 顶点着色器，".fsh" 表明 fragment shader 片元着色器。 经常使用后缀有：“.vsh”、".fsh" 和通用后缀 “glsl”。

若是着色器文件命名的是通用的后缀 “glsl”，那如何区分哪一个是顶点着色器哪一个是片元着色器？ 顶点着色器里必定有对内建函数 gl_Position 的赋值，片元着色器内则有对内建函数 gl_FragColor 的赋值，能够以此来判断。

顶点着色器：

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

void main() {
    varyTextCoord = textCoordinate;
    gl_Position = position;
}
复制代码

片元着色器：

varying lowp vec2 varyTextCoord;
uniform sampler2D colorMap;

void main() {
    gl_FragColor = texture2D(colorMap, varyTextCoord);
}
复制代码

4、经常使用 API

下面介绍一些经常使用的 API。这些经常使用 API 咱们务必要掌握记住，由于咱们写的 GLSL 代码，并非由 xcode 帮咱们编译的，而是由咱们开发者自行编译、自行 link、自行生成 program 的。

一、建立与编译一个着色器

（1）glCreateShader 建立着色器

GLuint glCreateShader(GLenum type);
复制代码

• 参数 type： 建立着色器的类型，GL_VERTEX_SHADER 或者 GL_FRAGMENT_SHADER
• 返回值： 是指向新着⾊器对象的句柄，能够调⽤。

（2）glDeleteShader 删除着色器

void glDeleteShader(GLuint shader);
复制代码

• 参数 shader： 要删除的着⾊器对象句柄

（3）glShaderSource 将着色器源码附加到着色器对象上

void glShaderSource (GLuint shader, GLsizei count, const GLchar* const *string, const GLint* length);
复制代码

• 参数 1：shader 指向着⾊器对象的句柄。
• 参数 2：count 着⾊器源字符串的数量，着⾊器能够由多个源字符串组成，可是每一个着⾊器只有一个 main 函数。
• 参数 3：strings 指向着色器源字符串的指针。
• 参数 length： 长度，具备每一个字符串长度的数组，或 NULL，这意味着字符串是 NULL 终止的。

（4）glCompileShader 编译

void glCompileShader (GLuint shader) 
复制代码

• 参数 shader： 须要编译的着⾊器对象的句柄。

二、建立并连接程序（program）

在 OpenGL ES 中，每一个 program 对象有且仅有一个 Vertex Shader 对象和一个 Fragment Shader 对象链接到它。

（1）glCreateProgram 建立 program

GLuint glCreateProgram (void)
复制代码

• 返回值： 返回⼀个执行新程序对象的句柄。

（2）glDeleteProgram 删除 program

void glDeleteProgram(GLuint program)
复制代码

• 参数 program： 指向要删除的程序对象的句柄。

（3）glAttachShader 着色器与程序附着

void glAttachShader (GLuint program, GLuint shader)
复制代码

• 参数 1：program 指向程序对象的句柄。
• 参数 2：shader 指向程序附着的着色器对象的句柄。

（4）glDetachShader 断开附着

void glDetachShader(GLuint program, GLuint shader)
复制代码

• 参数 1：program 指向程序对象的句柄。
• 参数 2：shader 指向程序断开附着的着色器对象的句柄。

（5）glLinkProgram 连接程序

void glLinkProgram(GLuint program);
复制代码

• 参数：program 指向程序对象的句柄。

（6）glGetProgramiv 判断是否连接成功

void glGetProgramiv (GLuint program, GLenum pname, GLint* params);
复制代码

• 参数 1：program 须要获取信息的程序对象的句柄。
• 参数 2：pname 获取信息的参数，能够是： GL_ACTIVE_ATTRIBUTES GL_ACTIVE_ATTRIBUTES_MAX_LENGTH GL_ACTIVE_UNIFORM_BLOCK GL_ACTIVE_UNIFORM_BLOCK_MAX_LENGTH GL_ACTIVE_UNIFROMS GL_ACTIVE_UNIFORM_MAX_LENGTH GL_ATTACHED_SHADERS GL_DELETE_STATUS GL_INFO_LOG_LENGTH GL_LINK_STATUS GL_PROGRAM_BINARY_RETRIEVABLE_HINT GL_TRANSFORM_FEEDBACK_BUFFER_MODE GL_TRANSFORM_FEEDBACK_VARYINGS GL_TRANSFORM_FEEDBACK_VARYING_MAX_LENGTH GL_VALIDATE_STATUS
• 参数3：params 指向查询结果整数存储位置的指针。

（7）glUseProgram 使用 program

void glUseProgram (GLuint program);
复制代码

• 参数：program 设为为活动程序的程序对象的句柄。

三、顶点着色器与片元着色器实现编译、绑定、链接。

（1）glGetAttribLocation 将顶点数据经过 myPrograme 传递到顶点着色程序的 position （传递attribute类型）

int glGetAttribLocation (GLuint program, const GLchar* name)
复制代码

• 参数 1：program 指定用哪一个程序对象的句柄来传递数据。
• 参数 2：name 顶点变量的名字，此字符串必须和 shaderv.vsh 中的输入变量：position 保持一致。

（2）glGetUniformLocation 将纹理采样器数据经过 myPrograme 传递到片元着色程序的 colorMap （传递uniform类型）

int glGetUniformLocation (GLuint program, const GLchar* name)
复制代码

• 参数 1：program 指定用哪一个程序对象的句柄来传递数据。
• 参数 2：name 纹理采样器变量的名字，此字符串必须和 shaderf.vsh 中的变量：colorMap 保持一致。

5、源码展现

顶点着色器 shaderv.vsh 和片元着色器 shaderf.fsh 的源码在文章开始已经给出，这里就再也不重复。

一、头文件与属性声明

#import <OpenGLES/ES2/gl.h>
#import "WPView.h"
@interface WPView()

//在iOS和tvOS上绘制OpenGL ES内容的图层，继承与CALayer
@property(nonatomic,strong)CAEAGLLayer *myEagLayer;
@property(nonatomic,strong)EAGLContext *myContext;
@property(nonatomic,assign)GLuint myColorRenderBuffer;
@property(nonatomic,assign)GLuint myColorFrameBuffer;
@property(nonatomic,assign)GLuint myPrograme;
@end
复制代码

二、入口layoutSubviews 函数

- (void)layoutSubviews {
    //1.设置图层
    [self setupLayer];
    //2.设置图形上下文
    [self setupContext];
    //3.清空缓存区
    [self deleteRenderAndFrameBuffer];
    //4.设置RenderBuffer
    [self setupRenderBuffer];
    //5.设置FrameBuffer
    [self setupFrameBuffer];
    //6.开始绘制
    [self renderLayer];
}
// 重写layerClass，将CCView返回的图层从CALayer替换成CAEAGLLayer
+ (Class)layerClass {
    return [CAEAGLLayer class];
}
复制代码

三、设置图层 setupLayer 函数

// 1.设置图层
- (void)setupLayer {
    //1.建立特殊图层
    self.myEagLayer = (CAEAGLLayer *)self.layer;
    //2.设置scale
    [self setContentScaleFactor:[[UIScreen mainScreen]scale]];
    //3.设置描述属性，这里设置不维持渲染内容以及颜色格式为RGBA8
    self.myEagLayer.drawableProperties = [NSDictionary dictionaryWithObjectsAndKeys:@false,kEAGLDrawablePropertyRetainedBacking, kEAGLColorFormatRGBA8,kEAGLDrawablePropertyColorFormat,nil];
}
复制代码

四、设置上下文 setupContext 函数

// 2.设置上下文
- (void)setupContext {
    // 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;
    }
    //5.将局部context，变成全局的
    self.myContext = context;
}
复制代码

五、清空缓存区 deleteRenderAndFrameBuffer 函数

// 3.清空缓存区
- (void)deleteRenderAndFrameBuffer {
    /*
     buffer分为frame buffer 和 render buffer2个大类。
     其中frame buffer 至关于render buffer的管理者。
     frame buffer object即称FBO。
     render buffer则又可分为3类。colorBuffer、depthBuffer、stencilBuffer。
     */
    glDeleteBuffers(1, &_myColorRenderBuffer);
    self.myColorRenderBuffer = 0;
    glDeleteBuffers(1, &_myColorFrameBuffer);
    self.myColorFrameBuffer = 0;
}
复制代码

六、设置 RenderBuffer setupRenderBuffer 函数

// 4.设置RenderBuffer
- (void)setupRenderBuffer {
    //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]; } 复制代码

七、设置 FrameBuffer setupFrameBuffer 函数

// 5.设置FrameBuffer
- (void)setupFrameBuffer {
    //1.定义一个缓存区ID
    GLuint buffer;
    //2.申请一个缓存区标志
    glGenBuffers(1, &buffer);
    //3.
    self.myColorFrameBuffer = buffer;
    //4.
    glBindFramebuffer(GL_FRAMEBUFFER, self.myColorFrameBuffer);
    /*生成帧缓存区以后，则须要将renderbuffer跟framebuffer进行绑定，
     调用glFramebufferRenderbuffer函数进行绑定到对应的附着点上，后面的绘制才能起做用
     */
    //5.将渲染缓存区myColorRenderBuffer 经过glFramebufferRenderbuffer函数绑定到 GL_COLOR_ATTACHMENT0上。
    glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_RENDERBUFFER, self.myColorRenderBuffer);
}
复制代码

八、开始绘制 renderLayer 函数

// 6.开始绘制
- (void)renderLayer {
    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);
    
    // 2.读取顶点着色程序、片元着色程序
    NSString *vertFile = [[NSBundle mainBundle]pathForResource:@"shaderv" ofType:@"vsh"];
    NSString *fragFile = [[NSBundle mainBundle]pathForResource:@"shaderf" ofType:@"fsh"];

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

    //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).设置读取方式
    glVertexAttribPointer(position, 3, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 5, NULL);

    //9.----处理纹理数据-------
    //(1).glGetAttribLocation,用来获取vertex attribute的入口的.
    //注意：第二参数字符串必须和shaderv.vsh中的输入变量：textCoordinate保持一致
    GLuint textCoor = glGetAttribLocation(self.myPrograme, "textCoordinate");
    
    //(2).设置合适的格式从buffer里面读取数据
    glEnableVertexAttribArray(textCoor);
    
    //(3).设置读取方式
    glVertexAttribPointer(textCoor, 2, GL_FLOAT, GL_FALSE, sizeof(GLfloat)*5, (float *)NULL + 3);
    
    //10.加载纹理
    [self setupTexture:@"夏目"];
    
    //11. 设置纹理采样器 sampler2D
    glUniform1i(glGetUniformLocation(self.myPrograme, "colorMap"), 0);
    
    //12.绘图
    glDrawArrays(GL_TRIANGLES, 0, 6);
    
    //13.从渲染缓存区显示到屏幕上
    [self.myContext presentRenderbuffer:GL_RENDERBUFFER];
}
复制代码

8.一、加载shader loadShaders 函数

// 加载shader
- (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.建立最终的program程序，把shader附着上去
    glAttachShader(program, verShader);
    glAttachShader(program, fragShader);
    
    //4.释放不须要的shader
    glDeleteShader(verShader);
    glDeleteShader(fragShader);
    
    return program;
}
复制代码

8.二、从图片中加载纹理 setupTexture 函数

// 从图片中加载纹理
- (GLuint)setupTexture:(NSString *)fileName {
    //一、将 UIImage 转换为 CGImageRef
    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);
    
    //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的没一行的内存所占的比特数，4表明rgba
     参数6：colorSpace,bitmap上使用的颜色空间
     参数7：kCGImageAlphaPremultipliedLast：RGBA
     */
    CGContextRef spriteContext = CGBitmapContextCreate(spriteData, width, height, 8, width*4,CGImageGetColorSpace(spriteImage), kCGImageAlphaPremultipliedLast);

    //五、在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);

    //七、画图完毕就释放上下文
    CGContextRelease(spriteContext);
    
    // 以上1-7步骤，就是在进行图片解压缩，在yyImage或SD中也能够看到
    
    //八、绑定纹理到默认的纹理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;
}
复制代码

效果图：

效果图成功显示出来了，可是倒是倒置的，这种问题怎么解决呢？下一篇文章《OpenGL ES 纹理翻转的策略对比》咱们一块儿聊聊几种解决办法，再比较一些他们的优劣吧！

转载请备注原文出处，不得用于商业传播——凡几多