History
Originally (a few decades ago), a shader was a program used to compute the lighting on a 3D model. The name "shader" came from the fact that light and shadow create the surface appearance, or "shading", of different parts of an object. As an example, here is an image from Wikipedia:
![Image](https://upload.wikimedia.org/wikipedia/commons/8/84/Phong-shading-sample.jpg)
In recent times though, a shader has come to mean something slightly different. It is still a program used to compute the surface of an object, but more often than not, the surface is a two-dimensional plane that doesn't have any lighting or shadows. The function of the shader is simply to determine the color of every pixel in the plane, resulting in a flat image like you would see in any .jpg or .png file. This type of shader is called a "pixel" shader. A pixel shader can be used to algorithmically create an image from scratch, or it can be used to modify an existing image.
The GPU
The most important thing to understand is that a pixel shader usually runs on your graphics card, or GPU, rather than on your computer processor, or CPU. Whereas your CPU might have 4 or 8 cores (meaning it can do 4 or 8 things at once), a graphics card has many times that -- sometimes thousands of cores. For example, the NVidia GTX 980 graphics card has 2048 cores (wow!). Most images have thousands of pixels in them (at least), so the GPU is a great way to do image processing quickly. Each core can work on an individual pixel in parallel with all the others, because most of the time, pixels don't depend upon the color of other pixels.
How a basic shader program works
Shaders can be written in different languages, but the most common language is GLSL (GL shading language). If you look at the code of a simple GLSL shader, you will see that it looks something like this:
Code: Select all
void main (void)
{
gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0);
}
Let's look at each part of the code line by line.
Code: Select all
void main (void)
Code: Select all
{
Code: Select all
gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0);
On the GPU, colors are usually represented by values ranging from 0 to 1 rather than 0 to 255 (as you might see in Photoshop). So, white is represented by (1.0, 1.0, 1.0, 1.0) and black is represented by (0.0, 0.0, 0.0, 1.0). Middle grey is (0.5, 0.5, 0.5, 1.0). The alpha value determines the transparency.
Code: Select all
}
And that's it!
Your first test
Copy and paste the full program code into a text file on your system. Then, start Magic, and add a GLSLShader module. Click on the file button in the module, and select your text file. You should see a solid green image (why?).
Your second test
Make the image red instead of green.
Your third test
Make the image be different colors in different parts. (You'll have to search the web to solve this one!)
Feel free to ask any questions
![Smile :)](./images/smilies/icon_e_smile.gif)