计算机图形学笔记2-Viewing 观测_视口转换 英文

观测主要解决的问题是如何把物体的三维“模型”变成我们在屏幕所看到的二维“图片”，我们在计算机看到实体模型可以分成这样几步：

• 相机变换(camera transformation)或眼变换(eye transformation)：想象把相机放在任意一个位置来观测物体，我们首先就要把物体的世界坐标转换为相机坐标，这一步称为相机变换或眼变换。
• 投影变换(projection transformation)：相机把物体拍成照片本质是从三维的相机坐标转化为二维的平面坐标，这一步称为投影变换。投影可以分为正射投影和透视投影。
• 视口变换(viewport transformation)或窗口变换(windowing transformation)：相机拍成的图片最后是要显示在屏幕上，我们需要把二维的图片坐标再转换为电脑屏幕的像素坐标，这一步称为视口变换或窗口变换。

下面这个照相的类比非常地生动形象。

2.1 Viewport Transformation-视口变换

一般来说，我们规定相机沿着$-\mathbf{z}$方向，在观测过程中为了简化会使用canonical view volume(CCV)：它是一个正方体，$x$,$y$,$z$坐标都位于$-1$到$1$之间，也即$(x,y,z)\in [-1,1{]}^3$，我们将$x=-1$投影到电脑屏幕的左侧，将$x=+1$投影到屏幕的右侧，将$y=-1$投影到屏幕的底部，将$y=+1$投影到屏幕的顶部。

如果我们定义屏幕每个像素的长和宽为1，最小的像素中心坐标是$(0,0)$，则图像的中心到其边界为$0.5$，如果屏幕上的像素总长度为$n_x$，总宽度为$n_y$，那么我们可以将canonical view volume(CCV)的$\mathbf{xoy}$平面的方形$[-1,1{]}^2$映射为长方形$[-0.5,n_x-0.5]\times [-0.5,n_y-0.5]$。

注意我们现在假设所有的线都在CCV正方体里，后面这个假设将在讲裁剪的时候放松这个条件。

对于视口变换，我们需要想把CCV正方体的$\mathbf{xoy}$平面进行放缩然后将原点平移到屏幕的左下角（CCV的原点在$\mathbf{xoy}$正方形的正中心），其可以写作一个二维的变换【这里相当于计算上面的线性映射：$-1\to -0.5,1\to n_x-0.5(n_y-0.5)$】：

[ x screen  y screen  1 ] = [ n x 2 0 n x − 1 2 0 n y 2 n y − 1 2 0 0 1 ] [ x canonical  y canonical  1 ]

$$\begin{bmatrix} x_{\text {screen }} \\ y_{\text {screen }} \\ 1 \end{bmatrix}$$ = $$\begin{bmatrix} \frac{n_{x}}{2} & 0 & \frac{n_{x}-1}{2} \\ 0 & \frac{n_{y}}{2} & \frac{n_{y}-1}{2} \\ 0 & 0 & 1 \end{bmatrix}$$ $$\begin{bmatrix} x_{\text {canonical }} \\ y_{\text {canonical }} \\ 1 \end{bmatrix}$$ ​xscreen ​yscreen ​1​ ​= ​2nx​​00​02ny​​0​2nx​−1​2ny​−1​1​ ​ ​xcanonical ​ycanonical ​1​ ​

这里忽略了$\mathbf{z}$轴的坐标，因为投影最终和$z$坐标无关，这里我们可以扩充矩阵（尽管在这里没有用）：

M v p = [ n x 2 0 0 n x − 1 2 0 n y 2 0 n y − 1 2 0 0 1 0 0 0 0 1 ] \mathbf{M}_{\mathrm{vp}}=

$$\begin{bmatrix} \frac{n_{x}}{2} & 0 & 0 & \frac{n_{x}-1}{2} \\ 0 & \frac{n_{y}}{2} & 0 & \frac{n_{y}-1}{2} \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix}$$ Mvp​= ​2nx​​000​02ny​​00​0010​2nx​−1​2ny​−1​01​ ​

2.2 Orthographic Projection Transformation-正射变换

我们通常想把在渲染某个空间区域的几何元素而不是CCV，我们要调整我们的坐标轴的方向来实现正射变换，让坐标轴的$-\mathbf{z}$轴对着物体，让$\mathbf{y}$轴朝上，$\mathbf{x}$轴按照右手定则定义。我们看到的view volume是一个$[l,r]\times [b,t]\times [f,n]$的box。

关于$l,r,b,y,f,n$的物理含义可以看下面的表格：

{% tabs active:1 align:center %}

{% endtabs %}

我们同样可以写出变换矩阵把这个box映射为CCV（参考原书公式的6.7，英文原版132页）,变换的好处是简化数字在$-1$到$1$之间，方便后续计算：

M orth  = [ 2 r − l 0 0 0 0 2 t − b 0 0 0 0 2 n − f 0 0 0 0 1 ] [ 1 0 0 − r + l 2 0 1 0 − t + b 2 0 0 1 − n + f 2 0 0 0 1 ] = [ 2 r − l 0 0 − r + l r − l 0 2 t − b 0 − t + b t − b 0 0 2 n − f − n + f n − f 0 0 0 1 ]

$$\begin{aligned}\mathbf{M}_{\text {orth }}&=\left[\begin{array}{cccc} \frac{2}{r-l} & 0 & 0 & 0 \\ 0 & \frac{2}{t-b} & 0 & 0 \\ 0 & 0 & \frac{2}{n-f} & 0 \\ 0 & 0 & 0 & 1 \end{array}\right]\left[\begin{array}{cccc} 1 & 0 & 0 & -\frac{r+l}{2} \\ 0 & 1 & 0 & -\frac{t+b}{2} \\ 0 & 0 & 1 & -\frac{n+f}{2} \\ 0 & 0 & 0 & 1 \end{array}\right]\\&=\begin{bmatrix} \frac{2}{r-l} & 0 & 0 & -\frac{r+l}{r-l} \\ 0 & \frac{2}{t-b} & 0 & -\frac{t+b}{t-b} \\ 0 & 0 & \frac{2}{n-f} & -\frac{n+f}{n-f} \\ 0 & 0 & 0 & 1 \end{bmatrix}\end{aligned}$$ Morth ​​= ​r−l2​000​0t−b2​00​00n−f2​0​0001​ ​ ​1000​0100​0010​−2r+l​−2t+b​−2n+f​1​ ​= ​r−l2​000​0t−b2​00​00n−f2​0​−r−lr+l​−t−bt+b​−n−fn+f​1​ ​​

现在我们可以转换视角中任意看到的点$(x,y,z)$在像素上看到的位置$(x_{pixel},y_{pixel},z_{canonical})$

[ x pixel  y pixel  z canonical  1 ] = ( M v p M orth  ) [ x y z 1 ] \left[

$$\begin{array}{c} x_{\text {pixel }} \\ y_{\text {pixel }} \\ z_{\text {canonical }} \\ 1 \end{array}$$ \right]=\left(\mathbf{M}_{\mathrm{vp}} \mathbf{M}_{\text {orth }}\right)\left[ $$\begin{array}{c} x \\ y \\ z \\ 1 \end{array}$$ \right] ​xpixel ​ypixel ​zcanonical ​1​ ​=(Mvp​Morth ​) ​xyz1​ ​

CCV坐标变换至屏幕坐标直线算法流程：

$\mathbf{z}$坐标的范围是$[-1,1]$，现在我们还没有用到，这将在z-buffer算法时很有用。

2.3 Camera Transformation-相机变换

当我们需要改变3D视角和观测的方向时，我们需要重新定义观测者的位置和方向（改变相机的放置位置）。可以定义相机坐标系，我们期望的相机的朝向可以由两个向量$\mathbf{g}$和向量$\mathbf{t}$来定义，以及一个点$\mathbf{e}$来表示。

• $\mathbf{e}$：相机位置
• $\mathbf{g}$：观测方向
• $\mathbf{t}$：上视方向

于是我们可以根据上面所说的向量和电定义我们的相机坐标系$\mathbf{uvw}$（世界坐标系是$\mathbf{xyz}$），其中坐标系的原点就是$\mathbf{e}$，$\mathbf{v}$轴和$\mathbf{t}$矢量方向相同，$\mathbf{w}$轴和$-\mathbf{g}$矢量方向相同，$\mathbf{u}$轴根据右手定则确定。

w = − g ∥ g ∥ u = t × w ∥ t × w ∥ v = w × u

$$\begin{aligned} \mathbf{w} & = -\frac{\mathbf{g}}{\|\mathbf{g}\|} \\ \mathbf{u} & = \frac{\mathbf{t} \times \mathbf{w}}{\|\mathbf{t} \times \mathbf{w}\|} \\ \mathbf{v} & = \mathbf{w} \times \mathbf{u} \end{aligned}$$ wuv​=−∥g∥g​=∥t×w∥t×w​=w×u​

接下来我们会把世界坐标系的点坐标转换到相机坐标系中。我们可以把变换矩阵分解为两步，先平移再旋转。

由于将坐标系$\mathbf{uvw}$转换为坐标系$\mathbf{xyz}$的变换矩阵可以看做是

M c a m − 1 = [ u v w e 0 0 0 1 ] \mathbf{M}_{\mathrm{cam}}^{-1}=\left[

$$\begin{array}{cccc} \mathbf{u} & \mathbf{v} & \mathbf{w} & \mathbf{e} \\ 0 & 0 & 0 & 1 \end{array}$$ \right] Mcam−1​=[u0​v0​w0​e1​]

相机坐标系是要将坐标系$\mathbf{xyz}$转换到坐标系$\mathbf{uvw}$，于是这等价于对矩阵求一个逆。

M c a m = [ u v w e 0 0 0 1 ] − 1 = [ x u y u z u 0 x v y v z v 0 x w y w z w 0 0 0 0 1 ] [ 1 0 0 − x e 0 1 0 − y e 0 0 1 − z e 0 0 0 1 ] \mathbf{M}_{\mathrm{cam}}=\left[

$$\begin{array}{cccc} \mathbf{u} & \mathbf{v} & \mathbf{w} & \mathbf{e} \\ 0 & 0 & 0 & 1 \end{array}$$ \right]^{-1}=\left[ $$\begin{array}{cccc} x_{u} & y_{u} & z_{u} & 0 \\ x_{v} & y_{v} & z_{v} & 0 \\ x_{w} & y_{w} & z_{w} & 0 \\ 0 & 0 & 0 & 1 \end{array}$$ \right]\left[ $$\begin{array}{cccc} 1 & 0 & 0 & -x_{e} \\ 0 & 1 & 0 & -y_{e} \\ 0 & 0 & 1 & -z_{e} \\ 0 & 0 & 0 & 1 \end{array}$$ \right] Mcam​=[u0​v0​w0​e1​]−1= ​xu​xv​xw​0​yu​yv​yw​0​zu​zv​zw​0​0001​ ​ ​1000​0100​0010​−xe​−ye​−ze​1​ ​

世界坐标正式投影变换至屏幕坐标画直线算法流程：

2.4 Perspective Projective Transformations-透视变换

投影变换符合我们的视觉直观，主要体现在有近大远小的特性，平行线相交于一点。在实际的计算机图形中用得更多。

如上图所示，我们从视点$\mathbf{e}$沿着$\mathbf{g}$方向看，看到的实际的点的高度为$y$，反映在观察平面上高度为$y_s$，观察平面距离视点为$d$，实际的点距离视点为$z$，根据简单的相似三角形的关系，我们有（这里我们认为$z$是距离，为正数，而不是坐标意义下的负数）：

$$y_s=\frac{d}{z}y$$

虎书里还提到了线性有理变换，这里把变换矩阵简单写一下（感兴趣可以直接看虎书）
[ x ~ y ~ z ~ w ~ ] = [ a 1 b 1 c 1 d 1 a 2 b 2 c 2 d 2 a 3 b 3 c 3 d 3 e f g h ] [ x y z 1 ] \left[

$$\begin{array}{c} \tilde{x} \\ \tilde{y} \\ \tilde{z} \\ \tilde{w} \end{array}$$ \right]=\left[ $$\begin{array}{cccc} a_{1} & b_{1} & c_{1} & d_{1} \\ a_{2} & b_{2} & c_{2} & d_{2} \\ a_{3} & b_{3} & c_{3} & d_{3} \\ e & f & g & h \end{array}$$ \right]\left[ $$\begin{array}{c} x \\ y \\ z \\ 1 \end{array}$$ \right] ​x~y~​z~w~​ ​= ​a1​a2​a3​e​b1​b2​b3​f​c1​c2​c3​g​d1​d2​d3​h​ ​ ​xyz1​ ​

$$\left(x^{\prime },y^{\prime },z^{\prime }\right)=(\tilde{x}/\tilde{w},\tilde{y}/\tilde{w},\tilde{z}/\tilde{w})$$

上面的第二个公式刚好使用了计算机图形学笔记1-Transformation Matrix-变换*中注意的第二点：齐次坐标的等价性。使用上述的变换可以进行下面的操作：

前面我们已经讲了二维的情况。但是我们实际要处理的是三维的情况。经过投影变换就好像把一个棱台给变成了一个轴平行的box。这将方便我们使用正交投影变换矩阵变成CCV。

这里我们就搬出之前在相机变换所建立的坐标系，我们依然使用$z=n$近端平面和$z=f$远端平面，并使用$z=n$近端平面作为观察平面。需要注意的是，上面的$n$和$z$在坐标系定义下都是小于$0$的。对于投影变换后的$x_s$和$y_s$，类似前面二维情况：

$$y_s=\frac{n}{z}y{x}_s=\frac{n}{z}x$$

我们可以整理成矩阵的形式：

( x y z 1 ) ⇒ ( n x / z n y / z u n k n o w n 1 ) ≜ ( n x n y u n k n o w n z )

$$\begin{pmatrix} x\\y\\z\\1 \end{pmatrix}$$ \Rightarrow $$\begin{pmatrix} nx/z\\ny/z\\\mathrm{unknown}\\1 \end{pmatrix}$$ \triangleq $$\begin{pmatrix} nx\\ny\\\mathrm{unknown}\\z \end{pmatrix}$$ ​xyz1​ ​⇒ ​nx/zny/zunknown1​ ​≜ ​nxnyunknownz​ ​

于是我们所要求的投影变换矩阵满足：

P ( x y z 1 ) = ( n x n y u n k n o w n z ) ⇒ P = ( n 0 0 0 0 n 0 0 ? ? ? ? 0 0 1 0 ) \mathbf{P}

$$\begin{pmatrix} x\\y\\z\\1 \end{pmatrix}$$ = $$\begin{pmatrix} nx\\ny\\\mathrm{unknown}\\z \end{pmatrix}$$ \Rightarrow \mathbf{P} =\left( $$\begin{array}{cccc} n & 0 & 0 & 0 \\ 0 & n & 0 & 0 \\ ? & ? & ? & ? \\ 0 & 0 & 1 & 0 \end{array}$$ \right) P ​xyz1​ ​= ​nxnyunknownz​ ​⇒P= ​n0?0​0n?0​00?1​00?0​ ​

那么$z_s$是多少呢？对投影变换我们注意到：

1. 近端平面$z=n$的点映射以后点不发生变化。

2. 远端平面$z=f$的点映射以后z坐标不变。

根据第(1)点：近端平面$z=n$的点映射以后点不发生变化。我们有：

P ( x y n 1 ) = ( x y n 1 ) ≜ ( n x n y n 2 1 ) \mathbf{P}

$$\begin{pmatrix} x\\y\\n\\1 \end{pmatrix}$$ = $$\begin{pmatrix} x\\y\\n\\1 \end{pmatrix}$$ \triangleq $$\begin{pmatrix} nx\\ny\\n^2\\1 \end{pmatrix}$$ P ​xyn1​ ​= ​xyn1​ ​≜ ​nxnyn21​ ​

所以$\mathbf{P}$的第三行形式为 ( 0   0   A   B )

$$\begin{pmatrix} 0\,0\,A\,B \end{pmatrix}$$ (00AB​)，前两个元素为0是因为该齐次坐标的$z$坐标为$n^2$，和$x,y$的取值无关。我们单独拿出第三行和齐次坐标相乘有：

( 0 0 A B ) ( x y n 1 ) = n 2 ⇒ A n + B = n 2

$$\begin{pmatrix} 0 & 0 & A & B \end{pmatrix}$$ $$\begin{pmatrix} x \\ y \\ n \\ 1 \end{pmatrix}$$ =n^{2}\Rightarrow An+B=n^2 (0​0​A​B​) ​xyn1​ ​=n2⇒An+B=n2

根据第(2)点：远端平面$z=f$的点映射以后z坐标不变。我们有：

( 0 0 f 1 ) ⇒ ( 0 0 f 1 ) ≜ ( 0 0 f 2 f ) ⇒ A f + B = f 2 \left(

$$\begin{array}{l} 0 \\ 0 \\ f \\ 1 \end{array}$$ \right) \Rightarrow\left( $$\begin{array}{l} 0 \\ 0 \\ f \\ 1 \end{array}$$ \right)\triangleq\left( $$\begin{array}{c} 0 \\ 0 \\ f^{2} \\ f \end{array}$$ \right)\Rightarrow Af+B=f^2 ​00f1​ ​⇒ ​00f1​ ​≜ ​00f2f​ ​⇒Af+B=f2

于是我们有：

{ A n + B = n 2 A f + B = f 2 ⇒ { A = n + f B = − n f \left\{

$$\begin{aligned} &An+B=n^2\\ &Af+B=f^2 \end{aligned}$$ \right.\quad\Rightarrow\quad\left\{ $$\begin{aligned} &A=n+f\\ &B=-nf \end{aligned}$$ \right. {​An+B=n2Af+B=f2​⇒{​A=n+fB=−nf​

这样我们就确定了投影变换的变换矩阵：

P = [ n 0 0 0 0 n 0 0 0 0 n + f − f n 0 0 1 0 ] \mathbf{P}=

$$\begin{bmatrix} n & 0 & 0 & 0 \\ 0 & n & 0 & 0 \\ 0 & 0 & n+f & -f n \\ 0 & 0 & 1 & 0 \end{bmatrix}$$ P= ​n000​0n00​00n+f1​00−fn0​ ​

经过投影变换最终我们看到坐标发生了如下的变化：

P [ x y z 1 ] = [ n x n y ( n + f ) z − f n z ] ≜ [ n x z n y z n + f − f n z 1 ] \mathbf{P}\left[

$$\begin{array}{l} x \\ y \\ z \\ 1 \end{array}$$ \right]=\left[ $$\begin{array}{c} n x \\ n y \\ (n+f) z-f n \\ z \end{array}$$ \right] \triangleq\left[ $$\begin{array}{c} \frac{n x}{z} \\ \frac{n y}{z} \\ n+f-\frac{f n}{z} \\ 1 \end{array}$$ \right] P ​xyz1​ ​= ​nxny(n+f)z−fnz​ ​≜ ​znx​zny​n+f−zfn​1​ ​

有时候我们想把屏幕坐标变换回世界坐标，这时候我们就需要用到$\mathbf{P}$的逆矩阵：

P − 1 = [ 1 n 0 0 0 0 1 n 0 0 0 0 0 1 0 0 − 1 f n n + f f n ] ≜ [ f 0 0 0 0 f 0 0 0 0 0 f n 0 0 − 1 n + f ] \mathbf{P}^{-1}=\left[

$$\begin{array}{cccc} \frac{1}{n} & 0 & 0 & 0 \\ 0 & \frac{1}{n} & 0 & 0 \\ 0 & 0 & 0 & 1 \\ 0 & 0 & -\frac{1}{f n} & \frac{n+f}{f n} \end{array}$$ \right]\triangleq\left[ $$\begin{array}{cccc} f & 0 & 0 & 0 \\ 0 & f & 0 & 0 \\ 0 & 0 & 0 & f n \\ 0 & 0 & -1 & n+f \end{array}$$ \right] P−1= ​n1​000​0n1​00​000−fn1​​001fnn+f​​ ​≜ ​f000​0f00​000−1​00fnn+f​ ​

完整的透视变换包括了正视变换和投影变换的组合，先处理近大远小的投影变换为box，然后把box变回一个CCV。

M p e r = M o r t h P = [ 2 n r − l 0 l + r l − r 0 0 2 n t − b b + t b − t 0 0 0 f + n n − f 2 f n f − n 0 0 1 0 ] \mathbf{M}_{\mathrm{per}}=\mathbf{M}_{\mathrm{orth}} \mathbf{P}=\left[

$$\begin{array}{cccc} \frac{2 n}{r-l} & 0 & \frac{l+r}{l-r} & 0 \\ 0 & \frac{2 n}{t-b} & \frac{b+t}{b-t} & 0 \\ 0 & 0 & \frac{f+n}{n-f} & \frac{2 f n}{f-n} \\ 0 & 0 & 1 & 0 \end{array}$$ \right] Mper​=Morth​P= ​r−l2n​000​0t−b2n​00​l−rl+r​b−tb+t​n−ff+n​1​00f−n2fn​0​ ​

在OpenGL中，这一矩阵的定义可能不一样：

M OpenGL  = [ 2 ∣ n ∣ r − l 0 r + l r − l 0 0 2 ∣ n ∣ t − b t + b t − b 0 0 0 ∣ n ∣ + ∣ f ∣ ∣ n ∣ − ∣ f ∣ 2 ∣ f ∣ ∣ n ∣ ∣ n ∣ − ∣ f ∣ 0 0 − 1 0 ] \mathbf{M}_{\text {OpenGL }}=\left[

$$\begin{array}{cccc} \frac{2|n|}{r-l} & 0 & \frac{r+l}{r-l} & 0 \\ 0 & \frac{2|n|}{t-b} & \frac{t+b}{t-b} & 0 \\ 0 & 0 & \frac{|n|+|f|}{|n|-|f|} & \frac{2|f||n|}{|n|-|f|} \\ 0 & 0 & -1 & 0 \end{array}$$ \right] MOpenGL ​= ​r−l2∣n∣​000​0t−b2∣n∣​00​r−lr+l​t−bt+b​∣n∣−∣f∣∣n∣+∣f∣​−1​00∣n∣−∣f∣2∣f∣∣n∣​0​ ​

这里我们使用了${\mathbf{M}}_{\mathrm{orth}}$，随之而来的问题是：${\mathbf{M}}_{\mathrm{orth}}$中的$l,r,t,b$这些值怎么定义呢，它们定义了我们的窗口看到的物体，由于近端平面$z=n$的$x$和$y$不变，我们这里选择了近端平面$z=n$来定义$l,r,t,b$。

我们最后来看一下从相机坐标经过透视变换到屏幕坐标的算法流程：

2.5 Field-of-View-视场

我们通过$(l,r,t,b)$和$n$定义我们的窗口，我们可以进一步简化，如果我们屏幕的中心是原点，那么有：

l = − r , b = − t .

$$\begin{aligned} l & =-r, \\ b & =-t . \end{aligned}$$ lb​=−r,=−t.​

另外我们可以添加每个像素是正方形的约束，使得图形没有形状的畸变，我们使用的$r$和$t$一定要和水平像素数$n_x$和竖直像素数$n_y$成比例：

$$\frac{n_x}{n_y}=\frac{r}{t}$$

当$n_x$和$n_y$被确定以后，只剩下一个自由度，我们经常使用$\theta$作为视场，下图为垂直视场，它满足关系：

$$\tan \frac{\theta }{2}=\frac{t}{|n|}$$

通过确定$n$和$\theta$，我们就可以计算$t$来得到更一般的观测系统。

参考资料

1. GAMES101-现代计算机图形学入门-闫令琪
2. Shirley & Marschner, Fundamentals of Computer Graphics. forth edition, 139-156