74. Modifying the vertex shader

It’s time we tried changing the vertex shader. That’s why it’s there.

First, I want to share Ignatz’s rule for writing code in a language you know nothing about

Wherever possible, steal an existing line of code that works

That’s going to be a little hard when we are given so few lines of code to start with, but the Shader Lab contains the code for about 15 shaders, and some of them have a lot of code that you can steal (and learn) from.

Flipping an image

First, let’s try flipping an image, so we get a mirror image. Try this in the Shader Lab, in your own custom shader. Our objective is to get the Codea logo to be a mirror image.

The easiest way to flip the image is to change all the texture positions so OpenGL draws from right to left instead of from left to right. You should remember the texture positions are all fractions between 0 and 1, where 0 is at the left (or bottom), and 1 as at the right (or top). If we subtract the x value from 1, therefore, we will get the result we want, because a position of 0,0 (bottom left) will be changed to 1,0 (bottom right), and vice versa.

So let’s look in main…this is the line we want to change

    vTexCoord=texCoord;

We just want to flip the x value. So maybe this works

    texCoord.x=1 - texCoord.x  //change the x value
    vTexCoord=texCoord;

Well, you have two errors already. One is that texCoord is an input and can’t be changed. The other is that texCoord contains fractional (float) values, which can’t be mixed with integers, so you need to use 1. or 1.0.

So we try this instead

    vTexCoord = vec2(1.-texCoord.x,texCoord.y);

This defines a new vec2 (which is what vTexCoord expects), and gives it 1 – the x value, and the y value.

This works, and should flip the logo to a mirror image in the Shader Lab.
http://instagram.com/p/aAU3-WhHd2/

Now see what happens if you also flip the y value in the same way….

What would you use this for? Suppose you have an image pointing one way, and you want to be able to point it the other way. Now you only need one image to do that.

Getting the parts of a vector variable

Note how we used texCoord.x and texCoord.y to get the two values in texCoord. OpenGL is quite fussy about this.

For vec2 variables, you use x,y, while for vec4, you can use x,y,z,w and for colour vec4 variables, r,g,b,a. OpenGL can’t tell whether a vec4 is for position or colour, so you can use either x,y,z,w or r,g,b,a with a vec4, but it’s better to use whichever fits best.

OpenGL also has a really cool feature where you can do this kind of thing
someColor.rgb = someColor.grb; //swaps r and g value
someVector.xy = someVector.xy * 1.5; //multiplies x and y values by 1.5

These are the kind of tricks you learn by looking at the code for the built in shaders, which is included in the Shader Lab.

Next we’ll look at the fragment shader, which has much more potential for change.