WebGL教程3：运动起来

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

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





一点提示：这些课程是面向那些具有一定编程知识但没有实际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库来完成——这非常简单。