本系列文章是对 http://metalkit.org 上面MetalKit内容的全面翻译和学习.
上次我们学了如何在着色器中用距离函数直接创建一个粒子物体.并可以根据时间来移动物体.但是,如果我们要使用顶点,那就需要在CPU上定义粒子,并发送顶点数据到GPU.我们还是使用上次3D渲染中用过的playground文件,从创建一个Particle结构体开始,创建在我们metal视图代理类中:
struct Particle {
var initialMatrix = matrix_identity_float4x4
var matrix = matrix_identity_float4x4
var color = float4()
}
接着,我们创建一个粒子数组及一个缓冲器来保存数据.这里我们还是给每个粒子漂亮的蓝色及一个随机的起始位置:
particles = [Particle](repeatElement(Particle(), count: 1000))
particlesBuffer = device.makeBuffer(length: particles.count * MemoryLayout<Particle>.stride, options: [])!
var pointer = particlesBuffer.contents().bindMemory(to: Particle.self, capacity: particles.count)
for _ in particles {
pointer.pointee.initialMatrix = translate(by: [Float(drand48()) / 10, Float(drand48()) * 10, 0])
pointer.pointee.color = float4(0.2, 0.6, 0.9, 1)
pointer = pointer.advanced(by: 1)
}
注意:我们将
x坐标除以10来让粒子聚集在很窄的水平范围内,同时我们将y坐标乘以10来达到相反的效果--让它们在竖直方向上散开些.
下一步,是创建一个球体来作为粒子的网格:
let allocator = MTKMeshBufferAllocator(device: device)
let sphere = MDLMesh(sphereWithExtent: [0.01, 0.01, 0.01], segments: [8, 8], inwardNormals: false, geometryType: .triangles, allocator: allocator)
do { model = try MTKMesh(mesh: sphere, device: device) }
catch let e { print(e) }
接下来,我们需要一个更新函数来让粒子在屏幕上动起来.在这个函数里,我们让计时器每帧增长0.01,并根据计时器的值来更新y坐标--创建一种类似下落的运动:
func update() {
timer += 0.01
var pointer = particlesBuffer.contents().bindMemory(to: Particle.self, capacity: particles.count)
for _ in particles {
pointer.pointee.matrix = translate(by: [0, -3 * timer, 0]) * pointer.pointee.initialMatrix
pointer = pointer.advanced(by: 1)
}
}
此时,我们已经准备好在draw方法中来调用这个函数并将数据发送到GPU了:
update()
let submesh = model.submeshes[0]
commandEncoder.setVertexBuffer(model.vertexBuffers[0].buffer, offset: 0, index: 0)
commandEncoder.setVertexBuffer(particlesBuffer, offset: 0, index: 1)
commandEncoder.drawIndexedPrimitives(type: .triangle, indexCount: submesh.indexCount, indexType: submesh.indexType, indexBuffer: submesh.indexBuffer.buffer, indexBufferOffset: 0, instanceCount: particles.count)
在Shaders.metal文件中,我们有一个结构体对应进入和退出的顶点,还有一个给粒子实例使用:
struct VertexIn {
float4 position [[attribute(0)]];
};
struct VertexOut {
float4 position [[position]];
float4 color;
};
struct Particle {
float4x4 initial_matrix;
float4x4 matrix;
float4 color;
};
这个顶点着色器使用instance_id属性,我们可以用这个属性来给一个球体创建许多实例,这个球体正是我们在顶点缓冲器的索引0中发送到GPU的那个.我们接着给每一个实例赋值一个位置,这个位置是在缓冲器的索引1中存储并发送到GPU的.
vertex VertexOut vertex_main(const VertexIn vertex_in [[stage_in]],
constant Particle *particles [[buffer(1)]],
uint instanceid [[instance_id]]) {
VertexOut vertex_out;
Particle particle = particles[instanceid];
vertex_out.position = particle.matrix * vertex_in.position ;
vertex_out.color = particle.color;
return vertex_out;
}
最后,在片段着色器中,我们返回我们在顶点着色器中传递过来的颜色:
fragment float4 fragment_main(VertexOut vertex_in [[stage_in]]) {
return vertex_in.color;
}
如果你运行app,你会看到粒子像水流一样落下:
particles.gif
还有一个更加高效的方式来在GPU上渲染粒子.我们将在下次学习.我想要感谢Caroline的宝贵支持.
源代码source code已发布在Github上.
下次见!
