iOS

OpenGL ES坐标系统

About OpenGL ES

Posted by Quincy-QC on 2019-08-25

OpenGL ES希望在每次顶点着色器运行后，我们可见的所有顶点都为标准化设备坐标。也就是说，每个顶点的x，y，z坐标都应该在-1.0到1.0之间，超出这个坐标范围的顶点都将不可见。我们通常会自己设定一个坐标的范围，之后再在顶点着色器中将这些坐标变换为标准化设备坐标。然后将这些标准坐标传入光栅器，将它们变换为屏幕上的二维坐标或像素。
将坐标变换为标准化设备坐标，接着再转化为屏幕坐标的过程通常是分步进行的，也就是类似于流水线那样子。在流水线中，物体的顶点在最终转化为屏幕坐标之前还会被变换到多个坐标系统。将物体的坐标变换到几个过渡坐标系的优点在于，在这些特定的坐标系统中，一些操作或运算更加方便和容易，这一点很快就会变得很明显。对我们来说比较重要的总共有5个不同的坐标系统：

  • 局部空间（Local Space，或者称为物体空间（Object Space））
  • 世界空间（World Space）
  • 观察空间（View Space，或者称为视觉空间（Eye Space））
  • 裁剪空间（Clip Space）
  • 屏幕空间（Screen Space）

这就是一个顶点在最终被转化为片段之前需要经历的所有不同状态。

概述

为了将坐标从一个坐标系变换到另一个坐标系，我们需要用到几个变换矩阵，最重要的几个分别是模型（Model）、观察（View）、投影（Projection）三个矩阵。我们的顶点坐标起始于局部空间（Local Space），在这里它称为局部坐标（Local Coordinate），它在之后会变为世界坐标（World Coordinate），观察坐标（View Coordinate），裁剪坐标（Clip Coordinate），并最后以屏幕坐标（Screen Coordinate）的形式结束。如下图：

坐标系统

  1. 局部坐标是对象相对于局部原点的坐标，也是物体起始的坐标。
  2. 下一步是将局部坐标转换为世界空间坐标，世界空间坐标是处于一个更大的空间范围的。这些坐标相对于世界的全局原点，它们会和其他物体一起相对于世界的原点进行摆放。
  3. 接下来我们将世界坐标转换为观察空间坐标，使得每个坐标都是从摄像机或者说观察者的角度进行观察的。
  4. 坐标到达观察空间之后，我们需要将其投影到裁剪坐标。裁剪坐标会被处理至-1.0到1.0的范围内，并判断哪些顶点将会出现在屏幕上。
  5. 最后，我们将裁剪坐标变换为屏幕坐标，我们将使用一个叫做视口变换（Viewport Transform）的过程。视口变换将位于-1.0到1.0范围的坐标变换到由glViewport函数所定义的坐标范围内。最后变换出来的坐标会送到光栅器，并将其转换为片段。

我们之所以将顶点变换到各个不同的空间的原因是有些操作在特定的坐标系统中才有意义且更方便。例如，当需要物体进行修改的时候，在局部空间中来操作会更说得通；如果要对一个物体做出一个相对于其它物体位置的操作时，在世界坐标系中来做这个才更说得通，等等。

局部空间

局部空间是指物体所在的坐标空间，即对象最开始所在的地方。想象你在一个建模软件中创建一个立方体。创建的立方体的原点有可能位于(0, 0, 0)，即便它有可能最后在程序中处于完全不同的位置。甚至有可能你创建的所有模型都以(0, 0, 0)为初始位置（然后它们最终出现在世界的不同位置）。所以，模型的所有顶点都是在局部空间中：它们相对于物体来说都是局部的。

世界空间

如果我们将我们所有的物体导入到当前程序中，它们有可能会全挤在世界的原点(0, 0, 0)上，这并不是我们想要的结果。我们想为每一个物体定义一个位置，从而能在更大的世界当中放置它们。世界空间中的坐标正如其名：是指顶点相对于世界的坐标。如果我们希望将物体分散在世界上摆放，这就是我们希望物体变换到的空间。物体的坐标将会从局部变换到世界空间；该变换是由模型矩阵（Model Matrix）实现的。
模型矩阵是一种变换矩阵，它能通过对物体进行位移、缩放、旋转来将它置于它本应该在的位置或朝向。我们可以将它想象为变换一个房子，需要先将它缩小（它在局部空间中太大了），并将其移至郊区的一个小镇，然后在y轴上往左旋转一点以搭配附近的房子。

观察空间

观察空间经常被人们称之为OpenGL的摄像机（Camera）(所以有时也称为摄像机空间（Camera Space）或视觉空间（Eye Space）)。观察空间是将世界空间坐标转化为用户视野前方的坐标而产生的结果。因此观察空间就是从摄像机的视角所观察到的空间。而这通常是由一系列的位移和旋转的组合来完成，平移/旋转场景从而使得特定的对象被变换到摄像机的前方。这些组合在一起的变换通常存储在一个观察矩阵（View Matrix）里，它被用来将世界坐标变换到观察空间。

摄像机

OpenGL本身没有摄像机（Camera）的概念，但我们可以通过把场景中的所有物体往相反方向移动的方式来模拟出摄像机，产生一种我们在移动的感觉，而不是场景在移动。

摄像机/观察空间

当我们讨论摄像机/观察空间（Camera/View Space）的时候，是在讨论以摄像机的视角作为场景原点时场景中所有的顶点坐标：观察矩阵把所有的世界坐标转换为相对于摄像机位置与方向的观察坐标。要定义一个摄像机，我们需要它在世界空间中的位置、观察的方向、一个指向它右侧的向量以及一个指向它上方的向量（我们实际上创建了一个三个三位轴相互垂直的、以摄像机的位置为原点的坐标系）。

摄像机/观察空间

  1. 摄像机位置

获取摄像机位置很简单。摄像机位置简单来说就是世界空间中一个指向摄像机位置的向量：

1
vec3 cameraPos = vec3(0.0f, 0.0f, 3.0f);
  1. 摄像机方向

下一个需要的向量是摄像机的方向，这里指的是摄像机指向哪个方向。现在我们让摄像机指向场景原点：(0, 0, 0)。如果将两个向量相减，我们就能得到这两个向量的差。用场景原点向量减去摄像机位置向量的结果就是摄像机的指向向量。由于我们知道摄像机指向z轴负方向，但我们希望方向向量指向摄像机的z轴正方向。所以我们交换相减的顺序，就可以获得一个指向摄像机正z轴方向的向量：

1
2
vec3 cameraTarget = vec3(0.0f, 0.0f, 0.0f);
vec3 cameraDirection = normalize(cameraPos - cameraTarget);     // normalize 标准化向量，返回一个方向相同但单位向量为1的向量

方向向量并不是最好的名字，因为它实际上指向从它到目标向量的相反方向。

  1. 右轴

我们需要的另一个向量是一个右向量，它代表摄像机空间的x轴的正方向。为获取右向量我们需要一个小技巧：先定义一个上向量。接下来把上向量和第二步得到的方向向量进行叉乘。两个向量叉乘的结果会同时垂直于两向量，因此我们会得到指向x轴正方向的那个向量（如果我们交换两个向量叉乘的顺序就会得到相反的指向x轴负方向的向量）：

1
2
vec3 up = vec3(0.0f, 1.0f, 0.0f);
vec3 cameraRight = normalize(cross(up, cameraDirection));       // cross 两个向量的向量积
  1. 上轴

现在我们已经有了x轴向量和z轴向量，获取一个指向摄像机的正y轴向量就相对简单了：我们把方向向量和右向量进行叉乘：

1
vec3 cameraUp = cross(cameraDirection, cameraRight);

在叉乘和一些小技巧的帮助下，我们创建了所有构成观察/摄像机空间的向量。使用这些摄像机向量我们就可以创建一个LookAt矩阵了，它在创建摄像机的时候非常有用。

Look At

使用矩阵的好处之一是如果使用3个互相垂直的轴定义了一个坐标空间，我们可以用这3个轴加一个平移向量来创建一个矩阵，并且可以用这个矩阵乘以任何向量来将其变换到那个坐标空间。这正是LookAt矩阵所做的，现在我们有了3个互相垂直的轴和一个定义摄像机空间的位置坐标，我们可以创建自己的LookAt矩阵了：

LookAt矩阵

其中R是右向量，U是上向量，D是方向向量，P是摄像机位置向量。注意，位置向量是相反的，因为我们最终希望把世界平移到我们自身一定的相反方向。把这个LookAt矩阵作为观察矩阵可以很高效地把所有世界坐标变换到刚刚定义的观察空间。LookAt矩阵就像它的名字表达的那样：它会创建一个看着（Look at）给定目标的观察矩阵。

幸运的是，GLM已经提供了这些支持。我们要做的只是定义一个摄像机位置，一个目标位置和一个表示世界空间中的上向量的向量（我们计算右向量使用的那个上向量）。接着GLM就会创建一个LookAt矩阵，我们可以把它当作我们的观察矩阵：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
// OpenGL ES 1.1
GLKMatrix4 view = gluLookAt(0.0f, 0.0f, 3.0f, 0.0f, 0.0f, 0.0f, 0.0f, 1.0f, 0.0f);

// GLKit
GLKMatrix4 view = GLKMatrix4MakeLookAt(0.0f, 0.0f, 3.0f, 0.0f, 0.0f, 0.0f, 0.0f, 1.0f, 0.0f);
``

# 裁剪空间

在一个顶点着色器运行的最后，OpenGL期望所有的坐标都能落在一个特定的范围内，且任何在这个范围之外的点都应该被裁剪掉（Clipped）。被裁剪掉的坐标就会被忽略，所以剩下的坐标就将变为屏幕上可见的片段。这也就是裁剪空间（Clip Space）名字的由来。
因为将所有可见的坐标都指定在-1.0到1.0的范围内不是很直观，所以我们会指定自己的坐标集（Coordinate Set）并将它变换回标准化设备坐标系，就像OpenGL期望的那样。
为了将顶点坐标从观察变换到裁剪空间，我们需要定义一个投影矩阵（Projection Matrix），它指定了一个范围的坐标，比如每个维度上的-1000到1000.投影矩阵接着会将在这个指定的范围内的坐标变换为标准化设备坐标的范围(-1.0, 1.0)。所有在范围外的坐标不会被映射到在-1.0到1.0的范围之间，所以会被裁剪掉。在上面这个投影矩阵所指定的范围内，坐标(1250, 500, 750)将是不可见的，这是由于它的x坐标超出了范围，它被转化为一个大于1.0的标准化设备坐标，所以被裁剪掉了。

> 如果只是图元，例如三角形的一部分超出了裁剪体积，则OpenGL会重新构建这个三角形为一个或多个三角形让其能够适合这个裁剪范围。

由投影矩阵创建的观察箱（Viewing Box）被称为**平截头体**（Frustum），每个出现在平截头体范围内的坐标都会最终出现在用户的屏幕上。将特定范围内的坐标转化到标准化设备坐标系的过程（而且它很容易被映射到2D观察空间坐标）被称之为投影，因为使用投影矩阵能将3D坐标投影到很容易映射到2D的标准化设备坐标系中。
一旦所有顶点被变换到裁剪空间，最终的操作--透视除法（Perspective Division）将会执行，在这个过程中我们将位置向量的x，y，z分量分别除以向量的齐次w分量；透视除法是将4D裁剪空间坐标转换为3D标准化设备坐标的过程。这一步会在每一个顶点着色器运行的最后被自动执行。
在这一阶段之后，最终的坐标将会被映射到屏幕空间中（使用`glViewport`中的设定），并被变换成片段。
将观察坐标变换为裁剪坐标的投影矩阵可以为两种不同的形式，每种形式都定义了不同的平截头体。我们可以选择创建一个正射投影矩阵（Orthographic Projection Matrix）或一个透视投影矩阵（Perspective Projection Matrix）。

## 正射投影

正射投影矩阵定义了一个类似立方体的平接头箱，它定义了一个裁剪空间，在这空间之外的顶点都会被裁剪掉。创建一个正射投影矩阵需要指定可见平截头体的宽、高和长度。在使用正射投影矩阵变换至裁剪空间之后处于这个平截头体的所有坐标将不会被裁剪掉。它的平截头体看起来像一个容器：

![正射投影](/img/article/20190825/2.png)

上面的平截头体定义了可见的坐标，它由宽、高、近（Near）平面和远（Far）平面所指定。任何出现在近平面之前或远平面之后的坐标都会被裁剪掉。正射平截头体直接将平截头体内部的所有坐标映射为标准化设备坐标，因为每个向量的w分量都没有进行改变；如果w分量等于1.0，透视除法则不会改变这个坐标。
要创建一个正射投影矩阵，我们可以使用`GLKit`中的方法：

``` objc
GLKMatrix4MakeOrtho(0.0, 800.0, 0.0, 600, 0.1, 100.0);

或OpenGL ES 1.1中的函数：

1
glOrthof(0.0, 800.0, 0.0, 600.0, 0.1, 100.0);

前两个参数指定了平截头体的左右坐标，第三和第四参数指定了平截头体的底部和顶部。通过这四个参数我们定义了近平面和远平面的大小，然后第五和第六个参数则定义了近平面和远平面的距离。这个投影矩阵会将处于这些x，y，z值范围内的坐标变换为标准化设备坐标。
正射投影矩阵直接将坐标映射到2D平面中，即屏幕中，但实际上一个直接的投影矩阵会产生不真实的结果，因为这个投影没有将透视（Perspective）考虑进去。

透视投影

我们都曾体验过实际生活中的一个场景，离我们越远的东西看起来更小。这个奇怪的效果称之为透视。透视的效果在我们看一条无限长的高速公路或铁路时尤其明显，正如下面图片显示的那样：

透视投影

正如所看到的那样，由于透视，这两条线在很远的地方看起来会相交。这正是透视投影想要模仿的效果，它是使用透视投影矩阵来完成的。这个投影矩阵将给定的平截头体范围映射到裁剪空间，除此之外还修改了每个顶点的w值，从而使得离观察者越远的顶点坐标w分量越大。被变换到裁剪空间的坐标都会在-w到w的范围之间（任何大于这个范围的坐标都会被裁剪掉）。OpenGL要求所有可见的坐标都落在-1.0到1.0范围内，作为顶点着色器最后的输出，一次，一旦坐标在裁剪空间内之后，透视除法就被会应用到裁剪空间坐标上：

透视除法

顶点坐标的每个分量都会除以它的w分量，距离观察者越远顶点坐标就会越小。这也是w分量非常重要的另一个原因，它能够帮助我们进行透视投影。最后的结果坐标就是处于标准化设备空间中的。

要创建一个透视投影矩阵，我们可以使用GLKit中的方法：

1
GLKMatrix4MakePerspective(GLKMathRadiansToDegrees(45), width/height, 0.1, 100.0);

同样，GLKMatrix4MakePerspective所做的其实就是创建了一个定义了可视空间的大平截头体，任何在这个平截头体以外的东西最后都不会出现在裁剪空间体积内，并且将会收到裁剪。一个透视平截头体可以被看作一个不均匀的箱子，在这个箱子内部的每个坐标都会被映射到裁剪空间上的一个点。下面是一张透视平截头体的图片：

透视平截头体

它的第一个参数定义了fov的值，它表示的是视野（Field of View），并且设置了观察空间的大小。如果想要一个真实的观察效果，它的值通常设置为45.0f，但想要一个末日风格的结果可以将其设置一个更大的值。第二个参数设置了宽高比，由视口的宽除以高所得。第三和第四个参数设置了平截头体的近和远平面。我们通常设置近距离为0.1f，而远距离设置为100.0f。所有在近平面和远平面且处于平截头体内的顶点都会被渲染。

当我们把透视矩阵的near值设置太大时（如10.0f），OpenGL会将靠近摄像机的坐标（在0。0f和10.0f之间）都裁剪掉，这会导致一个在游戏中很熟悉的视觉效果：在太过靠近一个物体的时候视线会直接传过去。

把它们都组合到一起

我们为上述的每一个步骤都创建了一个变换矩阵：模型矩阵、观察矩阵和投影矩阵。一个顶点坐标将会根据以下过程被变换到裁剪坐标：Vclip = Mprojectionp * Mview * Mmodel * Mlocal。
注意矩阵运算的顺序是相反的。最后的顶点应该被赋值到顶点着色器中的gl_Position，OpenGL将会自动进行透视除法和裁剪。

然后呢？
顶点着色器的输出要求所有的顶点都在裁剪空间内，这正是我们刚才使用变换矩阵所做的。OpenGL然后对裁剪坐标执行透视除法从而将它们变换到标准化设备坐标。OpenGL会使用glViewport内部的参数来标准化设备坐标映射到屏幕坐标，每个坐标都关联了一个屏幕上的点。这个过程称为视口变换。

举个例子

我们创建一个立方体，利用摄像机视角对其进行旋转拍摄，主要的矩阵变换代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
- (void)update {
    NSTimeInterval detalTime = self.timeSinceLastUpdate;
    self.elapsedTime += detalTime;
    
    float varyingFactor = (sin(self.elapsedTime) + 1) / 2.0;
    float aspect = self.view.frame.size.width / self.view.frame.size.height;

    GLKMatrix4 perspectiveMatrix = GLKMatrix4MakePerspective(GLKMathDegreesToRadians(45), aspect, 0.1, 100.0);  // 投影矩阵
    GLKMatrix4 cameraMatrix = GLKMatrix4MakeLookAt(0, 0, 5 * (varyingFactor + 1), 0, 0, 0, 0, 1, 0);    // 观察矩阵
    GLKMatrix4 rotateMatrix = GLKMatrix4MakeRotation(varyingFactor * M_PI * 2, 1, 1, 1);    // 模型矩阵
    self.projectionMatrix = GLKMatrix4Multiply(cameraMatrix, rotateMatrix);
    self.projectionMatrix = GLKMatrix4Multiply(perspectiveMatrix, self.projectionMatrix);
}

- (void)glkView:(GLKView *)view drawInRect:(CGRect)rect {
    
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
    glClearColor(0.0, 0.0, 0.0, 1.0);

    glUniformMatrix4fv(mvpMatrixlocation, 1, 0, self.projectionMatrix.m);
    
    glBindVertexArray(vao);
    glDrawElements(GL_TRIANGLES, 36, GL_UNSIGNED_SHORT, 0);
}

总结

这篇文章主要针对物体根据一系列的坐标系转换，最终转化为屏幕上最终的渲染产物过程中的坐标系转换的学习。