Lesson 2: The first shader

In this lesson, we will take our first steps in actually programming a shader. This will also include a first introduction to the shader language GLSL, its datatypes, and constructs. Finally, you will create your first shader, which you can then check out right away. Let's go!

1. GLSL - The GL Shading Language

When the first shading processors where introduced, developers had to write their shaders in pure assembler. Nowadays, a couple of standard languages have been developed to make programming shaders clear and simple. Beside CG from Nvidia and HLSL from Microsoft, there's GLSL from the GL ARB (Architectures Review Board). It's closely related to C and a part of the OpenGL 2.0 standard. This has the big advantage that no external compiler is needed to compile the sourcecode, because it's included in the OpenGL implementation.

A Typical Shader

The following code snippet shows a typical GLSL vertex shader, which is saved into a file. Vertex shaders normally have the extension .vert, where pixel shader use .frag:

[flat_wave.vert]
	uniform float time;

	void main(void)
	{
		vec4 v = vec4(gl_Vertex);
		v.z = sin(5.0 * v.x + time * 0.01) * 0.25;
		gl_Position = gl_ModelViewProjectionMatrix * v;
	}

This above listing shows the shader's close similarity to C. Every shader needs a function void main(void), which takes fragment texturing and coloring stage a parameter, nor returns one.

Inside the shader, all sorts of computations can be performed and variables read or written. In addition to the standard datatypes: bool, int, and float, there are types for vectors, matrices, and textures.

Working with these datatypes alleviates some of the restrictions of C and is very intuitive. For example, it's possible to multiply matrices with vectors or other matrices. Dealing with vectors, on a whole, has been simplified.

Vectors

Vectors are initialized by their constructors. The constructors accept single values (scalars), as well as vectors or a combination of both. The vector elements are initialized in the order of the given scalars and/or vectors. If a vector is constructed using a single scalar, all its fields are assigned the same value.

The fields of a vector are either selected, using the traditional bracked operator [] or using the dot operator. The developer is free to choose any of the aliases .r, .g, .b or .a for colors (instead of the indicies 0, 1, 2, 3), .x, .y, .z, .w for space coordinates, or .s, .t, .p, .q for texture coordinates. It's even possible to access multiple fields at once, by using a sequence of the characters mentioned above. The following snippet shows what code taking advantage of these extended features looks like:

	vec3 position = vec3(1.0, 2.0, 3.0);
	vec4 color = vec4(position, 3.0);
	vec4 white = vec4(1.0);
	
	float xPos = position[0];
	float yPos = position.y;
	vec2 redalpha = color.ra;
	vec2 doublePos = position.xyxy;
	color.r = 0.75;
		
	struct dirlight {
		vec3 direction;
		vec3 color;
	};
	
	dirlight d1;
	dirlight d2 = dirlight(vec3(1.0,1.0,0.0), vec3(0.8,0.8,0.4));

Control structures

Except for the switch statement, all common control structures, like if, and else, for, and while can be used.
On older graphic boards, attention must be paid to the while loop. The compiler needs to be able to unroll the loop, this means that the number of interations has to be determined at compile time. Therefore, dependencies on (non-constant) variables are not allowed.

Predefined functions

GLSL provides a wide range of predefined functions. Besides the trigonometric functions, sin(float) and cos(float), there are functions like dot(float) from linear algebra.
A special function, which should be mentioned here, is ftransform(). It returns the result of the vertex transformation from the fixed functionality. It also uses the same optimizations as the fixed functionality.

Communication between application and shader

Developers have several options to communicate with a shader. However, this communication is only one-way, because you can't call a shader and poll its results. Instead of returning values to the calling application, the shader writes into the color- and the depthbuffer.

As already mentioned in lesson #1, shaders are able to read OpenGL states. This makes sense when querying, for example, OpenGL light sources or the current fog color from your shader. Theoretically, you could use unused fields from light sources to store user data, but things would get really messy.
In fact, shaders are able to access texture memory. So, you might use texture data as a new way of communicating with a shader. On newer hardware, it is even possible to communicate between shaders using this method.

Luckily, GLSL also defines a proper way of communicating with a shader using the qualifier uniform and attribute. Shader variables using these qualifiers have to be accessed read-only inside the shader, but the application can change them at anytime, e.g. a time variable letting the shader animate something over time).

Uniform variables can be seen as global variables, which are constant throughout a primitive or a whole scene. They can be any of the datatypes supported by the shaders. Their values can be changed in the application at runtime and can be read by vertex shaders and pixel shaders alike. In contrast to attribute variables, uniform variables can only be set outside glBegin() and glEnd().

Attribute variables make it possible to define new attributes for a vertex, like heat or weight. Because they only apply to vertices, they can't be read by pixel shader. In the following lessons, we will only work with uniform variables but for the sake of completeness attribute variables are mentioned here.

Communication between OpenGL and shader

Communication between OpenGL and a shader is done using a predefined set of global variables. Depending on the variable, they can be read or written by a shader.

The variables gl_Position and gl_FragColor play a central role , as they represent the "results" of the individual shaders. gl_Position has to be set (!) by every vertex shader, even if its value doesn't make sense. The same goes for gl_FragColor, which is the pixel shader's counterpart (although a fragment can also be dismissed, so it's simply not drawn).

Furthermore, a couple of built-in uniform variables exist (remember: the global ones for communication between application and shader). They give access to the different matrices of OpenGL and are shown in Table 3.

Communication between the shaders

Communication between the shaders is done using the qualifier varying. Variables, which are qualified varying, have to be declared globally, in both the vertex and pixel shader. The values, which are assigned inside the vertex shader, are interpolated automatically between the vertices of the primitive the vertex belongs to. The interpolated values are then given to the pixel shader. That this interpolation is neccesary may become clear, if you think about a simple triangle. It consists of three vertices, but when it is drawn solid on the screen, it may need thousands of fragments. In this case, three calls of the vertex shader are followed by thousands of calls of the pixel shader.

Besides the user defined varying variables, there are also a couple of predefined GLSL varyings you can use to communicate between the shaders:

Except for gl_TexCoord[] all of these variables can be used, without a prior declaration. gl_TexCoord need to be declared with the same number of elements in both shaders.

The varying variables gl_FrontColor, gl_FrontSecondaryColor, gl_BackColor, and gl_BackSecondaryColor can only be read inside the pixel shader using the aliases gl_Color and gl_SecondaryColor respectively. Which value from the vertex shader is used in the pixel shader depends on whether the fragment belongs to a front or back facing primitive.

2. The first shader

After we have learned the basics of shaders and the shading language GLSL in general, it's time to do some practicing!

Task

Your task is to write a minimal shader, which does nothing more than filling a model with a constant color. To the user, the model will look like a solid shape version of the 3D model. For this, we need both, a vertex and a pixel shader. The vertex shader should only transform the incoming vertex data, while the pixel shader colors the incoming fragments with a constant color.

Figure #1: Possible result of the minimal shader

Tips

• Vertex shaders are used to transform vertices. This is done by setting the variable gl_Position. In the fixed pipeline, the transformed position of a vertex is calculated by multiplying the ProjectionMatrix with the ModelviewMatrix and the vertex itself. This calculation should be implemented by your shader. The (uniform) variables needed for this are provided by GLSL and are shown in Table #3 of this lesson.
• The pixel shader should just return a fixed RGBA color of type vec4.