Metal入门资料013-动画渲染技术
写在前面：
对Metal技术感兴趣的同学，可以关注我的专题:Metal专辑
也可以关注我个人的简书账号：张芳涛
所有的代码存储的Github地址是：Metal
正文
继续上一个图形的渲染，。使用我们上次工作的同一个playground，接下来我们需要让渲染的这副图形成为可动的动画（没错，会动的那种）。 为此，我们将再次使用uniforms。 我们在第6部分介绍了它们。
首先，在MetalView.swift文件的顶部，让我们创建一个名为timer的全局变量和一个数据缓冲区来保存它：
var timer: Float = 0
var timerBuffer: MTLBuffer!
接下来，在registerShaders（）里面我们要初始化缓冲区：
timerBuffer = device!.newBufferWithLength(sizeof(Float), options: [])
然后，我们需要创建一个update（）函数，它将增加计时器并将其新值发送到缓冲区：
func update() {
timer += 0.01
var bufferPointer = timerBuffer.contents()
memcpy(bufferPointer, &timer, sizeof(Float))
}
接下来，在我们将纹理设置为当前drawable的行的正下方的drawRect（）中，我们还需要在索引1处设置定时器缓冲区。然后我们还需要调用更新函数，因为drawRect（）每帧运行所以 当帧过时，计时器将具有更大的值：
commandEncoder.setBuffer(timerBuffer, offset: 0, atIndex: 1)
update()
然后，在Shaders.metal中，我们需要更新内核签名以包含计时器缓冲区：
kernel void compute(texture2d<float, access::write> output [[texture(0)]],
constant float &timer [[buffer(1)]],
uint2 gid [[thread_position_in_grid]])
替换下面的代码：
float2 cc = 1.1*float2( 0.5*cos(0.1) - 0.25*cos(0.2), 0.5*sin(0.1) - 0.25*sin(0.2) );
用下面的代码：
float2 cc = 1.1*float2( 0.5*cos(0.1*timer) - 0.25*cos(0.2*timer), 0.5*sin(0.1*timer) - 0.25*sin(0.2*timer) );
效果图：
效果图
接下来再添加一个鼠标交互的功能。 我们可以再次使用uniforms。 让我们的MetalView类符合NSWindowDelegate协议，以便我们可以使用它的鼠标方法。
public class MetalView: MTKView, NSWindowDelegate {
接下来，让我们再次创建一个名为pos的全局变量（用于定时器）和一个用于保存它的数据缓冲区。 我们现在可以覆盖mouseDown（）方法并使用坐标：
var mouseBuffer: MTLBuffer!
var pos: NSPoint!
override public func mouseDown(event: NSEvent) {
pos = convertPointToLayer(convertPoint(event.locationInWindow, fromView: nil))
let scale = layer!.contentsScale
pos.x *= scale
pos.y *= scale
}
正如您所注意到的那样，我们正在缩小坐标，从整个屏幕缩小到仅我们的MetalView大小，然后我们使用从视图层获得的比例因子更新坐标。 接下来，在registerShaders（）函数内部让我们初始化鼠标缓冲区：
mouseBuffer = device!.newBufferWithLength(sizeof(NSPoint), options: [])
现在回到update（）函数并在它的末尾添加这些行，这样我们就可以将当前鼠标坐标发送到缓冲区：
bufferPointer = mouseBuffer.contents()
memcpy(bufferPointer, &pos, sizeof(NSPoint))
接下来，在drawRect（）中，我们将鼠标缓冲区设置为索引2：
commandEncoder.setBuffer(mouseBuffer, offset: 0, atIndex: 2)
然后，在Shaders.metal中我们再次更新内核签名以包含鼠标缓冲区：
kernel void compute(texture2d<float, access::write> output [[texture(0)]],
constant float &timer [[buffer(1)]],
constant float2 &mouse [[buffer(2)]],
uint2 gid [[thread_position_in_grid]])
最后，我们更新以下代码：
float3 color = float3( dmin.w );
用如下的代码：
float3 color = float3(mouse.x - mouse.y);
我们在这里做的是通过将鼠标坐标传递给颜色变量来改变颜色的计算方式。 运行playground并单击各种视图区域，然后注意效果。 输出图像应如下所示：
效果图，变色是鼠标点击的结果
