渲染代码书写指北之OpenGL ES）

GLKit（OpenGL ES）.png

一、视图准备

1 使用GLKView

1.1 设置GLKView的上下文

1.1.1 根据API创建上下文

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

- (nullable instancetype) initWithAPI:(EAGLRenderingAPI) api;

1.2 把新建的上下文设置为当前上下文

[EAGLContext setCurrentContext:context];

1.3 把上下文赋值给GLKView.context

view.context = _context;

1.4 设置view绘制的缓存区

@property (nonatomic) GLKViewDrawableColorFormat drawableColorFormat;
@property (nonatomic) GLKViewDrawableDepthFormat drawableDepthFormat;
@property (nonatomic) GLKViewDrawableStencilFormat drawableStencilFormat;
@property (nonatomic) GLKViewDrawableMultisample drawableMultisample;

2 使用CAEAGLLayer

2.1 使用CAEAGLLayer
- 2.1.1 设置当前layer的class为CAEAGLLayer
- 2.1.2 当前layer添加CAEAGLLayer为subLayer
2.2 设置像素缩放因子

self.contentScaleFactor = [UIScreen mainScreen].scale;

2.3 设置CAEAGLLayer的drawableProperties

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

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

2.4 清空渲染缓存区和帧缓存区

///清理缓存
+ (void)clearBufferWithColorRenderBuffer:(GLuint)colorRenderBuffer
             andColorFrameBuffer:(GLuint)colorFrameBuffer {
    /*
    buffer分为frame buffer 和 render buffer2个大类。
    其中frame buffer 相当于render buffer的管理者。
    frame buffer object即称FBO。
    render buffer则又可分为3类。colorBuffer、depthBuffer、stencilBuffer。
    */
    glDeleteBuffers(1, &colorRenderBuffer);
    colorRenderBuffer = 0;
    glDeleteBuffers(1, &colorFrameBuffer);
    colorFrameBuffer = 0;
}

2.5 设置渲染缓存区和帧缓存区

///设置渲染缓存和帧缓存
+ (void)setupRenderBuffer:(GLuint)renderBuffer
            andFrameBuffer:(GLuint)frameBuffer
                withLayer:(CAEAGLLayer *)layer
                context:(EAGLContext *)context {
    glGenRenderbuffers(1, &renderBuffer);
    glBindRenderbuffer(GL_RENDERBUFFER, renderBuffer);
    //将可绘制对象drawable object's  CAEAGLLayer的存储绑定到OpenGL ES renderBuffer对象
    [context renderbufferStorage:GL_RENDERBUFFER fromDrawable:layer];

    glGenRenderbuffers(1, &frameBuffer);
    glBindFramebuffer(GL_FRAMEBUFFER, frameBuffer);
    /*生成帧缓存区之后，则需要将renderbuffer跟framebuffer进行绑定，
    调用glFramebufferRenderbuffer函数进行绑定到对应的附着点上，后面的绘制才能起作用
    */
    //将渲染缓存区myColorRenderBuffer 通过glFramebufferRenderbuffer函数绑定到 GL_COLOR_ATTACHMENT0上。
    glFramebufferRenderbuffer(GL_FRAMEBUFFER,
                            GL_COLOR_ATTACHMENT0,
                            GL_RENDERBUFFER,
                            renderBuffer);
}

二、窗口准备

设置清屏颜色

void glClearColor();

设置视口

CGFloat scale = [UIScreen mainScreen].scale;
glViewport(scale * self.frame.origin.x,
           scale * self.frame.origin.y,
           scale * self.frame.size.width,
           scale * self.frame.size.height);

清理缓存

void glClear (GLbitfield mask);

三、顶点数据

声明、定义顶点数组

顶点缓存区

2.1 分配顶点缓存区，并存储缓存区标示

glGenBuffers(1, &name);

2.2 绑定顶点缓存区

glBindBuffer(GL_ARRAY_BUFFER, self.name);

2.3 把内存中的顶点数据copy到显存中

glBufferData(GLenum target,
            GLsizeiptr size, 
            const GLvoid *data, 
            GLenum usage);

向GL服务端传入顶点数据，并指定读取方式

打开属性入口（在iOS中，为了考虑性能问题，入口默认是关闭的）

glEnableVertexAttribArray(GLuint index);

设置读取方式

void glVertexAttribPointer (GLuint indx, 
                            GLint size, 
                            GLenum type, 
                            GLboolean normalized, 
                            GLsizei stride, 
                            const GLvoid* ptr);

四、纹理数据

GLKit使用GLKTextureLoader加载纹理

1.1 获取纹理文件路径

[[[NSBundle mainBundle] resourcePath] stringByAppendingPathComponent:fileName];

1.2 设置纹理坐标的原点位置

@{GLKTextureLoaderOriginBottomLeft : @(1)}

1.3 加载并返回纹理对象

+ (nullable GLKTextureInfo *)textureWithContentsOfFile:(NSString *)path 
                                            options:(nullable NSDictionary<NSString*, NSNumber*> *)options 
                                            error:(NSError * __nullable * __nullable)outError;

1.4 纹理对象赋值给GLKBaseEffect

GLKTextureInfo *textureInfo = [SSGLUtil textureInfoWithFileName:@"kunkun.jpg"];
_effect = [[GLKBaseEffect alloc] init];
_effect.texture2d0.enabled = GL_TRUE;
_effect.texture2d0.name = textureInfo.name;

OpenGL读取纹理数据

2.1 获取纹理文件路径

[[[NSBundle mainBundle] resourcePath] stringByAppendingPathComponent:fileName];

2.2 绘制位图

2.2.1 获取CGImage

CGImageRef imgRef = image.CGImage;
if (nil == imgRef) {
    NSLog(@"SSRenderTool laod CGImage failed");
    return 0;
}

2.2.2 绘制位图

GLuint width = (GLuint)CGImageGetWidth(imgRef);
GLuint height = (GLuint)CGImageGetHeight(imgRef);
CGRect imgRect = CGRectMake(0, 0, width, height);

CGColorSpaceRef colorSpaceRef = CGColorSpaceCreateDeviceRGB();
void *imageData = malloc(width * height * 4);

/*
参数1：data,指向要渲染的绘制图像的内存地址
参数2：width,bitmap的宽度，单位为像素
参数3：height,bitmap的高度，单位为像素
参数4：bitPerComponent,内存中像素的每个组件的位数，比如32位RGBA，就设置为8
参数5：bytesPerRow,bitmap的没一行的内存所占的比特数
参数6：colorSpace,bitmap上使用的颜色空间  kCGImageAlphaPremultipliedLast：RGBA
*/
CGContextRef contextRef = CGBitmapContextCreate(imageData,
                                                width,
                                                height,
                                                8,
                                                width * 4,
                                                colorSpaceRef,
                                                kCGImageAlphaPremultipliedLast | kCGBitmapByteOrder32Big);
CGColorSpaceRelease(colorSpaceRef);
CGContextClearRect(contextRef, imgRect);

2.2.3 图像翻转

CGContextTranslateCTM(contextRef, 0, height);
CGContextScaleCTM(contextRef, 1.0f, -1.0f);

2.2.4 绘制

CGContextDrawImage(contextRef, imgRect, imgRef);

2.3 分配纹理缓存区

GLuint textureID;
glGenTextures(1, &textureID);

2.4 绑定纹理

glBindTexture(GL_TEXTURE_2D, textureID);

2.5 载入纹理

/*
参数1：纹理模式，GL_TEXTURE_1D、GL_TEXTURE_2D、GL_TEXTURE_3D
参数2：加载的层次，一般设置为0
参数3：纹理的颜色值GL_RGBA
参数4：宽
参数5：高
参数6：border，边界宽度
参数7：format
参数8：type
参数9：纹理数据
*/
void glTexImage2D (GLenum target, 
                    GLint level, 
                    GLint internalformat, 
                    GLsizei width, 
                    GLsizei height, 
                    GLint border,
                    GLenum format, 
                    GLenum type, 
                    const GLvoid* pixels);

2.6 设置纹理属性

glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST);
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);

2.7 绑定着色器上的纹理通道

/*
参数1：纹理维度
参数2：纹理ID,因为只有一个纹理，给0就可以了。
*/
glBindTexture(GL_TEXTURE_2D, 0);

五、矩阵变换管理

六、着色器

1 编译着色器

+ (GLuint)compileShaderWithName:(NSString *)name type:(GLenum)type {
    NSString *shaderType = type == GL_VERTEX_SHADER ? @"vsh" : @"fsh";
    NSString *shaderPath = [[NSBundle mainBundle] pathForResource:name
                                                            ofType:shaderType];
        NSError *error;
    NSString *content = [NSString stringWithContentsOfFile:shaderPath
                                                encoding:NSUTF8StringEncoding
                                                error:&error];
    if (error) {
        NSLog(@"SSShaderTool compile shader(name:%@) error(line:%d):\n%@", name, __LINE__, error);
        return 0;
    }
    if (content == nil) {
        NSLog(@"SSShaderTool get shader file content failed");
        return 0;
    }
    //创建shader
    GLuint shader = glCreateShader(type);
    const GLchar *contentChar = [content UTF8String];
    int length = (int)[content length];
    glShaderSource(shader, 1, &contentChar, &length);
    
    glCompileShader(shader);
    
    GLint result;
    glGetShaderiv(shader, GL_COMPILE_STATUS, &result);
    if (result == GL_FALSE) {
        GLchar msg[512];
        glGetShaderInfoLog(shader, sizeof(msg), 0, &msg[0]);
        
        NSString *msgStr = [NSString stringWithUTF8String:msg];
        NSLog(@"SSShaderTool compile %@ shader error(%d): \n%@", shaderType, __LINE__, msgStr);
        return 0;
    }
    return shader;
}

1.1 获取文件路径
1.2 货物文件内容
1.3 创建着色器
1.4 指定着色器的源码内容
1.5 编译着色器
1.6 检查编译状态

2 创建program
3 把着色器附着到program上
4 链接program
5 检查链接状态
6 使用着色器

///根据shader名称编译shader
+ (GLuint)shaderProgramWithName:(NSString *)name {
    GLuint vertexShader = [self compileShaderWithName:name type:GL_VERTEX_SHADER];
    GLuint fragShader = [self compileShaderWithName:name type:GL_FRAGMENT_SHADER];
    
    if (!vertexShader || !fragShader) {
        NSLog(@"SSShaderTool compile shader failed");
        return 0;
    }
    
    GLuint program = glCreateProgram();
    glAttachShader(program, vertexShader);
    glAttachShader(program, fragShader);
    
    glLinkProgram(program);
    
    GLint result;
    glGetProgramiv(program, GL_LINK_STATUS, &result);
    if (result == GL_FALSE) {
        GLchar msg[512];
        glGetProgramInfoLog(program, sizeof(msg), 0, &msg[0]);
        
        NSString *msgStr = [NSString stringWithUTF8String:msg];
        NSLog(@"SSShaderTool link program error : %@", msgStr);
        return 0;
    }
    return program;
}

七、准备绘制
1. 使用GLKBaseEffect准备绘制
```
[_effect prepareToDraw];
```
1. 自定义effect准备绘制

八、渲染

1 使用GLKView

void glDrawArrays (GLenum mode, GLint first, GLsizei count);

2 使用CAEAGLLayer

glDrawElements(GL_TRIANGLES, sizeof(indices) / sizeof(indices[0]), GL_UNSIGNED_INT, indices);

[_context presentRenderbuffer:GL_RENDERBUFFER];

九、内存处理
1. 上下文；
2. 顶点缓存标识
3. 顶点数据内存；
4. 纹理对象标识；