[OpenGL ES _ 入门_01](http://www.jianshu.com/p/f66906b27819)
[OpenGL ES _ 入门_02](http://www.jianshu.com/p/dc49c946438e)
[OpenGL ES _ 入门_03](http://www.jianshu.com/p/00b5be729e4b)
[OpenGL ES _ 入门_04](http://www.jianshu.com/p/516b0b8be9d8)
[OpenGL ES _ 入门_05](http://www.jianshu.com/p/08c51c298d47)
[OpenGL ES _ 入门练习_01](http://www.jianshu.com/p/eebaf64e3e0a)
[OpenGL ES _ 入门练习_02](http://www.jianshu.com/p/6155d60dab20)
[OpenGL ES _ 入门练习_03](http://www.jianshu.com/p/36d9dac03345)
[OpenGL ES _ 入门练习_04](http://www.jianshu.com/p/1ca30e9387dd)
[OpenGL ES _ 入门练习_05](http://www.jianshu.com/p/ac9375962f34)
[OpenGL ES _ 入门练习_06](http://www.jianshu.com/p/c63dc219f7a0)
[OpenGL ES _ 着色器 _ 介绍](http://www.jianshu.com/p/309d489bc344)
[OpenGL ES _ 着色器 _ 程序](http://www.jianshu.com/p/ed0c617bcd67)
[OpenGL ES _ 着色器 _ 语法](http://www.jianshu.com/p/c5b89b294995)
[OpenGL ES_着色器_纹理图像](http://www.jianshu.com/p/8c0ad4e3e40f)
[OpenGL ES_着色器_预处理](http://www.jianshu.com/p/5e9837b0b219)
[OpenGL ES_着色器_顶点着色器详解](http://www.jianshu.com/p/9d7dca6b70c7)
[OpenGL ES_着色器_片断着色器详解](http://www.jianshu.com/p/55461927c419 )
[OpenGL ES_着色器_实战01](http://www.jianshu.com/p/18d6b37363c8)
[OpenGL ES_着色器_实战02](http://www.jianshu.com/p/45d959c8f1db)
[OpenGL ES_着色器_实战03](http://www.jianshu.com/p/0f740901da59)
在操练之前，我想提醒广大同行，这一些列教程，我只教大家怎么使用好这个东西，繁琐的概念，和原理，我不想说，请自行百度其它同行的博客,书籍 或者官方文档(耐心很重要)。
为什么要使用它！
运行在GPU 上，一个字快！比如你要做视频的实时处理，每秒60 帧，如果你用cpu 处理它，cpu的使用率可能达到％80 以上，你手机会非常烫，不信试试看。如果你在gpu上做处理，试试看，爽爆你！
学习目标！
用最底层的代码绘制一个三角形？
需要掌握概念
坐标系: 默认坐标系x轴(-1,1) y轴(-1,1)
顶点坐标:点的位置，我们要画三角形，就要三个坐标点：左上(-1,1),左下(-1,-1),右下(1,-1)
实现步骤
第一步.创建一个CAEAGLayer 层的view 视图，显示我们的三角型
第二步. 创建一个EAGLContext 来管理我们的GPU的内存数据和绘制命令
第三步，创建一个渲染管理器
第四步，创建一个帧缓存区
第五步，创建一个颜色渲染缓存区
第六步，将顶点数据加载到gpu内存中去
第七步，将颜色渲染数据加载到gpu内存中去
第八步，开始绘制
第九步，将内存中的内容呈现到界面上去！
so easy！ 一定要有耐心，决心，信心！让我们操练起来吧！
详细步骤分步讲解
1. 创建一个CAEAGLayer 层的view 视图，创建一个继承UIView的类，重写一个方法:
代码语言：javascript复制 (Class)layerClass{
return [CAEAGLLayer class];
}第一步就完成了。是不是很简单。
2.创建一个EAGLContext 对象，将其设置GPU 的当前上下文。
代码语言：javascript复制self.eagContext = [[EAGLContext alloc]initWithAPI:kEAGLRenderingAPIOpenGLES2];
[EAGLContext setCurrentContext:self.eagContext];我们强引用它self.eagContext 后面需要用到。第二步完成。
3.创建一个渲染管理器
代码语言：javascript复制@property(nonatomic,strong)GLKBaseEffect *baseEffect;
self.baseEffect = [[GLKBaseEffect alloc]init];
完成，这个对象有很多配置，我们先不用，后面详细讲！
4.创建一个帧缓存区(两步:申请，绑定 )
代码语言：javascript复制GLuint _framebuffer; // 帧缓存标示
glGenFramebuffers(1, &_framebuffer); // 为帧缓存申请一个内存标示，唯一的 1.代表一个帧缓存
glBindFramebuffer(GL_FRAMEBUFFER, _framebuffer);// 把这个内存标示绑定到帧缓存上 ，GL_FRAMEBUFFER 代表帧缓冲常量完成，不要这么简单
5.创建颜色渲染缓冲区(申请，绑定，关联，开辟内存)
代码语言：javascript复制GLuint _colorFramebuffer;// 颜色缓存标示
glGenRenderbuffers(1, &_colorFramebuffer);
glBindRenderbuffer(GL_RENDERBUFFER, _colorFramebuffer);
[self.eagContext renderbufferStorage:GL_RENDERBUFFER fromDrawable:(CAEAGLLayer*)self.layer];
glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0,GL_RENDERBUFFER, _colorFramebuffer);6.清楚gpu中的图像数据，好显示我们的数据
代码语言：javascript复制- (void)clear{
glViewport(0, 0, [self drawableWidth], [self drawableHeight]);
glClearColor(1, 1, 1, 1);
glClear(GL_COLOR_BUFFER_BIT);
}7.绘制顶点坐标
代码语言：javascript复制-(void) createTriangleVertices{
[self.baseEffect prepareToDraw];
GLuint _positionbuffer; // 顶点坐标标示;
glGenBuffers(1, &_positionbuffer);
glBindBuffer(GL_ARRAY_BUFFER, _positionbuffer);
glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);
glEnableVertexAttribArray(GLKVertexAttribPosition);
// 设置指针
glVertexAttribPointer(GLKVertexAttribPosition, // 指示绑定的缓存包含的是顶点位置的信息
3,// 顶点数量
GL_FLOAT, // 数据类型
GL_FALSE,// 告诉opengl 小数点固定数据是否可以被改变
sizeof(GLfloat)*2, // 步幅 指定每个顶点保存需要多少个字节
NULL); // 告诉opengl 可以从绑定数据的开始位置访问数据
// 绘图
glDrawArrays(GL_TRIANGLES, // 告诉opengl 怎么处理顶点缓存数据
0, // 设置绘制第一个顶点的位置
3); // 绘制顶点的数量
}8. 绘制颜色坐标
代码语言：javascript复制-(void)createColorbuffer{
[self.baseEffect prepareToDraw];
GLuint _colorbuffer; // 顶点对应的颜色渲染缓冲区标示
glGenBuffers(1, &_colorbuffer);
glBindBuffer(GL_ARRAY_BUFFER, _colorbuffer);
glBufferData(GL_ARRAY_BUFFER, sizeof(colors), colors, GL_STATIC_DRAW);
// 启动绘制颜色命令
glEnableVertexAttribArray(GLKVertexAttribColor);
// 设置指针
glVertexAttribPointer(GLKVertexAttribColor, // 指示绑定的缓存包含的是顶点位置的信息
3,// 顶点数量
GL_FLOAT, // 数据类型
GL_FALSE,// 告诉opengl 小数点固定数据是否可以被改变
sizeof(GLfloat)*3, // 步幅 指定每个顶点保存需要多少个字节
NULL); // 告诉opengl 可以从绑定数据的开始位置访问数据
// 绘图
glDrawArrays(GL_TRIANGLES, // 告诉opengl 怎么处理顶点缓存数据
0, // 设置绘制第一个顶点的位置
3); // 绘制顶点的数量
}9.呈现内容
代码语言：javascript复制-(void)showRenderbuffer{
[self.eagContext presentRenderbuffer:GL_RENDERBUFFER];
}附加:
顶点坐标
代码语言：javascript复制GLfloat vertices [6] = {-1,1, // 左上
-1,-1, // 左下
1,-1}; // 右下顶点对应的颜色
代码语言：javascript复制GLfloat colors[9] = {1,0,0, // 左上
0,0,1, // 左下
0,1,0}; // 右下代码下载地址: https://pan.baidu.com/s/1bp1amsB
