JS `WebGPU` `Render Passes` `Load/Store` 操作与 `Subpasses` 渲染优化

各位观众老爷们，掌声在哪里！欢迎来到今天的WebGPU技术脱口秀，我是你们的老朋友，代码界的郭德纲，今天咱们聊聊WebGPU的Render Passes，Load/Store操作，以及Subpasses渲染优化。保证各位听完，功力大增，Bug退散！

开场白：Render Passes是什么鬼？

首先，咱们要搞清楚什么是Render Passes。简单来说，Render Pass就像一个大舞台，你可以在上面安排各种演员（渲染管线），让他们表演各种节目（渲染操作）。每个节目都有自己的剧本（Shader），灯光（颜色附件），道具（深度/模板附件）等等。

更学术一点的说法，Render Pass定义了一组渲染操作，它指定了渲染目标（颜色附件，深度/模板附件）以及如何处理这些渲染目标的内容。

Render Passes的Load/Store操作：舞台剧的开场和谢幕

既然Render Pass是个舞台，那每个节目都有开场和谢幕。在WebGPU里，开场就是loadOp，谢幕就是storeOp。这两个操作决定了Render Pass开始前如何加载渲染目标的内容，以及Render Pass结束后如何保存渲染目标的内容。

• loadOp：开场前的准备

  loadOp有三种取值：

  • "load"：加载渲染目标之前的内容。就像演员上台前，舞台上已经摆好了道具。这意味着你需要保留之前的渲染结果。
  • "clear"：清除渲染目标的内容。就像演员上台前，把舞台上的东西都扫干净。你需要从一片空白开始渲染。
  • "discard"：丢弃渲染目标之前的内容。就像演员上台前，直接把舞台上的东西扔掉，反正也不需要了。这通常用于优化，如果你不在乎之前的渲染结果。

• storeOp：谢幕后的处理

  storeOp有两种取值：

  • "store"：保存渲染目标的内容。就像演员表演完，把舞台上的道具都收好，以便下次使用。你需要保留这次的渲染结果。
  • "discard"：丢弃渲染目标的内容。就像演员表演完，把舞台上的道具都扔掉，反正也不需要了。这通常用于优化，如果你不需要保留这次的渲染结果。

代码说话：一个简单的Render Pass

让我们看一个简单的例子：

const colorTexture = device.createTexture({
  size: { width: 512, height: 512, depthOrArrayLayers: 1 },
  format: 'rgba8unorm',
  usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING,
});

const colorTextureView = colorTexture.createView();

const renderPassDescriptor = {
  colorAttachments: [
    {
      view: colorTextureView,
      loadOp: 'clear',
      storeOp: 'store',
      clearValue: { r: 0.0, g: 0.0, b: 0.0, a: 1.0 }, // 设置清除颜色
    },
  ],
};

const commandEncoder = device.createCommandEncoder();
const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);

// 在这里进行渲染操作 (例如 passEncoder.draw(), passEncoder.dispatch() 等)

passEncoder.end();
device.queue.submit([commandEncoder.finish()]);

在这个例子中：

• 我们创建了一个rgba8unorm格式的纹理作为渲染目标。
• loadOp设置为"clear"，表示在Render Pass开始前，我们会清除纹理的内容，并将其填充为clearValue指定的颜色（黑色）。
• storeOp设置为"store"，表示在Render Pass结束后，我们会保存纹理的内容。

Load/Store操作的性能考量：省钱才是王道

选择合适的loadOp和storeOp可以显著提高性能。

• 如果你的Render Pass需要依赖之前的渲染结果，那么loadOp必须设置为"load"。但是，"load"操作可能会比较耗时，因为它需要从内存中读取数据。
• 如果你的Render Pass不需要依赖之前的渲染结果，那么loadOp可以设置为"clear"或"discard"。"discard"通常比"clear"更快，因为它不需要写入任何数据。
• 如果你的Render Pass的渲染结果不需要保留，那么storeOp可以设置为"discard"。"discard"操作可以避免将数据写回内存，从而提高性能。

Subpasses：舞台上的分幕剧

现在，让我们来聊聊Subpasses。Subpasses就像Render Pass这个大舞台上的分幕剧。一个Render Pass可以包含多个Subpasses，每个Subpass可以访问相同的渲染目标。

Subpasses的主要优点是：

• 延迟渲染（Deferred Rendering）：可以将渲染过程分成多个阶段，例如，先渲染几何体信息到多个纹理，然后再根据这些纹理进行光照计算。
• 多重采样抗锯齿（MSAA）：可以在一个Subpass中进行多重采样，然后在另一个Subpass中解析多重采样缓冲区。
• 优化内存访问：Subpasses可以利用本地内存，减少对全局内存的访问。

Subpasses的输入和输出：幕间休息，道具传递

Subpasses之间可以通过输入附件（input attachments）传递数据。一个Subpass可以将渲染结果写入一个纹理，然后另一个Subpass可以将这个纹理作为输入附件进行读取。

代码说话：一个简单的Subpasses例子

const colorTexture = device.createTexture({
  size: { width: 512, height: 512, depthOrArrayLayers: 1 },
  format: 'rgba8unorm',
  usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.INPUT_ATTACHMENT,
});

const colorTextureView = colorTexture.createView();

const renderPassDescriptor = {
  colorAttachments: [
    {
      view: colorTextureView,
      loadOp: 'clear',
      storeOp: 'store',
      clearValue: { r: 0.0, g: 0.0, b: 0.0, a: 1.0 },
    },
  ],
  depthStencilAttachment: { // 可选的深度模板附件
    view: depthTextureView,
    depthLoadOp: 'clear',
    depthStoreOp: 'store',
    stencilLoadOp: 'clear',
    stencilStoreOp: 'store',
    depthClearValue: 1.0,
    stencilClearValue: 0,
  },
  subpasses: [
    {
      colorAttachments: [
        {
          attachmentIndex: 0, // 对应 renderPassDescriptor.colorAttachments 的索引
          resolveTarget: null, // 如果使用 MSAA，则指定解析目标
        },
      ],
      inputAttachments: [], // 第一个 subpass 通常没有输入附件
    },
    {
      colorAttachments: [
        {
          attachmentIndex: 0,
          resolveTarget: null,
        },
      ],
      inputAttachments: [
        {
          attachmentIndex: 0, // 对应 renderPassDescriptor.colorAttachments 的索引
          shaderLocation: 0, // 在 shader 中使用的 location
        },
      ],
    },
  ],
};

const commandEncoder = device.createCommandEncoder();
const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);

// 第一个 subpass
passEncoder.setSubpass(0);
// 设置 pipeline, bind group, draw call 等

// 第二个 subpass
passEncoder.nextSubpass();
// 设置 pipeline, bind group, draw call 等 (使用 input attachment)

passEncoder.end();
device.queue.submit([commandEncoder.finish()]);

在这个例子中：

• 我们定义了两个Subpasses。
• 第一个Subpass将渲染结果写入colorTexture。
• 第二个Subpass将colorTexture作为输入附件，并在Shader中通过@location(0)访问。

Shader代码：Input Attachment的用法

在Shader中，你可以使用textureLoad函数来读取输入附件的内容。

@group(0) @binding(0) var s: sampler;
@group(0) @binding(1) var t: texture_2d<f32>; // 常规纹理

@group(0) @binding(2) var<input> inputTexture: texture_2d<f32>; // 输入附件纹理, 必须指定 var<input>

struct VertexOutput {
  @builtin(position) position : vec4f,
  @location(0) uv : vec2f,
};

@vertex
fn vertexMain(@builtin(vertex_index) vertexIndex : u32) -> VertexOutput {
  var pos : array<vec2f, 6> = array(
      vec2f( -0.5, -0.5 ), vec2f(  0.5, -0.5 ), vec2f(  0.5,  0.5 ),
      vec2f( -0.5, -0.5 ), vec2f(  0.5,  0.5 ), vec2f( -0.5,  0.5 )
  );

  var uvs : array<vec2f, 6> = array(
      vec2f( 0.0, 1.0 ), vec2f(  1.0, 1.0 ), vec2f(  1.0,  0.0 ),
      vec2f( 0.0, 1.0 ), vec2f(  1.0,  0.0 ), vec2f( 0.0,  0.0 )
  );

  var output : VertexOutput;
  output.position = vec4f(pos[vertexIndex], 0.0, 1.0);
  output.uv = uvs[vertexIndex];
  return output;
}

@fragment
fn fragmentMain(@location(0) uv : vec2f) -> @location(0) vec4f {
  // 从输入附件中读取颜色
  let colorFromInputAttachment : vec4f = textureLoad(inputTexture, vec2i(uv * vec2f(512.0, 512.0)), 0);
  let colorFromTexture: vec4f = textureSample(t,s,uv);

  return colorFromInputAttachment + colorFromTexture;
}

在这个Shader中，我们声明了一个texture_2d<f32>类型的inputTexture变量，并使用textureLoad函数从它读取颜色。注意，inputTexture变量必须使用var<input>关键字声明。@group(0) @binding(2) 对应着bindgroup的设置。

Render Pass 与 Subpass配置表：一目了然

特性	Render Pass	Subpass
定义	一组渲染操作	Render Pass中的一个渲染阶段
渲染目标	颜色附件、深度/模板附件	共享Render Pass的渲染目标
数据传递	通过纹理或缓冲区	通过输入附件（Input Attachments）在Subpass之间传递
Load/Store操作	控制渲染目标在Pass开始和结束时的行为	Render Pass级别的Load/Store操作应用于所有Subpass
多重采样抗锯齿(MSAA)	可以通过resolveTarget在Render Pass结束时解析	可以在Subpass内部进行MSAA，并解析到Render Pass的颜色附件
性能优化	减少Draw Call，优化内存访问	延迟渲染，优化内存访问，减少带宽消耗

实际应用场景：让你的程序跑得更快

• 延迟渲染：可以使用Subpasses将渲染过程分成多个阶段，例如，先渲染几何体信息到多个纹理，然后再根据这些纹理进行光照计算。
• 后处理效果：可以使用Subpasses将渲染结果传递给后处理Shader，例如，添加Bloom效果，色彩校正等。
• 移动端优化：在移动端设备上，内存带宽非常宝贵。使用Subpasses可以减少对全局内存的访问，从而提高性能。

总结：WebGPU的舞台艺术

总而言之，Render Passes和Subpasses是WebGPU中非常重要的概念。理解它们的原理和用法，可以帮助你编写出更高效、更灵活的渲染程序。记住，选择合适的loadOp和storeOp，以及合理地使用Subpasses，可以显著提高你的程序的性能。

好了，今天的脱口秀就到这里。希望各位观众老爷们喜欢！下次再见！