Basic GLSL Shader Programming
In this post, I am going to be going over the basic aspects of programming in GLSL, as well as what different built in variables are for. I am mainly going to focus on the Fragment shader and the Vertex shader as they are standard shader programs that most games use.
Variables:
If you are familiar with the C programming language, GLSL is very similar to how that language works, with some special variable types. This a brief summary of the main variable types available in GLSL.
bool: Binary value for storing true and false values. Not used as often as other variable types, but it’s available when needed.
int/uint: Good for constant values and loops, but they aren’t nearly as popular as floats and doubles as most shaders require decimal precision.
float: GLSL’s main value storing variable, these can be declared separately but also used by all of the advanced data structures which we will discuss later.
double: Though not common place, doubles can be used with GLSL in special cases when more precision than a float is required.
array: Arrays in GLSL can be declared with almost any variable type, although they can only be one dimensional in most cases.
Vector variables
vec2: Vec variables are short for vector, but they have many more uses than just storing vector information. Vec2 variables can hold up to two values of most variable types. An example of this would be when a vec2 is used to store 2D coordinates or vectors. They are also commonly used to hold the coordinates of a pixel on a texture, also known as a UV or Texcoord (values from 0.0–1.0).
2D Vector: vec2(21.2, -15.9);
UV/Texcoord: vec2(0.923, 0.234);
vec3: Vec3 variables can hold up to three values of most variable types. These are most commonly used to store rgb colors (values from 0.0–1.0, not 0–255), or 3D xyz coordinates/vectors.
Grey rgb color: Vec3(0.5, 0.5, 0.5);
3D xyz position vector: Vec3(123.45, 0.23, -89.912);
vec4: Vec4 variables can hold up to four values of most variable types. These are most commonly used to store rgba colors with an alpha channel, or a normalized vector with length stored as the 4th value. This can be useful if the normalized and the full length vector are both needed. A Normalized vector is a vector where the xyz values are between -1 and 1.
Translucent red rgba color: Vec4(1.0, 0.0, 0.0, 0.6);
3D normalized xyzl vector with a length of 1000: Vec4(0.8, 0.3, -0.7, 1000);
Matrix Variables
mat2, mat3, mat4: Like vec variables, mat variables can store several variable types. Mat variables act like a 2D array, for example, a mat3 will have a 3x3 space for storing variables. These are mostly used for storing vertex positions and are required for complex lighting effects, projections, and transforms.
Built in Variables
There are many built in variables used in GLSL, but I am just going to go over some key variables.
Vertex Shader Variables:
gl_Position: This variable is used to return the position of a vertex in the vertex shader. It can be used to manipulate the position of that vertex to create wave effects or distortion effects.
Fragment Shader Variables:
gl_FragCoord: This variable is used to get the coordinate of the current fragment on screen, this is helpful when applying normal map lighting, or doing some math using the current pixel position.
gl_FragColor: Used to return the color of each pixel drawn in the shader. This is the output for any and all effects drawn in the fragment shader. To do anything, one must set this variable to the output color every pixel drawn.
sampler2D: Used to get a texture sample.
Structure and Operators:
GLSL is very similar to the C language again when it comes to general programming structure. There is a void main class, and other methods are declared similarly with the return type, and then the name of the method.
void main(){
}
vec3 getColorBlack(){
return vec3(0.0,0.0,0.0);
}
If statements are very similar to most programming languages, they is also access to else statements in GLSL.
if(variable){
} else {
}
Looping statements can be used in GLSL, and the language has access to while, do, and for loops.
while(condition){
}
for(int i = 0; condition; i++){
}
GLSL also has access to an array of standard operators used by most programming languages today. These include but aren’t limited to: ==, >, < +, -, *, /, %, ++, --, etc…..
Built in Methods:
normalize: Converts a vector into a value between -1.0 & 1.0 so that it can be used without any added length. This can also convert vector or raw color into an rgb color value which can be used to generate a normal map, or as a debug mode for vectors.
texture2D(sampler2D, UV): Returns the vec4 color value from a texture at a specific coordinate;
smoothStep(float, float, scalar): Uses smooth interpolation to move a value by a percentage. The value is then returned from the method. Perfect for some smoothing effects.
reflect(): This is a built in easy to use method for calculating light reflected from a surface using the direction of the light and the angle of the surface. The resulting value will be a 0.0–1.0 value of the light reflected.
