batching - 为整个网格而不是每个顶点设置颜色

Question

我想优化顶点缓冲区的大小。目前我的 VBO 布局是:

x y | r g b a
它像这样被着色器使用:

struct VertexInput {
   @location(0) position: vec2<f32>,
   @location(1) color: vec4<f32>,
}

我将网格存储在缓冲区中，如下所示:|Mesh1|Mesh2|LargeMes​​h3|，因为我的网格是动态的。它在一个 drawCall 中渲染(好像叫做 Draw Call Batching)。

我想通过为每个网格而不是每个顶点设置不同的颜色来减少发送到 GPU 的数据。而且每个网格都不一样。我怎样才能实现它？

我正在画笔画:

Answer 1

我用 @trojanfoe 实现了它对多个 drawCalls 的帮助。我使用 stepMode: 'instance' 创建了第二个缓冲区并将颜色传递给它。布局:

vertex: {
   module: this.shaderModule,
   entryPoint: 'vertex',
   buffers: [
      {
         arrayStride: 2 * VBO_ARRAY.BYTES_PER_ELEMENT,
         stepMode: 'vertex',
         attributes: [
            {
               format: 'float32x2',
               offset: 0,
               shaderLocation: 0,
            },
         ],
      },
      {
         arrayStride: 4 * VBO_ARRAY.BYTES_PER_ELEMENT,
         stepMode: 'instance',
         attributes: [
            {
               format: 'float32x4',
               offset: 0,
               shaderLocation: 1,
            },
         ],
      },
   ],
}

添加到 renderPass:

pass.setVertexBuffer(0, this.vbo.buffer)
pass.setVertexBuffer(1, this.clrbo.buffer)

并按原样在着色器中使用:

struct VertexInput {
   @location(0) position: vec2<f32>,
   @location(1) color: vec4<f32>,
}
struct VSOutput {
   @builtin(position) position: vec4<f32>,
   @location(0) color: vec4<f32>,
}
@vertex
fn vertex(vert: VertexInput) -> VSOutput {
    var out: VSOutput;
    out.color = vert.color;
    ....
    return out;
}
@fragment
fn fragment(in: VSOutput) -> @location(0) vec4<f32> {
    return in.color;
}

但是，我不确定它是否适用于合并在一个缓冲区中并通过一次绘制调用渲染的多个网格。