WebGL 3D 摄像机.pdfVIP

WebGL 3D 摄像机 WebGL 3D 摄像机 在过去的章节⾥我们将 F 移动到截锥的前⾯，因为 makePerspective 函数从原点 （0 ， 0 ，0 ）度量它，并 截锥的对象从 -zNear 到 -zFar 都在它前⾯。 视点前⾯移动的物体似乎没有正确的⽅式去做吗？在现实世界中，你通常会移动你的 相机来给建筑物拍照。 将摄像机移动到对象前 你通常不会将建筑移动到摄像机前。 将对象移动到摄像机前 但在我们最后⼀篇⽂章中，我们提出了⼀个投影，这就需要物体在 Z 轴的原点前⾯。 为了实现它，我们想做的是把摄像机移动到原点，然后把所有的其它物体都移动恰当 的距离，所以它相对于摄像机仍然是在同⼀个地⽅。 将对象移动到视图 我们需要有效地将现实中的物体移动到摄像机的前⾯。能达到这个⽬的的最简单的⽅ 法是使⽤“逆”矩阵。⼀般情况下的逆矩阵的计算是复杂的，但从概念上讲，它是容易 的。逆是你⽤来作为其他数值的对⽴的值。例如，123 的是相反数是 -123 。缩放⽐例 为5的规模矩阵的逆是 1/5 或 0 .2 。在 X 域旋转 30° 的矩阵的逆是⼀个在 X 域旋转 -30° 的矩阵。 直到现在我们已经使⽤了平移，旋转和缩放来影响我们的 F 的位置和⽅向。把所有 的矩阵相乘后，我们有⼀个单⼀的矩阵，表⽰如何将 “F” 以我们希望的⼤⼩和⽅向从 原点移动到相应位置。使⽤摄像机我们可以做相同的事情。⼀旦我们的矩阵告诉我们 如何从原点到我们想要的位置移动和旋转摄像机，我们就可以计算它的逆，它将给我 们⼀个矩阵来告诉我们如何移动和旋转其它⼀切物体的相对数量，这将有效地使摄像 机在点 （0 ，0 ，0 ），并 我们已经将⼀切物体移动到它的前⾯。 让我们做⼀个有⼀圈 F 的三维场景，就像上⾯的图表那样。 下⾯是实现代码。 var numFs = 5; var radius = 200; // Compute the projection matrix var aspect = canvas.clientWidth / canvas.clientHeight; var projection atrix = makePerspective(fieldOfViewRadians, aspect, 1, 2000); // Draw Fs in a circle for (var ii = 0; ii numFs; ++ii) { var angle = ii * ath.PI * 2 / numFs; var x = ath.cos(angle) * radius; var z = ath.sin(angle) * radius; var translation atrix = makeTranslation(x, 0, z); // ultiply the matrices. var matrix = translation atrix; matrix = matrix ultiply(matrix, projection atrix); // Set the matrix . gl.uniform atrix4fv(matrixLocation, false, matrix); // Draw the geometry . gl.drawArrays(gl.TRIANGLES, 0, 16 * 6); } 就在我们计算出我们的投影矩阵之后，我们就可以计算出⼀个就像上⾯的图表中显⽰ 的那样围绕 ‘F ’ 旋转的摄像机。 // Compute the cameras matrix var camera atrix = makeTranslation(0, 0, radius * 1.5); camera atrix = matrix ultiply( camera atrix, makeYRotation(cameraAngleRadians)); 然后，我们根据相机矩阵计算“视图矩阵” 。“视图矩阵”是将⼀切物体移动到摄像机相 反的位置，这有效地使摄像机相对于⼀切物体就像在原点 （0 ,0 ,0 ）。 // ake a view matrix from the camera matrix . var view atrix = makeInverse(camera atrix); 最后我们