前言
此系列文章仅在记录和分享本人的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)
假设旋转到如图2所示，旋转角度记为
α
根据三角函数，我们可以将旋转后的点表示出来记为
A'(cos(α)，sin(α)), B'(-sin(α)，cos(α))
我们可以假设旋转矩阵
T：
则可以得到两个方程组
A' = T * A
B' = T * B
根据矩阵叉积的运算规则，可以得到4x4的矩阵T
接下来实现矩旋转的函数，我们先构造一个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.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))