纳金网

标题: WebGL教程4：让三维物体动起来【转】 [打印本页]

作者: . 时间: 2012-8-24 11:16
标题: WebGL教程4：让三维物体动起来【转】
欢迎来到第四课，在这一课中我们将开始尝试让物体运动起来。本节课的内容是基于NeHe的OpenGL教程的第四课改写的。
下面的这个视频就是我们这节课要完成的最终效果。
[media=swf?VideoIDS=XMjk5NDkyMzI4&embedid=NTkuNTYuMjI2Ljc4Ajc0ODczMDgyAgI%3D&wd=,640,480]http://static.youku.com/v1.0.0261/v/swf/loader.swf?VideoIDS=XMjk5NDkyMzI4&embedid=NTkuNTYuMjI2Ljc4Ajc0ODczMDgyAgI%3D&wd=[/media]

下面我们来看看它是怎么工作的……
惯例声明：本系列的教程是针对那些已经具备相应编程知识但没有实际3D图形经验的人的；目标是让学习者创建并运行代码，并且明白代码其中的含义，从而可以快速地创建自己的3D Web页面。如果你还没有阅读第一课，请先阅读第一课的内容吧。因为本课中我只会讲解那些与第一课中不同的新知识。
另外，我编写这套教程是因为我在独立学习WebGL，所以教程中可能（非常可能）会有错误，所以还请风险自担。尽管如此，我还是会不断的修正bug和改正其中的错误的，所以如果你发现了教程中的错误，请告诉我。
有两种方法可以获得上面实例的代码：在实例的独立页面中选择“查看源代码”；你也可以点击这里，下载我们为您打包好的压缩包。
在开始讲解代码之前，我需要先说明一件事情：在WebGL中的3D场景里移动物体的原理非常简单——你只需要重复的绘制物体就行了，即在每个时刻绘制不同运动状态下的物体！这对于很多读者来说也许是很小儿科的道理，但是在我刚刚开始学习OpenGL的时候却令我大吃一惊，并且对于其他从WebGL入手、刚刚开始接触3D图形系统的人来说可能也是这样的。因为我原以为应该会有个相对高级的抽象概念，用来告诉3D图形系统“一开始我在X点画了一个方块，然后请把它移动到Y点”。事实上正相反，你需要做的是告诉3D图形系统“我一开始在X点画了一个方块，然后下次绘制方块的时候，方块在Y点，再下次绘制的时候，方块在Z点……”。
希望上面这一段内容能够让大家对物体运动的原理有一个清晰明了的认识。如果你还是不明白，请留言告诉我；如果这段话反而让你迷惑了，那也请留言告诉我，我会尝试着解释的更清楚些，或者直接删除这一段话。
不管怎样，这也就意味着，我们一直用来绘制物体的函数drawScene需要被重复调用，每时每次绘制的内容都有些许不同。让我们先来看看index.html文件代码的底部，从那个搞定一切事情的webGLStart函数开始吧！
257    function webGLStart() {

258       var canvas = document.getElementById("lesson03-canvas");

259       initGL(canvas);

260       initShaders();

261       initBuffers();

262

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

264       gl.enable(gl.DEPTH_TEST);

265

266       tick();

267 }

这个函数和之前唯一的改变就是在最后我们需要调用drawScene函数的地方，我们调用了一个新的函数tick。这就是那个需要重复调用的函数，它用于更新场景的运动状态（比如三角形从81度旋转到82度）、绘制场景以及调整好参数为下次调用做准备。下面我们就先来看看这个函数。
250    function tick() {

251       okRequestAnimationFrame(tick);

第一行的代码是用来安排好在下次重绘时调用tick函数的。okRequestAnimationFrame是一个由Oak3D提供的函数。这个函数可以兼容所有浏览器，让浏览器在需要重绘WebGL场景时调用，比如说刷新显示。简单的说，就是各个浏览器都对需要循环绘制场景以实现动画效果的任务提供了API支持，但是目前各个浏览器提供的API中函数名称都不一样，比如说在Firefox中，这个函数的名字是mozRequestAnimationFrame，但到了Chrome和Safari中，它又改名叫做webkitRequestAnimationFrame。也许在将来的某个时候这些浏览器厂商会在API函数名称上达成一致，但是现在，我们幸好可以使用Oak3D提供的这个okRequestAnimationFrame函数来实现一次调用，所有浏览器适用。
使用Javascript去反复调用drawScene函数，你也许可以达到相似的效果——比如使用Javascript内置的setInterval函数————但请不要这样做！虽然在很久很久以前，几乎所有早期的WebGL程序都是这么做的，包括本教程，它们一直运行的很好，但是直到浏览器出现了标签浏览的功能后，一切都改变了。因为不管动画页面是否处于激活的标签页，即用户当前正在浏览的标签页，setInterval函数都会被持续不断的调用，这就意味着每一分每一秒电脑都会持续渲染每一个打开的WebGL页面，而不管这个页面是否正在前台展示或是被隐藏。这显然是一个很可怕的事情，这也正是引入requestAnimationFrame的原因，它可以只在标签页被激活的时候才会被调用。
然后我们看看tick函数剩下的部分：
252       drawScene();

253       animate();

254 }

每当浏览器需要绘制一帧的时候就会调用tick函数，然后进行绘制，最后更新一下相关参数来为下次调用做准备。我们按照顺序来看看drawScene函数和animate函数。
drawScene函数差不多在index.html文件代码的的三分之二处。首先你会发现在声明函数之前，我们又定义了两个新的全局变量。
195    var rTri = 0;

196 var rSquare = 0;

这两个变量是用来追踪三角形和矩形的旋转的，它们都从0度开始，然后变量值根据时间慢慢增加（一会你就会看到是如何“慢慢增加”的），从而让图形不断旋转。（顺便说一下，本课的实例是一个非常简单的Demo，但是如果在复杂的3D程序中这样滥用全局变量将是一件非常糟糕的事情，我在第9课中会为大家介绍一个更轻巧便捷的方法。）
下一个代码上的变化位于drawScene函数中我们开始绘制三角形的地方。下面我把所有的代码附上，第205行、第207行和第216行就是新增加的代码：
      pMatrix = okMat4Proj(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0);

202       mvMatrix = new okMat4();

203

204       mvPushMatrix();

205       mvMatrix.translate(OAK.SPACE_WORLD, -1.5, 0.0, -7.0, ***e);

206       mvMatrix.rotY(OAK.SPACE_LOCAL, rTri, ***e);

207       gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);

208       gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute,

209 triangleVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);

210

211       gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexColorBuffer);

212          gl.vertexAttribPointer(shaderProgram.vertexColorAttribute,

213 triangleVertexColorBuffer.itemSize, gl.FLOAT, false, 0, 0);

214

215       setMatrixUniforms();

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

      mvPopMatrix();

为了解释上面的代码，让我们先回到第一课，在第一课中我曾经说过：
在OpenGL中，当你想要绘制一个场景的时候，你会告诉OpenGL在当前位置、按照当前旋转角度来绘制每个物体。比如，你说“向前移动20个单位，旋转32度，绘制一个机器人”，这基本上就是一个“位移多少多少，旋转多少多少，画什么什么”的综合过程。这个过程非常实用，因为你可以把“绘制机器人”的代码封装到一个函数中，然后就可以修改函数中位移和旋转的参数来轻松实现机器人的移动。
如果你还记得物体的当前状态都储存在模型视图矩阵中，那么在
207       mvMatrix.rotY(OAK.SPACE_LOCAL, rTri, ***e);

这条语句中的调用mvMatrix的目的就显而易见了：我们改变了储存在模型视图矩阵中的当前的旋转状态——围绕着垂直轴（由第三个参数指定）旋转rTri度。这意味着当绘制三角形的时候，它会被旋转rTri度。说明一下，在Oak3D中旋转角度都是以角度为单位，而不是弧度，这大大方便了我们，不需要再将相对难以理解的弧度制转换为角度制。（译者注：原文中作者使用了其他第三方库，使用的是弧度制，作者也认为使用角度值比较方便，于是还专门写了一个函数用来将角度值转换为弧度制，但是在本文中这个函数并不需要，所以我们就略去了，有需要的同学可以查看原文教程，找到那个函数，名字是degToRad。）
那么，调用mvPushMatrix和mvPopMatrix又是怎么回事呢？就和它们的函数名一样，它们也与模型视图矩阵有关。回到我说的关于画机器人的那个例子，比如你要移动到A点，画一个机器人，然后从A点做一个位移，移动到另一个点画一个茶壶。画机器人的代码可能会对模型视图矩阵做出面目全非的改变；它可能是先画身体，先后移下来画腿，最后再移上去画头部，最后画完胳膊结束。问题在于，在这之后，当你试图位移到另外一个点，你以为会以A点为起点进行位移，但实际上却是从你最后画的地方开始的！就是说如果你的机器人抬一抬手臂，那么随后画的那个茶壶也会跟着升天！这太可怕了！
显然，我们需要在开始绘制之前备份一下模型视图矩阵，然后在绘制完毕之后再恢复它。这就是mvPushMatrix和mvPopMatrix的用处。mvPushMatrix将矩阵放置到堆栈中，然后mvPopMatrix抛弃当前矩阵，再从堆栈顶部取出之前的矩阵，然后将它储存起来。我们使用了堆栈，所以可以嵌套许多层绘制的代码，每一层都与模型视图矩阵相乘，结束时后者再被恢复。所以当我们结束绘制旋转的三角形时，我们用mvPopMatrix来恢复模型视图矩阵，然后：
219       mvMatrix.translate(OAK.SPACE_WORLD, 1.5, 0.0, -7.0, ***e);

在当前未旋转的帧中移动穿过场景。（如果你还是对上面讲的不太清楚，我建议你移除代码中的push/pop的部分，然后运行一下看看，你马上就会明白了！）
好了，以上三个代码上的改变让三角形成功的围绕穿过中心的垂直轴旋转起来，并且不会影响到旁边的矩形。下面是相似的代码让矩形围绕穿过中心的水平轴旋转。
      mvMatrix.rotX(OAK.SPACE_LOCAL, rSquare, ***e);

220

221       gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);

222       gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute,

223 squareVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);

224

225       gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexColorBuffer);

226       gl.vertexAttribPointer(shaderProgram.vertexColorAttribute,

227 squareVertexColorBuffer.itemSize, gl.FLOAT, false, 0, 0);

228

229       setMatrixUniforms();

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

231

232       mvPopMatrix();

}

以上就是drawScene函数中代码改变的部分。
显然，我们另外需要做的一件事就是要让我们的场景动起来，这需要根据时间改变rTri和rSquare的值，使得每次绘制场景的时候，都会有些许的不同。这些事情，我们放到了新增加的animate函数中去实现：
236    var lastTime = 0;

237

238 function animate() {

239       var timeNow = new Date().getTime();

240       if (lastTime != 0) {

241          var elapsed = timeNow - lastTime;

242

243          rTri += (90 * elapsed) / 1000.0;

244          rSquare += (75 * elapsed) / 1000.0;

245       }

246       lastTime = timeNow;

247 }

想要使场景动起来，一个简单的思路就是每当animate函数被调用时，就根据一个固定的值去旋转三角形和矩形（原始的OpenGL教程也正是这么做的），但是这里我用了另一个我个人感觉稍微更好的方式，每次旋转的角度是由从上一次函数被调用到这一次的时间来决定的。另外，我指定三角形每秒旋转90度，矩形每秒旋转75度。这样做的好处是，无论电脑的性能如何，每个人都会看到相同的运动速率；否则电脑比较慢的用户（也就是说比起速度较快的机器，okRequestAnimationFrame被调用的频率不会那么高）将会看到非常坑爹的运行效果。这对于我们这种简单的Demo来说也许不算什么，但是对于大型的程序，比如游戏，就会相当有用。
以上就是绘制运动场景的代码。下面我们来看看我们额外增加的那些代码，mvPushMatrix和mvPopMatrix。
117    var mvMatrix ;

118 var mvMatrixStack = [];

119 var pMatrix ;

120

121 function mvPushMatrix() {

122       var copy = new okMat4();

123       mvMatrix.clone(copy);

124       mvMatrixStack.push(copy);

125 }

126

127 function mvPopMatrix() {

128       if (mvMatrixStack.length == 0) {

129          throw "Invalid popMatrix!";

130       }

131       mvMatrix = mvMatrixStack.pop();

132 }

这一部分很好理解，我们建立了一个列表用来储存矩阵堆栈，然后用压栈出栈来备份和恢复模型视图矩阵。
好了，本节课到此为止。现在你应该明白如何去制作简单的WebGL运动场景了。如果有任何问题、更正和意见，都请留言给我。
下节课，我们将开始绘制一个真正的3D物体，而不是3D世界中的2D形状。那么，下节课再见！

欢迎光临纳金网 (http://go.narkii.com/club/)