home/ atoms/ webgpu-vertex-fragment-pipeline-stages

The vertex shader transforms each vertex to clip space; the rasterizer then runs the fragment shader once per covered pixel

GPU rendering has two programmable stages separated by fixed-function rasterization. The vertex shader receives vertex data, transforms it into clip-space position, and runs once per vertex. The GPU then rasterizes the resulting triangles — determining which pixels are covered — and runs the fragment shader once per covered pixel to compute its color. Values output by the vertex shader (inter-stage variables) are automatically interpolated across the triangle’s surface and received by the fragment shader. Vertex and fragment shaders run in massively parallel fashion; each invocation sees only its own data.

Examples

A 6-vertex quad (2 triangles) causes 6 vertex shader invocations; a 512×512 canvas fully covered by that quad produces ~262,144 fragment shader invocations per frame. A value of 0 at one vertex and 1 at another produces 0.5 at their midpoint in the fragment shader.

Assessment

A triangle has vertex shader color outputs of red, green, blue at its three corners. What color appears at the centroid, and why? How many vertex shader invocations does a 1000-triangle mesh require?

“GPU takes all the triangles made up by these transformed vertices and determines”
corpus · your-first-webgpu-app-google-codelab · chunk 3