Explain the roles of vertex and fragment shaders in WebGL

WHAT THIS TESTS: This question probes whether you understand the fixed pipeline stages of WebGL and how the GPU parallelizes work. Interviewers want to see that you know vertex shaders handle geometry while fragment shaders handle rasterization output, and that you are aware of the built-in variables gl_Position and gl_FragColor.

A GOOD ANSWER COVERS: First, the vertex shader runs once per vertex and its primary responsibility is transforming vertex coordinates into clip space by writing to the built-in GLSL variable gl_Position. It typically processes attributes like vertex positions, normals, and texture coordinates, and can accept uniforms like transformation matrices. Second, the fragment shader runs once per pixel fragment and its primary responsibility is determining the final color by writing to the built-in GLSL variable gl_FragColor. It typically processes interpolated varyings from the vertex stage, plus uniforms for textures or lighting parameters. Third, mention that shaders execute on the GPU not the CPU, which offloads computation and enables massive parallelization. Fourth, note that GLSL is strongly typed and uses vectors and matrices heavily.

COMMON WRONG ANSWERS: A major red flag is swapping the two stages, such as saying the vertex shader sets pixel colors or the fragment shader moves geometry. Another red flag is claiming shaders can directly access the DOM, JavaScript variables, or CPU memory without using the WebGL API to pass attributes, uniforms, or textures. Saying that shaders are written in JavaScript rather than GLSL is also a serious error. A subtler mistake is forgetting that fragment shaders operate on interpolated fragments, not raw vertices.

LIKELY FOLLOW-UPS: The interviewer may ask how data flows from JavaScript into the shader via buffers and attributes, or how varyings interpolate across a triangle. They might ask about the difference between attributes and uniforms, or what happens after the vertex shader before the fragment shader, namely primitive assembly, rasterization, and interpolation. They may also ask how to pass a texture coordinate from vertex to fragment stage using a varying.

ONE CONCRETE EXAMPLE: Imagine rendering a textured cube. The vertex shader takes a vec3 position attribute and a vec2 texCoord attribute, multiplies the position by a model-view-projection matrix uniform, writes the result to gl_Position, and passes texCoord to the fragment shader through a varying. The fragment shader receives the interpolated texCoord, samples a sampler2D uniform texture, and writes the sampled vec4 color to gl_FragColor. The vertex shader runs 8 times for the 8 cube corners, while the fragment shader runs once for every pixel covering the cube faces, which could be thousands of times.

Source: developer.mozilla.org