首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

WebGL课程3:运动起来

2012-10-28 
WebGL教程3:运动起来欢迎来到WebGL教程第三课。这次我们将学习如何移动物体。本课基于NeHe OpenGL教程的第4

WebGL教程3:运动起来

欢迎来到WebGL教程第三课。这次我们将学习如何移动物体。本课基于NeHe OpenGL教程的第4课。

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

WebGL课程3:运动起来



一点提示:这些课程是面向那些具有一定编程知识但没有实际3D图形开发经验的开发人员的;其目的是让你对代码层上发生了什么事 有很好的理解,以便你能尽可 能快地创建出自己的3D网页。如果你还没看过第一课和第二课的话,你应该在开始本课之前看 看它们。因为我在这里仅仅解释与第二课代码的不同之处和一些新的代码。



同之前的课程一样,本课也可能存在一些缺陷和错误概念。如果你发现有什么不对的话,请留言让我知道,我会纠正它。



获取这个例子的代码有两种方法:一种就是当你观看实时版的时候点击“查看源码”的链接,另一种是你从 GitHub的代码库获取(包括 以后课程的代码)。对于任一种方式,一旦你获得源码,你就可以用你喜欢的文本编辑器打开并查看它。



在讲解代码之前,我要澄清一件事。在webGL中制作3D场景的动画是十分容易的——你只需重复地绘制该场景,每次都把它绘制 得不一样。这对许多读者来说也许是一件显而易见的事,但当我开始学习webGL时,对此却有点惊讶。可能对于那些第一次使用webGL绘制3D图形的人来 说也有点吃惊吧。起初让我困惑的原因是,我想象它应该使用更高级的抽象方法,即它应该这样运行:“告诉3D系统有一个正方形在点X处(我起初绘制它的地方),接着移动这个正方形,告诉3D系统该正方形已经移动到了点Y处。”然而事实是:“你告诉3D系统有一个正方形在点X处,接着在下次绘制它时,告诉系 统它在点Y处,再下一次它在点Z处”,以此类推。



我希望上面这段话至少能让部分人有一个更加清晰的概念(如果它让人迷惑的话,请留言给我,我将删除它:-)



由于到目前为止我们的示例代码一直使用drawScene函数来绘 制物体,并一直使用如下代码:

setInterval(drawScene, 15);



来告诉JavaScript每隔15ms就调用一次drawScene函 数,为了制作场景动画并让三角形和正方形移动,我们所需要做的就是改变此处代码以便每次调用drawScene函数时,它绘制的物体略有不同。



这意味着我们对第二课中的代码改动最大地方在drawScene函数中,因此让我们就从这里(大约在index.html文件三分之二的地方)开始吧。第一件需要注意的事就是在函数声明之前,我们要定义两个新的全局变量。

var rTri = 0;

var rSquare = 0;



这两个变量分别用来 跟踪三角形和正方形的旋转。它们都从0度开始旋转,然后角度将随时间增加——稍后你将看到如何进行——,从而渐渐旋转(提示:在一个三维程序中像这样使用 全局变量并不是很好的应用。我将在第九课中使用一种更合适的方式来构造程序。)



对drawScene函数的另一个改变在我们绘制三角形的点。我将通过上下文的方式来介绍绘制三角形的所有代码,新添加的代码用红色标示:

??? perspective(45, gl.viewportWidth / gl.viewportHeight,0.1, 100.0);
??? loadIdentity();

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

??? mvPushMatrix();
??? mvRotate(rTri, [0, 1, 0]);

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

??? gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexColorBuffer);
??? gl.vertexAttribPointer(shaderProgram.vertexColorAttribute,triangleVertexColorBuffer.itemSize, gl.FLOAT, false, 0, 0);

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

??? mvPopMatrix();

为了解释这些代码,让我们回到第一课。在那里,我曾经说过:在OpenGL中,当我们绘制一个场景时,你要告诉它用“当前 的”旋转方法在“当前的”位置上绘制每一个物体——因此,例如你说“向前移动20个单位,旋转32度,接着绘制机器人”,这非常有用,因为你能将“绘制机器人”的代码封装在一个函数中,然后,只需在调用函数前改变“平移/旋转”参数,就能轻松绘制机器人。

你应该记得这个当前状态存储于一个模型视图矩阵中。考虑到这点,下面这个函数调用的目的是十分显而易见的:

mvRotate(rTri, [0, 1, 0]);



改变存储在模型视图矩阵中的当前旋转状态,围绕垂直轴(通过第二个矢量参数指定)旋转rTri度。这意味着绘制三角形时,三角形将被旋转rTri度。mvRotate函数就像我们在第一课中看到的mvTranslate函数一样使用JavaScript编写——稍后我们再来看它。



那么,mvPushMatrix和mvPopMatrix这两个函数又是做什么的呢?通过函数名,你可能会猜到他们也和模型视图矩阵有关。回到先前绘制机器人的那个例子,处在最高层的代码需要移至A点,绘制机器人,接着从A点做些偏移并绘制一个茶壶。绘制机器 人的代码可能会给模型视图矩阵带来各种各样的变化;它可能从机器人的身体开始绘制,然后向下移动到腿部,接着向上移动到头部,最后绘制完胳膊。问题是如果你在绘制完机器人之后试图移动至偏移点,那此时的移动不是相对于A点,而是相对于最后绘制的点。这就意味着如果机器人抬起了它的胳膊,那么茶壶的位置也将向上移动。这可不是什么好事情。



现在需要做的,是在你开始绘制机器人之前将模型视图矩阵的状态存储起来,之后再将其恢复。当然,这就是mvPushMatrix和mvPopMatrix这两个函数所做的事情。mvPushMatrix将矩阵放入一个堆栈,而 mvPopMatrix放弃当前矩阵并从堆栈顶部取出一个矩阵,然后恢复其状态。使用堆栈意味着我们可以嵌套任意多层的绘图代码,每层对模型视图矩阵进行操作,然后再将其恢复。因此,一旦绘制好旋转的三角形,我们应该用mvPopMatrix来恢复模型视图矩阵,所以代码如下:

mvTranslate([3.0, 0.0, 0.0]);



...在一个非旋转的参考帧中移动整个场景。(如果对此仍然不是很清楚的话,我建议你拷贝该代码并移除push/pop代码看看会发生什么,然后再重新运行它,不同的效果很快就会显现)



因此,对代码的这三处改变将使得三角形围绕垂直轴的中心旋转,但并不影响正方形。同样也有三行类似的代码使得正方形围绕水平轴的中心旋转。

??? mvPushMatrix();
??? mvRotate(rSquare, [1, 0, 0]);

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

??? gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexColorBuffer);
??? gl.vertexAttribPointer(shaderProgram.vertexColorAttribute,squareVertexColorBuffer.itemSize, gl.FLOAT, false, 0, 0);

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

??? mvPopMatrix();
? }

... 以上就是drawScene函数所有变动的地方。



显然,为了将场景制作成动画我们还需要做另一件事,这就是随时间的变化而改变rTri和 rSquare的数值,以使每次绘制的场景略有不同。我们使用animate函数来做到这一点,它就像drawScene函数一样每隔一段时间就被调用一次。其代码如下:

var lastTime = 0;
? function animate() {
??? var timeNow = new Date().getTime();
??? if (lastTime != 0) {
????? var elapsed = timeNow - lastTime;
????? rTri += (90 * elapsed) / 1000.0;
????? rSquare += (75 * elapsed) / 1000.0;
??? }
??? lastTime = timeNow;

? }



一种制作场景动画的简单方法是在每次调用animate时增加固定值(这也是我编写本教程所参考的的原始教程所使用的方法),但在这里我将使用一种我认为比较好的方法:用距离函数上次被调用的时间长短来决定一个物体旋转多少。特别地,三角形每秒旋转90度,正方形每秒旋转75度。这样做的好处是:无论你们的机器有多快,大家在场景中看到的都是相同的移动速度;只是在较慢的机器上图像会发生抖动。这对于像本例这样一个简单演示并不重要,但是对于像游戏或类似的应用就比较重要了。



接下来的变化是我们必须每隔一段时间有规律地调用animate,就像对drawScene所做的那样。我们创建一个名为tick的新函数,该函数用来调用 这两个函数并且自身每隔15毫秒被调用一次。

function tick() {
??? drawScene();
??? animate();
? }

? function webGLStart() {
??? var canvas =document.getElementById("lesson03-canvas");
??? initGL(canvas);
??? initShaders();
??? initTexture();

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

??? gl.enable(gl.DEPTH_TEST);
??? gl.depthFunc(gl.LEQUAL);

??? setInterval(tick, 15);

? }



这就是在绘制并制作场景动画代码中所有变动的地方。现在,让我们来看看需要添加的代码。首先是mvPushMatrix和mvPopMatrix:

? var mvMatrixStack = [];

? function mvPushMatrix(m) {
??? if (m) {
????? mvMatrixStack.push(m.dup());
????? mvMatrix = m.dup();
??? } else {
????? mvMatrixStack.push(mvMatrix.dup());
??? }
? }

? function mvPopMatrix() {
??? if (mvMatrixStack.length == 0) {
????? throw "Invalid popMatrix!";
??? }
??? mvMatrix = mvMatrixStack.pop();
??? return mvMatrix;

? }



这里并没有什么令人吃惊的地方。我们用一个列表来保留矩阵堆栈并适当地定义push和pop。



现在,来看看mvRotate函数:

function mvRotate(ang, v) {
??? var arad = ang * Math.PI / 180.0;
??? var m = Matrix.Rotation(arad, $V([v[0], v[1],v[2]])).ensure4x4();
??? multMatrix(m);

? }



创建一个矩阵用以表示旋转的所有困难工作通过Sylvester库来完成——这非常简单。

?

热点排行