学习OpenGL ES之绘制一个正方体

获取示例代码

---

经过前面7篇文章的铺垫，绘制正方体已经不是什么难事了。正方体其实就是由6个矩形组成的几何体，X，Y，Z轴上各两个矩形。下面是Z轴上两个矩形的示意图。

绘制Z轴两个矩形的代码如下。

- (void)drawZPlanes {
    static GLfloat triangleData[] = {
        -0.5,   0.5f,  0.5,   0,  0,  1,
        -0.5f,  -0.5f,  0.5,  0,  0,  1,
        0.5f,   -0.5f,  0.5,  0,  0,  1,
        0.5,    -0.5f, 0.5,   0,  0,  1,
        0.5f,  0.5f,  0.5,    0,  0,  1,
        -0.5f,   0.5f,  0.5,  0,  0,  1,
        -0.5,   0.5f,  -0.5,   0,  0,  1,
        -0.5f,  -0.5f,  -0.5,  0,  0,  1,
        0.5f,   -0.5f,  -0.5,  0,  0,  1,
        0.5,    -0.5f, -0.5,   0,  0,  1,
        0.5f,  0.5f,  -0.5,    0,  0,  1,
        -0.5f,   0.5f,  -0.5,  0,  0,  1,
    };
    [self bindAttribs:triangleData];
    glDrawArrays(GL_TRIANGLES, 0, 12);
}
复制代码

其他轴的平面绘制规则一样，将Z轴数据第三列移到第一列和第二列即可生成X，Y轴上的矩形数据。

- (void)drawXPlanes {
    static GLfloat triangleData[] = {
// X轴0.5处的平面
      0.5,  -0.5,    0.5f, 1,  0,  0,
      0.5,  -0.5f,  -0.5f, 1,  0,  0,
      0.5,  0.5f,   -0.5f, 1,  0,  0,
      0.5,  0.5,    -0.5f, 1,  0,  0,
      0.5,  0.5f,    0.5f, 1,  0,  0,
      0.5,  -0.5f,   0.5f, 1,  0,  0,
// X轴-0.5处的平面
      -0.5,  -0.5,    0.5f, 1,  0,  0,
      -0.5,  -0.5f,  -0.5f, 1,  0,  0,
      -0.5,  0.5f,   -0.5f, 1,  0,  0,
      -0.5,  0.5,    -0.5f, 1,  0,  0,
      -0.5,  0.5f,    0.5f, 1,  0,  0,
      -0.5,  -0.5f,   0.5f, 1,  0,  0,
    };
    [self bindAttribs:triangleData];
    glDrawArrays(GL_TRIANGLES, 0, 12);
}

- (void)drawYPlanes {
    static GLfloat triangleData[] = {
        -0.5,  0.5,  0.5f, 0,  1,  0,
        -0.5f, 0.5, -0.5f, 0,  1,  0,
        0.5f, 0.5,  -0.5f, 0,  1,  0,
        0.5,  0.5,  -0.5f, 0,  1,  0,
        0.5f, 0.5,   0.5f, 0,  1,  0,
        -0.5f, 0.5,  0.5f, 0,  1,  0,
         -0.5, -0.5,   0.5f, 0,  1,  0,
         -0.5f, -0.5, -0.5f, 0,  1,  0,
         0.5f, -0.5,  -0.5f, 0,  1,  0,
         0.5,  -0.5,  -0.5f, 0,  1,  0,
         0.5f, -0.5,   0.5f, 0,  1,  0,
         -0.5f, -0.5,  0.5f, 0,  1,  0,
    };
    [self bindAttribs:triangleData];
    glDrawArrays(GL_TRIANGLES, 0, 12);
}
复制代码

我将每个轴上的平面赋予不同的颜色便于区分。

我移除了modelMatrix2，将modelMatrix1改为modelMatrix。每一次update的时候我将modelMatrix的赋值修改为围绕1，1，1轴旋转。

- (void)update {
    [super update];
    float varyingFactor = (sin(self.elapsedTime) + 1) / 2.0; // 0 ~ 1
    self.cameraMatrix = GLKMatrix4MakeLookAt(0, 0, 2 * (varyingFactor + 1), 0, 0, 0, 0, 1, 0);
    
    GLKMatrix4 rotateMatrix = GLKMatrix4MakeRotation(varyingFactor * M_PI * 2, 1, 1, 1);
    self.modelMatrix = rotateMatrix;
}
复制代码

增加一个drawCube方法，绘制各个矩形。

- (void)drawCube {
    [self drawXPlanes];
    [self drawYPlanes];
    [self drawZPlanes];
}
复制代码

最后调用drawCube绘制正方体。

- (void)glkView:(GLKView *)view drawInRect:(CGRect)rect {
    [super glkView:view drawInRect:rect];
  
    GLuint projectionMatrixUniformLocation = glGetUniformLocation(self.shaderProgram, "projectionMatrix");
    glUniformMatrix4fv(projectionMatrixUniformLocation, 1, 0, self.projectionMatrix.m);
    GLuint cameraMatrixUniformLocation = glGetUniformLocation(self.shaderProgram, "cameraMatrix");
    glUniformMatrix4fv(cameraMatrixUniformLocation, 1, 0, self.cameraMatrix.m);
    
    GLuint modelMatrixUniformLocation = glGetUniformLocation(self.shaderProgram, "modelMatrix");
    glUniformMatrix4fv(modelMatrixUniformLocation, 1, 0, self.modelMatrix.m);
    [self drawCube];
}
复制代码

效果如下。

效果很奇怪是不是？因为我们缺少一个很重要的配置glEnable(GL_DEPTH_TEST);。他有什么用呢？默认情况下，谁后绘制谁在最上面，而glEnable(GL_DEPTH_TEST);之后；绘制顺序则按照Z轴的坐标为准。为了配合glEnable(GL_DEPTH_TEST);，还要将glClear(GL_COLOR_BUFFER_BIT)改成glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);，因为按照Z轴排序是要激活一个新的深度缓存区的，所以每次清除缓存区的时候不仅要清除颜色缓存数据还要清除深度缓存数据，否则会影响新的深度数据的写入。修改了两处之后，效果如下。

这次就正常了。本文主要介绍了绘制正方体的思路和方法，读者可以拓展一下，比如绘制由4个三角形构成的三角锥。立体几何体基本都可以分解成很多三角形，只要找到规律，绘制起来就很简单。

下一篇开始讲解基本的光照模型，让立方体看起来更真实。