iOS-零基础学习OpenGL-ES入门教程（一）

写在前面

由于作的摄像头相关工做，工做中经常使用到OpenGL去作视频渲染，图形变换等，虽然说知足了开发需求，可是本身对于OpenGL的学习一直没有很系统完善，属于需求驱动学习。因此才有了这个开篇

OpenGL ES的开始学习必然是有一点点枯燥和难理解的哈，没有C语言编程基础的童鞋，初次接触C接口编程会有一点疑惑，可是不要紧，所谓孰能生巧，多思考，练习便可。

学习书籍这块：

1. OpenGL ES应用开发实践指南：iOS卷
2. 红宝书 OpenGL Programming Guide，出到第八版
3. 蓝宝书 OpenGL SuperBible，出到第六版

入门教程以及demo代码主要来源于《OpenGL ES应用开发实践指南：iOS卷》

1.OpenGL ES概述

关于概念介绍我就贴上百度了哈（哈哈，偷懒一下） OpenGL ES百度百科

OK，OpenGL是用于2D/3D图形编程的一套基于C语言的统一接口，在桌面windows，Mac，Linux/Unix上都可兼容。

OpenGL ES是在OpenGL嵌入式设备上面的版本，也就是安卓/iPhone，其余嵌入式等移动设备的编程规范。（除此以外，在web上也有相应的WebGL）

如今在iOS平台上目前支持的OpenGL版本有

• OpenGL1.0
• OpenGL2.0
• OpenGL3.0

后面的教程均基于OpenGL2.0环境下。（其中1.0版本基本已经再也不使用了。）

从上面的简单介绍咱们知道了OpenGL ES是作图形编程的， 下图摘自苹果的官方介绍: OpenGL ES Programming Guide

能够看到咱们经过OpenGL ES驱动gpu图形处理器实现图形编程。

发散小思考: OpenGL ES做为iOS相对底层库，能够完成2D/3D图形渲染，那么咱们日常的UIView也能够基于CoreAnimation完成3D动画，图形显示，那么UIView和OpenGL有什么内在关系呢，咱们的iPhone最终是怎么完成图像显示的呢？

从上图能够看到core animation Layers就是经过OpenGL ES绘制最后混合，而后经过帧缓存显示到屏幕上的。

2.iOS OpenGL ES最简单的实践

OK，因为是开篇，下面咱们经过一个简单的例子完成一个三角形的绘制 在这里咱们使用GLkit：这是苹果作的一层封装，能够简化在iOS下OPENGL ES代码。

至于GLkit具体作了什么，后面随着咱们深刻学习能够再回头来看，后面会编写不使用GLkit的demo，能够经过比对来看到底优化了哪些流程，这里暂时只须要记住使用GLkit能够简化代码。

• GLKViewController：UIViewController的子类，接收当视图须要重绘时的消息
• GLKView：UIView的子类，简化了经过用Core Animation层来自动建立并管理帧缓存和渲染缓存共享内存所须要作的工做。

1. 建立OpenGL ES上下文 建立一个GLKViewController，在ViewdidLoad生命周期中：

GLKView *view  = (GLKView *)self.view;
    //建立OpenGL ES2.0上下文
    view.context = [[EAGLContext alloc]initWithAPI:kEAGLRenderingAPIOpenGLES2];
    //设置当前上下文
    [EAGLContext setCurrentContext:view.context];
复制代码

2. 声明一个GLKBaseEffect属性

@property (nonatomic,strong)GLKBaseEffect *baseEffect;
复制代码

而且在ViewDidLoad实例化

self.baseEffect = [[GLKBaseEffect alloc]init];
//使用静态颜色绘制
  self.baseEffect.useConstantColor = GL_TRUE;
//设置默认绘制颜色，参数分别是 RGBA
  self.baseEffect.constantColor = GLKVector4Make(1.0f, 1.0f, 1.0f, 1.0f);
   //设置背景色为黑色
   glClearColor(0.0f,0.0f,0.0f,1.0f);
复制代码

GLKBaseEffect使咱们不须要编写shader Language代码就能够简单完成图形绘制，关于Shader Language后面再讲解学习

3. 顶点数据 咱们须要绘制一个三角形天然须要三个顶点，OpenGL ES采用的笛卡尔坐标系

   

//顶点结构体
typedef struct{
    GLKVector3 positionCoords;
}sceneVertex;

//三角形的三个顶点
static const sceneVertex vertices[] = {
    {{-0.5f,-0.5f,0.0}},
    {{0.5f,-0.5f,0.0}},
    {{-0.5f,0.5f,0.0}},
};
复制代码

4. 生成缓存而且为缓存提供数据，这是最重要的一步

//声明缓存ID属性
@property (nonatomic,assign)GLuint *vertextBufferID;
复制代码

//viewdidload中生成并绑定缓存数据
  glGenBuffers(1, &vertextBufferID);
  glBindBuffer(GL_ARRAY_BUFFER, vertextBufferID); //绑定指定标识符的缓存为当前缓存
  glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);
复制代码

• glGenBuffers申请一个标识符
• glBindBuffer 将标识符绑定到GL_ARRAY_BUFFER
• glBufferData复制顶点数据从CPU到GPU

接下来在GLKViewController的 -(void)glkView:(GLKView *)view drawInRect:(CGRect)rect 代理方法中

- (void)glkView:(GLKView *)view drawInRect:(CGRect)rect{
    [self.baseEffect prepareToDraw];
    
    //Clear Frame Buffer
    glClear(GL_COLOR_BUFFER_BIT);
    
    //开启缓存
    glEnableVertexAttribArray(GLKVertexAttribPosition);
    
    //设置缓存数据指针
    glVertexAttribPointer(GLKVertexAttribPosition,
                          3,
                          GL_FLOAT,
                          GL_FALSE, //小数点固定数据是否被改变
                          sizeof(sceneVertex),
                          NULL);  //从开始位置
    //绘图
    glDrawArrays(GL_TRIANGLES,
                 0,
                 3);

}
复制代码

• glEnableVertexAttribArray 开启对应的顶点缓存属性
• glVertexAttribPointer 设置指针从顶点数组中读取数据
• glDrawArrays 绘制图形

5. 释放缓存数据 在dealloc方法中释放掉缓存数据

- (void)dealloc{
    GLKView *view = (GLKView *)self.view;
    [EAGLContext setCurrentContext:view.context];
    if ( 0 != vertextBufferID) {
        glDeleteBuffers(1,
                        &vertextBufferID);
        vertextBufferID = 0;
    }
}
复制代码

最后的运行结果图以下

拓展小问题：1. 如何将背景色改为红色 2. 如何将三角形颜色改为黑色，而不是如今的白色

• (void)glkView:(GLKView *)view drawInRect:(CGRect)rect是GLKViewController系统给咱们回调的绘制消息，该方法会一直被调用，和display方法一致

EAGLContext上下文本质上是个状态机，只有在当前上下文下，Opengl ES API调用才会生效

3.总结： 建立缓存数据并完成最终渲染显示的七个步骤

1. 生成: glGenBuffers()
2. 绑定缓存数据: glBindBuffer()
3. 缓存数据:glBufferData()
4. 启用:glEnableVertexAttribArray()
5. 设置指针:glVertexAttribPointer()
6. 绘图:glDrawArrays()
7. 删除:glDeleteBuffers()

好了，就此咱们就使用OpenGL ES完成了一个最简单的绘制demo，初次学习OpenGL ES确定对其中概念会有不少疑问，这都不要紧，咱们先熟悉一下，随着后续的学习再回来看这些疑问。

2017-0413更新： Demo代码地址：LearnOpenGLESDemo

参考书籍：1. OpenGL ES应用开发实践指南：iOS卷