附录A 译文

WebGL学习 : 三角形和正方形

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

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

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

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

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

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

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

你将看到下面的html代码：

body onload='webGLStart();'gt;

a href='http://learningwebgl.com/blog/?p=28'gt;lt;lt; Back to Lesson 1

canvas id='lesson01-canvas' style='border: none;' width='500' height='500'gt;

a href='http://learningwebgl.com/blog/?p=28'gt;lt;lt; Back to Lesson 1

/bodygt;

这是一个网页完整的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度，接着绘制机器人”，这非常有用，因为你能将“绘制机器人”的代码封装在一个函数中，然后，只需在调用函数前改变“平移/旋转”参数，就能轻松绘制机器人。当前的位置和旋转信息放在一个矩阵中；正如你可能在学校了解的一样，矩阵可以表示平移（从一个位置到另一个位置的移动），旋转和其他几何变换。现在我不想讲得太多，你可以用一个4times;4（不是3times;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.ver

剩余内容已隐藏，支付完成后下载完整资料

---

资料编号：[499559]，资料为PDF文档或Word文档，PDF文档可免费转换为Word