渲染代码书写指北之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; - 1.1 设置GLKView的上下文
- 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); } - 2.1 使用CAEAGLLayer
- 1 使用GLKView
- 二、窗口准备
- 设置清屏颜色
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- 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);
- GLKit使用GLKTextureLoader加载纹理
- 五、矩阵变换管理
- 六、着色器
- 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];- 自定义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]; - 九、内存处理
- 上下文；
- 顶点缓存标识
- 顶点数据内存；
- 纹理对象标识；