Real-Time 3D Graphics with WebGL 2 - Second Edition

Fragment Shader

Every set of three vertices defines a triangle. Each element on the surface of that triangle needs to be assigned a color. Without this, our surfaces wouldn't have a color. Each surface element is called a fragment. Since we are dealing with surfaces that will be displayed on your screen, these elements are more commonly known as pixels.

The main goal of the fragment shader is to calculate the color of individual pixels. The following diagram illustrates this idea: