Intro to Shaders

 

That's a beautiful stone wall right (Don't lie I know you where just thinking that and that's ok since its true), and now I bet you are wondering how to get something like this (and don't worry I'm not a mind reader as much as I wish I could be). Now to get something like a simple stone wall to look so Shiny, there is a few things you can do, one of them is being so fantastic a drawing that you can draw every fine detail (which isn't practical guys let's be honest) and another (which is the better way) is to use something called Shaders.

WHAT IS A SHADER?

 

So if you are sitting there thinking what the hell is a shader, don't worry I had the same reaction when I first heard the term. Now Shaders, in the magical world of computer graphics, are a computer program (written into the source code) which runs on the GPU (or otherwise known as the graphics processing unit) to do shading (meaning that all the artists out there working in the gaming industry are relieved of doing most of the shading, if not all, which is cool cause drawing shadows can be seriously annoying). In the image below you can see two types of shading, these are created through the use of shaders, which are commonly used in 3D modeling to create light and shadows. An interesting fact is that the Phong shading is one of the first computer shading models ever created (cool right?).

 

Shaders are used to calculate the rendering effects on the graphics hardware because of their high degree of flexibility, and are used in the Graphics Pipeline for the GPU. Shaders use alogorithms, external variable and textures in order to alter and modify variables such as the position, hue, saturation, brightness, and contrast of all pixels, vertices or textures of the final image. Below is a list of some of the things you can alter with shaders:

• Hue
• Contrast
• Blur
• Cel Shading
• Posterization
• Bump Mapping

Now it is important to know that there are only three types shaders, but only two of them are in the graphics pipeline (To learn more about the graphics pipeline, since I won't really be focusing on it in this blog. You can check out these links, Here and Here). The Three types of Shaders are listed as follows:

• Vertex Shader
• Fragment Shader
• Geometry Shader

For this blog I will be solely focusing on the Vertex and Fragment Shaders, which are the two types of shaders found in the Graphics Pipeline (you can see the Graphics Pipeline in the image below).

 

VERTEX SHADER

  What is a vertex shader you ask? Well a vertex shader is a type of program in the graphics pipeline that is in charge of the processing of vertices. Imagine you have a shape such as a sphere (which is a primitive shape), that is shape is made up of vertices. Now the vertex shader is directly in charge of those vertices, so if you wanted to alter the shape or appearance of that sphere you would have this shader tell each vertices where to move using a 4D float vector called gl_Position. Here is a quick example of the code for a vertex shader:

// Vertex Shader
varying vec4 color;
 
void main()
{
  // Treat the normal (x, y, z) values as (r, g, b) color components.
  color = vec4(clamp(abs((gl_Normal + 1.0) * 0.5), 0.0, 1.0), 1.0);
 
  gl_Position = ftransform();
} 

As you can see the vertex shader is dealing with transforming the variable gl_Position.

FRAGMENT SHADER

Now that you have learned about Vertex shaders let's explain what a Fragment Shader is and what it does. A Fragment Shader, otherwise known as a Pixel Shader ( you will understand why its called this in a minute) is a program found in the pipeline that is responsible for computing color and other attributes on a pixel to pixel basis. Now like a Vertex shader, Fragment shaders use another 4D float vector called gl_FragColor which is used in the processing of colors. Below is a another quick example of shader code, however this time it is a Fragment Shader:

// Fragment Shader
varying vec4 color;
 
void main()
{
  gl_FragColor = color;
}

Here the Fragment shader is dealing with the color on a pixel by pixel basis.

 

 Implementation of Vertex and Fragment Shaders

To learn more about these Shaders check out these links below:

• An Intro to Shaders
• What are Vertex and Pixel Shaders?
• Fragment Shader
• Vertex Shader
• Vertex Shader vs Fragment Shader