Set color for the whole mesh but not every vertex - batching

Question

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:

Answer 1

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.