[MetalKit]Using MetalKit part 5使用MetalKit5

本系列文章是对 http://metalkit.org 上面MetalKit内容的全面翻译和学习.

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个参数(缓冲器),并将模型矩阵乘以顶点.如果现在你运行应用,你将看到我们的三角形还是老样子,占据了视图的整个空间.

chapter05_1.png

让我们缩放它到原始尺寸的四分之一.在modelMatrix函数添加一行:

matrix = scalingMatrix(matrix, 0.25)

再运行应用,注意到三角形现在变小了:

chapter05_2.png

接下来,让我们沿y轴正方向平移三角形,向上移动半个屏幕的高度:

matrix = translationMatrix(matrix, float3(0.0, 0.5, 0.0))

再运行应用,注意到三角形现在比以前高了:

chapter05_3.png

最后,让我们绕z轴旋转三角形:

matrix = rotationMatrix(matrix, float3(0.0, 0.0, 0.1))

再运行应用,可以看到三角形也旋转了:

chapter05_4.png

下周我们终于可以开始绘制3D物体(例如立方体或球体)了,源代码source code 已发布在Github上.
下次见!