我的 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 纹理翻转的策略对比

一、前言

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

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

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

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

三、编写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);
}

四、常用 API

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

1、创建与编译一个着色器

（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： 需要编译的着⾊器对象的句柄。

2、创建并链接程序（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 设为为活动程序的程序对象的句柄。

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

（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 保持一致。

五、源码展示

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

1、头文件与属性声明

#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

2、入口`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];
}

3、设置图层 `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];
}

4、设置上下文 `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;
}

5、清空缓存区 `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;
}

6、设置 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];
}

7、设置 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);
}

8、开始绘制 `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.1、加载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.2、从图片中加载纹理 `setupTexture` 函数

// 从图片中加载纹理
- (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的没一行的内存所占的比特数，4代表rgba
     参数6：colorSpace,bitmap上使用的颜色空间
     参数7：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);
    
    // 以上1-7步骤，就是在进行图片解压缩，在yyImage或SD中也可以看到
    
    //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;
}

效果图：

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

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

一、前言

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

三、编写GLSL文件

四、常用 API

1、创建与编译一个着色器

（1）glCreateShader 创建着色器

（2）glDeleteShader 删除着色器

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

（4）glCompileShader 编译

2、创建并链接程序（program）

（1）glCreateProgram 创建 program

（2）glDeleteProgram 删除 program

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

（4）glDetachShader 断开附着

（5）glLinkProgram 链接程序

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

（7）glUseProgram 使用 program

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

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

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