GLSL

OpenGL Shading Language (GLSL) is the shader language used in OpenGL and WebGL.

Note that there are multiple versions of OpenGL such as 3, 4, ES

Usage

Vertex Shader

In the vertex shader, you position vertices by projecting them from object coordinates to camera coordinates.
This is typically done by multiplying each vertex position, passed as an attribute, with the MVP matrices, passed as a uniform.

Oftentimes you will also want to pass the UV coordinates to the fragment shader as a varying.

Fragment Shader

In the fragment shader, you will typically sample a base color and apply lighting to your object. Sampling is typically done with texture2D which returns an interpolated and mipmaped color from your sampler2D texture.

Pipeline

See OpenGL Rendering Pipeline Overview

Vertex Shader

In the vertex shader, your inputs are a model matrix, view matrix, and projection matrix uniforms as well as one vertex position in local coordinates.
There may also be attributes which are per-vertex values such as UVs.

Your vertex shader program is run once per each vertex of a mesh.
The goal of the vertex shader is to output a position in screen coordinates.
Typically this is done by multiplying with the model matrix to get world coordinates, then the view matrix to get camera coordinates, and finally the projection matrix to get screen coordinates.

You can also do any other per-vertex calculations in this stages.
These values can be passed to the following stages as varying's.
varying's are linearly interpolated using barycentric coordinates.

Tesselation Shader

This is an optional shader which can be used to dynamically upsample your triangles using subdivision. It typically runs once per triangle.

Geometry Shader

This is an optional shader which can be used to generate or remove triangles. It typically runs once per point, line, or triangle.

The outputs are typically new vertices and new triangles.

Fragment Shader

This shader outputs pixel color values based on information stored in each triangle.
It runs once per pixel.

Resources

Reference cards

• OpenGL 4.5 Reference card
• OpenGL ES 2.0 Reference card
• OpenGL ES 3.1 Reference card
• WebGL 1.0 Reference card
• WebGL 2.0 Reference card