WebGPU学习（十）：介绍“GPU实现粒子效果”

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

大家好，本文介绍了“GPU实现粒子效果”的基本思想，并推荐了相应的学习资料。

本文学习webgpu-samplers->computeBoids示例，它展示了如何用compute shader实现粒子效果，模拟鸟群的行为。

上一篇博文：

WebGPU学习（九）：学习“fractalCube”示例

下一篇博文：

WebGPU学习（十一）：学习两个优化：“reuse render command buffer”和“dynamic uniform buffer offset”

最终渲染结果：

为什么不在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个粒子，共需要计算1500 1500次。

如果在CPU端执行，只能串行计算，一共需要计算1500 1500次；

如果在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

webgpu-samplers Github Repo

正文