What is a shader?

[Magic]

I get asked this question a lot, and it's a good one. Shaders are one of the more mysterious but also one of the more useful aspects of Magic. I hope the information below will be helpful.

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:



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);  
} 

This code is run once for every individual pixel in an image, so if the image is 1920x1080 pixels, the code is run 2,073,600 times! If you're processing video frames at 60 frames per second, that's 124,416,000 pixels per second! But because the code is specially designed to run on your graphics card, processing hundreds of millions of pixels per second becomes a simple task.

Let's look at each part of the code line by line.

Code: Select all

void main (void)  

This line is always required. It tells the GPU that your program starts here. It is called the "main" function, hopefully for obvious reasons.

Code: Select all

{

The open curly brace means that everything after this belongs to the main function.

Code: Select all

gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0);  

This is the part of the code that actually does something. "gl_FragColor" is the special variable that represents the desired color of the pixel. Every pixel shader MUST have a line that assigns some value to this variable. In this case, " vec4(0.0, 1.0, 0.0, 1.0)" is that value, which describes an RGBA color as a 4-dimensional point, also called a vector: (red, green, blue, alpha).

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

}

The closing curly brace means that the main function ends here.

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 . And if none of this makes any sense, don't worry. Just have fun with whatever parts of Magic are useful to you!

[blackdot]

thanks for this. at some point i want to get into glsl by any means.

is it also possible to write 3d shaders in glsl and somehow give it 3d models beforehand?

[Magic]

A shader can't really load a 3D model per se, but there is a type of shader called a "geometry" shader which can generate new graphics primitives such as points/lines/triangles/etc. Magic doesn't currently support this though .

Most of the time when you see a 3D model in a video game (for example), it is stored on disk and loaded directly into the graphics card at run-time without a shader. In Magic, this is how the Model module works.

[dfaught]

Is there a place to look to see the GLSL compile errors, if any? I saw a reference to this in an earlier post but the file in that post doesn't seem to exist on my pc.

[Magic]

The file is Magic_GLSL_compile_errors.txt and it's in C:\Users\Public (Windows) or /Users/Shared (macOS). If it's not there, you don't have any errors .

[Robbedit]

Hi

Thank you sooo much for your explanation i will study on it!.