Multiple Attributes 🟢¶

With webgpu.hpp

Resulting code: step033

Vanilla webgpu.h

Resulting code: step033-vanilla

Vertices can contain more than just a position attribute. A typical example is to add a color attribute to each vertex. This will also show us how the rasterizer automatically interpolate vertex attributes across triangles.

Shader¶

Vertex input struct¶

You may have guessed that we can simply add a second argument to the vertex shader entry point vs_main, with a different @location WGSL attribute:

// We could do this, but there might be a lot of attributes
@vertex
fn vs_main(@location(0) in_position: vec2f, @location(1) in_color: vec3f) -> /* ... */ {
    // [...]
}

This works, but when the number of input attribute grows, we will prefer take instead a single argument whose type is a custom struct labeled with locations:

/**
 * A structure with fields labeled with vertex attribute locations can be used
 * as input to the entry point of a shader.
 */
struct VertexInput {
    @location(0) position: vec2f,
    @location(1) color: vec3f,
};

Our vertex shader thus only receive one single argument, whose type is VertexInput:

fn vs_main(in: VertexInput) -> /* ... */ {
    {{Vertex shader body}}
}

const char* shaderSource = R"(
{{Shader source}}
)";

{{Shader prelude}}

@vertex
{{Vertex shader}}

@fragment
{{Fragment shader}}

{{Define VertexInput struct}}

Forwarding vertex attribute to fragments¶

😐 But I don’t need the color in the vertex shader, I want it in the fragment shader. So can I do fn fs_main(@location(1) color: vec3f)?

Nope. The vertex attributes are only provided to the vertex shader. However, the fragment shader can receive whatever the vertex shader returns! This is where the structure-based approach becomes handy.

First of all, we change again the signature of vs_main to return a custom struct (instead of @builtin(position) vec4f):

fn vs_main(in: VertexInput) -> VertexOutput {
    //                         ^^^^^^^^^^^^ We return a custom struct
    {{Vertex shader body}}
}

Then we need to define this struct. We of course need the mandatory @builtin(position) attribute required by the rasterizer to know where on screen to draw the geometry. We also add a custom vertex shader output, which we name color and associate to e.g., location 0.

/**
 * A structure with fields labeled with builtins and locations can also be used
 * as *output* of the vertex shader, which is also the input of the fragment
 * shader.
 */
struct VertexOutput {
    @builtin(position) position: vec4f,
    // The location here does not refer to a vertex attribute, it just means
    // that this field must be handled by the rasterizer.
    // (It can also refer to another field of another struct that would be used
    // as input to the fragment shader.)
    @location(0) color: vec3f,
};

{{Define VertexOutput struct}}

Now we can change the arguments of the fragment shader entry point fs_main. Like for the vertex shader, we can directly label arguments:

// We can directly label arguments:
fn fs_main(@location(0) color: vec3f) -> @location(0) vec4f {
    //     ^^^^^^^^^^^^^^^^^^^^^^^^^ A new argument, with a location WGSL attribute
    {{Fragment shader body}}
}

Or we can use a custom struct whose fields are labeled… like the VertexOutput itself. It could be a different one, as long as we stay consistent regarding @location indices.

// Or we can use a custom struct whose fields are labeled
fn fs_main(in: VertexOutput) -> @location(0) vec4f {
    //     ^^^^^^^^^^^^^^^^ Use for instance the same struct as what the vertex outputs
    {{Fragment shader body}}
}

All there remains now is to connect the dots and return from the vertex shader the color needed by the fragment shader:

@vertex
fn vs_main(in: VertexInput) -> VertexOutput {
    var out: VertexOutput; // create the output struct
    out.position = vec4f(in.position, 0.0, 1.0); // same as what we used to directly return
    out.color = in.color; // forward the color attribute to the fragment shader
    return out;
}

@fragment
fn fs_main(in: VertexOutput) -> @location(0) vec4f {
    return vec4f(in.color, 1.0); // use the interpolated color coming from the vertex shader
}

// In vs_main()
var out: VertexOutput; // create the output struct
out.position = vec4f(in.position, 0.0, 1.0); // same as what we used to directly return
out.color = in.color; // forward the color attribute to the fragment shader
return out;

// In fs_main()
return vec4f(in.color, 1.0); // use the interpolated color coming from the vertex shader

Capabilities¶

There is a limit on the number of components that can be forwarded from vertex to fragment shader. In our case, we ask for 3 (float) components:

// There is a maximum of 3 float forwarded from vertex to fragment shader
requiredLimits.limits.maxInterStageShaderComponents = 3;

Conclusion¶

../../_images/color-attribute.png — Triangles with a color attribute (same result for both options).¶

Tip

I changed the background color (clearValue) to Color{ 0.05, 0.05, 0.05, 1.0 } to better appreciate the colors of the triangles.

renderPassColorAttachment.view = targetView;
renderPassColorAttachment.resolveTarget = nullptr;
renderPassColorAttachment.loadOp = LoadOp::Clear;
renderPassColorAttachment.storeOp = StoreOp::Store;
renderPassColorAttachment.clearValue = Color{ 0.05, 0.05, 0.05, 1.0 };
#ifndef WEBGPU_BACKEND_WGPU
renderPassColorAttachment.depthSlice = WGPU_DEPTH_SLICE_UNDEFINED;
#endif // NOT WEBGPU_BACKEND_WGPU

renderPassColorAttachment.view = targetView;
renderPassColorAttachment.resolveTarget = nullptr;
renderPassColorAttachment.loadOp = WGPULoadOp_Clear;
renderPassColorAttachment.storeOp = WGPUStoreOp_Store;
renderPassColorAttachment.clearValue = WGPUColor{ 0.05, 0.05, 0.05, 1.0 };
#ifndef WEBGPU_BACKEND_WGPU
renderPassColorAttachment.depthSlice = WGPU_DEPTH_SLICE_UNDEFINED;
#endif // NOT WEBGPU_BACKEND_WGPU

With webgpu.hpp

Resulting code: step033

Vanilla webgpu.h

Resulting code: step033-vanilla

Multiple Attributes 🟢¶

Shader¶

Vertex input struct¶

Forwarding vertex attribute to fragments¶

Capabilities¶

Vertex Buffer Layout¶

Option A: Interleaved attributes¶

Vertex Data¶

Layout and Attributes¶

Option B: Multiple buffers¶

Vertex Data¶

Buffers¶

Layout and Attributes¶

Render Pass¶

Conclusion¶