你要知道在大部分发场景一个视角是不太可能将一个物体的全貌全部看到的；所以视角也就是相机可以移动也就是必须的条件

一. 相机该怎么动

image.png image.png
在现实的世界中我们可以想象一下我们坐在车子上拍一个场景 如果我们手里镜头就相当于那个相机的话 ；画面中迎面过来的建筑是不动的；而此时的相机确实是动的；迎面过来的其他的车子确实也是动态的；所以现实生活中视角不仅动内部的物体也同时也在动的；

二. 逆矩阵

但在上节中由于投影的原因物体需要在 -Z 轴上，我们通过将相机移动到原点， 物体移动到相机前来保持原始的相对位置。也就是我们处理了在相机不动的情况下；内部物体的平移，旋转或者缩放我们都可以通过矩阵来进行位移；
假如来说；摄像机动态加入情况我们该处理 【 其实是不是可以理解为物体的相对移动 】
假如我们移动一下摄像头的话；向左平移40px是不是可以理解为其视野的观看感受就是物体全部向右平移40px；但是为了高效【在这里面抛个问题为什么不高效】

最简单的方式是使用一个“逆向”矩阵， 计算逆矩阵的数学原理比较复杂但概念很简单，逆就是你想通过一个值去抵消一个值。 例如，123 的逆就是 -123 ，一个缩放为 5 的缩放矩阵的逆是缩放为 1/5 或 0.2 的缩放矩阵，一个绕 X 轴旋转 30° 的旋转矩阵的逆是绕 X 旋转 -30°。
目前为止我们使用过平移，旋转和缩放去控制 ‘F’ 的位置和姿态， 将这些矩阵相乘后得到一个矩阵，可以将物体从原始位置移动到期望的位置，大小和姿态。 我们可以对相机进行同样的操作，一旦有了相机从原点移动旋转到目标位置的矩阵后， 就可以计算出它的逆矩阵，利用这个逆矩阵可以不动相机，将物体从相反的方向移动到相机前。

让我们来做一个三维场景，像上图一样有一圈 ‘F’ 。
首先，由于5个物体使用的是同一个投影矩阵，所以我们将投影矩阵的计算放在循环外

  1. // 计算投影矩阵
  2. var aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
  3. var zNear = 1;
  4. var zFar = 2000;
  5. var projectionMatrix = m4.perspective(fieldOfViewRadians, aspect, zNear, zFar);

接着计算相机矩阵，这个矩阵代表的是相机在世界坐标中的位置和姿态。 下方的代码计算的是看向原点，在半径为 radius * 1.5 的圆上移动的相机。
image.png

  1. var numFs = 5;
  2. var radius = 200;
  4. // 计算相机的矩阵
  5. var cameraMatrix = m4.yRotation(cameraAngleRadians);
  6. cameraMatrix = m4.translate(cameraMatrix, 0, 0, radius * 1.5);

然后通过相机矩阵计算“视图矩阵”，视图矩阵是将所有物体以相反于相机的方向运动， 尽管相机还是在原点但是相对关系是期望的。我们可以使用 inverse 方法计算逆矩阵（ 完全对立的转换矩阵），在这个例子中提供的是绕原点转动的矩阵， 它的逆矩阵是移动相机以外的所有物体，好像相机在原点一样。

  1. // 通过相机矩阵计算视图矩阵
  2. var viewMatrix = m4.inverse(cameraMatrix);


现在将视图矩阵和投影矩阵结合在一起

  1. // 计算组合矩阵
  2. var viewProjectionMatrix = m4.multiply(projectionMatrix, viewMatrix);

最后绘制一圈 F，将每个 F 乘以视图投影矩阵，然后旋转和向外平移 radius 个单位。

  1. for (var ii = 0; ii < numFs; ++ii) {
  2.   var angle = ii * Math.PI * 2 / numFs;
  3.   var x = Math.cos(angle) * radius;
  4.   var y = Math.sin(angle) * radius
  6.   // 从视图投影矩阵开始
  7.   // 计算 F 的矩阵
  8.   var matrix = m4.translate(viewProjectionMatrix, x, 0, y);
  10.   // 设置矩阵
  11.   gl.uniformMatrix4fv(matrixLocation, false, matrix);
  13.   // 获得几何体
  14.   var primitiveType = gl.TRIANGLES;
  15.   var offset = 0;
  16.   var count = 16 * 6;
  17.   gl.drawArrays(primitiveType, offset, count);
  18. }

这样做没什么问题，但是有时利用旋转和平移去移动相机， 让它到达期望的位置并看向期望的方向并不容易。 例如你想让它总是看向一个特定的 F , 而相机又在绕一圈 F 旋转， 这时计算会变的相当复杂。
幸好这有一个简单的方法，我们可以同时定义相机位置和朝向，然后矩阵就可以将相机放在那， 基于矩阵这个工作就会变得非常简单。
首先我们需要知道相机的期望位置，将它叫做 cameraPosition， 然后需要知道看向或对准的目标位置，将它叫做 target。 如果将 target 减去 cameraPosition 就会得到相机的朝向， 将它叫做 zAxis。由于我们知道相机看向的是 -Z 方向， 所以可以用另一种方式相减 cameraPosition - target， 将结果单位化后直接赋给矩阵的 z 区域。

三. 盯着他移动 （LookAt）

矩阵的这个区域代表的是 Z 轴。在这个例子中相机的 Z-axis 进行了单位化， 单位化也就是一个做一个类似 1.0 的矢量，在三维中需要一个单位球，单位向量表示单位球上的点。

image.png

这些信息还不够，只给了一个单位圆上点，如何来确定物体的姿态呢？ 这就需要填充矩阵的其他区域，尤其是 X 轴和 Y 轴。通常情况下我们知道它们互相垂直， 如果再知道哪里是上方，在该例中是(0,1,0)，就可以使用“叉乘”去计算矩阵的 X 轴和 Y 轴。
我不知道叉乘的数学意义是什么，但我知道将两个单位向量叉乘后可以得到一个和它们都垂直的向量。 换句话说，如果你有一个向量指向东南方，一个向量指向上方， 叉乘后会得到一个指向西南方或东北方的矢量，因为这两个矢量都和东南方和上方垂直。 相乘的顺序不同的到结果相反。
在任何情况下我们可以通过叉乘zAxis 和up 得到相机的xAxis。
image.png

现在我们有了 xAxis ， 可以叉乘 zAxis 和 xAxis 的到相机的 yAxis。
image.png
现在将三个轴插入矩阵中，会给我们提供一个从 cameraPosition 指向 target 的转换，只需要再加上 position

image.png

  1. // 计算叉乘
  2. function cross(a, b) {
  3.   return [a[1] * b[2] - a[2] * b[1],
  4.           a[2] * b[0] - a[0] * b[2],
  5.           a[0] * b[1] - a[1] * b[0]];
  6. }
  8. // 这是向量相减的代码
  10. function subtractVectors(a, b) {
  11.   return [a[0] - b[0], a[1] - b[1], a[2] - b[2]];
  12. }
  14. // 这是单位化向量的代码
  15. function normalize(v) {
  16.   var length = Math.sqrt(v[0] * v[0] + v[1] * v[1] + v[2] * v[2]);
  17.   // 确定不会除以 0
  18.   if (length > 0.00001) {
  19.     return [v[0] / length, v[1] / length, v[2] / length];
  20.   } else {
  21.     return [0, 0, 0];
  22.   }
  23. }
  25. // 这是计算“朝向”矩阵的代码
  27. var m4 = {
  28.   lookAt: function(cameraPosition, target, up) {
  29.     var zAxis = normalize(
  30.         subtractVectors(cameraPosition, target));
  31.     var xAxis = normalize(cross(up, zAxis));
  32.     var yAxis = normalize(cross(zAxis, xAxis));
  34.     return [
  35.        xAxis[0], xAxis[1], xAxis[2], 0,
  36.        yAxis[0], yAxis[1], yAxis[2], 0,
  37.        zAxis[0], zAxis[1], zAxis[2], 0,
  38.        cameraPosition[0],
  39.        cameraPosition[1],
  40.        cameraPosition[2],
  41.        1,
  42.     ];
  43.   }

四. 终极代码

  1. "use strict";
  3. function main() {
  4.   // Get A WebGL context
  5.   /** @type {HTMLCanvasElement} */
  6.   var canvas = document.querySelector("#canvas");
  7.   var gl = canvas.getContext("webgl");
  8.   if (!gl) {
  9.     return;
  10.   }
  12.   // setup GLSL program
  13.   var program = webglUtils.createProgramFromScripts(gl, ["vertex-shader-3d", "fragment-shader-3d"]);
  15.   // look up where the vertex data needs to go.
  16.   var positionLocation = gl.getAttribLocation(program, "a_position");
  17.   var colorLocation = gl.getAttribLocation(program, "a_color");
  19.   // lookup uniforms
  20.   var matrixLocation = gl.getUniformLocation(program, "u_matrix");
  22.   // Create a buffer to put positions in
  23.   var positionBuffer = gl.createBuffer();
  24.   // Bind it to ARRAY_BUFFER (think of it as ARRAY_BUFFER = positionBuffer)
  25.   gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
  26.   // Put geometry data into buffer
  27.   setGeometry(gl);
  29.   // Create a buffer to put colors in
  30.   var colorBuffer = gl.createBuffer();
  31.   // Bind it to ARRAY_BUFFER (think of it as ARRAY_BUFFER = colorBuffer)
  32.   gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
  33.   // Put color data into buffer
  34.   setColors(gl);
  36.   function radToDeg(r) {
  37.     return r * 180 / Math.PI;
  38.   }
  40.   function degToRad(d) {
  41.     return d * Math.PI / 180;
  42.   }
  44.   var cameraAngleRadians = degToRad(0);
  45.   var fieldOfViewRadians = degToRad(60);
  47.   drawScene();
  49.   // Setup a ui.
  50.   webglLessonsUI.setupSlider("#cameraAngle", {value: radToDeg(cameraAngleRadians), slide: updateCameraAngle, min: -360, max: 360});
  51.   function updateCameraAngle(event, ui) {
  52.     cameraAngleRadians = degToRad(ui.value);
  53.     drawScene();
  54.   }
  56.   // Draw the scene.
  57.   function drawScene() {
  58.     webglUtils.resizeCanvasToDisplaySize(gl.canvas);
  60.     // Tell WebGL how to convert from clip space to pixels
  61.     gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
  63.     // Clear the canvas AND the depth buffer.
  64.     gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  66.     // Turn on culling. By default backfacing triangles
  67.     // will be culled.
  68.     gl.enable(gl.CULL_FACE);
  70.     // Enable the depth buffer
  71.     gl.enable(gl.DEPTH_TEST);
  73.     // Tell it to use our program (pair of shaders)
  74.     gl.useProgram(program);
  76.     // Turn on the position attribute
  77.     gl.enableVertexAttribArray(positionLocation);
  79.     // Bind the position buffer.
  80.     gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
  82.     // Tell the position attribute how to get data out of positionBuffer (ARRAY_BUFFER)
  83.     var size = 3;          // 3 components per iteration
  84.     var type = gl.FLOAT;   // the data is 32bit floats
  85.     var normalize = false; // don't normalize the data
  86.     var stride = 0;        // 0 = move forward size * sizeof(type) each iteration to get the next position
  87.     var offset = 0;        // start at the beginning of the buffer
  88.     gl.vertexAttribPointer(
  89.         positionLocation, size, type, normalize, stride, offset);
  91.     // Turn on the color attribute
  92.     gl.enableVertexAttribArray(colorLocation);
  94.     // Bind the color buffer.
  95.     gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
  97.     // Tell the attribute how to get data out of colorBuffer (ARRAY_BUFFER)
  98.     var size = 3;                 // 3 components per iteration
  99.     var type = gl.UNSIGNED_BYTE;  // the data is 8bit unsigned values
  100.     var normalize = true;         // normalize the data (convert from 0-255 to 0-1)
  101.     var stride = 0;               // 0 = move forward size * sizeof(type) each iteration to get the next position
  102.     var offset = 0;               // start at the beginning of the buffer
  103.     gl.vertexAttribPointer(
  104.         colorLocation, size, type, normalize, stride, offset);
  107.     var numFs = 5;
  108.     var radius = 200;
  110.     // Compute the projection matrix
  111.     var aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
  112.     var zNear = 1;
  113.     var zFar = 2000;
  114.     var projectionMatrix = m4.perspective(fieldOfViewRadians, aspect, zNear, zFar);
  116.     // Compute the position of the first F
  117.     var fPosition = [radius, 0, 0];
  119.     // Use matrix math to compute a position on a circle where
  120.     // the camera is
  121.     var cameraMatrix = m4.yRotation(cameraAngleRadians);
  122.     cameraMatrix = m4.translate(cameraMatrix, 0, 0, radius * 1.5);
  124.     // Get the camera's position from the matrix we computed
  125.     var cameraPosition = [
  126.       cameraMatrix[12],
  127.       cameraMatrix[13],
  128.       cameraMatrix[14],
  129.     ];
  131.     var up = [0, 1, 0];
  133.     // Compute the camera's matrix using look at.
  134.     var cameraMatrix = m4.lookAt(cameraPosition, fPosition, up);
  136.     // Make a view matrix from the camera matrix
  137.     var viewMatrix = m4.inverse(cameraMatrix);
  139.     // Compute a view projection matrix
  140.     var viewProjectionMatrix = m4.multiply(projectionMatrix, viewMatrix);
  142.     for (var ii = 0; ii < numFs; ++ii) {
  143.       var angle = ii * Math.PI * 2 / numFs;
  144.       var x = Math.cos(angle) * radius;
  145.       var y = Math.sin(angle) * radius;
  147.       // starting with the view projection matrix
  148.       // compute a matrix for the F
  149.       var matrix = m4.translate(viewProjectionMatrix, x, 0, y);
  151.       // Set the matrix.
  152.       gl.uniformMatrix4fv(matrixLocation, false, matrix);
  154.       // Draw the geometry.
  155.       var primitiveType = gl.TRIANGLES;
  156.       var offset = 0;
  157.       var count = 16 * 6;
  158.       gl.drawArrays(primitiveType, offset, count);
  159.     }
  160.   }
  161. }
  163. function subtractVectors(a, b) {
  164.   return [a[0] - b[0], a[1] - b[1], a[2] - b[2]];
  165. }
  167. function normalize(v) {
  168.   var length = Math.sqrt(v[0] * v[0] + v[1] * v[1] + v[2] * v[2]);
  169.   // make sure we don't divide by 0.
  170.   if (length > 0.00001) {
  171.     return [v[0] / length, v[1] / length, v[2] / length];
  172.   } else {
  173.     return [0, 0, 0];
  174.   }
  175. }
  177. function cross(a, b) {
  178.   return [a[1] * b[2] - a[2] * b[1],
  179.           a[2] * b[0] - a[0] * b[2],
  180.           a[0] * b[1] - a[1] * b[0]];
  181. }
  185. var m4 = {
  187.   lookAt: function(cameraPosition, target, up) {
  188.     var zAxis = normalize(
  189.         subtractVectors(cameraPosition, target));
  190.     var xAxis = normalize(cross(up, zAxis));
  191.     var yAxis = normalize(cross(zAxis, xAxis));
  193.     return [
  194.        xAxis[0], xAxis[1], xAxis[2], 0,
  195.        yAxis[0], yAxis[1], yAxis[2], 0,
  196.        zAxis[0], zAxis[1], zAxis[2], 0,
  197.        cameraPosition[0],
  198.        cameraPosition[1],
  199.        cameraPosition[2],
  200.        1,
  201.     ];
  202.   },
  204.   perspective: function(fieldOfViewInRadians, aspect, near, far) {
  205.     var f = Math.tan(Math.PI * 0.5 - 0.5 * fieldOfViewInRadians);
  206.     var rangeInv = 1.0 / (near - far);
  208.     return [
  209.       f / aspect, 0, 0, 0,
  210.       0, f, 0, 0,
  211.       0, 0, (near + far) * rangeInv, -1,
  212.       0, 0, near * far * rangeInv * 2, 0
  213.     ];
  214.   },
  216.   projection: function(width, height, depth) {
  217.     // Note: This matrix flips the Y axis so 0 is at the top.
  218.     return [
  219.        2 / width, 0, 0, 0,
  220.        0, -2 / height, 0, 0,
  221.        0, 0, 2 / depth, 0,
  222.       -1, 1, 0, 1,
  223.     ];
  224.   },
  226.   multiply: function(a, b) {
  227.     var a00 = a[0 * 4 + 0];
  228.     var a01 = a[0 * 4 + 1];
  229.     var a02 = a[0 * 4 + 2];
  230.     var a03 = a[0 * 4 + 3];
  231.     var a10 = a[1 * 4 + 0];
  232.     var a11 = a[1 * 4 + 1];
  233.     var a12 = a[1 * 4 + 2];
  234.     var a13 = a[1 * 4 + 3];
  235.     var a20 = a[2 * 4 + 0];
  236.     var a21 = a[2 * 4 + 1];
  237.     var a22 = a[2 * 4 + 2];
  238.     var a23 = a[2 * 4 + 3];
  239.     var a30 = a[3 * 4 + 0];
  240.     var a31 = a[3 * 4 + 1];
  241.     var a32 = a[3 * 4 + 2];
  242.     var a33 = a[3 * 4 + 3];
  243.     var b00 = b[0 * 4 + 0];
  244.     var b01 = b[0 * 4 + 1];
  245.     var b02 = b[0 * 4 + 2];
  246.     var b03 = b[0 * 4 + 3];
  247.     var b10 = b[1 * 4 + 0];
  248.     var b11 = b[1 * 4 + 1];
  249.     var b12 = b[1 * 4 + 2];
  250.     var b13 = b[1 * 4 + 3];
  251.     var b20 = b[2 * 4 + 0];
  252.     var b21 = b[2 * 4 + 1];
  253.     var b22 = b[2 * 4 + 2];
  254.     var b23 = b[2 * 4 + 3];
  255.     var b30 = b[3 * 4 + 0];
  256.     var b31 = b[3 * 4 + 1];
  257.     var b32 = b[3 * 4 + 2];
  258.     var b33 = b[3 * 4 + 3];
  259.     return [
  260.       b00 * a00 + b01 * a10 + b02 * a20 + b03 * a30,
  261.       b00 * a01 + b01 * a11 + b02 * a21 + b03 * a31,
  262.       b00 * a02 + b01 * a12 + b02 * a22 + b03 * a32,
  263.       b00 * a03 + b01 * a13 + b02 * a23 + b03 * a33,
  264.       b10 * a00 + b11 * a10 + b12 * a20 + b13 * a30,
  265.       b10 * a01 + b11 * a11 + b12 * a21 + b13 * a31,
  266.       b10 * a02 + b11 * a12 + b12 * a22 + b13 * a32,
  267.       b10 * a03 + b11 * a13 + b12 * a23 + b13 * a33,
  268.       b20 * a00 + b21 * a10 + b22 * a20 + b23 * a30,
  269.       b20 * a01 + b21 * a11 + b22 * a21 + b23 * a31,
  270.       b20 * a02 + b21 * a12 + b22 * a22 + b23 * a32,
  271.       b20 * a03 + b21 * a13 + b22 * a23 + b23 * a33,
  272.       b30 * a00 + b31 * a10 + b32 * a20 + b33 * a30,
  273.       b30 * a01 + b31 * a11 + b32 * a21 + b33 * a31,
  274.       b30 * a02 + b31 * a12 + b32 * a22 + b33 * a32,
  275.       b30 * a03 + b31 * a13 + b32 * a23 + b33 * a33,
  276.     ];
  277.   },
  279.   translation: function(tx, ty, tz) {
  280.     return [
  281.        1,  0,  0,  0,
  282.        0,  1,  0,  0,
  283.        0,  0,  1,  0,
  284.        tx, ty, tz, 1,
  285.     ];
  286.   },
  288.   xRotation: function(angleInRadians) {
  289.     var c = Math.cos(angleInRadians);
  290.     var s = Math.sin(angleInRadians);
  292.     return [
  293.       1, 0, 0, 0,
  294.       0, c, s, 0,
  295.       0, -s, c, 0,
  296.       0, 0, 0, 1,
  297.     ];
  298.   },
  300.   yRotation: function(angleInRadians) {
  301.     var c = Math.cos(angleInRadians);
  302.     var s = Math.sin(angleInRadians);
  304.     return [
  305.       c, 0, -s, 0,
  306.       0, 1, 0, 0,
  307.       s, 0, c, 0,
  308.       0, 0, 0, 1,
  309.     ];
  310.   },
  312.   zRotation: function(angleInRadians) {
  313.     var c = Math.cos(angleInRadians);
  314.     var s = Math.sin(angleInRadians);
  316.     return [
  317.        c, s, 0, 0,
  318.       -s, c, 0, 0,
  319.        0, 0, 1, 0,
  320.        0, 0, 0, 1,
  321.     ];
  322.   },
  324.   scaling: function(sx, sy, sz) {
  325.     return [
  326.       sx, 0,  0,  0,
  327.       0, sy,  0,  0,
  328.       0,  0, sz,  0,
  329.       0,  0,  0,  1,
  330.     ];
  331.   },
  333.   translate: function(m, tx, ty, tz) {
  334.     return m4.multiply(m, m4.translation(tx, ty, tz));
  335.   },
  337.   xRotate: function(m, angleInRadians) {
  338.     return m4.multiply(m, m4.xRotation(angleInRadians));
  339.   },
  341.   yRotate: function(m, angleInRadians) {
  342.     return m4.multiply(m, m4.yRotation(angleInRadians));
  343.   },
  345.   zRotate: function(m, angleInRadians) {
  346.     return m4.multiply(m, m4.zRotation(angleInRadians));
  347.   },
  349.   scale: function(m, sx, sy, sz) {
  350.     return m4.multiply(m, m4.scaling(sx, sy, sz));
  351.   },
  353.   inverse: function(m) {
  354.     var m00 = m[0 * 4 + 0];
  355.     var m01 = m[0 * 4 + 1];
  356.     var m02 = m[0 * 4 + 2];
  357.     var m03 = m[0 * 4 + 3];
  358.     var m10 = m[1 * 4 + 0];
  359.     var m11 = m[1 * 4 + 1];
  360.     var m12 = m[1 * 4 + 2];
  361.     var m13 = m[1 * 4 + 3];
  362.     var m20 = m[2 * 4 + 0];
  363.     var m21 = m[2 * 4 + 1];
  364.     var m22 = m[2 * 4 + 2];
  365.     var m23 = m[2 * 4 + 3];
  366.     var m30 = m[3 * 4 + 0];
  367.     var m31 = m[3 * 4 + 1];
  368.     var m32 = m[3 * 4 + 2];
  369.     var m33 = m[3 * 4 + 3];
  370.     var tmp_0  = m22 * m33;
  371.     var tmp_1  = m32 * m23;
  372.     var tmp_2  = m12 * m33;
  373.     var tmp_3  = m32 * m13;
  374.     var tmp_4  = m12 * m23;
  375.     var tmp_5  = m22 * m13;
  376.     var tmp_6  = m02 * m33;
  377.     var tmp_7  = m32 * m03;
  378.     var tmp_8  = m02 * m23;
  379.     var tmp_9  = m22 * m03;
  380.     var tmp_10 = m02 * m13;
  381.     var tmp_11 = m12 * m03;
  382.     var tmp_12 = m20 * m31;
  383.     var tmp_13 = m30 * m21;
  384.     var tmp_14 = m10 * m31;
  385.     var tmp_15 = m30 * m11;
  386.     var tmp_16 = m10 * m21;
  387.     var tmp_17 = m20 * m11;
  388.     var tmp_18 = m00 * m31;
  389.     var tmp_19 = m30 * m01;
  390.     var tmp_20 = m00 * m21;
  391.     var tmp_21 = m20 * m01;
  392.     var tmp_22 = m00 * m11;
  393.     var tmp_23 = m10 * m01;
  395.     var t0 = (tmp_0 * m11 + tmp_3 * m21 + tmp_4 * m31) -
  396.         (tmp_1 * m11 + tmp_2 * m21 + tmp_5 * m31);
  397.     var t1 = (tmp_1 * m01 + tmp_6 * m21 + tmp_9 * m31) -
  398.         (tmp_0 * m01 + tmp_7 * m21 + tmp_8 * m31);
  399.     var t2 = (tmp_2 * m01 + tmp_7 * m11 + tmp_10 * m31) -
  400.         (tmp_3 * m01 + tmp_6 * m11 + tmp_11 * m31);
  401.     var t3 = (tmp_5 * m01 + tmp_8 * m11 + tmp_11 * m21) -
  402.         (tmp_4 * m01 + tmp_9 * m11 + tmp_10 * m21);
  404.     var d = 1.0 / (m00 * t0 + m10 * t1 + m20 * t2 + m30 * t3);
  406.     return [
  407.       d * t0,
  408.       d * t1,
  409.       d * t2,
  410.       d * t3,
  411.       d * ((tmp_1 * m10 + tmp_2 * m20 + tmp_5 * m30) -
  412.             (tmp_0 * m10 + tmp_3 * m20 + tmp_4 * m30)),
  413.       d * ((tmp_0 * m00 + tmp_7 * m20 + tmp_8 * m30) -
  414.             (tmp_1 * m00 + tmp_6 * m20 + tmp_9 * m30)),
  415.       d * ((tmp_3 * m00 + tmp_6 * m10 + tmp_11 * m30) -
  416.             (tmp_2 * m00 + tmp_7 * m10 + tmp_10 * m30)),
  417.       d * ((tmp_4 * m00 + tmp_9 * m10 + tmp_10 * m20) -
  418.             (tmp_5 * m00 + tmp_8 * m10 + tmp_11 * m20)),
  419.       d * ((tmp_12 * m13 + tmp_15 * m23 + tmp_16 * m33) -
  420.             (tmp_13 * m13 + tmp_14 * m23 + tmp_17 * m33)),
  421.       d * ((tmp_13 * m03 + tmp_18 * m23 + tmp_21 * m33) -
  422.             (tmp_12 * m03 + tmp_19 * m23 + tmp_20 * m33)),
  423.       d * ((tmp_14 * m03 + tmp_19 * m13 + tmp_22 * m33) -
  424.             (tmp_15 * m03 + tmp_18 * m13 + tmp_23 * m33)),
  425.       d * ((tmp_17 * m03 + tmp_20 * m13 + tmp_23 * m23) -
  426.             (tmp_16 * m03 + tmp_21 * m13 + tmp_22 * m23)),
  427.       d * ((tmp_14 * m22 + tmp_17 * m32 + tmp_13 * m12) -
  428.             (tmp_16 * m32 + tmp_12 * m12 + tmp_15 * m22)),
  429.       d * ((tmp_20 * m32 + tmp_12 * m02 + tmp_19 * m22) -
  430.             (tmp_18 * m22 + tmp_21 * m32 + tmp_13 * m02)),
  431.       d * ((tmp_18 * m12 + tmp_23 * m32 + tmp_15 * m02) -
  432.             (tmp_22 * m32 + tmp_14 * m02 + tmp_19 * m12)),
  433.       d * ((tmp_22 * m22 + tmp_16 * m02 + tmp_21 * m12) -
  434.             (tmp_20 * m12 + tmp_23 * m22 + tmp_17 * m02))
  435.     ];
  436.   },
  438.   vectorMultiply: function(v, m) {
  439.     var dst = [];
  440.     for (var i = 0; i < 4; ++i) {
  441.       dst[i] = 0.0;
  442.       for (var j = 0; j < 4; ++j) {
  443.         dst[i] += v[j] * m[j * 4 + i];
  444.       }
  445.     }
  446.     return dst;
  447.   },
  449. };
  451. // Fill the buffer with the values that define a letter 'F'.
  452. function setGeometry(gl) {
  453.   var positions = new Float32Array([
  454.           // left column front
  455.           0,   0,  0,
  456.           0, 150,  0,
  457.           30,   0,  0,
  458.           0, 150,  0,
  459.           30, 150,  0,
  460.           30,   0,  0,
  462.           // top rung front
  463.           30,   0,  0,
  464.           30,  30,  0,
  465.           100,   0,  0,
  466.           30,  30,  0,
  467.           100,  30,  0,
  468.           100,   0,  0,
  470.           // middle rung front
  471.           30,  60,  0,
  472.           30,  90,  0,
  473.           67,  60,  0,
  474.           30,  90,  0,
  475.           67,  90,  0,
  476.           67,  60,  0,
  478.           // left column back
  479.             0,   0,  30,
  480.            30,   0,  30,
  481.             0, 150,  30,
  482.             0, 150,  30,
  483.            30,   0,  30,
  484.            30, 150,  30,
  486.           // top rung back
  487.            30,   0,  30,
  488.           100,   0,  30,
  489.            30,  30,  30,
  490.            30,  30,  30,
  491.           100,   0,  30,
  492.           100,  30,  30,
  494.           // middle rung back
  495.            30,  60,  30,
  496.            67,  60,  30,
  497.            30,  90,  30,
  498.            30,  90,  30,
  499.            67,  60,  30,
  500.            67,  90,  30,
  502.           // top
  503.             0,   0,   0,
  504.           100,   0,   0,
  505.           100,   0,  30,
  506.             0,   0,   0,
  507.           100,   0,  30,
  508.             0,   0,  30,
  510.           // top rung right
  511.           100,   0,   0,
  512.           100,  30,   0,
  513.           100,  30,  30,
  514.           100,   0,   0,
  515.           100,  30,  30,
  516.           100,   0,  30,
  518.           // under top rung
  519.           30,   30,   0,
  520.           30,   30,  30,
  521.           100,  30,  30,
  522.           30,   30,   0,
  523.           100,  30,  30,
  524.           100,  30,   0,
  526.           // between top rung and middle
  527.           30,   30,   0,
  528.           30,   60,  30,
  529.           30,   30,  30,
  530.           30,   30,   0,
  531.           30,   60,   0,
  532.           30,   60,  30,
  534.           // top of middle rung
  535.           30,   60,   0,
  536.           67,   60,  30,
  537.           30,   60,  30,
  538.           30,   60,   0,
  539.           67,   60,   0,
  540.           67,   60,  30,
  542.           // right of middle rung
  543.           67,   60,   0,
  544.           67,   90,  30,
  545.           67,   60,  30,
  546.           67,   60,   0,
  547.           67,   90,   0,
  548.           67,   90,  30,
  550.           // bottom of middle rung.
  551.           30,   90,   0,
  552.           30,   90,  30,
  553.           67,   90,  30,
  554.           30,   90,   0,
  555.           67,   90,  30,
  556.           67,   90,   0,
  558.           // right of bottom
  559.           30,   90,   0,
  560.           30,  150,  30,
  561.           30,   90,  30,
  562.           30,   90,   0,
  563.           30,  150,   0,
  564.           30,  150,  30,
  566.           // bottom
  567.           0,   150,   0,
  568.           0,   150,  30,
  569.           30,  150,  30,
  570.           0,   150,   0,
  571.           30,  150,  30,
  572.           30,  150,   0,
  574.           // left side
  575.           0,   0,   0,
  576.           0,   0,  30,
  577.           0, 150,  30,
  578.           0,   0,   0,
  579.           0, 150,  30,
  580.           0, 150,   0]);
  582.   // Center the F around the origin and Flip it around. We do this because
  583.   // we're in 3D now with and +Y is up where as before when we started with 2D
  584.   // we had +Y as down.
  586.   // We could do by changing all the values above but I'm lazy.
  587.   // We could also do it with a matrix at draw time but you should
  588.   // never do stuff at draw time if you can do it at init time.
  589.   var matrix = m4.xRotation(Math.PI);
  590.   matrix = m4.translate(matrix, -50, -75, -15);
  592.   for (var ii = 0; ii < positions.length; ii += 3) {
  593.     var vector = m4.vectorMultiply([positions[ii + 0], positions[ii + 1], positions[ii + 2], 1], matrix);
  594.     positions[ii + 0] = vector[0];
  595.     positions[ii + 1] = vector[1];
  596.     positions[ii + 2] = vector[2];
  597.   }
  599.   gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);
  600. }
  602. // Fill the buffer with colors for the 'F'.
  603. function setColors(gl) {
  604.   gl.bufferData(
  605.       gl.ARRAY_BUFFER,
  606.       new Uint8Array([
  607.           // left column front
  608.         200,  70, 120,
  609.         200,  70, 120,
  610.         200,  70, 120,
  611.         200,  70, 120,
  612.         200,  70, 120,
  613.         200,  70, 120,
  615.           // top rung front
  616.         200,  70, 120,
  617.         200,  70, 120,
  618.         200,  70, 120,
  619.         200,  70, 120,
  620.         200,  70, 120,
  621.         200,  70, 120,
  623.           // middle rung front
  624.         200,  70, 120,
  625.         200,  70, 120,
  626.         200,  70, 120,
  627.         200,  70, 120,
  628.         200,  70, 120,
  629.         200,  70, 120,
  631.           // left column back
  632.         80, 70, 200,
  633.         80, 70, 200,
  634.         80, 70, 200,
  635.         80, 70, 200,
  636.         80, 70, 200,
  637.         80, 70, 200,
  639.           // top rung back
  640.         80, 70, 200,
  641.         80, 70, 200,
  642.         80, 70, 200,
  643.         80, 70, 200,
  644.         80, 70, 200,
  645.         80, 70, 200,
  647.           // middle rung back
  648.         80, 70, 200,
  649.         80, 70, 200,
  650.         80, 70, 200,
  651.         80, 70, 200,
  652.         80, 70, 200,
  653.         80, 70, 200,
  655.           // top
  656.         70, 200, 210,
  657.         70, 200, 210,
  658.         70, 200, 210,
  659.         70, 200, 210,
  660.         70, 200, 210,
  661.         70, 200, 210,
  663.           // top rung right
  664.         200, 200, 70,
  665.         200, 200, 70,
  666.         200, 200, 70,
  667.         200, 200, 70,
  668.         200, 200, 70,
  669.         200, 200, 70,
  671.           // under top rung
  672.         210, 100, 70,
  673.         210, 100, 70,
  674.         210, 100, 70,
  675.         210, 100, 70,
  676.         210, 100, 70,
  677.         210, 100, 70,
  679.           // between top rung and middle
  680.         210, 160, 70,
  681.         210, 160, 70,
  682.         210, 160, 70,
  683.         210, 160, 70,
  684.         210, 160, 70,
  685.         210, 160, 70,
  687.           // top of middle rung
  688.         70, 180, 210,
  689.         70, 180, 210,
  690.         70, 180, 210,
  691.         70, 180, 210,
  692.         70, 180, 210,
  693.         70, 180, 210,
  695.           // right of middle rung
  696.         100, 70, 210,
  697.         100, 70, 210,
  698.         100, 70, 210,
  699.         100, 70, 210,
  700.         100, 70, 210,
  701.         100, 70, 210,
  703.           // bottom of middle rung.
  704.         76, 210, 100,
  705.         76, 210, 100,
  706.         76, 210, 100,
  707.         76, 210, 100,
  708.         76, 210, 100,
  709.         76, 210, 100,
  711.           // right of bottom
  712.         140, 210, 80,
  713.         140, 210, 80,
  714.         140, 210, 80,
  715.         140, 210, 80,
  716.         140, 210, 80,
  717.         140, 210, 80,
  719.           // bottom
  720.         90, 130, 110,
  721.         90, 130, 110,
  722.         90, 130, 110,
  723.         90, 130, 110,
  724.         90, 130, 110,
  725.         90, 130, 110,
  727.           // left side
  728.         160, 160, 220,
  729.         160, 160, 220,
  730.         160, 160, 220,
  731.         160, 160, 220,
  732.         160, 160, 220,
  733.         160, 160, 220]),
  734.       gl.STATIC_DRAW);
  735. }
  737. main();
  1. <canvas id="canvas"></canvas>
  2. <div id="uiContainer">
  3.   <div id="ui">
  4.     <div id="cameraAngle"></div>
  5.   </div>
  6. </div>
  7. <!-- vertex shader -->
  8. <script  id="vertex-shader-3d" type="x-shader/x-vertex">
  9. attribute vec4 a_position;
  10. attribute vec4 a_color;
  12. uniform mat4 u_matrix;
  14. varying vec4 v_color;
  16. void main() {
  17.   // Multiply the position by the matrix.
  18.   gl_Position = u_matrix * a_position;
  20.   // Pass the color to the fragment shader.
  21.   v_color = a_color;
  22. }
  23. </script>
  24. <!-- fragment shader -->
  25. <script  id="fragment-shader-3d" type="x-shader/x-fragment">
  26. precision mediump float;
  28. // Passed in from the vertex shader.
  29. varying vec4 v_color;
  31. void main() {
  32.    gl_FragColor = v_color;
  33. }
  34. </script>
  35. <script src="https://webglfundamentals.org/webgl/resources/webgl-utils.js"></script>
  36. <script src="https://webglfundamentals.org/webgl/resources/webgl-lessons-ui.js"></script>

你也可以对其他东西使用“lookAt”方法而不只是相机。通常是让角色视线跟着某人， 将炮塔指向目标，让物体沿着路径移动。你可以算出物体当前在路径上的位置和不久后的位置， 然后将这两个值放入 lookAt 方法，可以让物体沿着路径移动并且朝着路径的方向。