Special shader effects are crucial to create breathtaking visual effects, in movies as well as in games.
We are not quite there yet, obviously, but in this quick tutorial we will write two simple shader effects to get used to
the High-Level Shading language.
Creating a Triangle
To create a triangle, remember that we need a buffer to hold the vertices:
The triangle (a small triangle with the top vertex being yellow, the bottom left being green and the bottom right being
red) and buffer are initialized in the initGraphics() method:
And to draw the triangle, we obviously have to change the render() function:
Using the standard shader from the previous tutorials, we get the following image:
Note that in the rasterizer stage, the colours of each pixel on the screen are interpolated from the colours of the
three vertices of the triangle.
Inverting Colours
As a first effect, we will invert the colours of each vertex. To do that, the vertex shaders sets the colour of each
vertex to 1.0f (maximal value) minus the actual vertex colour:
The same effect could be achieved by inverting the colours of each pixel, but obviously that is a lot more work than
simply changing three vertices:
Cold Colours
Colours are divided into what are called warm and cold colors, the yellow and red being termed warm, and the blue cold.
Thus, an easy way to produce cold colours, is to maximize the value of blue for each vertex colour (shudders):
Okay, enough about colours! What about positioning?
Big Fat Triangles
If triangles eat too much, they get fat, just like humans. This is called scaling and can be achieved by simply
multiplying the x and y-coordinates of each vertex by a number bigger than 1:
To shrink triangles, it is enough to simply multiply the x and y-coordinates by a number smaller than 1.
Obviously those effects can also be combined, this is a fat triangle with inverted colours:
Now, that wasn’t difficult at all! In the next tutorial, we will review our knowledge of constant buffers, i.e. the
manipulation of shader data.