摄像机

下面是代码演示

上一篇文章中说到了透视和正交两种投影矩阵，文末提到了三个基本矩阵MVP。本文就以介绍MVP为开头，然后再详细讲解摄像机的概念。 MVP表示的是模型变换矩阵（Model），观察矩阵（View），投影矩阵（Projection）。投影矩阵介绍过了。模型矩阵针对的是单个3D模型，渲染每一个3D模型前，需要将各自的模型矩阵传递给Vertex Shader。观察矩阵针对的是场景中的所有物体，当观察矩阵改变时，所有顶点的位置都会受到影响，就好像你移动现实世界的摄像机，拍摄到的场景就会变化一样。所以观察矩阵可以理解为WebGL 3D世界中的摄像机。我们有了摄像机这个变换矩阵之后，就可以很方便的在3D世界中游览，就像第一人称视角游戏中一样。大概了解MVP之后，我们开始使用代码实现它们。首先要修改一下Vertex Shader。

attribute vec4 position;
varying vec4 fragColor;

uniform float elapsedTime;
uniform mat4 projectionMatrix;
uniform mat4 cameraMatrix;
uniform mat4 modelMatrix;
void main() {
    fragColor = position * 0.5 + 0.5;
    gl_Position = projectionMatrix * cameraMatrix * modelMatrix * position;
}

我把之前的uniform transform换成了三个变换矩阵projectionMatrix,cameraMatrix,modelMatrix,它们分别是投影矩阵，观察矩阵，模型矩阵。将它们相乘projectionMatrix * cameraMatrix * modelMatrix，结果乘以position赋值给gl_Position。注意相乘的顺序，这个顺序的结果是先进行模型矩阵变换，再是观察矩阵，最后是投影矩阵变换。这样Vertex Shader中的MVP就实现完了，很简单是不是。

回到JS代码，我将之前的属性transform换成了4个变换矩阵，分别是两个M和VP。本文的例子将绘制两个矩形，所以我为它们分别定义了模型矩阵modelMatrix1和modelMatrix2。

var perspectiveProjectionMatrix = null;
var cameraMatrix = null;
var modelMatrix1 = null;
var modelMatrix2 = null;

接下来初始化这些属性。

function setupMatrix() {
  perspectiveProjectionMatrix = mat4.create();
  mat4.perspective(perspectiveProjectionMatrix, 90 / 180.0 * Math.PI, canvas.width / canvas.height, 0.1, 1000);

  cameraMatrix = mat4.create();
  mat4.lookAt(cameraMatrix, vec3.fromValues(0,0,2), vec3.fromValues(0,0,0), vec3.fromValues(0,1,0));

  modelMatrix1 = mat4.create();
  modelMatrix2 = mat4.create();
}

投影矩阵使用了透视投影进行初始化。两个模型矩阵初始化为单位矩阵。本文的主角观察矩阵初始化为摄像机在 0，0，2 坐标，看向 0，0，0点，向上朝向0，1，0。mat4.lookAt提供了快捷创建观察矩阵的方法，需要传递3个类型为vec3的参数，摄像机的位置(eyeX，eyeY，eyeZ)，摄像机看向的点(centerX，centerY，centerZ)，摄像机向上的朝向(upX, upY, upZ)。改变这几个参数就能控制摄像机在3D世界中通过不同角度拍摄物体。我把上一篇的剖面示意图做了一下修改。

图中的lookAt就是center。

我们可以这么理解观察矩阵。在观察矩阵的作用下，透视矩阵的原点变成了摄像机的位置eye。up决定了摄像机围绕eye和lookAt形成的轴（本例中就是Z轴）的旋转角度，读者可以修改本例的中的up值看看效果。lookAt决定了摄像机能看到的区域，可以看做是控制摄像机在Y轴和X轴上的旋转角度。

在第一人称的游戏中，只要控制lookAt的位置就可以实现360度查看周边景物的效果，后面介绍到渲染3D场景的时候会深入讲解。

初始化完后在onWebGLRender中为这些矩阵赋新的值。

// 保证canvas尺寸改变时，同步投影矩阵的值，你也可以在resize里重新计算，那样会更好。
mat4.perspective(perspectiveProjectionMatrix, 90 / 180.0 * Math.PI, canvas.width / canvas.height, 0.1, 1000);

var varyingFactor = (Math.sin(elapsedTime / 1000) + 1) / 2.0; // 0 ~ 1
mat4.lookAt(cameraMatrix, vec3.fromValues(0, 0, 2 * (varyingFactor + 1)), vec3.fromValues(0, 0, 0), vec3.fromValues(0, 1, 0));

// 设置第一个model matrix
var rotateMatrix = mat4.create();
var translateMatrix = mat4.create();
mat4.rotate(rotateMatrix, rotateMatrix, varyingFactor * Math.PI * 2, vec3.fromValues(0, 1, 0));
mat4.translate(translateMatrix, translateMatrix, vec3.fromValues(-0.7, 0, 0));
mat4.multiply(modelMatrix1, translateMatrix, rotateMatrix);

// 设置第二个model matrix
rotateMatrix = mat4.create();
translateMatrix = mat4.create();
mat4.rotate(rotateMatrix, rotateMatrix, varyingFactor * Math.PI * 2, vec3.fromValues(0, 0, 1));
mat4.translate(translateMatrix, translateMatrix, vec3.fromValues(0.7, 0, 0));
mat4.multiply(modelMatrix2, translateMatrix, rotateMatrix);

var varyingFactor = (Math.sin(elapsedTime / 1000) + 1) / 2.0;的值从0到1。摄像机的Z轴坐标为2 * (varyingFactor + 1)，从2到4。第一个矩形向左偏移0.7，绕Y轴旋转varyingFactor * M_PI * 2，从0到360度。第二个矩形向右偏移0.7，绕Z轴旋转varyingFactor * M_PI * 2，从0到360度。

最后给uniform赋值。

// 设置投影和观察矩阵
var projectionMatrixUniformLoc = gl.getUniformLocation(program, 'projectionMatrix');
gl.uniformMatrix4fv(projectionMatrixUniformLoc, false, perspectiveProjectionMatrix);
var cameraMatrixUniformLoc = gl.getUniformLocation(program, 'cameraMatrix');
gl.uniformMatrix4fv(cameraMatrixUniformLoc, false, cameraMatrix);

// 使用不同的model matrix绘制两次物体
var modelMatrixUniformLoc = gl.getUniformLocation(program, 'modelMatrix');
gl.uniformMatrix4fv(modelMatrixUniformLoc, false, modelMatrix1);
gl.drawArrays(gl.TRIANGLES, 0, 6);

modelMatrixUniformLoc = gl.getUniformLocation(program, 'modelMatrix');
gl.uniformMatrix4fv(modelMatrixUniformLoc, false, modelMatrix2);
gl.drawArrays(gl.TRIANGLES, 0, 6);

先给uniform projectionMatrix和uniform cameraMatrix赋值。每个矩形绘制之前，再将各自的modelMatrix赋值给uniform modelMatrix，就像开头说的那样，每个3D模型有自己的模型变换。

本篇主要介绍了摄像机（观察矩阵），三大基本矩阵MVP的概念。下一篇小试牛刀，开始渲染真正的3D物体-正方体。

目录

友情链接

摄像机