WebGPU如何仅用顶点缓冲区实现按三角形而非顶点着色

要实现每个三角形仅传递一次颜色且不使用Uniform/Storage缓冲区，核心思路是利用WebGPU的实例化绘制+实例属性，将三角形颜色作为实例数据存储在Vertex Buffer中，让GPU为每个三角形（实例）仅读取一次颜色值，避免顶点颜色重复设置。

具体实现步骤 #

1. 组织顶点与实例颜色数据 #

将顶点位置数据和每个三角形的颜色数据存入同一个（或分开的）Vertex Buffer，其中颜色数据对应每个实例（三角形）：

// 顶点位置：2个三角形，每个3个顶点（可复用顶点减少数据量，这里为直观展示分开写）
const positions = new Float32Array([
  // 三角形1
  -0.5, 0.5,
  -0.5, -0.5,
  0.5, -0.5,
  // 三角形2
  0.5, 0.5,
  -0.5, 0.5,
  0.5, -0.5,
]);

// 实例颜色：每个三角形对应1个颜色，共2个颜色
const triangleColors = new Float32Array([
  1.0, 0.0, 0.0, // 三角形1：红色
  0.0, 1.0, 0.0, // 三角形2：绿色
]);

// 合并数据到一个缓冲区（也可分开创建两个Vertex Buffer）
const combinedData = new Float32Array(positions.length + triangleColors.length);
combinedData.set(positions);
combinedData.set(triangleColors, positions.length);

// 创建Vertex Buffer
const vertexBuffer = device.createBuffer({
  size: combinedData.byteLength,
  usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
});
device.queue.writeBuffer(vertexBuffer, 0, combinedData);

2. 配置顶点输入布局 #

关键是为颜色属性设置stepMode: 'instance'，让GPU每绘制一个实例（三角形）读取一次颜色：

const vertexBufferLayouts = [
  // 顶点位置属性：每个顶点读取一次
  {
    attributes: [{
      shaderLocation: 0,
      offset: 0,
      format: 'float32x2',
    }],
    arrayStride: 2 * 4, // 每个顶点占8字节（2个float）
    stepMode: 'vertex',
  },
  // 实例颜色属性：每个实例读取一次
  {
    attributes: [{
      shaderLocation: 1,
      offset: positions.byteLength, // 颜色数据在缓冲区的起始偏移
      format: 'float32x3',
    }],
    arrayStride: 3 * 4, // 每个实例颜色占12字节（3个float）
    stepMode: 'instance',
  },
];

3. 编写着色器 #

顶点着色器接收顶点位置和实例颜色，将颜色传递给片元着色器直接输出：

@vertex
fn vertexShader(
  @location(0) position: vec2f,
  @location(1) triangleColor: vec3f
) -> struct Output {
  @builtin(position) clipPos: vec4f,
  @location(0) color: vec3f
} {
  var output: Output;
  output.clipPos = vec4f(position, 0.0, 1.0);
  output.color = triangleColor;
  return output;
}

@fragment
fn fragmentShader(@location(0) color: vec3f) -> @location(0) vec4f {
  return vec4f(color, 1.0);
}

4. 实例化绘制 #

调用draw方法时指定实例数量（等于三角形数量），GPU会自动为每个实例绑定对应的颜色：

// 在渲染 pass 中执行绘制
pass.setPipeline(renderPipeline);
pass.setVertexBuffer(0, vertexBuffer); // 绑定顶点位置缓冲区
pass.setVertexBuffer(1, vertexBuffer); // 绑定实例颜色缓冲区（若分开则传对应缓冲区）
pass.draw(3, 2); // 每个实例3个顶点，共2个实例（三角形）

关键注意事项 #

• 确保Vertex Buffer的usage包含GPUBufferUsage.VERTEX，否则无法作为顶点数据使用
• 顶点输入布局的offset和arrayStride必须与实际数据字节数匹配，避免数据错位
• 实例数量需与颜色数据的数量严格对应，否则会出现颜色错乱或绘制异常

内容的提问来源于stack exchange，提问作者Teamur