Vertex Processing

As we've seen, each vertex of a mesh may have several attributes:

The Vertex Processing stage converts these attributes into varyings.

A varying is a value, defined at the vertices, that varies over the area of a triangle by interpolation.

The most important varying is the screen coordinate of each vertex. The interpolation of these coordinates is what generates the surface of the triangle.

This simple example vertex shader takes position and color attributes as input.

uniform   mat4 projectionMatrix;
uniform   mat4 viewMatrix;
uniform   mat4 modelMatrix;

attribute vec4 vertexPosition;
attribute vec3 vertexColor;

varying   vec3 fragmentColor;

void main() {
    gl_Position = projectionMatrix * viewMatrix * modelMatrix * vertexPosition;
    fragmentColor = vertexColor;

Its applies model and projection transforms, giving position and color varyings as output.

Note, the position varying gl_Position is so important that it is pre-declared and its use is mandatory.

The Vertex Processing stage usually does more than this. It often computes the output color based on lighting parameters. We'll see examples of this soon.