Metal学习笔记 (二) 三角形渐变色及简单变换

前言

此系列文章仅在记录和分享本人的Metal学习过程，如有错误欢迎指正。

本文源码：
填充渐变色
三角形简单变换

iOS 13.5
Xcode 11.5
swift 5

此篇文章基于Metal学习笔记 (一) 绘制三角形，分为两个部分

• p1 为绘制的三角形填充渐变色
• p2 三角形简单的变换 (旋转, 平移，缩放)

正文

p2 需要运到简单的线性代数知识，为了提高阅读体验可以先自行复习矩阵的运算

1 - 为三角形填充渐变色

上一节已经在屏幕上绘制出了一个三角形，现在需要为其填充颜色，为了达到效果，需要知道三角形的坐标(position)以及颜色(color)，所以要构造出的数据结构如下

struct Vertex {
    var position: vector_float4 // (x, y, z, w)
    var color: vector_float4  // (r, g, b, a)
}

第一节中我们使用三维坐标(x, y, z)来表示顶点信息，在着色器代码中转化为齐次坐标，而现在我们直接在position变量中生成齐次坐标(x, y, z, w)，在着色器代码中就可以省略转化的过程

数据源

        let vertexData: [Vertex] = [Vertex(position: [0.0,  1.0,  0.0, 1.0], color: [1, 0, 0, 1]),
                                    Vertex(position: [-1.0, -1.0, 0.0, 1.0], color: [0, 1, 0, 1]),
                                    Vertex(position: [1.0,  -1.0, 0.0, 1.0], color: [0, 0, 1, 1])]

下一步需要修改着色器代码 (.metal)，同理也要再着色器代码中创建一个对应的结构体Vertex

struct Vertex {
    float4 position [[position]];
    float4 color;
};

因为顶点着色器vertex返回的是Vertex结构体，所以需要用[[position]]来向编译器表明是用float4 position作为顶点信息，而不是float4 color,如果vertex函数返回的是float4则不用声明

修改顶点着色器及片段着色器

vertex Vertex vertex_shader(constant Vertex *v [[buffer(0)]],
                            uint vid[[vertex_id]])
{
    return v[vid];
}

fragment float4 fragment_shader(Vertex v [[stage_in]])
{
    return v.color;
}

运行代码，我们可以看到一个漂亮的渐变色三角形。

2 - 三角形的简单变换

• 绕z轴旋转
  对三角形旋转，可以理解为对三角形内的每个像素旋转

这里我们可以推导一下旋转的公式
如下图1，有单位正方形，取两个点 A(1, 0), B(0, 1)

1.png
假设旋转到如图2所示，旋转角度记为α
2.png
根据三角函数，我们可以将旋转后的点表示出来记为A'(cos(α)，sin(α)), B'(-sin(α)，cos(α))
我们可以假设旋转矩阵T：
T.png

则可以得到两个方程组
A' = T * A
B' = T * B
根据矩阵叉积的运算规则，可以得到4x4的矩阵T

T'.png

接下来实现矩旋转的函数，我们先构造一个4x4的单位矩阵

class Matrix {
    
    var m: [Float]
    
    init() {
        m = [1, 0, 0, 0,
             0, 1, 0, 0,
             0, 0, 1, 0,
             0, 0, 0, 1]
    }
}

扩展Matrix为其添加绕Z周旋转的方法

    func rotationZ(_ r: Float) -> Matrix {
        m[0] = cos(Float.pi / (180.0 / r))
        m[1] = sin(Float.pi / (180.0 / r))
        m[4] = (-1) * sin(Float.pi / (180.0 / r))
        m[5] = cos(Float.pi / (180.0 / r))
        return self
    }

着色器部分代码需要新增Uniforms结构体，来保存旋转矩阵

struct Uniforms {
    float4x4 modelMatrix;
};

vertex Vertex vertex_shader(constant Vertex *v [[buffer(0)]],
                            constant Uniforms &un [[buffer(1)]],
                            uint vid [[vertex_id]])
{
    float4x4 matrix = un.modelMatrix;
    Vertex in = v[vid];
    Vertex out;
    out.position = matrix * in.position;
    out.color = in.color;
    return out;
}

因为需要把新增加的旋转矩阵也发送到GPU，所以要新建一个新的MTLBuffer对象，其buffer为一个绕z轴旋转90度的旋转矩阵

        let mat = Matrix().rotationZ(90)
        uniformBuffer = device?.makeBuffer(bytes: mat.m,
                                           length: MemoryLayout<Float>.size * 16,
                                           options: [])

最后设置顶点缓冲, index参数对应着色器函数中[[buffer(1)]]

re?.setVertexBuffer(uniformBuffer, offset: 0, index: 1)

至此已完成三角形绕z轴旋转，运行代码可以看到相应效果

• 平移 缩放
  平移与缩放可以用同样的方法计算出相应的平移矩阵和缩放矩阵，代码如下：

    func translationMatrix(_ position: vector_float3) -> Matrix {
        m[12] = m[12] + position.x
        m[13] = m[13] + position.y
        m[14] = m[14] + position.z
        return self
    }
    
    func scalingMatrix(_ scale: Float) -> Matrix {
        m[0] = m[0] * scale
        m[5] = m[5] * scale
        m[10] = m[15] * scale
        return self
    }

调用

        // 缩小为原 0.5 倍
        let sMat = Matrix().scalingMatrix(0.5)
        
        // x y轴分别移动 0。5
        let tMat = Matrix().translationMatrix(vector_float3(0.5, 0.5, 0))