之前绘制的正方形都是基于三维空间绘制的一个2D图形，这里主要再多绘制5个正方形，来组成一个立方体的正方形。

定义立方体顶点位置

立体的正方形由6个面组成，每个面都有4个顶点，所以一共需要缓存24个顶点信息。在初始化缓存区的时候，需要先将24个点缓存起来。如下所示：

var vertices = [
  // 前
  -1.0, -1.0,  1.0,
   1.0, -1.0,  1.0,
   1.0,  1.0,  1.0,
  -1.0,  1.0,  1.0,
  
  // 后
  -1.0, -1.0, -1.0,
  -1.0,  1.0, -1.0,
   1.0,  1.0, -1.0,
   1.0, -1.0, -1.0,
  
  // 上
  -1.0,  1.0, -1.0,
  -1.0,  1.0,  1.0,
   1.0,  1.0,  1.0,
   1.0,  1.0, -1.0,
  
  // 下
  -1.0, -1.0, -1.0,
   1.0, -1.0, -1.0,
   1.0, -1.0,  1.0,
  -1.0, -1.0,  1.0,
  
  // 右
   1.0, -1.0, -1.0,
   1.0,  1.0, -1.0,
   1.0,  1.0,  1.0,
   1.0, -1.0,  1.0,
  
  // 左
  -1.0, -1.0, -1.0,
  -1.0, -1.0,  1.0,
  -1.0,  1.0,  1.0,
  -1.0,  1.0, -1.0
];

定义顶点颜色

为了区分正方体的每一个页，需要将每个面设置成不同的颜色，下面是为顶点设置颜色的代码，如下所示：

var colors = [
  [1.0,  1.0,  1.0,  1.0],    // 前：白色
  [1.0,  0.0,  0.0,  1.0],    // 后: 红色
  [0.0,  1.0,  0.0,  1.0],    // 上: 绿色
  [0.0,  0.0,  1.0,  1.0],    // 下: 蓝色
  [1.0,  1.0,  0.0,  1.0],    // 右: 黄色
  [1.0,  0.0,  1.0,  1.0]     // 左: 紫色
];

var generatedColors = [];

for (j=0; j<6; j++) {
  var c = colors[j];
  
  for (var i=0; i<4; i++) {
    generatedColors = generatedColors.concat(c);
  }
}

var cubeVerticesColorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesColorBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(generatedColors), gl.STATIC_DRAW);

绘制面

设置好顶点和颜色后，就需要来绘制面了，每个面都是由两个三角形组成，首先需要创建三角形，如下所示：

var cubeVerticesIndexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVerticesIndexBuffer);
var cubeVertexIndices = [
  0,  1,  2,      0,  2,  3,    // 前
  4,  5,  6,      4,  6,  7,    // 后
  8,  9,  10,     8,  10, 11,   // 上
  12, 13, 14,     12, 14, 15,   // 下
  16, 17, 18,     16, 18, 19,   // 右
  20, 21, 22,     20, 22, 23    // 左
];

gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,
    new Uint16Array(cubeVertexIndices), gl.STATIC_DRAW);

代码中的 cubeVertexIndices 数组声明每一个面都使用两个三角形来渲染。通过立方体顶点数组的索引指定每个三角形的顶点。那么这个立方体就是由12个三角形组成的了。

渲染立方体

绘制完面后，就需要来渲染立方体了。

gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVerticesIndexBuffer);
setMatrixUniforms();
gl.drawElements(gl.TRIANGLES, 36, gl.UNSIGNED_SHORT, 0);

立方体的每个面都由2个三角形组成，那就是每个面需要6个顶点，或者说总共36个顶点，尽管有许多重复的。然而，因为索引数组的每个元素都是简单的整数类型，所以每一帧动画需要传递给渲染程序的数据也不是很多。
创建好后的效果图如下所示：

正方形.png

个人博客