WEBGL中文教程－第一课－绘制三角形和正方形－翻译于外文

欢迎来到WebGL教程的第一课！这一课以NeHe OpenGL教程的第二课内容为基础，NeHe OpenGL是一套针对游戏开发人员讲解3D图形技术的流行教程。本课将向你显示如何在一个网页上绘制一个三角形和一个正方形。也许它本身并不令人激动，但它却是一个不错的WebGL基础介绍；如果你理解它是如何工作的，那么剩下的学习将变得很简单......

在支持WebGL的浏览器上运行本课代码显示如下：

如果你已经有了一个支持webGL的浏览器，点击此处你将看到WebGL的实时版；如果你还没有，从这里你可以获取一个。

更多关于它是如何工作的细节，请看下面......

一点提示：这些课程是面向那些具有一定编程知识但没有实际3D图形开发经验的开发人员的；其目的是让你对代码层上发生了什么事有很好的理解，以便你能尽可能快地创建出自己的3D网页。我一边自学WebGL一边写这个教程，因此有可能（甚至很有可能）有些概念是错误的；然而，一旦我知道有错误，我就会去修改和纠正它们。所以，如果你发现什么错误的话，请留言让我知道。

获取这个例子的代码有两种方法：一种就是当你观看实时版的时候点击“查看源码”的链接，另一种是你从GitHub的代码库获取（包括以后课程的代码）。对于任一种方式，一旦你获得源码，你就可以用你喜欢的文本编辑器打开并查看它。即使你已经比较熟悉OpenGL，但是当你初次见到它时，你也会望而生畏。首先，我们定义一对渲染器，一般认为渲染器相对高级一些。但是不要害怕，它实际上比它看起来要简单一些。

像大多数程序一样，这个WebGL网页从定义一些下层函数开始，它们被位于网页底部的上层代码调用。为了解释这个问题，我将按照我的方式从网页底部开始介绍它们。因此，如果你正在浏览代码，请跳到网页的底部。

你将看到下面的html代码：

body οnlοad="webGLStart();">
a href="http://learningwebgl.com/blog/?p=28"><< Back to Lesson 1

canvas id="lesson01-canvas" style="border: none;" width="500" height="500">

a href="http://learningwebgl.com/blog/?p=28"><< Back to Lesson 1

/body>
 

这是一个网页完整的body部分，其他的代码是在JavaScript中（如果你是通过“查看源码”方式得到这个代码的话，会看到一些额外用于网站分析的代码，你可以忽略它们）。显然，我们可以将任何数量的普通HTML标签放入body标签内，并在一个普通网页里创建我们的WebGL图像，但是对于这个简单的演示来说，我们只是得到WebGL以及返回到这个博客帖子的链接。同时，canvas标签是3D图形放置的地方。canvas是html5.0的新特性——它允许JavaScript脚本在网页中绘制二维和三维（通过WebGL）元素。我们不会指定多于canvas标签本身简单布局属性的其他属性，相反，我们将所有WebGL的安装代码放置在一个叫做webGLStart的JavaScript函数中，一旦网页被装载，这个函数就会被调用。

 

现在让我们向上翻到这个函数，来看一看它：

 

function webGLStart() {

var canvas = document.getElementById("lesson01-canvas");

　　initGL(canvas);

　　initShaders();

　　initBuffers();

　　gl.clearColor(0.0, 0.0, 0.0, 1.0);

　　gl.clearDepth(1.0);

　　gl.enable(gl.DEPTH_TEST);

　　gl.depthFunc(gl.LEQUAL);

　　setInterval(drawScene, 15);

}

它调用函数来初始化我们前面提到的WebGL和渲染器，传入前面我们想要绘制三维物体的canvas元素，接着它使用initBuffers函数初始化缓冲区；缓冲区用来保留我们要绘制的三角形和正方形的细节——稍后我们将更多地谈论此问题。接下来，它对GL引擎做了一些基本设置，就是说当我们清除画布的时候我们应该使其变黑，以及清除操作应当百分之百的清除掉我们正在绘制的物体。同时，我们应该做深度测试（以使位于其它物体后面的被绘制物体隐藏在它们前面的物体之后）。最后，我们使用setInterval函数每隔15毫秒就调用一次drawScene函数。根据函数名就可以知道，drawScene函数是通过使用缓冲区来绘制物体的。

稍后我们将回到initGL和initShaders函数上，因为它们对于理解网页如何工作是很重要的。现在让我们先来看看initBuffers和drawScene函数。

var triangleVertexPositionBuffer;

var squareVertexPositionBuffer;

我们声明了两个全局变量来保存缓冲区。（在一个真实的WebGL网页中，你不用对场景中的每一个对象声明一个单独的全局变量，但在这里我们使用它们是为了在第一课中让事情变得简单些 :-)

接下来：

function initBuffers() {

triangleVertexPositionBuffer =gl.createBuffer();

 

我们为三角形顶点的位置创建一个缓冲区。顶点是三维空间中定义我们正在绘制的图形的形状的点。对于三角形，我们有三个这样的点（稍后我们将设置）。这个缓冲区实际上是图形卡上的内存；在初始化代码中将顶点位置放置在图形卡上，当重绘时，本质上只是告诉WebGL去“绘制先前我告诉你要绘制的物体”。这样，我们就可以使代码运行起来十分有效率。当然，在此例中我们只有三个顶点，将它们绘制到图形卡上不会花费太多的代价——但是当你处理具有成千上万个顶点的大型模型时，用这种方法处理将体现出其真正的优势。




gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);

这行代码告诉WebGL以下任何在缓冲区上的操作都应该使用我们指定的缓冲区。这里有一个“当前数组缓冲区”的概念，以及工作在其上的函数，而不是让你自行定义数组缓冲区。听上去有点奇怪

，但我确信这样做是为了获得良好的性能。

 

var vertices = [

　　 0.0,  1.0,  0.0,

　　 -1.0, -1.0,  0.0,

　　 1.0, -1.0,  0.0

];

接下来，我们用一个JavaScript数组定义顶点位置。可以看到它们位于一个中心为（0，0，0）的等腰三角形的顶点上。

gl.bufferData(gl.ARRAY_BUFFER,new WebGLFloatArray(vertices),gl.STATIC_DRAW);

现在，我们创建一个基于这个JavaScript数组的WebGLFloatArray对象，指示WebGL使用它来填充当前的缓冲区，即triangleVertexPositionBuffer。在后面的课程中我们将更多地谈论WebGLFloatArrays，不过现在你只需知道，它是一种将JavaScript数组转换成某种数据的方法，这种数据我们用来传递给WebGL，以填充其缓冲区。

triangleVertexPositionBuffer.itemSize = 3;

triangleVertexPositionBuffer.numItems = 3;

 

最后，我们对缓冲区设置两个新的属性。WebGL没有内置这两个属性，但是稍后它们将变得非常有用。一件关于JavaScript的好事情（某些人会说是坏事情）是一个对象不必显式地支持某个你想给它设置的属性。因此，尽管这个缓冲区对象以前没有itemSize和numItems属性，但是现在它具有了这样的属性。我们使用它们来表示这个具有9个元素的缓冲区，该缓冲区实际上表示了三个独立的顶点位置（numItems），其中每一个由三个数（itemSize）组成。




 

我们已经完全设置好了三角形的缓冲区，现在轮到正方形了：

squareVertexPositionBuffer = gl.createBuffer();

gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);

vertices = [

　　1.0,  1.0,  0.0,

　　-1.0,  1.0,  0.0,

　　1.0, -1.0,  0.0,

　　-1.0, -1.0,  0.0

];

　　gl.bufferData(gl.ARRAY_BUFFER, new WebGLFloatArray(vertices), gl.STATIC_DRAW);

　　squareVertexPositionBuffer.itemSize = 3;

　　squareVertexPositionBuffer.numItems = 4;

}

所有这些都很明显——正方形有4个顶点而不是3个，因此数组要大一些而且numItems的值不同。

好了，我们所要做的是将两个对象的顶点位置放置到图形卡上。现在让我们看看drawScene函数，这个函数是我们使用缓冲区真正绘制我们所看到图形的地方。让我们一步步来看看它：

function drawScene() {

gl.clear(gl.COLOR_BUFFER_BIT |gl.DEPTH_BUFFER_BIT);

 

第一步：清除画布，以便在画布上绘制图形。接下来：

    perspective(45, 1.0, 0.1, 100.0);

此处我们为想要观看的场景设置透视参数。默认情况下，WebGL将绘制与远端物体同尺寸的近端物体（一种称为正投影的三维类型）。为了使较远的物体看起来较小，需要告诉它一些正在使用的透视参数。对于这个场景，我们的（垂直）视野是45°，画布的宽高比是1:1，我们不想看到那些距离观察点近于0.1个单位的物体，也不想看到那些距离观察点远于100个单位的物体。

这个perspective 函数十分有用，但它并不内置于WebGL，因此，它在代码中被定义为应用函数。稍后我将更详细地描述它是如何工作的，但是在不知其细节的情况下也应该清楚如何使用它。

现在我们已经设置好perspective函数，我们可以继续绘制一些物体：

    loadIdentity();

第一步是“移动”到三维场景的中心。在OpenGL中，当我们绘制一个场景时，你要告诉它用“当前的”旋转方法在“当前的”位置上绘制每一个物体——因此，例如你说“向前移动20个单位，旋转32度，接着绘制机器人”，这非常有用，因为你能将“绘制机器人”的代码封装在一个函数中，然后，只需在调用函数前改变“平移/旋转”参数，就能轻松绘制机器人。当前的位置和旋转信息放在一个矩阵中；正如你可能在学校了解的一样，矩阵可以表示平移（从一个位置到另一个位置的移动），旋转和其他几何变换。现在我不想讲得太多，你可以用一个4×4（不是3×3）的矩阵来表示三维空间的任何变换；你从单位矩阵开始——这种矩阵表示一种什么都不做的变换——，用第一个变换矩阵与之相乘，接着乘以第二个变换矩阵，以此类推。合并后的矩阵在一个变换中表示了所有的变换。

我们使用的这个矩阵表示了模型视图矩阵的当前平移/旋转状态，现在你可能已经编制好了loadIdentity函数，该函数将模型视图矩阵转换为单位矩阵，我们可以将其相乘并旋转以得到它。换句话说，它使我们从一个原始的点出发，开始绘制三维世界。

细心的读者可能会发现，一开始我讨论矩阵的时候说的是“在OpenGL中”而不是“在WebGL中”。这是因为像perspective函数一样，WebGL没有内置这样的函数；我们不得不自己实现它，或者拷贝一个已经实现好的应用函数。再说一下，我稍后将详细地解释这些应用函数是如何工作的，不过你在不了解其细节的情况下也能使用它们。

让我们看一看绘制在画布左边的三角形的代码。

    mvTranslate([-1.5, 0.0, -7.0]);

 

loadIdentity函数使其移动到三维空间的中心。我们通过向左移动1.5个单位（即沿着X轴的负方向）和向场景中移动7个单位（即远离观察者的方向，也就是沿着Z轴的负方向）开始绘制三角形。（正如你可能猜到的一样，mvTranslate函数通过模型视图矩阵乘以一个带有下列参数的变换矩阵做了一次底层变换。）




 

下一步真正开始绘制图形了！

gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);

gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, triangleVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);

因此，你要记住为了使用其中的一个缓冲区，我们将调用gl.bindBuffer函数来指定一个当前的缓冲区，接着调用在缓冲区执行的代码。我们选择 triangleVertexPositionBuffer来告诉WebGL哪些值应该被用于顶点位置。稍后我将更多地解释其如何工作；现在，你能看到我们正在使用itemSize属性，该属性是我们设置在缓冲区上用来告诉WebGL缓冲区的每项有3个数大小。

接下来我们使用

 setMatrixUniforms();

告诉WebGL考虑当前的模型视图矩阵（以及投影矩阵，稍后有详细的解释）。这是必须的，因为WebGL没有内置这个矩阵的参数，但是这些都发生在JavaScript私有域中。setMatrixUniforms把矩阵参数传到图形卡。

一旦完成这个函数，WebGL将要处理一组被看做是顶点位置和关于我们矩阵的数值。下一步是告诉WebGL怎么处理这些数值：

gl.drawArrays(gl.TRIANGLES,0,triangleVertexPositionBuffer.numItems);

从顶点数组的第0项开始一直到第numItems个元素，将顶点数组绘制成三角形。

一旦这个过程结束，WebGL就绘制好了三角形。下一步，我们来绘制正方形：

mvTranslate([3.0, 0.0, 0.0])

我们一开始将模型视图矩阵向右移动3个单位。记住，我们当前已经向左移动了1.5个单位并远离了屏幕7个单位，因此这次我们只需向右移动1.5个单位，向屏幕移动7个单位。接下来：

gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);

gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute,squareVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);

我们告诉WebGL使用正方形顶点位置的缓冲区…

setMatrixUniforms();

我们再次推到模型视图矩阵和投影矩阵，以至于我们能考虑到最近使用的mvTranslate函数，这意味着我们最终可以绘制这些点。

gl.drawArrays(gl.TRIANGLE_STRIP,0,squareVertexPositionBuffer.numItems);




你可能会问：什么是三角形带？嗯，它是一个三角形的条带：）说详细点，三角形带中的头三个顶点定义了第一个三角形，接着这三个顶点中的后两个与下一个顶点一起定义了下一个三角形，以此类推。此例是一种快速的定义正方形的方法。在更复杂的情况下，根据与其近似的由许多三角形组成的图形来定义一个复杂表面可能会是一种真正有用的方法。




 

总之，一旦完成这个过程，drawScene函数就结束了。

}

到此，你完全可以开始一些实验。从GitHub或者直接从实时版本中拷贝代码到本地文件中；如果你选择后者，你需要用到index.html,sylvester.js和glUtils.js这三个文件。在本地运行代码并确保其可以正常工作，接着尝试改变一些上面提到的顶点位置；特别地，场景立刻会变得十分平坦；尝试改变正方形的Z值为2或-3，你将看到它随着向后或向前移动而变得更大或更小。或者尝试只改变一个或两个顶点，你将发现它会出现视角上的扭曲。

…




现在我们来看看刚才我们忽略的一些函数。正如我前面所说，如果你愿意忽视这些细节而仅仅是拷贝和粘帖这些在initBuffers函数之前出现的函数，你很有可能侥幸创建出有趣的WebGL页面（哪怕还只是黑白的——彩色在下一课介绍）。但是这些细节并非很难理解，同时通过理解它们是如何工作的有助于你将来写出更好的WebGL代码。




 

继续和我一起看看这些细节吗？谢谢:-)首先让我们回避一些最为乏味的函数；第一个被webGLStart调用的函数是initGL。它靠近网页顶部，拷贝在下面以供参考：

var gl;

function initGL(canvas) {

　　try {

　　　　gl = canvas.getContext("experimental-webgl");

　　　　gl.viewport(0, 0, canvas.width, canvas.height);

} catch(e) {




}

　　if (!gl) {

　　　　alert("Could not initialise WebGL, sorry :-(");

　　}

}

 

这个函数非常简单。你可能已经注意到，initBuffers和drawScene函数经常涉及一个叫做gl的对象，很明显该对象牵涉某种WebGL核心。这个函数获取了这一核心——称为WebGL context，它是通过使用标准的context名称请求canvas赋予的（你可能猜测，在某个时候context的名字将从“experimental-webgl”变成“webgl”，那时我将更新我的课程和博客）。一旦得到上下文，我们将使用viewport函数告诉WebGL画布的大小；在后面的课程中我们会回过来讲讲这为什么会很重要；现在，你只需知道该函数调用时需要画布的大小。一旦函数执行完，GL的context就设置好了。

调用initGL之后，webGLStart调用initShaders。这个函数用来初始化渲染器。我们稍后再回来看这个函数，因为我们首先要来看看处理模型视图矩阵的应用函数。下面是其代码：

var mvMatrix;

function loadIdentity() {

　　mvMatrix = Matrix.I(4);

}

function multMatrix(m) {

　　mvMatrix = mvMatrix.x(m);

}

function mvTranslate(v) {

　　var m = Matrix.Translation($V([v[0], v[1], v[2]])).ensure4x4();

　　multMatrix(m);

}

我们定义mvMatrix变量来保存模型视图矩阵，接着定义使用该变量的loadIdentity和mvTranslate函数以及multMatrix应用函数。如果你知道JavaScript，你就会明白我们在此使用的矩阵代数函数并不是一般的JavaScript的API；事实上它们由先前提到的两个文件所支持，这两个文件位于HTML网页的顶部：

 

第一个文件， Sylvester，是一个处理矩阵和矢量代数的开源JavaScript库，第二个文件是由Vladimir Vukićević开发的Sylvester库的一系列扩展。

总之，在这些简单函数和有用的库文件的帮助下，我们可以维护模型视图矩阵。这里需要说明另一个矩阵，就是我前面提到的投影矩阵。你也许记得，WebGL不内置perspective函数。但是模型视图矩阵封装了像移动和旋转物体这样的过程，这正是矩阵擅长的事情。你现在肯定已经猜到，投影矩阵正是这么一个矩阵。下面是其代码：

var pMatrix;

function perspective(fovy, aspect, znear, zfar) {

　　pMatrix = makePerspective(fovy, aspect, znear, zfar);

}

makePerspective函数是另一个定义在glUtils.js文件中的函数；它返回一个我们需要应用在指定的全景透视图中的特定矩阵。




现在，我们除了setMatrixUniforms函数外已经浏览了所有函数，正如我先前所说，这个函数将模型视图矩阵和投影矩阵从JavaScript中转移到WebGL中，并与渲染器相关。由于它们相互关联，所以我们将从一些背景知识开始。

你也许会问：什么是渲染器？在三维图形的历史上，渲染器

曾经“名副其实”过：在绘制一个场景之前，它指示系统如何渲染或着色。然而，随着时间的推移，它的功能日益增强，以至于如今要这样定义它才更为合适：渲染器是这样一些代码，在一个场景开始绘制之前，它能对场景的任何部分做任何处理。这的确十分有用，由于它运行在图形卡上，所以它能很快运行且能很便利地做各种变换，哪怕是在这个简单的例子中。




我们引入渲染器是为了一个简单的WebGL例子（在OpenGL教程中这至少算是“中级”），该例子能运行在图形卡上且使用渲染器获得WebGL系统。它把模型视图矩阵和投影矩阵应用到场景中，而不需要使用相对较慢的JavaScript来移动场景中的每一个点和每一个三角形顶点。这相当有用并且值得额外的开销。

下面是如何设置它们。正如你所记得的，webGLStart函数调用initShaders函数，那么让我们一步一步地来看一看：

var shaderProgram;

function initShaders() {

　　var fragmentShader = getShader(gl, "shader-fs");

　　var vertexShader = getShader(gl, "shader-vs");

　　shaderProgram = gl.createProgram();

　　gl.attachShader(shaderProgram, vertexShader);

　　gl.attachShader(shaderProgram, fragmentShader);

　　gl.linkProgram(shaderProgram);

　　if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {

　　　　alert("Could not initialise shaders");

　　}

　　gl.useProgram(shaderProgram);

 

正如你所见，它使用getShader函数来获得两个渲染器：一个片段渲染器和一个顶点渲染器，接着将两者绑定在一个WebGL“程序”上。一个程序是一段放置在系统WebGL上的代码；你可以把它视作一种运行在图形卡上的特定方式。正如你所期望的，你可以将它和一些渲染器联系在一起，每个渲染器都可以视为程序中的一个代码片段；确切地说，每个程序可以拥有一个片段渲染器和一个顶点渲染器。让我们简单地看一下：

shaderProgram.vertexPositionAttribute = 

gl.getAttribLocation(shaderProgram, "aVertexPosition");

gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);

 

  

一旦设置好程序并绑定了渲染器，函数将得到一个“属性”的引用，该属性存储在vertexPositionAttribute对象中。我们再次利用JavaScript把任一字段设置在任一对象上；默认情况下对象没有vertexPositionAttribute字段，但是对于我们来说将两个值保留在一起是很方便的，因此我们仅设置程序中新字段的属性。

那么，vertexPositionAttribute是做什么的呢？也许你还记得，我们在drawScene函数中使用过它；如果你回过去看一看从适当的缓冲区设置三角形顶点位置的那段代码，你将看到我们所做的就是将缓冲区与该属性关联在一起。稍后你将明白这是什么意思。现在，只需注意到我们也使用gl.enableVertexAttribArray函数来指示WebGL使用一个数组来为该属性提供数值。

shaderProgram.pMatrixUniform = 

　　　　　　　　gl.getUniformLocation(shaderProgram, "uPMatrix");

shaderProgram.mvMatrixUniform = 

　　　　　　　　gl.getUniformLocation(shaderProgram, "uMVMatrix");

}

 

initShaders函数所做的最后一件事就是从程序中获取两个多的值，这两个变量称作uniform变量，我们很快会再遇见它们，但现在你只需注意到，正如属性一样，我们为了方便而将其存储在对象中。

现在，我们来看看getShader函数：

function getShader(gl, id) {

　　var shaderScript = document.getElementById(id);

　　if (!shaderScript) {

　　　　　　return null;

　　}

　　var str = "";

　　var k = shaderScript.firstChild;

　　while (k) {

　　　　if (k.nodeType == 3)

　　　　　　　　str += k.textContent;

　　　　　　　　k = k.nextSibling;

　　　　}

　　var shader;

　　if (shaderScript.type == "x-shader/x-fragment") {

　　　　　　shader = gl.createShader(gl.FRAGMENT_SHADER);

　　} 

　　else if (shaderScript.type == "x-shader/x-vertex") {

　　　　　　shader = gl.createShader(gl.VERTEX_SHADER);

　　} 

　　else {

　　　　　　return null;

　　}

　　gl.shaderSource(shader, str);

　　gl.compileShader(shader);

　　if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {

　　　　　　alert(gl.getShaderInfoLog(shader));

　　　　　　return null;

　　}

　　return shader;

}

这是另一个比看起来要简单的函数。我们要做的是在HTML网页中寻找一个元素，其具有与传入参数匹配的ID，取出其内容并基于其类型创建一个片段渲染器或者一个顶点渲染器（以后我们将更多地解释它们的区别），接着将其传入到WebGL中编译成可以在图形卡上运行的形式。接下来，代码进行出错处理，最后完成整个处理。当然，我们只能在JavaScript中将渲染器定义为字符串而不能从HTML中提取——通过这样做，我们使其更易读，因为它们被定义为网页中的脚本，就像它们本身就是JavaScript一样。

  

看完这个以后，我们应该来看看渲染器的代码：

关于这些你要记住的第一件事就是：这些代码不是用JavaScript所写，即使这两种脚本语言的祖先十分相似。事实上，它们使用一种特殊的与C语言有很大关系的渲染器语言（当然，JavaScript也是如此）所写。第一个渲染器——即片段渲染器——什么也不做；它简单地规定了被绘制的物体将被绘制成白色（怎么给物体着色是下一节课程的话题）。第二个渲染器有点意思，它是一个顶点渲染器——还记得吧，它是一段图形卡上的代码，能用一个顶点完成它想做的任何事。与之相关联的是，它有两个uniform变量：uMVMatrix和uPMatrix。uniform变量十分有用，因为它们能在渲染器之外获得——实际上是在包含它们的程序之外，你可能还记得，当时我们从initShaders函数获得了它们，它们也可以从将其设置为模型视图矩阵和投影矩阵的代码（我敢肯定你已经实现了它）中获得。你可能认为渲染器程序是一个对象（在面向对象的场景中），而统一变量是对象中的字段。现在，渲染器在每个顶点上调用，顶点作为aVertexPosition参数传入到渲染器的代码中，由于在drawScene函数中使用vertexPositionAttribute，此时，我们将其属性与缓冲区关联在一起。渲染器主程序中的这部分代码只是将顶点与模型视图矩阵和投影矩阵相乘，然后作为顶点最终位置的结果传出。webGLStart函数调用initShaders函数，在网页的脚本中使用getShader函数装载了片段渲染器和顶点渲染器，以便它们能被编译后传入到WebGL，最终使用WebGL渲染出三维场景。

 

剩下还没有说明的代码是setMatrixUniforms函数，一旦你理解了上面所讲的，就很容易理解它。

 

 function setMatrixUniforms() {

 

 　　gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false, 

 

 　　　　　　new WebGLFloatArray(pMatrix.flatten()));

 

 　　gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, 

 

 　　　　　　new WebGLFloatArray(mvMatrix.flatten()));

 

 }

 

通过引用uniform来表示initShaders中的投影矩阵和模型视图矩阵，我们将值从JavaScript类型矩阵传递给了WebGL。

第一课的内容真的很多，但是希望你（也包括我）能够理解所有这些基本知识，我们将以此为基础创建更加有趣的模型：五彩缤纷的、可移动的、真正的三维WebGL模型。为了了解更多关于WebGL的知识，请阅读第2课。

本文章转载于 HTML5中文网 地址是： http://www.html5china.com/course/20110118_1520.html