OpenGL ES _ 入门练习_005

[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的类，重写一个方法:

+(Class)layerClass{

return [CAEAGLLayer class];

}

第一步就完成了。是不是很简单。

2.创建一个EAGLContext 对象，将其设置GPU 的当前上下文。

self.eagContext = [[EAGLContext alloc]initWithAPI:kEAGLRenderingAPIOpenGLES2];

[EAGLContext setCurrentContext:self.eagContext];

我们强引用它self.eagContext 后面需要用到。第二步完成。

3.创建一个渲染管理器

@property(nonatomic,strong)GLKBaseEffect *baseEffect;

self.baseEffect = [[GLKBaseEffect alloc]init];

完成，这个对象有很多配置，我们先不用，后面详细讲！

4.创建一个帧缓存区(两步:申请，绑定 )

GLuint _framebuffer; // 帧缓存标示

glGenFramebuffers(1, &_framebuffer); // 为帧缓存申请一个内存标示，唯一的 1.代表一个帧缓存

glBindFramebuffer(GL_FRAMEBUFFER, _framebuffer);// 把这个内存标示绑定到帧缓存上 ，GL_FRAMEBUFFER 代表帧缓冲常量

完成，不要这么简单

5.创建颜色渲染缓冲区(申请，绑定，关联，开辟内存)

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中的图像数据，好显示我们的数据

- (void)clear{

glViewport(0, 0, [self drawableWidth], [self drawableHeight]);

glClearColor(1, 1, 1, 1);

glClear(GL_COLOR_BUFFER_BIT);

}

7.绘制顶点坐标

-(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. 绘制颜色坐标

-(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.呈现内容

-(void)showRenderbuffer{

[self.eagContext  presentRenderbuffer:GL_RENDERBUFFER];

}

附加: 

顶点坐标

GLfloat vertices [6] =  {-1,1, // 左上

-1,-1, // 左下

1,-1}; // 右下

顶点对应的颜色

GLfloat colors[9] = {1,0,0,  // 左上

0,0,1,  // 左下

0,1,0}; // 右下

代码下载地址: https://pan.baidu.com/s/1bp1amsB