看过之前一系列的文章之后，我们对ES有了一个比较基础的理解了，下面我们通过绘制一个随时间旋转的立方体，来汇总前几篇文章的内容，以加深对OpenGL ES渲染过程的理解。
示例代码在git仓库
正如读者所知，一个正方体是由六个面组成的，那这里我们拆分需求，逐次绘制六个面，然后用时间作为输入量，改变MVP矩阵，就能最终实现我们的效果。在后续的文章中，我都是在VSCode里编写着色器，安装GLSL扩展后，可以高亮显示，比较方便。
1.首先我们先来展示一下立方体的空间示意图
立方体空间示意图
绘制与X轴垂直的平面的代码：
- (void)drawPositiveXWithColorLocation:(GLuint)colorLocation andPositionLocation:(GLuint)positionLocation {
//每一行代表(x,y,z,r,g,b)
static GLfloat positiveX[24] = {
0.5f, 0.5f, 0.5f, 1.0f, 0.6f, 0.3f,
0.5f, -0.5f, 0.5f, 1.0f, 0.6f, 0.3f,
0.5f, -0.5f, -0.5f, 1.0f, 0.6f, 0.3f,
0.5f, 0.5f, -0.5f, 1.0f, 0.6f, 0.3f,
};
if (self.vertexBufferId == 0) {
glGenBuffers(1, &_vertexBufferId);
glBindBuffer(GL_ARRAY_BUFFER, _vertexBufferId);
}
glBufferData(GL_ARRAY_BUFFER, sizeof(positiveX), positiveX, GL_STATIC_DRAW);
GLuint offset = 3 * sizeof(float);
glVertexAttribPointer(positionLocation, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(float), NULL);
glVertexAttribPointer(colorLocation, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(float), (const void *) offset);
_esContext.drawFunc(&_esContext);
}
这里我们先找出与X轴垂直相交的这个面的四个顶点坐标，因为我们绘图采用的是GL_TRIANGLE_FAN模式，所以只需要四个顶点就可以了。
其它5个面也是这样绘制的
加载MVP矩阵的代码如下：
[super glkView:view drawInRect:rect];
_elapsedTime += 0.02;
//时间系数
float varyFactor = (sin(self.elapsedTime) + 1.0) / 2.0; //0 ~ 1
_esContext.width = view.drawableWidth;
_esContext.height = view.drawableHeight;
//开启深度测试，为了确定绘制的时候哪一个面绘制在上面
glEnable(GL_DEPTH_TEST);
glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);
//获取属性color和position的index
GLint colorIndex = glGetAttribLocation(_esContext.program, "vColor");
GLint positionIndex = glGetAttribLocation(_esContext.program, "vPosition");
//创建MVP矩阵
GLint modelIndex = glGetUniformLocation(_esContext.program, "modelTransform");
GLint viewIndex = glGetUniformLocation(_esContext.program, "viewTransform");
GLint projectIndex = glGetUniformLocation(_esContext.program, "projectTransform");
GLKMatrix4 rotate = GLKMatrix4MakeRotation(varyFactor * M_PI * 2, 1, 1, 1);
GLKMatrix4 translate = GLKMatrix4MakeTranslation(-0.1, -0.1, -0.1);
GLKMatrix4 modelMatrix = GLKMatrix4Multiply(translate, rotate);
GLKMatrix4 projectionMatrix = GLKMatrix4MakePerspective(GLKMathDegreesToRadians(90), view.frame.size.width / view.frame.size.height, 0.2, 10.0);
GLKMatrix4 cameraMatrix = GLKMatrix4MakeLookAt(0, 0, 2 * (varyFactor + 1), 0, 0, 0, 0, 1, 0);
//加载MVP矩阵
glUniformMatrix4fv(modelIndex, 1, GL_FALSE, modelMatrix.m);
glUniformMatrix4fv(viewIndex , 1, GL_FALSE, cameraMatrix.m);
glUniformMatrix4fv(projectIndex, 1, GL_FALSE, projectionMatrix.m);
//开启顶点属性
glEnableVertexAttribArray(colorIndex);
glEnableVertexAttribArray(positionIndex);
//加载顶点数据，并且依次绘制立方体的六个面
[self drawPositiveXWithColorLocation:colorIndex andPositionLocation:positionIndex];
[self drawNegativeXWithColorLocation:colorIndex andPositionLocation:positionIndex];
[self drawPositiveYWithColorLocation:colorIndex andPositionLocation:positionIndex];
[self drawNegativeYWithColorLocation:colorIndex andPositionLocation:positionIndex];
[self drawPositiveZWithColorLocation:colorIndex andPositionLocation:positionIndex];
[self drawNegativeZWithColorLocation:colorIndex andPositionLocation:positionIndex];
//关闭顶点属性
glDisableVertexAttribArray(colorIndex);
glDisableVertexAttribArray(positionIndex);
这里需要注意两点
1.需要开启深度测试，如果没有开启深度测试的话，ES是不知道你绘制面的层次，会出现如下效果：
未开启深度测试
2.开启深度测试后，除了需要清除颜色缓冲区外，还需要清除深度缓冲区
glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);
最终正确的效果如下图：
开启深度测试