webGL教程4：实现三维效果

欢迎来到WebGL教学系列的第四课。这次我们来显示一些3D物体。本课是基于NeHe OpenGL教学系列的第五课。



如果你的浏览器已经支持WebGL，请点击此处，你将看到本课WebGL的现场版；如果不支持，你从此处可以获取一个支持WebGL的浏览器。

本课代码与前一课代码的不同之处完全集中于initBuffers和drawScene这两个函数。如果你现在滚动到drawScene函数，你将在第一行的地方看到细微的改变：保留场景中两个物体当前旋转状态的变量被更名了，它们以前是rTri和 rSquare，现在是：
var rPyramid = 0;
var rCube = 0;
设置好代码之后，我们来看看如何绘制锥体。就像在前面的课程里对三角形所做的那样，我们让它围绕Y轴旋转：

mvRotate(rPyramid, [0, 1, 0]);
然后绘制它。在上一课里，绘制彩色三角形的代码与绘制同样漂亮的锥体的新代码之间的唯一区别在于后者有更为丰富的矢量和颜色，这一切将在 initbuffers函数（我们稍后将看到）中进行处理。这就意味着除了缓冲区名字不同之外，代码是完全相同的。

gl.bindBuffer(gl.ARRAY_BUFFER, pyramidVertexPositionBuffer);   
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, pyramidVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ARRAY_BUFFER, pyramidVertexColorBuffer);
gl.vertexAttribPointer(shaderProgram.vertexColorAttribute, pyramidVertexColorBuffer.itemSize, gl.FLOAT, false, 0, 0);
setMatrixUniforms();
gl.drawArrays(gl.TRIANGLES, 0, pyramidVertexPositionBuffer.numItems);
 
很简单吧。现在让我们来看看关于立方体的代码。第一步先旋转它，这一次和仅仅绕x轴旋转不同，我们将绕一个（从观察者的角度看）向上、向右并朝向你的轴上旋转立方体：   
mvRotate(rCube, [1, 1, 1]);
下一步绘制立方体。这里涉及的东西多一些，我们有三种方法来绘制一个立方体：  
1. 使用一个单一的三角形带。如果整个立方体都是同一种颜色，这将相当容易——我们利用一直使用的顶点位置来绘制立方体的一个面，接着添加另外两个点绘制另一个面，然后再添加两个点绘制第三个面，以此类推。这非常有效。不幸的是，我们想要立方体的每个面有不同的颜色。因为每个顶点指定了立方体的一个内角，同时每个内角又被三个面所共有，我们需要指定每个顶点三次。这样做如此复杂，以至于我甚至不想试图去解释它……
2. 我们可以通过绘制六个独自的正方形来绘制立方体，它们中的每个面包含各自的顶点位置和颜色集合。本课的第一个版本就是这样做的，而且它运行得很好。然而，这并非最佳的实现方式，因为每次在你的场景中指示WebGL绘制另一个对象时会耗费大量的时间。如果能较少地去