本节的目的是画一个三角形
三角形.png
写在最前
在iOS中使用OpenGL ES2.0画图主要有两种方法：
- GLKViewController 和 GLKView
- CAEAGLLayer + EAGLContext
第一种方法比较要求比较简单，主要调用系统提供的API就可以画图； 第二种方法需要自己写顶点着色器和片元着色器程序，对开发者有一定的基础要求。本节内容使用 GLKViewController 和 GLKView来实现。
前期准备
-
iOS中控制器主要是继承UIViewController，在OpenGL ES中我们使用的是GLKViewController。
继承GLKViewController.png -
OC中视图主要是继承UIView, 在OpenGL ES中我们使用的是GLKView, 我们将MainStoryBoard的类改为GLKView。
继承GLKView.png - 由于OpenGL是跨平台的，所以我们每次使用前都需要设置使用环境和图像显示的窗口。
// 1. OpenGL 环境
EAGLContext *context = [[EAGLContext alloc] initWithAPI:kEAGLRenderingAPIOpenGLES2];
// 2. OpenGL 窗口
GLKView *opglView = (GLKView*)self.view;
opglView.context = context;
opglView.drawableColorFormat = GLKViewDrawableColorFormatRGB565;
[EAGLContext setCurrentContext:context];
- OpenGL ES是将三维坐标转换为屏幕上的二维像素，所以我们需要准备一个顶点数据组。
static GLfloat vertex[] = {
0,0.5,0,
0.5,0,0,
-0.5,0,0,
};
- 有了数据之后，如何将数据从CPU拷贝到GPU中，以及GPU如何去读取这些数据，这时需要启用顶点属性。
GLuint buffer;
glGenBuffers(1, // 指定要生成的缓存标示符的数量
&buffer); // 缓存标示符的地址
glBindBuffer(GL_ARRAY_BUFFER, //绑定什么类型的缓存，顶点属性数组
buffer); // 需要绑定的缓存标示符，标示为0表示满意缓存
glBufferData(GL_ARRAY_BUFFER, // 初始化缓存信息
sizeof(vertex), // 缓存需要拷贝的大小
vertex, // 需要拷贝的数据
GL_STATIC_DRAW); // 放到GPU内存中，申明存放的类型。
// 启用顶点数据
glEnableVertexAttribArray(GLKVertexAttribPosition);
// 告诉ES顶点数据在哪里，以及如何解释每个顶点保存的数据
glVertexAttribPointer(GLKVertexAttribPosition, // 顶点数据
3, // 每个顶点包含3个数据
GL_FLOAT, // 顶点数据类型
GL_FALSE, // 固定数据。 是否归一化
sizeof(GLfloat) *3, // 步幅：每个顶点数据之间的跨度，取每个顶点数据所占的字节大小
NULL); // 告诉ES从当前绑定的顶点缓存的开始位置访问顶点数据
- 有顶点数据后我们还需要一个着色器才能开始画图。
// 5. 着色器
GLKBaseEffect *baseEffect = [[GLKBaseEffect alloc] init];
baseEffect.useConstantColor = GL_TRUE;
baseEffect.constantColor = GLKVector4Make(1, 0, 0, 1); // 设置片元着色器的颜色的，为红色
- 开始画三角形。
-(void)glkView:(GLKView *)view drawInRect:(CGRect)rect {
glClearColor(1.0f, 1.0f, 1.0f, 1.0f);
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
// 6. 开始画三角形
//准备画图
[self.effect prepareToDraw];
// 绘制三角形
glDrawArrays(GL_TRIANGLES, // 渲染顶点数据类型
0, // 第一个需要渲染的顶点位置
3); // 渲染的顶点数量
}
我将代码放在gitHub, 有需要的可以看看。
