A GLSL shader program splits into a vertex shader run per-vertex and a fragment shader run per-pixel

Every WebGL shader is two programs that run on the GPU in sequence. The vertex shader runs once for each vertex in a piece of geometry and determines where it gets drawn on the screen (via gl_Position). The fragment shader runs once for every pixel in that geometry and determines its color (via gl_FragColor). Data flows from vertex to fragment through ‘varying’ variables that are interpolated across the surface between vertices. Attributes carry per-vertex input; uniforms carry constants for the whole draw call, such as time or resolution. This pipeline underlies any custom visual effect.

Examples

// Vertex shader attribute vec3 aPosition; uniform mat4 uProjectionMatrix, uModelViewMatrix; void main() { gl_Position = uProjectionMatrix * uModelViewMatrix * vec4(aPosition, 1.0); } // Fragment shader void main() { gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); }

Assessment

Label each GLSL variable as attribute, uniform, or varying and say which shader stage(s) read it. Explain why varyings are interpolated across a triangle.