标准化设备坐标(Normalized Device Coordinates, NDC)
图片来自：http://learnopengl-cn.readthedocs.io/zh/latest/
//方式一 列出所有顶点
GLfloat vertices[] = {
// 第一个三角形
0.5f, 0.5f, 1.0f, // 右上角
0.5f, -0.5f, 0.5f, // 右下角
-0.5f, 0.5f, -1.0f, // 左上角
// 第二个三角形
0.5f, -0.5f, 0.0f, // 右下角
-0.5f, -0.5f, 0.0f, // 左下角
-0.5f, 0.5f, 0.0f // 左上角
};
- (void)viewDidLoad {
[super viewDidLoad];
GLKView * viewGl = (GLKView *)self.view;
self.glView = viewGl;
self.glView.context = self.glContext;
viewGl.drawableColorFormat = GLKViewDrawableColorFormatRGBA8888; //颜色缓冲区格式
[EAGLContext setCurrentContext:self.glContext];
[self configVAO];
[self setupBaseEffect];
// Do any additional setup after loading the view, typically from a nib.
}
- (EAGLContext *)glContext
{
if (!_glContext) {
_glContext = [[EAGLContext alloc] initWithAPI:kEAGLRenderingAPIOpenGLES2];
}
return _glContext;
}
- (void)configVAO
{
//顶点数据缓存
GLuint buffer;
glGenBuffers(1, &buffer);
glBindBuffer(GL_ARRAY_BUFFER, buffer);
glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);
glEnableVertexAttribArray(GLKVertexAttribPosition); //顶点数据缓存
glVertexAttribPointer(GLKVertexAttribPosition, 3, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 3, (GLfloat *)NULL + 0);
}
//创建着色器效果
- (void)setupBaseEffect{
self.mEffect = [[GLKBaseEffect alloc] init];
}
/**
* 渲染场景代码
*/
- (void)glkView:(GLKView *)view drawInRect:(CGRect)rect {
//启动着色器
[self.mEffect prepareToDraw];
glClearColor(0.3f, 0.6f, 1.0f, 1.0f);
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
//绘制
glDrawArrays(GL_TRIANGLES, 0, 3);
}
读取前三个点，画出三角形，如果读取6个顶点，则将画出2个三角形。
//绘制
glDrawArrays(GL_TRIANGLES, 0, 6);
加入颜色，在VAO下方设置设置颜色数据
glEnableVertexAttribArray(GLKVertexAttribColor); //颜色
glVertexAttribPointer(GLKVertexAttribColor, 3, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 3, (GLfloat *)NULL + 0);
效果如下：
使用索引绘制相同图形
//方式二 列出所有不同顶点，根据索引读取
GLfloat verticesIndex[] = {
0.5f, 0.5f, 0.0f, // 右上角
0.5f, -0.5f, 0.0f, // 右下角
-0.5f, -0.5f, 0.0f, // 左下角
-0.5f, 0.5f, 0.0f // 左上角
};
GLuint indices[] = { // 注意索引从0开始!
0, 1, 3, // 第一个三角形
1, 2, 3 // 第二个三角形
};
顶点数据缓存，加入索引
- (void)configVAO
{
//顶点数据缓存
GLuint buffer;
glGenBuffers(1, &buffer);
glBindBuffer(GL_ARRAY_BUFFER, buffer);
glBufferData(GL_ARRAY_BUFFER, sizeof(verticesIndex), verticesIndex, GL_STATIC_DRAW);
GLuint indicesBuffer; //索引数组
glGenBuffers(1, &indicesBuffer); //申请一个标识符(索引数组buffer)
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, indicesBuffer);
//GL_STATIC_DRAW表示此缓冲区内容只能被修改一次，但可以无限次读取。
glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW);
glEnableVertexAttribArray(GLKVertexAttribPosition); //顶点数据缓存
glVertexAttribPointer(GLKVertexAttribPosition, 3, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 3, (GLfloat *)NULL + 0);
glEnableVertexAttribArray(GLKVertexAttribColor); //颜色
glVertexAttribPointer(GLKVertexAttribColor, 3, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 3, (GLfloat *)NULL + 0);
}
修改渲染方式
glDrawElements(GL_TRIANGLES, sizeof(indices) / sizeof(indices[0]), GL_UNSIGNED_INT, 0);
效果如下：
