73. Shaders – the basic vertex shader

In this post, we’ll look at the basic vertex shader, and learn a little about the shader language.

I can’t talk about pipes forever. At some point, I have to show you actual code and explain it.

But I’m not going to give a course on the OpenGL language. I’m simply going to explain what’s there, just the minimum you need to know to work with this stuff.

I’d like to start in the Shader Lab. To find it, go to the main Codea screen where you select projects, press the little square at upper left of screen, and you should find the Shader Lab. Select it, and press Documents, then Create New Shader, and give it some name.

You should now be looking at this code, in a tab labelled Vertex

//
// A basic vertex shader
//

//This is the current model * view * projection matrix
// Codea sets it automatically
uniform mat4 modelViewProjection;

//This is the current mesh vertex position, color and tex coord
// Set automatically
attribute vec4 position;
attribute vec4 color;
attribute vec2 texCoord;

//This is an output variable that will be passed to the fragment shader
varying lowp vec4 vColor;
varying highp vec2 vTexCoord;

void main()
{
    //Pass the mesh color to the fragment shader
    vColor = color;
    vTexCoord = texCoord;

    //Multiply the vertex position by our combined transform
    gl_Position = modelViewProjection * position;
}

So now, I’m going to quickly explain some of the strange stuff you see there.

• Comments are prefixed with // rather than —
• All code lines must end with a semi-colon ;

.
And if you look at the bottom…

• The actual code is in the main function, with { } around it
• The main function is like Codea’s setup function, and will always run first
• The main function doesn’t have the prefix of function, as in Codea
• The word void in front of main just means it doesn’t return any values when it’s done

.
If we change anything in the vertex shader, it will largely be inside the main function.

Now if you look back at all the lines above the main function, these lines define all the input and output variables we will be using in our code. You must define them before using them.

The last word on each line is the name of the variable, so what are all the prefixes – uniform, attributes, varying, lowp, highp, mat4, vec2, and vec4? That’s a lot of prefixes for just three lines of code in main! But don’t worry, they are quite logical.

These prefixes tell OpenGL three things

1. Precision (number of decimals). There are three options, highp, mediump, and lowp, you can guess their meaning. If you don’t specify one, the default is highp. All that matters for now is that you can completely ignore it, because nothing we will do requires any special accuracy.

2. Variable type. If you’ve done other programming, you will be used to specifying whether a variable is an integer, a number with decimals, a string, an array etc. Codea spoils us by mostly figuring it all out for itself. OpenGL requires us to define variables exactly, but they are pretty obvious.
   vec2 = vec2 as in Codea, eg vec2(3,4)
   vec4 = vec4 as in Codea
   bool = boolean (true or false)
   int = integer
   float = number with decimals
   sampler2D = same as an image in Codea
   mat2 = 2×2 table (mat3 and mat4 are 3×3 and 4×4 tables)

So you must include one of these for any variable you add.

I’ll mention one gotcha that is sure to fool you (it’s got me several times already). Any variable defined as a float must contain a decimal in any numbers used with it, so instead of saying d=1, you need to say d=1.0 or just d=1. otherwise it won’t work.

1. What are you doing here? OpenGL needs to know what your variable is for. There are three possible reasons for a variable being in this shader.

(a) attribute – is an input which provides information about this particular vertex, ie its value will be different for each vertex. Obvious examples are position, color and texture position, and you’ll see them all in the code above. These inputs are automatically provided by Codea for each vertex.

(b) uniform – is also an input, but one which doesn’t vary for each vertex. For example, the blend shader defines a second image to blend with the usual mesh texture, and that same image will be used for all vertices, so it is uniform. There is only one above, modelViewProjection, and we won’t talk about that, it is part of the 3D black box.

(c) varying – it provides vertex information that will be used to interpolate the individual pixels. There are two of these, vColor and vTexCoord, and if you look in main, you’ll see that they are given values. So basically these are outputs.

So let’s look at a few of the variables to see if we can figure out their definitions.

    attribute vec4 color

So color is a vec4 (r,g,b,a) and an attribute, which means it is an input, and different for each vertex, which is what we’d expect.

    varying highp vec2 vTexCoord;

vTexCoord is a high precision vec2. We can guess from the name that this holds the x,y position of the texture image that applies to this vector. It is also varying, which means it is an output.

You’ll notice there is a similar variable, texCoord, which is defined as an attribute, and that vTexCoord is made equal to texCoord in main. What all this says is that Codea provides us with an input vec2 called texCoord, and we assign it to an output called vTexCoord, for use in interpolating pixels. The output name has the prefix v, for obvious reasons.

So we come back to the fact that all this shader does, is take the position, texture and color information (from attribute input variables) and assign them, unchanged, to (varying) output variables. Basically, it does nothing.

It is up to us to change that.