OpenGL学习笔记 （三）- 坐标系与顶点变换

文章目录隐藏

• 坐标系
  • 局部空间
  • 世界空间
  • 观察空间
  • 裁剪空间
  • 标准化设备坐标
  • 屏幕空间
• 预备知识
  • 齐次坐标系
  • 矩阵合成的顺序
• 顶点变换
  • 模型矩阵
  • 视图矩阵
  • 投影矩阵
    • 透视投影
      • Z-Fighting
    • 正视投影
  • 透视除法
  • 视口变换
  • 法线矩阵
• Reference

在OpenGL学习笔记 （二）- 顶点与绘制指令中，已经对绘制指令与顶点规范进行了简单介绍，接下来的学习笔记将按照渲染管线的顺序继续说明。本节学习笔记将会介绍顶点数据在渲染管线中经过的第一步，也就是顶点着色器相关的操作。

虽然作为可编程着色器，顶点着色器并没有固定的功能，但是有一些操作通常都会交由顶点着色器处理。对应于操作固定的固定管线，这些操作通常包含：应用模型视图矩阵、应用投影矩阵、应用法线矩阵、应用纹理矩阵等等。这些操作都针对顶点数据进行，而且用处都是进行坐标变换，因此本节将会结合坐标系来讲解这些变换。

坐标系

在顶点的处理过程中，有若干过渡用的坐标系，这些坐标系可以清楚的表达坐标变化的过程，并简化部分计算。下面是几个相对重要的坐标系：

• 局部空间（Local Space）
• 世界空间（World Space）
• 观察空间（View Space）
• 裁剪空间（Clip Space）
• 标准化设备坐标（Normalized Device Coordinate，NDC）
• 屏幕空间（Screen Space）

若连起来，我们就可以整理出顶点坐标变换的大致步骤了。

顶点变换的步骤（修改自Reference）

我们先来了解变换中出现的各个坐标系，之后再来了解处理过程中的各个矩阵和步骤。

局部空间

局部空间是我们传入的顶点坐标所在的空间。一般情况下，我们可以把要渲染的场景拆分为若干小物件。这些小物件通常是一个模型，包含了大量的顶点。而建模时，我们一般不会考虑模型在场景中的绝对坐标，因此我们会人为指定一个坐标系。这个坐标系就是局部空间，它的取值和模型所在的位置是无关的。

世界空间

世界空间就是我们渲染场景的空间。每个模型在世界空间都有各自的位置，因此我们需要把局部空间的坐标移动至它的位置，以变成世界坐标。

观察空间

观察空间是我们真正看到的空间。我们最后渲染出的场景一定是在世界空间的某一处看到的，而这个观察到的空间就是观察空间。观察空间是特定位置、角度下的世界空间。可以想象出一个摄像机，从摄像机拍照的角度看到的空间就是观察空间。

裁剪空间

裁剪空间可以理解为一个中间空间。由于需要将三维空间以二维的形式呈现出来，因此我们需要对观察空间的物体进行投影，而裁剪空间可以理解为投影的中间步骤。裁剪空间中，我们已经可以确定最终会显示在屏幕上的顶点了，因此之后我们就可以裁剪掉所有视野外的顶点（发生在“顶点后处理”的“裁剪”）。这就是这个空间被称作裁剪空间的原因。

标准化设备坐标

标准化设备坐标是真正绘制在屏幕内顶点的坐标，其x、y、z的取值范围都必须在 -1,1 之内。以屏幕的正中心为 left( 0,0,0 right) ；屏幕方向看为xOy直角坐标系；z为深度，由屏幕外向内递增。NDC是左手坐标系，而之前的坐标系都是右手坐标系。

屏幕空间

屏幕空间即glViewport函数定义的视口，它的取值范围由视口大小决定。屏幕空间的坐标就是真实屏幕（严格来说是视口）上的坐标，经过栅格化后就对应于屏幕像素。

预备知识

在真正了解这些变换之前，我们有必要先了解一些数学相关的知识。这些内容主要是关于线性代数和投影几何的，是构成之后变换矩阵的基本知识。

齐次坐标系

齐次坐标就是较原先坐标增广1维度的坐标，而齐次坐标所构成的坐标系就是齐次坐标系。齐次坐标的一个重要的目的就是用于进行仿射变换。在线性代数中，我们可以通过一个矩阵来代表一个变换，比如如下的矩阵可以拉伸一个坐标（或向量）。

begin{pmatrix} 1 & 0 & 0\ 0 & 2 & 0\ 0 & 0 & 3 end{pmatrix}left( begin{array}{ccc} 2 \ 1 \ 2 \ end{array} right)=left( begin{array}{ccc} 2 \ 2 \ 6 \ end{array} right)

同样，除了放缩，我们还能写出旋转、剪切和反射对应的矩阵。但是，我们并没有办法写出平移操作的矩阵。因为实质上，我们刚刚列举的操作都是在变换一个三维空间内的向量，而平移向量是一个毫无意义的操作。因此，为了平移一个坐标，我们需要在更高阶的空间进行操作。我们可以把一个三维空间的坐标增广写为left( x,y,z,1 right)^{T} ，这样平移操作就可以表示为

begin{pmatrix} 1 & 0 & 0 & x\ 0 & 1 & 0 & y\ 0 & 0 & 1 & z\ 0 & 0 & 0 & 1\ end{pmatrix}left( begin{array}{ccc} a_1 \ a_2 \ a_3 \ 1 end{array} right)=left( begin{array}{ccc} a_1 x \ a_2 y \ a_3 z \ 1 end{array} right)

这样我们就可以写出任何代表仿射变换的矩阵了。另外，对于原先用于变换的三阶方阵，我们可以等价的改写为

begin{pmatrix} a_{11} & a_{12} & a_{13} & 0\ a_{21} & a_{22} & a_{23} & 0\ a_{31} & a_{32} & a_{33} & 0\ 0 & 0 & 0 & 1 end{pmatrix}

除此之外，我们还可以使用齐次坐标来区分点和向量。若一个齐次坐标的w分量为0，即left( x,y,z,0 right)^{T} ，那么这个齐次坐标就可以视为代表一个三维空间向量。可以简单的理解为，w分量为0的齐次坐标不能被移动，因此它代表一个向量。当然也可以从基底的角度进行解释，这里就不做展开了。

矩阵合成的顺序

为了减少计算量，我们通常会合成多个变换矩阵。但是需要注意的是，因为矩阵乘法不适合交换律，因此矩阵的乘法是有顺序的。比如你希望对向量textbf{v} 先进行变换M_1 之后再进行M_2 ，变换后的向量应当是M_2 (M_1 textbf{v}) 。由于矩阵乘法适合结合律（列向量可以看作n行1列的矩阵），故M_2 (M_1 textbf{v})=(M_2 cdot M_1) textbf{v} ，因此最终合成的矩阵应该是M_2 cdot M_1 ，其运算顺序和操作顺序正好相反。

顶点变换

之前我们已经提及，在渲染的过程中，顶点坐标将在多个坐标系之间转换。一般来说，顶点着色器负责的是模型矩阵、视图矩阵和投影矩阵（还可能有法线矩阵）的操作，而透视除法和视口变换是OpenGL在“顶点后处理”中已经替我们实现的。

模型矩阵

模型矩阵复杂把局部空间的顶点变换为世界空间的顶点，可以理解为把一个“模型”摆到它在世界中的位置，因此模型矩阵并没有什么固定的要求。在OpenGL中，我们使用齐次坐标来描述一个顶点的位置，因此模型矩阵是一个4阶方阵。

一般来说，模型矩阵是一系列仿射变换的合成，而且通常会包括平移M_{trans} 、旋转M_{rotate} 和缩放M_{scale} 。另外，需要注意的是平移操作通常会影响后续的旋转和缩放操作，因此推荐把平移操作留至最后进行：M_{model} = M_{trans} cdot M_{rotate} cdot M_{scale}。

视图矩阵

视图矩阵就是将世界空间变换为观察空间的矩阵，经过变换之后，物体的坐标将会变换为摄像机观察的坐标，这里我们把视点称作“摄像机”。改变观察的方式在某种程度上其实等价于反向移动世界中的物体，比如用摄像机拍摄一个物体，摄像机推进1m和物体退后1m在摄像机看来是没有区别的。这里我们也用同样的思路来构造这个矩阵。

一个常见的视图矩阵是LookAt矩阵，可以创建一个在摄像机位置( x_c, y_c, z_c ) 看向目标位置( x_t, y_t, z_t ) 的视图矩阵。因此我们大致需要进行两个操作：首先把世界移动到摄像机位置；之后把世界旋转至摄像机角度。要注意的是，这里我们并不是移动摄像机，而是反向操作整个场景，因此需要先移动再进行旋转。由此我们可以给出LookAt矩阵大致的形式。

LookAt=M_{rot} cdot M_{trans} =begin{pmatrix} r_{11} & r_{12} & r_{13} & 0\ r_{21} & r_{22} & r_{23} & 0\ r_{31} & r_{32} & r_{33} & 0\ 0 & 0 & 0 & 1 end{pmatrix}begin{pmatrix} 1 & 0 & 0 & t_x\ 0 & 1 & 0 & t_y\ 0 & 0 & 1 & t_z\ 0 & 0 & 0 & 1 end{pmatrix}

移动矩阵的构造是很简单的，我们只需要反向移动到摄像机位置就可以了。

M_{trans}=begin{pmatrix} 1 & 0 & 0 & -x_c\ 0 & 1 & 0 & -y_c\ 0 & 0 & 1 & -z_c\ 0 & 0 & 0 & 1 end{pmatrix}

旋转矩阵的构造相对复杂，这里需要一些线性代数知识的储备。旋转操作实际上就是一个正交变换，因此我们只需要找到旋转后的一组正交基就可以了。但是由于世界需要反向旋转，因此这个正交基的寻找会困难不少，所以我们可以采用先找出正向旋转矩阵，然后再进行逆操作（取矩阵逆）得到目标矩阵，因此我们首先需要找到一组合适的正交基。因此我们以目标位置向摄像机位置取一组正交基。（这里不能以摄像机朝物体的方向取正交基，因为我们假定摄像机看向z轴的负方向，如果我们使用这组正交基那世界会整体旋转前后颠倒）

选取的正交基（图源Reference）

接着我们来计算这组正交基。首先最好计算的就是前向向量f，使用摄像机位置和目标位置做差并标准化即可。

f=frac{v_c-v_t}{leftVert v_c-v_t rightVert}

之后的左向向量和上向向量稍微有点复杂。这里我们需要规定，LookAt矩阵最终的视野一定是“正”的，也就是说不会左右“倾斜”，因此我们需要给出代表上方向的向量up。由此我们就可以使用叉积计算左方向的向量left=up times f （注意叉积的顺序）。之后对这组向量进行施密特正交化，我们就能得到这组正交基了。（如果你不知道施密特正交化，那实际上这一步骤就是根据确定的左向向量和前向向量计算出上向向量）

f=frac{left}{leftVert left rightVert}=frac{up times f}{leftVert up times f rightVert}

u=f times l

由此我们就能得出正交变换矩阵，之后对它求逆就能得到M_{rot} 。这里运用了正交矩阵的逆等于其转置的特性。

M_{rot}=begin{pmatrix} l_x & u_x & f_x & 0\ l_y & u_y & f_y & 0\ l_z & u_z & f_z & 0\ 0 & 0 & 0 & 1 end{pmatrix}^{-1}=begin{pmatrix} l_x & u_x & f_x & 0\ l_y & u_y & f_y & 0\ l_z & u_z & f_z & 0\ 0 & 0 & 0 & 1 end{pmatrix}^{T}=begin{pmatrix} l_x & l_y & l_z & 0\ u_x & u_y & u_z & 0\ f_x & f_y & f_z & 0\ 0 & 0 & 0 & 1 end{pmatrix}

因此最终的LookAt矩阵就可以表示为：

begin{aligned} LookAt=M_{rot} cdot M_{trans}&=begin{pmatrix} l_x & l_y & l_z & 0\ u_x & u_y & u_z & 0\ f_x & f_y & f_z & 0\ 0 & 0 & 0 & 1 end{pmatrix}begin{pmatrix} 1 & 0 & 0 & -x_c\ 0 & 1 & 0 & -y_c\ 0 & 0 & 1 & -z_c\ 0 & 0 & 0 & 1 end{pmatrix}\&=begin{pmatrix} l_x & l_y & l_z & -l_x x_e-l_y y_e-l_z z_e\ u_x & u_y & u_z & -u_x x_e-u_y y_e-u_z z_e\ f_x & f_y & f_z & -f_x x_e-f_y y_e-f_z z_e\ 0 & 0 & 0 & 1 end{pmatrix} end{aligned}

不过需要注意的是，摄像机的方向不能与up向量平行。另外，LookAt矩阵仅仅是视图矩阵的一种，如果要实现复杂的摄像机运动，还可以使用其他的矩阵。而且，LookAt矩阵也不是实现摄像机的全部，实现摄像机的过程中可能还会遇到万向节锁的问题，还需要使用四元数的知识来解决。关于这些，我可能会单独用一篇文章来介绍。

投影矩阵

投影矩阵是将观察空间变换为裁剪空间的矩阵。投影的过程实际上就是将3D空间转化为2D空间的过程，只不过我们还希望保留顶点的深度信息，以供我们判断之后的绘制与否。在OpenGL中，整个投影过程实际上包括：应用投影矩阵、裁剪和透视除法。经过这一系列操作之后，我们将获得NDC空间下的若干顶点。

之前我们已经介绍过齐次坐标在仿射变换中的应用，现在简单介绍齐次坐标在投影几何中的应用。仿射变换中，齐次坐标的w分量通常是1。但在投影过程中，我们可以通过调整w的值来确定一个视锥（frustum，又称平截头体）。视锥就是可视范围，所有可见的顶点都必须落于其中。根据投影方式的不同，视锥的形状一般也不相同。

透视投影和正视投影的视锥（图源Reference）

图示为透视投影和正视投影的视锥，这是最常见的两种投影方式。接下来我们将介绍这两种投影方式的投影矩阵的推导。

透视投影

透视投影是十分贴近现实的一种投影方式，因此投影的结果也相对正视投影更符合现实。简而言之，透视投影就是能模拟近大远小的投影方式。透视投影的视锥是一个平截头棱锥体（也就是金字塔切掉上半部分），符合我们“进处视野小、远处视野大”的认知。

透视投影视锥与NDC空间（图源Reference）

从图中我们可以看到，我们的目的实际上就是将左侧的视锥映射到右侧的NDC空间中。还需要注意一点，NDC实际上是左手坐标系，而之前的空间都是右手坐标系，因此我们还需要在投影过程中翻转z轴。

整个视锥可以分为近面（near plane，也是投影面）和远面（far plane），给出近面的左右上下（l、r、t、b）和近面与远面的位置（n、f，因为都是正数因此计算时使用-n与-f）。我们从xOz和yOz两个平面来分析投影过程。

xOz平面的投影（图源Reference）

视锥内的点(x_e, y_e, z_e) 的投影结果(x_p, y_p, z_p) 可以用相似三角形计算。

frac{x_p}{x_e}=frac{-n}{z_e}:Rightarrow:x_p=-frac{n cdot x_e}{z_e}

同理，我们可以计算出y_p。

yOz平面的投影（图源Reference）

frac{y_p}{y_e}=frac{-n}{z_e}:Rightarrow:y_p=-frac{n cdot y_e}{z_e}

最终投影点的坐标是(-frac{n cdot x_e}{z_e}, -frac{n cdot y_e}{z_e}, -n) 。可以看到，在投影的过程中x_e和y_e都需要除以-z_e。但是z_e本身是顶点坐标的一部分，因此我们并没有办法使用线性变换的方式来完成这个目标。因此，我们引入了透视除法这一操作。在齐次坐标转化为NDC坐标时，我们进行如下操作：

left( begin{array}{ccc} x_{ndc} \ y_{ndc} \ z_{ndc} end{array} right)=left( begin{array}{ccc} x_{clip} / w_{clip} \ y_{clip} / w_{clip} \ z_{clip} / w_{clip} end{array} right)

这样，我们就可以令w_{clip}=-z_e 来引入这一项。

之后我们继续变换投影后的坐标(x_p, y_p, z_p) ，使x_p 和y_p 满足NDC坐标的约束。首先将x_p 从l, r映射至-1, 1。

x_{ndc} = 2 times frac{x_p-l}{r-l} - 1

之后我们代入x_p=-frac{n cdot x_e}{z_e} ，并进行约分。由于我们需要得到透视除法之前的裁剪坐标，因此我们需要提出w_{clip}=-z_e 一项。

begin{aligned} x_{ndc} &= 2 times frac{x_p-l}{r-l} - 1\ x_{ndc} &= 2 times frac{frac{n cdot x_e}{-z_e}-l}{r-l} - 1\ x_{ndc} &= frac{2 times frac{n cdot x_e l cdot z_e}{r-l} z_e}{-z_e}\ x_{ndc} &= left( frac{2n}{r-l} cdot x_e frac{r l}{r-l} cdot z_e right) / -z_e\ x_{ndc} &= x_{clip} / w_{clip}\ Rightarrow x_{clip} &= frac{2n}{r-l} cdot x_e frac{r l}{r-l} cdot z_e end{aligned}

同理，我们可以计算出y_{clip} 。

y_{clip}=frac{2n}{t-b} cdot y_e frac{t b}{t-b} cdot z_e

接下来我们讨论z_{clip} 的计算。虽然按照投影结果来说，投影的目标点都会落在近面，因此z_{p}=-n 。但是在NDC坐标中，我们希望z分量能提供一个顶点的深度信息，因此我们还需重新考虑z分量的映射。

begin{aligned} z_{ndc}&=2 times frac{z_e n}{n-f} 1\ z_{ndc}&=z_{clip} / w_{clip}\ Rightarrow z_{clip} &= -z_e left( 2 times frac{z_e n}{n-f} 1 right) end{aligned}

但是当我们进行线性映射的时候，却发现计算出的z_{clip} 包含二次项。显然这是线性变换无法做到的，因此我们必须放弃线性映射，转而采用不同的方法来映射z分量。由线性代数，我们知道z_{clip} 一定可以写成：

z_{clip}=A z_e B w_e

其中A、B是常数。接下来采用待定系数法解出A、B两个常数。首先计算z_{ndc}。

z_{ndc}=z_{clip}/w=frac{A z_e B w_e}{-z_e}

可以看出，z_{ndc}是一个关于z_e的单调函数，因此代入边界点z_e=-n和z_e=-f可以联立：

left{ begin{aligned} frac{-An B}{n} &= -1\ frac{-Af B}{f} &= 1 end{aligned}right.

解得

left{ begin{aligned} A &= -frac{f n}{f-n}\ B &= -frac{2fn}{f-n} end{aligned}right.

由此我们就可以得到透视投影的坐标变换：

large{left( begin{array}{ccc} x_{clip} \ y_{clip} \ z_{clip} \ w_{clip} end{array} right)=left( begin{array}{ccc} frac{2n}{r-l} cdot x_e frac{r l}{r-l} cdot z_e \ frac{2n}{t-b} cdot y_e frac{t b}{t-b} cdot z_e \ -frac{f n}{f-n} cdot z_e-frac{2fn}{f-n} cdot w_e \ -z_e end{array} right)}

不过我们之前的推导都是针对视锥内部的点的，而此时还没经过裁剪，因此也是存在视锥外部的点的。那么视锥外部的点是否也适用这个变换呢？答案是肯定的。观察原点到NDC坐标的变换，任意一维实际上都是单调的。而我们已经保证了视锥内部的点在-1,1之间，因此视锥外部的点自然就会被映射到-1,1之外。而在还未进行透视除法的裁剪坐标系，所有视锥内的坐标将会落在[-w_{clip},w_{clip}] 之内。事实上，裁剪时就是使用这个方法进行裁剪判断的。

由上面的变换，我们就可以写出最终的投影矩阵了。

large{M_{perspective}=begin{pmatrix} frac{2n}{r-l} & 0 & frac{r l}{r-l} & 0\ 0 & frac{2n}{t-b} & frac{t b}{t-b} & 0\ 0 & 0 & -frac{f n}{f-n} & -frac{2fn}{f-n} \ 0 & 0 & -1 & 0 end{pmatrix}}

不过一般来说，视锥的近面的中心点都位于z轴上，因此我们可以用宽度w和高度h来替换lr、tb。不过，定义近面宽高也不是很直观。我们一般情况下只是希望近面的比例和屏幕一致，因此通常我们只知道宽高比aspect。在近面比例、距离确定的情况下，近面的大小就决定了视锥的大小，因此我们用fov（field of view） 来确定近面的大小。通常我们使用垂直fov ，也就是视点到近面上下缘的夹角。

fov的位置（图源Reference）

由此可以计算出简化版本的投影矩阵（参数为fov、宽高比aspect、近面位置n、远面位置f）：

large{begin{aligned} h&=2n tan(frac{theta}{2}) \ w&=aspect cdot h\ M_{perspective}&=begin{pmatrix} frac{2n}{w} & 0 & 0 & 0\ 0 & frac{2n}{h} & 0 & 0\ 0 & 0 & -frac{f n}{f-n} & -frac{2fn}{f-n} \ 0 & 0 & -1 & 0 end{pmatrix}\ &=begin{pmatrix} frac{cot(frac{theta}{2})}{aspect} & 0 & 0 & 0\ 0 & cot(frac{theta}{2}) & 0 & 0\ 0 & 0 & -frac{f n}{f-n} & -frac{2fn}{f-n} \ 0 & 0 & -1 & 0 end{pmatrix} end{aligned}}

Z-Fighting

不知道你是否还记得，我们之前计算的NDC坐标的z分量和x、y分量的映射是不同的：

z_{ndc}=frac{f n}{f-n} frac{2fn}{f-n} cdot frac{1}{z_e}

显然这是一个反比例函数，并不是线性的。

Z-Fighting问题（图源Reference）

观察函数图像我们可以发现，越靠近近面（z_e=-n） 时函数导数的绝对值越大，也就是说越靠近近面，深度的精度更大。直观上来说，其实并没有什么问题，因为相较远处的内容，我们更希望把近处的东西渲染的更加精确（近处通常有更多物体），但是同时在远处我们就会遇到精度问题（图中虚线处）。这个精度问题被称为Z-Fighting，解决方法有很多，比如人为的在重合的顶点之间设置小偏移，这里不做详细介绍。

正视投影

在正视投影中，我们就不用考虑太多复杂的问题了。

正视投影的视锥（图源Reference）

可以看到，正视投影的视锥和NDC空间同样都是长方体。因此我们只需要直接将各个坐标(x_e, y_e, z_e) 映射到-1,1就可以了。需要注意的是，我们仍需要给z_e 添加负号。

large{left( begin{array}{ccc} x_{ndc} \ y_{ndc} \ z_{ndc} end{array} right)=left( begin{array}{ccc} 2 times frac{x_e-l}{r-l} - 1 \ 2 times frac{y_e-l}{r-l} - 1 \ 2 times frac{-z_e-l}{r-l} - 1 end{array} right)}

另外，正视投影中也不需要使用w分量，因此保持为1就好了，之后的透视除法也仅仅起到降维的作用。因此，正视投影下的裁剪坐标和NDC坐标只是多了w维度，其余维度的数值都是相同的。而且，由于w_{clip}=1 ，因此裁剪同样可以使用w维来进行判断。正视投影中也不存在Z-Fighting问题，因为z维度的投影是线性的。（但是整体上来说，精度仍然可能影响显示效果，只不过影响的程度与远近无关）

large{M_{ortho}=begin{pmatrix} 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}{f-n} & -frac{f n}{f-n} \ 0 & 0 & 0 & 1 end{pmatrix}}

这个矩阵同样可以使用w、h简化。不过此时就没办法计算近面的大小了，因此我们需要手动给出w、h。

large{M_{ortho}=begin{pmatrix} frac{2}{w} & 0 & 0 & 0\ 0 & frac{2}{h} & 0 & 0\ 0 & 0 & -frac{2}{f-n} & -frac{f n}{f-n} \ 0 & 0 & 0 & 1 end{pmatrix}}

透视除法

经过裁剪后，剩余的所有顶点的坐标值应该都不会大于其w分量（也就是都落在平截头体内），因此我们通过透视除法把裁剪空间坐标转化为标准化设备坐标。这是一个降维的过程，通过透视除法，齐次坐标将会转为三维直角坐标系坐标。

left( begin{array}{ccc} x_{ndc} \ y_{ndc} \ z_{ndc} end{array} right)=left( begin{array}{ccc} x_{clip} / w_{clip} \ y_{clip} / w_{clip} \ z_{clip} / w_{clip} end{array} right)

视口变换

视口变换的操作相对简单，只需要对坐标进行简单的处理。视口变换的数据来源于两个函数：

void glViewport( GLint x, GLint y, GLsizei width, GLsizei height); void glDepthRange( GLclampd nearVal, GLclampd farVal);

首先计算屏幕空间的原点O = left( x frac{w}{2}, y frac{h}{2} right) ，之后就可以得到坐标变换：

left( begin{array}{ccc} x_w \ y_w \ z_w end{array} right)=left( begin{array}{ccc} frac{w}{2}x_{ndc} o_x \ frac{h}{2}y_{ndc} o_y \ frac{f-n}{2}z_{ndc} frac{f n}{2} end{array} right)

由此可以写出视口变换矩阵：

M_{viewport}=begin{pmatrix} frac{w}{2} & 0 & 0 & x frac{w}{2} \ 0 & frac{h}{2} & 0 & y frac{h}{2} \ 0 & 0 & frac{f-n}{2} & frac{f n}{2} \ 0 & 0 & 0 & 1 end{pmatrix}

很显然，如果需要使用矩阵运算，我们还需要把NDC坐标重新还原成齐次坐标的形式。

法线矩阵

之前我们都在谈论顶点坐标的变换。但是顶点并不仅仅包含坐标数据，它还包含了其他的数据。而在这些坐标系变换中，也不仅仅只有顶点坐标会受到影响。法线就是会受到这些变换影响的一个属性，而法线矩阵就是对法线应用类似变换的矩阵。法线广泛应用于光照的计算（下一篇文章就会介绍光照了），通过修改法线我们能给模型创造更和谐的视觉效果。对法线来说，我们看重的仅仅是它的方向，因此法线矩阵会比之前各种矩阵的创建要简单不少。

为了推导，我们设法向量为vec{ n } ，并且设切向量vec{ v } ，因此有

vec{ n }^T cdot vec{ v }=0

成立（vec{ n }^T 表示行向量）。需要注意的是，这里的vec{ n } 和vec{ v } 都是齐次向量。显然，有

vec{ n }^T  M^{-1}M vec{ v }=0

成立。由于切向量的变化和顶点坐标变化一致（不妨想象，如果模型足够光滑，我们就能找到一个分片上的另一点，若这个点无限接近顶点，则这个点和顶点构成的向量就无限接近切向量），因此M vec{ v } 就代表了一个顶点变换。由于光照的计算发生在观察空间，因此我们取

M=M_{view} cdot M_{model}

那么变换后的法向量就是vec{ n }^T  M^{-1} 了。写成列向量的形式就是：

vec{ n }_{new} = (vec{ n }^T  M^{-1})^T = (M^{-1})^Tvec{ n }

由于我们只关注法向量的方向，而法向量通常只有三个维度，因此我们可以直接取 (M^{-1})^T 左上角的3阶方阵进行计算，这个矩阵就是法线矩阵。

Reference

1. OpenGL编程指南（原书第9版）（红宝书）
2. LearnOpenGL CN（https://learnopengl-cn.github.io/）
3. 齐次坐标 – 维基百科（https://zh.wikipedia.org/wiki/齐次坐标）
4. OpenGL Transformation（http://www.songho.ca/opengl/gl_transform.html）
5. OpenGL Camera（http://www.songho.ca/opengl/gl_camera.html）
6. OpenGL Projection Matrix（http://www.songho.ca/opengl/gl_projectionmatrix.html）
7. OpenGL Normal Vector Transformation（http://www.songho.ca/opengl/gl_normaltransform.html）
8. Modern OpenGL（https://glumpy.github.io/modern-gl.html）