Metal入门资料006-MetalKit第五部分
写在前面:
对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))
再次运行应用程序,注意三角形现在也旋转了: