CODEWITHSUNDEEP
batchingwebgpuwgpu-rs
FoxPro
FoxPro

Reputation: 2325

Set color for the whole mesh but not every vertex

I want to optimize size of vertex buffer. Currently my layout for VBO is:

x y | r g b a
It's consumed by shader like this:

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

And I'm storing mesh in buffer like this: |Mesh1|Mesh2|LargeMesh3|, because my meshes are dynamic. It's being rendered in one drawCall (seems like it's called Draw Call Batching).

I want to reduce sent data to GPU by setting different color for every mesh, not every vertex. And every mesh is different. How can I achive it?

I'm drawing strokes: enter image description here

Upvotes: 3

Views: 180

Answers (1)

FoxPro
FoxPro

Reputation: 2325

I achieved it with @trojanfoe's help with multiple drawCalls. I created second buffer with stepMode: 'instance' and passed colors to it. Layout:

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,
            },
         ],
      },
   ],
}

Added to renderPass:

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

And used in shader as is:

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;
}

However, I'm not sure it will work with multiple meshes merged in one buffer and rendered with one draw call.

Upvotes: 2

Related Questions