[MetalKit]40-Working-with-Particles-in-Metal-part2粒子系统2

本系列文章是对 metalkit.org 上面MetalKit内容的全面翻译和学习.

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,你会看到粒子像水流一样落下:

还有一个更加高效的方式来在GPU上渲染粒子.我们将在下次学习.我想要感谢Caroline的宝贵支持.

源代码source code已发布在Github上.

下次见!