写在前面：
对Metal技术感兴趣的同学，可以关注我的专题:Metal专辑
也可以关注我个人的简书账号：张芳涛
所有的代码存储的Github地址是：Metal
正文
上次我们描述了graphics pipeline(图形管道)和Metal pipeline(Metal管道)。 现在是时候我们更深入地观察管道，并了解顶点如何在较低的层次上真正处理。 为此，我们需要学习一些比如transformations的3D math(3D)数学概念。
在3D graphics(3D图形)的世界中，我们通常根据3或4维来考虑我们的数据。 正如你从上一集中记得的，location(位置)和color(颜色)都是vector_float4（4维）类型。 为了在屏幕上绘制3D几何图形，顶点会遭受一系列变换 - 从object space(物体空间)到world space(世界空间)，然后到camera/eye space(相机/眼睛空间)，然后到clipping space(裁剪空间)，然后到normalized device coordinates(标准化的设备坐标)空间，最后到screen space(屏幕空间)。 我们只看这个剧集的第一阶段。
我们triangle(三角形)的顶点用object space(物体空间)（局部坐标）表示。 他们目前指定了位于屏幕中心的三角形原点。 为了在更大的场景（世界空间）中定位和移动三角形，我们需要对这些顶点应用transformations(变换)。 我们将看到的transformations(转换)是：scaling(缩放)，translation(平移)和rotation(旋转)。
translation matrix(平移矩阵)类似于identity matrix(单位矩阵)（其主对角线上的值为1）以及位置[12]，[13]和[14]（column-major order(按照列排序)，它们等同于[3]，[ 7]和[11]位置）填充了一个D向量的值，该D向量表示顶点将移动到各个x，y，z轴上的距离。
| 1 0 0 Dx |
| 0 1 0 Dy |
| 0 0 1 Dz |
| 0 0 0 1 |
scaling matrix(缩放矩阵)也类似于identity matrix(单位矩阵)，其中位置[0]，[5]和[10]用表示顶点将被放大/缩小的比例的S向量的值填充。x，y，z向量值通常是相同的浮点值，因为在所有轴上按比例进行缩放。
| Sx 0 0 0 |
| 0 Sy 0 0 |
| 0 0 Sz 0 |
| 0 0 0 1 |
rotation matrix(旋转矩阵)也类似于identity matrix(单位矩阵)，其中取决于我们正在旋转哪个轴，不同的位置正在用我们旋转的角度的sinus(正弦)或cosinus(余弦)填充。 如果我们围绕x轴旋转，则会填充位置[5]，[6]，[9]和[10]。 如果我们围绕y轴旋转，则填充位置[0]，[2]，[8]和[10]。 最后，如果我们围绕z轴旋转，则填充位置[0]，[1]，[4]和[5]。 请记住，这些职位需要转换为按列排序。
| 1 0 0 0 |
| 0 cos -sin 0 |
| 0 sin cos 0 |
| 0 0 0 1 |
| cos 0 sin 0 |
| 0 1 0 0 |
| -sin 0 cos 0 |
| 0 0 0 1 |
| cos -sin 0 0 |
| sin cos 0 0 |
| 0 0 1 0 |
| 0 0 0 1 |
我们有足够的数学知识----得需要一周的时间来消化掉，所以让我们把这些矩阵加入到代码中。 我们将继续第3部分之后的代码。它适用于我们创建一个名为Matrix的结构体，它将包含这些transformations(转换)：
struct Matrix {
var m: [Float]
init() {
m = [1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1
]
}
func translationMatrix(var matrix: Matrix, _ position: float3) -> Matrix {
matrix.m[12] = position.x
matrix.m[13] = position.y
matrix.m[14] = position.z
return matrix
}
func scalingMatrix(var matrix: Matrix, _ scale: Float) -> Matrix {
matrix.m[0] = scale
matrix.m[5] = scale
matrix.m[10] = scale
matrix.m[15] = 1.0
return matrix
}
func rotationMatrix(var matrix: Matrix, _ rot: float3) -> Matrix {
matrix.m[0] = cos(rot.y) * cos(rot.z)
matrix.m[4] = cos(rot.z) * sin(rot.x) * sin(rot.y) - cos(rot.x) * sin(rot.z)
matrix.m[8] = cos(rot.x) * cos(rot.z) * sin(rot.y) + sin(rot.x) * sin(rot.z)
matrix.m[1] = cos(rot.y) * sin(rot.z)
matrix.m[5] = cos(rot.x) * cos(rot.z) + sin(rot.x) * sin(rot.y) * sin(rot.z)
matrix.m[9] = -cos(rot.z) * sin(rot.x) + cos(rot.x) * sin(rot.y) * sin(rot.z)
matrix.m[2] = -sin(rot.y)
matrix.m[6] = cos(rot.y) * sin(rot.x)
matrix.m[10] = cos(rot.x) * cos(rot.y)
matrix.m[15] = 1.0
return matrix
}
func modelMatrix(var matrix: Matrix) -> Matrix {
return matrix
}
}
我们来看看这段代码。 我们首先创建一个struct(结构体)并声明一个浮点类型的数组。 然后我们为它提供一个初始化器，它是identity matrix(单位矩阵)（对角线上的所有的值都是1）。 接下来，我们创建变换矩阵。 最后，我们创建一个modelMatrix，它将所有转换组合到一个输出矩阵中。
为了进行这些转换工作，我们需要通过shader(着色器)将它们发送到GPU。 为了做到这一点，我们首先需要创建一个新的缓冲区。 我们把它命名为uniform_buffer。 当我们想要将数据发送到整个模型而不是每个顶点时，Uniforms就是我们可以使用的构造。 只有通过使用Uniforms来节省空间并发送包含所有转换的最终model matrix才有意义。 所以在我们的MetalView类的一开始，创建新的缓冲区：
var uniform_buffer: MTLBuffer!
在createBuffers（）函数内部，为缓冲区分配内存，足以容纳4x4矩阵：
uniform_buffer = device!.newBufferWithLength(sizeof(Float) * 16, options: [])
let bufferPointer = uniform_buffer.contents()
memcpy(bufferPointer, Matrix().modelMatrix(Matrix()).m, sizeof(Float) * 16)
在endToGPU（）函数内部，在命令编码器中设置vertex_buffer之后，还要设置uniform_buffer：
command_encoder.setVertexBuffer(uniform_buffer, offset: 0, atIndex: 1)
最后，让我们转到Shaders.metal进行配置的最后部分。 在Vertex结构体下面，创建一个名为Uniforms的结构，它将保存我们的模型矩阵：
struct Uniforms {
float4x4 modelMatrix;
};
修改vertex shader(顶点着色器)以包含我们从CPU传来的转换：
vertex Vertex vertex_func(constant Vertex *vertices [[buffer(0)]],
constant Uniforms &uniforms [[buffer(1)]],
uint vid [[vertex_id]])
{
float4x4 matrix = uniforms.modelMatrix;
Vertex in = vertices[vid];
Vertex out;
out.position = matrix * float4(in.position);
out.color = in.color;
return out;
}
我们在这里所做的只是将uniforms作为第二个参数（缓冲区），然后将模型矩阵与顶点相乘。 如果您现在运行该应用程序，您将看到一个三角形，占据整个视图的空间。
我们将其缩小至原始尺寸的四分之一。 将此行添加到modelMatrix函数中：
matrix = scalingMatrix(matrix, 0.25)
再次运行应用程序，注意现在三角形变小了：
接下来，让我们通过将它向上移动一半的屏幕大小来在y轴上平移三角形：
matrix = translationMatrix(matrix, float3(0.0, 0.5, 0.0))
再次运行应用程序，注意三角现在比以前更高：
最后，让我们围绕z轴旋转三角形：
matrix = rotationMatrix(matrix, float3(0.0, 0.0, 0.1))
再次运行应用程序，注意三角形现在也旋转了：
