Varyings

You may need to read the previous article about attributes in order to understand this one.

The final way to pass data to the GPU is with varyings.

Varyings are variables that vary between each vertex. They are outputs from vertex shaders and inputs to fragment shaders.

#version 300 es

in vec4 a_color;

/*
Varyings are outputs from vertex shaders. The naming
convention for varyings is camelCase prefixed by "v_".
*/
out vec4 v_color;

void main() {
	v_color = a_color;
	gl_Position = vec4(0, 0, 0, 0);
}

#version 300 es

precision highp float;

// Varyings are inputs to fragment shaders.
in vec4 v_color;

out vec4 outColor;

void main() {
	outColor = v_color;
}

Once WebGL starts to rasterize a primitive, the value of the varying is interpolated between the values set on each vertex of that primitive.

The next article is about transformation.