Types of Shaders

This is not an exhaustive list, primarily relating to WebGL/GLSL.

Vertex Shaders

Vertex shaders are used for manipulating coordinates in 3D space, then projecting that 3D output onto a 2D screen. Vertex shaders are called once per vertex.

The purpose of the vertex shader is to set up the gl_Position variable — this is a special, global, and built-in GLSL variable. gl_Position is used to store the position of the current vertex.

Everything inside void main() will be executed by the vertex shader.

Fragment Shaders

Fragment shaders are the other main type of shader, and are also known as texture shaders. This gives you some insight into what they are for. Fragment shaders define RGBA values for each pixel being processed. A single fragment shader is called once per pixel.

The calculations result in a variable containing the information about the RGBA color. This result is stored in a global variable called gl_FragColor, similar to gl_Position

Compute Shaders

Compute shaders are not part of the normal rendering pipeline. Instead, they are designed to perform arbitrary (general-purpose) computing tasks on the GPU. They can handle a wide range of tasks that do not involve rendering, such as physics calculations, simulations, or non-graphics computations.

When using WebGL, you’re almost entirely working with vertex shaders and fragment shaders, but you do have access to compute shaders as well

TLDR

• Vertex shaders set up the position of a vertex by manipulating the gl_Position variable, and are called once per vertex. It’s like the “billboard” of where the shader will run. * Fragment shaders set up the gl_FragColor` global variable and are called once per pixel.