Metal入门资料006-图像处理基础知识讲解

写在前面:

对Metal技术感兴趣的同学,可以关注我的专题:Metal专辑
也可以关注我个人的账号:张芳涛
所有的代码存储的Github地址是:Metal

正文

上次我们描述了graphics pipeline(图形管道)和Metal pipeline(Metal管道)。 现在是时候我们更深入地观察管道,并了解顶点如何在较低的层次上真正处理。 为此,我们需要学习一些比如transformations3D math(3D)数学概念。

3D graphics(3D图形)的世界中,我们通常根据34维来考虑我们的数据。 正如你从上一集中记得的,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向量的值填充。xyz向量值通常是相同的浮点值,因为在所有轴上按比例进行缩放。

| 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作为第二个参数(缓冲区),然后将模型矩阵与顶点相乘。 如果您现在运行该应用程序,您将看到一个三角形,占据整个视图的空间。

Metal入门资料006-图像处理基础知识讲解_第1张图片

我们将其缩小至原始尺寸的四分之一。 将此行添加到modelMatrix函数中:

matrix = scalingMatrix(matrix, 0.25)

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

Metal入门资料006-图像处理基础知识讲解_第2张图片

接下来,让我们通过将它向上移动一半的屏幕大小来在y轴上平移三角形:

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

再次运行应用程序,注意三角现在比以前更高:

Metal入门资料006-图像处理基础知识讲解_第3张图片

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

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

再次运行应用程序,注意三角形现在也旋转了:

Metal入门资料006-图像处理基础知识讲解_第4张图片

你可能感兴趣的:(Metal入门资料006-图像处理基础知识讲解)