当前位置：首页 > news >正文

WebGPU 中的缓冲区输入速率：逐顶点与逐实例模式详解

news 来源：原创 2025/5/8 4:05:58

在 WebGPU 编程中，缓冲区的输入速率（Input Rate） 是一个关键概念，它决定了顶点缓冲区中的数据如何被 GPU 读取和分配给顶点或实例。理解输入速率对于实现高效的渲染管线至关重要，尤其是在处理复杂场景或大量对象时。本文将深入探讨 WebGPU 中的缓冲区输入速率，包括其含义、使用场景以及实际代码示例。

什么是缓冲区输入速率？

缓冲区的输入速率通过 stepMode 字段配置，定义了数据在 GPU 中的访问模式。WebGPU 支持两种输入速率：

逐顶点模式 (stepMode: "vertex")
数据按顶点步进，即每个顶点读取一次数据。这是默认模式，适用于传统的逐顶点属性（如位置、法线、UV 等）。
逐实例模式 (stepMode: "instance")
数据按实例步进，即每个实例读取一次数据。适用于实例化渲染（Instanced Rendering），例如绘制大量相同物体（如树木、子弹），但每个实例有不同的属性（如位置、颜色、缩放等）。

逐顶点模式 (`stepMode: "vertex"`)

含义

在逐顶点模式下，缓冲区中的数据按顶点步进。每个顶点都会从缓冲区中读取自己的数据。例如，绘制一个包含 100 个顶点的模型时，每个顶点都会从缓冲区中读取自己的位置、颜色等信息。

典型场景

逐顶点模式适用于存储每个顶点的独立数据，例如：

顶点位置
顶点法线
顶点 UV 坐标

代码示例

const vertexBufferLayout = [{
  arrayStride: 12, // 每个顶点占 12 字节（float32x3）
  stepMode: "vertex", // 默认值，可省略
  attributes: [{
    format: "float32x3",
    offset: 0,
    shaderLocation: 0, // 对应着色器中的 @location(0)
  }],
}];

逐实例模式 (`stepMode: "instance"`)

含义

在逐实例模式下，缓冲区中的数据按实例步进。每个实例的所有顶点共享同一份数据。例如，绘制 1000 个实例时，每个实例的所有顶点共享同一份实例数据（如模型矩阵、颜色等）。

典型场景

逐实例模式适用于存储每个实例的独立数据，例如：

实例位置
实例颜色
实例缩放

代码示例

const instanceBufferLayout = [{
  arrayStride: 16, // 每个实例占 16 字节（float32x4）
  stepMode: "instance",
  attributes: [{
    format: "float32x4",
    offset: 0,
    shaderLocation: 1, // 对应着色器中的 @location(1)
  }],
}];

输入速率的核心作用

输入速率 (stepMode) 决定了数据在 GPU 中的访问模式：

逐顶点模式 ("vertex")：
数据在每个顶点着色器调用时更新一次。例如，绘制一个包含 100 个顶点的模型时，每个顶点都会从缓冲区中读取自己的数据。
逐实例模式 ("instance")：
数据在每个实例的首次顶点着色器调用时更新一次，并在该实例的所有顶点间共享。例如，绘制 1000 个实例时，每个实例的所有顶点共享同一份实例数据。

实例化渲染的完整流程

以下是一个结合两种输入速率的实例化渲染示例：

步骤 1：定义缓冲区布局

const pipelineLayout = device.createRenderPipeline({
  vertex: {
    buffers: [
      // 顶点数据（逐顶点）
      {
        arrayStride: 12, // float32x3 (位置)
        stepMode: "vertex",
        attributes: [{ format: "float32x3", offset: 0, shaderLocation: 0 }],
      },
      // 实例数据（逐实例）
      {
        arrayStride: 16, // float32x4 (颜色)
        stepMode: "instance",
        attributes: [{ format: "float32x4", offset: 0, shaderLocation: 1 }],
      },
    ],
  },
  // ... 其他管线配置
});

步骤 2：绑定缓冲区

// 顶点缓冲区（逐顶点）
renderPass.setVertexBuffer(0, positionBuffer); // slot 0

// 实例缓冲区（逐实例）
renderPass.setVertexBuffer(1, colorBuffer); // slot 1

步骤 3：绘制调用

// 绘制 100 个顶点，重复 1000 次（实例）
renderPass.draw(100, 1000); // (顶点数, 实例数)

着色器中的访问

// 顶点着色器
@vertex
fn vs_main(
  @location(0) position: vec3f, // 来自逐顶点缓冲区
  @location(1) color: vec4f     // 来自逐实例缓冲区
) -> /* ... */ {
  // 所有该实例的顶点共享同一个 color 值
}