其他分享
首页 > 其他分享> > WebGPU学习(十):介绍“GPU实现粒子效果”

WebGPU学习(十):介绍“GPU实现粒子效果”

作者:互联网

最终渲染结果:

截屏2019-12-26上午9.38.33.png-26.9kB

为什么不在CPU端实现粒子效果?

虽然在CPU端实现会更灵活和可控,但如果粒子数量很大(如上百万),且与场景有交互,则最好在GPU端实现。

示例的实现思想

首先执行compute pass

代码如下:

  const numParticles = 1500;

  ...

  let t = 0;
  return function frame() {
    ...

    const commandEncoder = device.createCommandEncoder({});
    {
      const passEncoder = commandEncoder.beginComputePass();
      passEncoder.setPipeline(computePipeline);
      passEncoder.setBindGroup(0, particleBindGroups[t % 2]);
      passEncoder.dispatch(numParticles);
      passEncoder.endPass();
    }
    ...

    ++t;
  }

我们对这个pass进行分析:

particleBindGroups包含两个storage buffer:ParticlesA和ParticlesB

ParticlesA存储了上一帧所有粒子的数据。compute shader首先读取它,然后计算出下一帧所有粒子的数据,最好写到ParticlesB中。这样就打了一个ping-pong操作;

注:storage buffer在shader中可被读或写,而uniform buffer、vertex buffer等在shader中只能被读

dispatch到1500个instance,每个instance执行一次compute shader

compute shader计算每个粒子的数据时,需要遍历其它的所有粒子,计算相互的交互作用。

一共有1500个粒子,共需要计算15001500次。 如果在CPU端执行,只能串行计算,一共需要计算15001500次; 如果在GPU端执行,GPU有1500个instance,每个instance并行地计算1500次,因此一共只需要计算1500次,大大提高了效率。

然后执行render pass

代码如下:

  const numParticles = 1500;

  ...

  const renderPipeline = device.createRenderPipeline({
    ...
    vertexState: {
      vertexBuffers: [{
        // instanced particles buffer
        arrayStride: 4 * 4,
        stepMode: "instance",
        attributes: [{
          // instance position
          shaderLocation: 0,
          offset: 0,
          format: "float2"
        }, {
          // instance velocity
          shaderLocation: 1,
          offset: 2 * 4,
          format: "float2"
        }],
      }, {
        // vertex buffer
        arrayStride: 2 * 4,
        stepMode: "vertex",
        attributes: [{
          // vertex positions
          shaderLocation: 2,
          offset: 0,
          format: "float2"
        }],
      }],
    },
    ...
  });
  
  ...

  const vertexBufferData = new Float32Array([-0.01, -0.02, 0.01, -0.02, 0.00, 0.02]);
  const verticesBuffer = device.createBuffer({
    size: vertexBufferData.byteLength,
    usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
  });
  verticesBuffer.setSubData(0, vertexBufferData);
  
  ...

  return function frame() {
    ...

    const commandEncoder = device.createCommandEncoder({});
    ...
    {
      const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
      passEncoder.setPipeline(renderPipeline);
      //ParticlesB使用“instance”的stepMode,被设置到第一个vertex buffer中
      passEncoder.setVertexBuffer(0, particleBuffers[(t + 1) % 2]);
      //vertices buffer(包含3个顶点数据,每个顶点数据包含x坐标和y坐标)使用“vertex”的stepMode,被设置到第二个vertex buffer中
      passEncoder.setVertexBuffer(1, verticesBuffer);
      //draw一次,绘制1500个实例(使用ParticlesB的数据),其中每个实例有3个顶点(使用vertices buffer的数据)
      //注:每个粒子作为一个实例,由包含3个顶点的三角形组成
      passEncoder.draw(3, numParticles, 0, 0);
      passEncoder.endPass();
    }
    ...
  }

推荐学习资料

大家可以参考WebGPU-8,来学习示例的具体的代码。

虽然该文对应的示例代码的版本比较老(如它的示例中是1000个粒子,而不是1500个粒子),但与本文对应的最新版本基本上相同,而且它对示例代码分析得比较详细,所以推荐大家学习。

另外,大家可以通过Get started with GPU Compute on the Web,学习如何使用compute shader计算矩阵运算。

标签:...,粒子,buffer,WebGPU,instance,1500,GPU,passEncoder,const
来源: https://blog.51cto.com/u_7605937/2706299