本系列文章是对 http://metalkit.org 上面MetalKit内容的全面翻译和学习.
上一次我们了解了graphics pipeline图形管线和Metal pipelineMetal管线.这次我们更深入地学习管线,并理解顶点是如何在底层被处理.为此,我们需要学习一点儿3D math 3D数学概念比如transformations变换.
在3D graphics 3D图形世界中,我们经常以3维或4维来考虑我们的数据.上一节中,location和color都是vector_float4(4维)类型.为了在屏幕上绘制3D几何体,顶点经历了一系列变换-从object space物体空间到world space世界空间,接着到camera/eye space摄像机/视点空间, 再到clipping space裁剪空间, 到 normalized device coordinates space规格化设备坐标空间, 最终到了screen space屏幕空间. 本节我们只关注第一个阶段.
我们三角形的顶点是以object space物体空间(本地坐标系)表示的.它们指定的三角形原点在屏幕的中心.为了在更大的空间(世界坐标系)放置和移动三角形,我们需要transformations变换这些顶点.我们关注的transformations变换是: scaling缩放, translation平移和rotation旋转.
translation matrix平移矩阵类似于identity matrix单位矩阵(主对角线上是1的矩阵),但在[12], [13]和[14]位置(在列主序矩阵中它们相当于[3],[7]和[11])上存放着向量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单位矩阵但根据旋转轴不同,旋转角度的正弦或余弦存放的位置也会不同.如果是绕x轴旋转,则存放在[5],[6], [9]和[10]位置上.如果是绕y轴旋转,则存放在[0],[2], [8]和[10]位置上.是绕z轴旋转,则存放在[0],[1], [4]和[5]位置上.请牢记,这些位置需要被转置为column-major order列主序.
| 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 |
好了,我已经有了足够的数学知识来应付本周的内容了,让我们把这些数学公式用到代码里面吧.我们从第三部分part 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
}
}
让我们讲解一下这个代码.我们首先创建一个结构体并声明一个数组存放浮点数.然后提供一个初始化方法,返回单位矩阵(对角线上都是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)
在sendToGPU()函数里,在设置vertex_buffer到command encoder命令编码器后,也设置一下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作为第2个参数(缓冲器),并将模型矩阵乘以顶点.如果现在你运行应用,你将看到我们的三角形还是老样子,占据了视图的整个空间.
让我们缩放它到原始尺寸的四分之一.在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))
再运行应用,可以看到三角形也旋转了:
下周我们终于可以开始绘制3D物体(例如立方体或球体)了,源代码source code 已发布在Github上.
下次见!
