现在我们创建了一个基于Javascript列表的Float32Array对象，然后告诉WebGL用它来填充当前数组对象，当然就是我们的triangleVertexPositionBuffer啦。我们会在以后的课程中在详细讲解Float32Array，现在你所要记住的就是它的作用就是可以把Javascript列表转换成可以传递给WebGL的形式以便填充到当前数组对象中。

130 131 triangleVertexPositionBuffer.triangleVertexPositionBuffer.

最后我们要做的就是为数组对象设置两个新的属性，这两个属性并不会传递给WebGL但是在以后会非常有用。Javascrip有个优点（也许有人认为这是个缺点），那就是对象的属性可以在对象创建后进行动态定义。所以虽然之前数组对象并没有itemSize和numItems这两个属性，但现在，我说它有，它就有了！我们使用这两个属性来说明这个含有9个元素的数组对象实际代表3个不同的顶点位置（numItems），每个顶点由3个数字组成（itemSize）。

现在我们已经成功建立了三角形的数组对象，下面再创建矩形的数组对象。

133 134 135 136 137 138 139 140 141 142 143 144 squareVertexPositionBuffer gl.squareVertexPositionBuffer); vertices gl.Float32ArraysquareVertexPositionBuffer.squareVertexPositionBuffer.

上面的代码应该非常清晰明了了，矩形拥有4个顶点位置信息而不是3个，所以数组会更大，numItems的值也与三角形不同。

OK，这就是我们需要向显卡推送的两个物体的顶点位置信息。现在我们来研究一下drawScene，我们将要在这个函数中使用之前创建的顶点位置信息来绘制我们最终看到的图形。请跟着我一步一步的慢慢看：

147 148 gl.gl.

首先要使用viewport函数来告诉WebGL一些canvas的尺寸信息，我们再之后的课程中会讨论到为什么要这样做的重要性；现在，你只需要知道在你开始绘制之前程序需要调用canvas的尺寸。下面，我们清空canvas，开始准备绘制：

149 gl.gl.

然后：

151 pMatrix gl.

我们建立一个用于观测场景的透视图。在默认的情况下，WebGL会把近处的物体和远处的物体用同样的尺寸绘制（在3D图形学中被称为“正射投影”）。为了使远处的物体看起来要小一些，我们需要明确告诉WebGL我们使用的透视。对于这个场景，我们告诉WebGL我们的（垂直）视野是45°、canvas的宽高比以及从我们的视点看到的最近距离是0.1个单位，最远距离是100个单位。

你会发现，实际上这个透视使用了一个来自Oak3d的模块的函数，并且包含一个名字很神秘的变量pMatrix。稍后我会详细解释一下，但是现在只希望你明白如何使用它而不必理会细节。

现在我们已经建立起了透视，我们可以继续绘制工作了。

第一步是“移动”到3D场景的中心。在OpenGL中，当你想要绘制一个场景的时候，你会告诉OpenGL在当前位置、按照当前旋转角度来绘制每个物体。比如，你说“向前移动20个单位，旋转32度，绘制一个机器人”，这基本上就是一个“位移多少多少，旋转多少多少，画什么什么”的综合过程。这个过程非常实用，因为你可以把“绘制机器人”的代码封装到一个函数中，然后就可以修改函数中位移和旋转的参数来轻松实现机器人的移动。

当前位置和当前旋转角度都存放在一个矩阵中，大概你应该在学校里学过，矩阵可以代表位移（从一个坐标移动到另一个坐标）、旋转和其他几何变换。我现在先不细说，你只需要记住一个4×4矩阵（不是3×3矩阵！）可以用来表示3D场景中的任何多种变换。首先从单位矩阵开始——这个矩阵意味着不进行任何变换——然后乘以你将要进行的第一个变换的矩阵，再乘以你将要进行的第二个变换的矩阵，然后第三个、第四个……最后乘积所得到的矩阵代表了所有你进行过的变换。用来表示当前位移/旋转状态的矩阵我们称之为“模型视图矩阵”（model-view matrix），现在你应该明白了mvMatrix就是用来储存我们的模型视图矩阵的变量。

译者注：
这里有一个一般初学者很容易混淆的地方————由于opengl默认采用的是列向量, 所以矩阵变换的累加在opengl中是从右向左累加的，就是说：rotateMat * moveMat这条语句, 解释起来实际是先做move, 再做rotate，因为最终变换顶点时是rotateMat * moveMat * v。另外一个例子，执行下列语句
glRotate;
glMove;
glScale;
实际执行起来却是先做Sacle，再做Move，最后做Rotate。
在WebGL中，由于是完全shader化的，所以不存在这个问题，但大多数图形库为了保持和OpenGL一致，也使用了左乘，Oak3D也是这样。

眼尖的读者或许已经发现了，上面讨论矩阵的过程中，我一直是说在“OpenGL”中而不是在“WebGL”中。这是因为WebGL没有这套内置的图形库。所以我们只好使用第三方图形库——由Oak3D Team编写的Oak3D。这些第三方图形库使用了一些很巧妙的技巧，使得在WebGL中也可以实现相同的效果。在后面我们还会详细解释这些技巧的。

现在，让我们看看在场景左边绘制三角形的代码吧！

153 mvMatrix

我们用okMat4Trans函数生成了一个位移矩阵，然后赋值给mvMatrix。位移的起点就是3D空间的中心，我们先向左移动1.5个单位（即X轴的负半轴），然后向场景内部移动7个单位（即Z轴的负半轴）。下面终于到了要开始绘制的时候了！

154 155 gl.triangleVertexPositionBuffer); gl.triangleVertexPositionBuffer.

你应该还记得，如果要使用我们的数组对象，我们必须调用gl.bindBuffer来将其指定为当前数组对象，然后再调用代码来进行操作。现在我们选择triangleVertexPositionBuffer，然后告诉告诉WebGL这个数组对象中的值是用来表示顶点位置的。我稍后会详细解释它的工作原理。现在你会看到，我们用之前赋予数组对象的itemSize这个属性来告诉WebGL，数组对象中每个顶点位置信息包括3个数字。

接下来：

156 setMatrixUniforms