WebGL摄像机详解之一：模型、视图和投影矩阵变换的含义

http://www.jiazhengblog.com/blog/2015/03/05/480/

在WebGL中实际上是没有摄像机的概念的，相关的功能实现需要你操作各种各样的矩阵来完成。物体最终显示到屏幕上会涉及若干的坐标系和矩阵操作。本文就先来说明这些坐标和矩阵操作的含义。我们在之后的文章中再通过具体的代码予以实现。

本文将会讲述如下内容：

• WebGL中的不同坐标系和矩阵
• WebGL中从物体坐标到屏幕坐标之间的变换过程

模型变换（Model Transform）

首先，建立一个模型的时候，每个模型有自己的坐标以及对应的坐标原点。比如一个立方体，其坐标原点通常位于立方体的中心（当然也可以位于其他地方），整个立方体上的顶点都相对于这个中心点而设置。当我们想移动这个立方体的时候，就需要一个矩阵来进行变换，这就是模型矩阵（model matrix）。当我们用模型矩阵乘上原有坐标点矩阵之后，所得到的新的坐标点便是经过移动之后的，相对于一个虚拟的世界坐标系的坐标点。参考下图：

物体坐标对于每个物体来说都是独立的、独有的。比如有两个立方体，两个立方体有各自的物体坐标。但是它们只有一个共享的世界坐标，有了世界坐标，物体和物体才有了相对位置的关系。

视图变换（View Transform）

下面的变换叫做视图变换，这是将之前的坐标系变换到一个新的，以视图为基准原点的坐标系。你可以把这个视图坐标系理解成我们的眼睛或者一部照相机，随着眼睛或照相机在物体不同位置的移动，这个坐标系都是在实时变化的。这个变换过程使用的矩阵称为视图矩阵（view matrix）。经过变换之后的坐标点是相对于视图坐标系的原点的。如下图：

投影变换（Projection Transform）

下面一个变换称作投影变换。这个过程会决定到底渲染多少内容以及如何将3D坐标显示在2D屏幕上。其中有一个概念称作视锥体（frustum），它包含六个平面（近平面、远平面、上平面、下平面、右平面和左平面），如下图所示：

这六个平面是通过投影矩阵（projection matrix）决定的。经过变换之后，位于这个视锥体以外的顶点都会被剪裁掉，所得的坐标结果成为裁剪坐标（clipping coordinates）。视锥体的形状决定了3D到2D的投影类型，如果近平面和远平面尺寸一致，那么物体上的顶点不论远近都以统一的方式投影在屏幕上，这就是正交投影（orthographic projection）。否则就是透视投影（perspective projection）。简单来说，正交投影没有近大远小的效果，而透视投影则有。

到现在为止，我们始终都在操作齐次坐标，所以裁剪坐标也是个四元组：x、y、z和w。裁剪是通过将x、y、z的值与w的值作比较进行的，如果某个顶点的x、y、z其中任何一个值大于 +w 或者小于 -w，则该顶点就会被裁掉。

透视除法（Perspective division）

一旦决定了有多少顶点会被渲染之后，视锥体会映射到近平面上以便展示2D图像。在屏幕上显示的内容就是近平面上的内容。WebGL提供一个与硬件无关的坐标系统，用来描述映射到近平面上的坐标，这被称作是规范化设备坐标（Normalized Device Coordinates），简称NDC。

规范化设备坐标是通过将裁剪坐标除以w来获得的。所以这一步操作被叫做透视除法。经过除法后，4元组的坐标转变为3元组的坐标，因此NDC的顶点仅包含x、y和z三个信息。其中x、y表示规范化2D平面上的坐标，z则表示深度信息，也就是远近关系。现在WebGL就可以根据x和y来显示顶点，并根据z信息来确定覆盖、遮挡关系。

透视除法将视锥体变换到一个立方体空间，立方体空间坐标范围从 [-1, -1, -1] 到 [1, 1, 1]。另外z轴方向也进行了翻转。如下图所示：

这就是为什么默认的WebGL程序在屏幕上显示的时候，x和y的坐标范围都是-1到1，不论canvas元素尺寸和比例是什么样的。

视口变换（Viewport Transform）

最后，NDC会映射到视口坐标（viewport coordinates）。视口坐标就是最终显示到屏幕元素中的坐标，在HTML5中使用的是canvas元素。如下图：

由于这个坐标变换只涉及x和y，因此没有矩阵参与，它是通过WebGL的viewport方法来完成的。具体计算公式如下：

其中没有下脚标的x、y表示屏幕坐标的起始点。在WebGL中，x和y都取0。