OpenGL ES --使用GLSL语言加载一张图

一、本章内容主要通过代码案例进行分析

案例的目标，渲染一张图片
思路：

• 1.创建图层
• 2.创建上下文
• 3.清空缓存区
• 4.设置RenderBuffer
• 5.设置FrameBuffer
• 6.开始绘制

二、不采用GLKBaseEffect，使用编译链接自定义的着色器（shader）。用简单的glsl语言来实现顶点、片元着色器，并图形进行简单的变换，整体思路的代码实现。

• 首先按照我们的思路设置好每一步的方法名，以及所需要的属性myEAGLLayer设置layer层，myContext用来设置我们的上下文，myColorRenderBuffer:设置渲染缓存区，myColorFrameBuffer：设置帧缓存区，myProgram：设置程序。

//
//  CCView.m
//  OpenGL--GLSL
//
//  Created by fenwei on 2020/7/30.
//  Copyright © 2020 sxcoal.com. All rights reserved.
//

#import "CCView.h"
#import 
@interface CCView ()

@property (nonatomic, strong)CAEAGLLayer *myEAGLLayer;

@property (nonatomic, strong)EAGLContext *myContext;

@property(nonatomic,assign)GLuint myColorRenderBuffer;

@property(nonatomic,assign)GLuint myColorFrameBuffer;

@property(nonatomic,assign)GLuint myProgram;

@end
@implementation CCView
-(void)layoutSubviews{
    [self setUpLayer];
    [self setUpContext];
    [self deleteRenderAndFrameBuffer];
    [self setupRenderBuffer];
    [self setupFrameBuffer];
    [self renderLayer];
}
+(Class)layerClass{
    return [CAEAGLLayer class];
}
//第一步：创建图层
-(void)setUpLayer{
    
}

//第二步：创建上下文
-(void)setUpContext{
   
}

//第四步：设置RenderBuffer渲染缓存区，渲染缓存区被帧缓存区管理的
-(void)setupRenderBuffer{
  
    
}

//第五步：设置FrameBuffer
-(void)setupFrameBuffer{
   
    
}

//第六步：开始绘制
-(void)renderLayer{
    
}

@end

三、具体实现

1，创建图层方法的实现-(void)setUpLayer

• 创建特殊图层CAEAGLLayer

self.myEAGLLayer = (CAEAGLLayer*)self.layer;

• 因为不同的设备分辨率不同，这里我们需要设置一下scale

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

• 设置描述属性，这里设置不维持渲染内容以及颜色格式为RGBA8

    /*
     kEAGLDrawablePropertyRetainedBacking  表示绘图表面显示后，是否保留其内容。
     kEAGLDrawablePropertyColorFormat
     可绘制表面的内部颜色缓存区格式，这个key对应的值是一个NSString指定特定颜色缓存区对象。默认是kEAGLColorFormatRGBA8；
     
     kEAGLColorFormatRGBA8：32位RGBA的颜色，4*8=32位
     kEAGLColorFormatRGB565：16位RGB的颜色，
     kEAGLColorFormatSRGBA8：sRGB代表了标准的红、绿、蓝，即CRT显示器、LCD显示器、投影机、打印机以及其他设备中色彩再现所使用的三个基本色素。sRGB的色彩空间基于独立的色彩坐标，可以使色彩在不同的设备使用传输中对应于同一个色彩坐标体系，而不受这些设备各自具有的不同色彩坐标的影响。
     */
    self.myEAGLLayer.drawableProperties = [NSDictionary dictionaryWithObjectsAndKeys:@false,kEAGLDrawablePropertyRetainedBacking, kEAGLColorFormatRGBA8,kEAGLDrawablePropertyColorFormat, nil];

2,创建上下文-(void)setUpContext方法的实现

• 指定OpenGL ES渲染的版本

    EAGLRenderingAPI api = kEAGLRenderingAPIOpenGLES2;

• 创建图形上下文

    EAGLContext *context = [[EAGLContext alloc]initWithAPI:api];

• 判断上下文是否设置成功以及设置当前图形上下文

//判断上下文是否创建成功
    if (!context) {
        NSLog(@"Create context failed");
        return;
    }
    
    //设置图形上下文
    if (![EAGLContext setCurrentContext:context]) {
        NSLog(@"setCurrentContext failed!");
        return;
    }

• 将局部的 context设置为全局

    self.myContext = context;

3,清空缓存区-(void)deleteRenderAndFrameBuffer方法具体实现，清空buffer。

• 首先我们要知道什么是buffer，buffer分为frame buffer 和 render buffer2个大类。其中frame buffer相当于render buffer的管理者，frame buffer object即称FBO。 render buffer则又可分为3类。colorBuffer颜色缓存区、depthBuffer深度缓存区、stencilBuffer模型缓存区。、
• 使用glDeleteBuffers方法来清空缓存区

    glDeleteBuffers(1, &_myColorRenderBuffer);
    self.myColorRenderBuffer = 0;
    
    glDeleteBuffers(1, &_myColorFrameBuffer);
    self.myColorFrameBuffer = 0;

4,设置RenderBuffer渲染缓存区，渲染缓存区被帧缓存区管理的，-(void)setupRenderBuffer方法的具体实现

• 定义bufferID

GLuint buffer;
 glGenRenderbuffers(1,&buffer);

• 绑定buffer，将标识符绑定到GL_RENDERBUFFER

self.myColorRenderBuffer = buffer;
 glBindRenderbuffer(GL_RENDERBUFFER,self.myColorRenderBuffer);

• 将可绘制对象drawable object's CAEAGLLayer的存储绑定到OpenGL ES renderBuffer对象

    [self.myContext renderbufferStorage:GL_RENDERBUFFER fromDrawable:self.myEAGLLayer];

5,设置FrameBuffer

-(void)setupFrameBuffer{
    //1.创建bufferID
    GLuint buffer;
    
    //2.
    glGenBuffers(1, &buffer);
    
    //3.
    self.myColorFrameBuffer = buffer;

    glBindFramebuffer(GL_FRAMEBUFFER, self.myColorFrameBuffer);
    /*生成帧缓存区之后，则需要将renderbuffer跟framebuffer进行绑定，
     调用glFramebufferRenderbuffer函数进行绑定到对应的附着点上，后面的绘制才能起作用
     */
    //4.
    glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_RENDERBUFFER, self.myColorRenderBuffer);
    
}

6,开始绘制-(void)renderLayer

• 清空颜色缓存区

 glClearColor(0.3f, 0.45f, 0.5f, 1.0f);   
 glClear(GL_COLOR_BUFFER_BIT);

• 设置视口大小

 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);

• 读取片元着色器/顶点着色器

NSString *vertFile = [[NSBundle mainBundle]pathForResource:@"shaderv" ofType:@"vsh"];
   NSString *fragFile = [[NSBundle mainBundle]pathForResource:@"shaderf" ofType:@"fsh"];
  self.myProgram = [self loaderShader:vertFile withFrag:fragFile];

#pragma mark -- shader
//把顶点着色器字符串和片元着色器的字符串传进来进行处理
/**
 @param vert 顶点着色器字符串shaderv.vsh
 @param frag 片元着色器字符串shaderf.fsh
 */
-(GLuint)loaderShader:(NSString *)vert withFrag:(NSString *)frag{
    //1.定义顶点着色器对象、片元着色器对象
    GLuint verShader,fragShader;
    
    //2.创建一个程序对象program
    GLuint program = glCreateProgram();
    
    //3.编译顶点、片元着色器
    [self complieShader:&verShader type:GL_VERTEX_SHADER file:vert];
    [self complieShader:&fragShader type:GL_FRAGMENT_SHADER file:frag];
    
    //4.编译好的程序附着到shader上
    glAttachShader(program, verShader);
    glAttachShader(program, fragShader);
    
    //5.已经用完了可以删除了，否则占用内存
    glDeleteShader(verShader);
    glDeleteShader(fragShader);
    
    
    return program;
}
-(void)complieShader:(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
    *shader = glCreateShader(type);
    
    //3.着色器的源码附着到着色对象上
    glShaderSource(*shader, 1, &source, NULL);
    
    //4.编译
    glCompileShader(*shader);
}

• program链接

   glLinkProgram(self.myProgram);
    
    //获取链接的状态
    GLint linkStatus;
    glGetProgramiv(self.myProgram, GL_LINK_STATUS, &linkStatus);
    if (linkStatus==GL_FALSE) {
        //link失败的信息
        GLchar message[512];
        glGetShaderInfoLog(self.myProgram, sizeof(message), 0, &message[0]);
        
        NSString *meaasgeString = [NSString stringWithUTF8String:message];
        NSLog(@"Program link error: %@",meaasgeString);
        return;
    }
    glUseProgram(self.myProgram);

• 准备顶点数据/纹理坐标

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

• 打开通道

    ///1.获取顶点数据对应通道ID
    //(1)注意：第二参数字符串必须和shaderv.vsh中的输入变量：position保持一致
    GLuint position = glGetAttribLocation(self.myProgram, "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);
    
    
    
    //.----处理纹理数据-------
    GLuint textCoor  = glGetAttribLocation(self.myProgram, "textCoordinate");
    
    glEnableVertexAttribArray(textCoor);

    glVertexAttribPointer(textCoor, 2, GL_FLOAT, GL_FALSE, sizeof(GLfloat) *5, (float *)NULL + 3);
    

• 加载纹理，设置纹理采样器，最后进行绘制

 //10.加载纹理
    [self setupTexture:@"kunkun"];
    
    //11.设置纹理采样器...默认纹理ID为0
    glUniform1i(glGetUniformLocation(self.myProgram, "colorMap"), 0);
    
    //12.绘制
    glDrawArrays(GL_TRIANGLES, 0, 6);
    
    //13从渲染缓存区显示到屏幕上
    [self.myContext presentRenderbuffer:GL_RENDERBUFFER];

加载纹理以及图片的解压缩操作

#pragma mark - 加载纹理，图片的解压缩
-(GLuint)setupTexture:(NSString *)fileName{
    //1.纹理解压缩->OpenGL ES
    CGImageRef spriteImage = [[UIImage imageNamed:fileName] CGImage];
    
    //2.判断图片获取是否成功
    if (!spriteImage) {
        NSLog(@"Faile to load image");
        exit(1);
    }
    //3.对图片进行重绘
    size_t width = CGImageGetWidth(spriteImage);
    size_t height = CGImageGetHeight(spriteImage);
    GLubyte *spriteBytes = (GLubyte *)calloc(width * height * 4, sizeof(GLubyte));
    /*
     参数1：data,指向要渲染的绘制图像的内存地址
     参数2：width,bitmap的宽度，单位为像素
     参数3：height,bitmap的高度，单位为像素
     参数4：bitPerComponent,内存中像素的每个组件的位数，比如32位RGBA，就设置为8
     参数5：bytesPerRow,bitmap的没一行的内存所占的比特数
     参数6：colorSpace,bitmap上使用的颜色空间  kCGImageAlphaPremultipliedLast：RGBA
     */
    CGContextRef spriteContext = CGBitmapContextCreate(spriteBytes, width, height, 8, width * 4, CGImageGetColorSpace(spriteImage), kCGImageAlphaPremultipliedLast);
      /*
      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);
    
    //纹理
    ///绑定纹理(当只有一个纹理的时候，纹理ID默认为0)所以下面这行可以省略
//    glGenTextures(1, 0);
    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);
    
    //载入纹理
    /*
      参数1：纹理模式，GL_TEXTURE_1D、GL_TEXTURE_2D、GL_TEXTURE_3D
      参数2：加载的层次，一般设置为0
      参数3：纹理的颜色值GL_RGBA
      参数4：宽
      参数5：高
      参数6：border，边界宽度
      参数7：format
      参数8：type
      参数9：纹理数据
      */
    float fw = width, fh = height;
    glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, fw, fh, 0, GL_RGBA, GL_UNSIGNED_BYTE, spriteBytes);
    
    //free
    free(spriteBytes);
    
    return 0;
}