有了上一篇的基礎(chǔ)，我們就可以畫一些簡(jiǎn)單的圖形了泵督，接下來(lái)，我們要了解的就是如何給圖形上色??。步驟很簡(jiǎn)單：
- 在頂點(diǎn)緩沖區(qū)中添加顏色的值
- 將顏色通過(guò)管道傳給GPU
- 編寫GLSL處理數(shù)據(jù)
在頂點(diǎn)緩沖區(qū)中添加顏色的值
我們只需要在之前的頂點(diǎn)數(shù)組里面没陡，為每個(gè)頂點(diǎn)加入一個(gè)顏色的數(shù)值（rgb）。
- (void)setupVBO {
GLfloat triangleVertices[] = {
//position color
-0.4, 0.0, 0.0, 1.0, 0.0, 0.0,
0.0, 0.4, 0.0, 0.0, 1.0, 0.0,
0.5, 0.0, 0.0, 0.0, 0.0, 1.0,
};
glGenBuffers(1, &_triangleVBO);
glBindBuffer(GL_ARRAY_BUFFER, _triangleVBO);
glBufferData(GL_ARRAY_BUFFER, sizeof(triangleVertices), triangleVertices, GL_STATIC_DRAW);
GLfloat rectangleVertices[] = {
//position color
-0.4, -0.4, 0.0, 1.0, 0.0, 0.0,
-0.4, -0.8, 0.0, 0.0, 1.0, 0.0,
0.4, -0.8, 0.0, 0.0, 0.0, 1.0,
0.4, -0.4, 0.0, 0.0, 1.0, 0.0,
};
glGenBuffers(1, &_rectangleVBO);
glBindBuffer(GL_ARRAY_BUFFER, _rectangleVBO);
glBufferData(GL_ARRAY_BUFFER, sizeof(rectangleVertices), rectangleVertices, GL_STATIC_DRAW);
}
將顏色通過(guò)管道傳給GPU
glEnableVertexAttribArray(1) 表示綁定我們編寫的GLSL中的第二個(gè)參數(shù)（a_Color）烟瞧。
glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(float), (void*)(3 * sizeof(float))) 后面兩個(gè)參數(shù)表示的是步長(zhǎng)和偏移诗鸭，步長(zhǎng)是間隔多少空間取一次數(shù)據(jù)，偏移是指從數(shù)據(jù)的第幾位開(kāi)始参滴。
- (void)glkView:(GLKView *)view drawInRect:(CGRect)rect {
GLKView *glView = (GLKView *)self.view;
[EAGLContext setCurrentContext:glView.context];
glClearColor(0, 0, 0, 1);
glClear(GL_COLOR_BUFFER_BIT);
[_triangleShader prepareToDraw];
glBindBuffer(GL_ARRAY_BUFFER, _triangleVBO);
glEnableVertexAttribArray(0);
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(float), (void*)0);
glEnableVertexAttribArray(1);
glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(float), (void*)(3 * sizeof(float)));
glDrawArrays(GL_TRIANGLES, 0, 3);
[_rectangleShader prepareToDraw];
glBindBuffer(GL_ARRAY_BUFFER, _rectangleVBO);
glEnableVertexAttribArray(0);
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(float), (void*)0);
glEnableVertexAttribArray(1);
glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(float), (void*)(3 * sizeof(float)));
glDrawArrays(GL_TRIANGLE_FAN, 0, 4);
}
編寫GLSL處理數(shù)據(jù)
這里的a_Color和a_Position是接收輸入的參數(shù)强岸，FragColor是輸出給另外一個(gè)shader的參數(shù)，我們這里做簡(jiǎn)單的值傳遞就可以了砾赔。
attribute vec3 a_Position;
attribute vec3 a_Color;
varying lowp vec3 FragColor;
void main(void) {
gl_Position = vec4(a_Position, 1.0);
FragColor = a_Color;
}
varying lowp vec3 FragColor;
void main(void) {
gl_FragColor = vec4(FragColor, 0);
}
運(yùn)行項(xiàng)目蝌箍，可以看到一個(gè)彩色的三角形和一個(gè)彩色的矩形，它們的頂點(diǎn)顏色就是我們?cè)O(shè)置的顏色暴心，渲染的時(shí)候OpenGL會(huì)幫我們計(jì)算頂點(diǎn)之間的顏色差值妓盲，所以最后就是彩色的。
截圖
