標準化設備坐標(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);
效果如下：
