接上一篇
上一篇的三角形是红色, 红色的代码是固定死在代码里面的, 如果要蓝色, 白色, 或者是彩色的, 这样就行不通了
那么如何绘制一个彩色的三角形呢
绘制红色的三角形的Fragment Shader的代码是这样的
void main(void) {
gl_FragColor = vec4(1, 0, 0, 1);
}
之前说了gl_FragColor是该顶点的输出颜色, 正常我们不会把代码写死, 而应该是传递一个变量给它, 想要什么颜色可以通过这个变量来改.
Vertex Shader可以给Fragment Shader传递参数, 使用的就是varying关键字
我们将之前的Vertex Shader和Fragment Shader源码改动一下
Vertex Shader
attribute vec4 position;
attribute vec4 inputColor;
varying vec4 fragmentColor;
void main(void) {
fragmentColor = inputColor;
gl_Position = position;
}
Fragment Shader
varying lowp vec4 fragmentColor;
void main(void) {
gl_FragColor = fragmentColor;
}
这样我们就要传递两个参数给Vertex Shader, 一个position, 一个inputColor.
我们定义Color的数据
static int colorCount = 3;
static GLfloat colorData[] = {
//RGB格式
1, 0, 0,
0, 1, 0,
0, 0, 1
};
然后使用跟顶点数据一样的方式将数据传递给OpenGL
_positionPtr = glGetAttribLocation(_program, "position");
_colorPtr = glGetAttribLocation(_program, "inputColor");
glGenBuffers(1, &_colorBuffer);
glBindBuffer(GL_ARRAY_BUFFER, _colorBuffer);
glBufferData(GL_ARRAY_BUFFER, sizeof(colorData), colorData, GL_STATIC_DRAW);
因为颜色和顶点数据都是使用GL_ARRAY_BUFFER这个标志, 所以我们将数据绑定给OpenGL并且告诉它如何使用的时候, 必须马上将数据绘制出来, 不然会被后面的数据覆盖, 或者再重新绑定一次
glBindBuffer(GL_ARRAY_BUFFER, _vertexBuffer);
后面的glDrawArrays都是针对_vertexBuffer来操作.
然后在
glBindBuffer(GL_ARRAY_BUFFER, _colorBuffer);
后面的glDrawArrays都是针对_colorBuffer来操作.
这边不在多次绑定, 直接draw出来
所以创建和绘制顶点和颜色的函数改成这样
- (void) setupVertexAndColorData {
//顶点数据
glGenBuffers(1, &_vertexBuffer);
glBindBuffer(GL_ARRAY_BUFFER, _vertexBuffer);
glBufferData(GL_ARRAY_BUFFER, sizeof(vertexData), vertexData, GL_STATIC_DRAW);
glEnableVertexAttribArray(_positionPtr);
glVertexAttribPointer(_positionPtr, 2, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 2, NULL);
glDrawArrays(GL_TRIANGLES, 0, vertexCount);
//颜色数据
glGenBuffers(1, &_colorBuffer);
glBindBuffer(GL_ARRAY_BUFFER, _colorBuffer);
glBufferData(GL_ARRAY_BUFFER, sizeof(colorData), colorData, GL_STATIC_DRAW);
glEnableVertexAttribArray(_colorPtr);
glVertexAttribPointer(_colorPtr, 3, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 3, NULL);
glDrawArrays(GL_TRIANGLES, 0, colorCount);
}
其他的还是给上一篇一样
修改完后的代码