#1 Shader Basics

Hello. I am a shader and game developer. I've been a programmer for about 4 years.
I am going to start a tutorial series on how to make GLSL ES shaders for GameMaker: Studio

What a shader is

Shaders are programs that are executed in the GPU. A shader actually consists of two programs:
the vertex shader and the fragment (or pixel) shader.  Shaders are used in games and software as effects to distort or recolor graphics. Shaders can be used for anything from grayscale effects to ripples to lighting engines and much more. 

What you'll need to know

Shaders are quite complex, and may be daunting to new programmers. You will need to know some math and you should have knowledge about game development and very simple game terms like pixels, sprites, textures, variables, vectors, etc.
You will also want to know how to code in GML (GameMaker's programming language).

Shader coding

Create a shader and call it "shader". Double click it and select the fragment tab near the top of the window. We'll focus on the fragment code for now as it's the simplest to understand. The fragment shader does each pixel, one at a time, outputting different results based off the pixels position. In shaders there are vectors (vec2,vec3, and vec4) and floats (which are like one dimensional vectors). Vectors are like multiple variables in one. They are much like variables as you must define them and set them like expected. You can set them like this:

vec3 Vector = vec3( 0.0, 1.0, 2.0) ;


The vec3 at the beginning tells what kind of vector or float the variable is. The second vec3 is for setting each of the values to their corresponding  positions. So basically a vec4 has the components R, G, B, and A (Red, green, blue and alpha). When you set it to vec4( 0.0, 0.5, 0.8, 1.0)  the R component of the vector is set to 0.0 while the G part is set to 0.5. decimals are added to all whole numbers in shaders to avoid errors. With this knowledge we are able to set certain parts of vector like this:


vec4 Vector = vec4( 0.0, 1.0, 2.0, 3.0);
Vector.rb = vec2( 4.0, 5.0);//Doesn't need to be redefined


The second time we set "Vector", we only set the R and B components. This way we are able to specify what we're setting.

"gl_FragColor" is a 4 dimensional vector (vec4). What ever you set gl_FragColor to is the output of the pixel (does this for each pixel). The reason it is a vec4 is because it outputs a combination of red, green, and blue (the primary colors of light) to form the output color and alpha. The alpha (transparency) is used in GameMaker to tell how much of underlying colors to show.
if we set gl_FragColor to vec4( 1.0, 0.0, 0.0, 1.0) it would mean the R component (Red) and the A components (Alpha) are set to 1.0. In shaders, red set to 1 means fully red (rather than whole the number range being from 0 to 255). So this code would output a fully red block for each pixel. Since that shader wouldn't be very useful, we will try something else. I'll explain in more detail in a later post. Shaders in GameMaker: Studio must be applied to something drawn. So a shader could be applied to a sprite, background, or anything else you can draw. The "texture2D()" function outputs the color of the texture (the thing the shader is applied to) at each pixel. We will discuss this in detail in a later tutorial. For now just know that "gl_FragColor = v_vColour * texture2D( gm_BaseTexture, v_vTexcoord )" means that it draws the texture like normal. If we try this code it will make the colors much more intense:

varying vec2 v_vTexcoord;
varying vec4 v_vColour;

void main()
{
    gl_FragColor = v_vColour * texture2D( gm_BaseTexture, v_vTexcoord );
    gl_FragColor.rgb *= vec3(2.0,2.0,2.0);//this doubles the red, green and blue values
}


So what this does is it sets the color to the texture color and then doubles the red, green and blue colors.

On the left is the background without the shader applied and on the right is with it applied.

Shaders and Gamemaker

Shaders in GameMaker: Studio must be applied to something drawn. This tells the shader the size perimeters. Add a background of your choice and call it "background". Next, create an object (any name will work) and add a code to it's draw event. You can draw any sprite or background (we'll use our background) and apply a shader to it with the "shader_set()" function and then end it with "shader_reset()". Your code should look something like this:

shader_set(shader)
draw_background(background,0,0)//any draw code should work
shader_reset()

Create a room, place the object in it and then test the game.
You should see the color intensified properly.
DOWNLOAD EXAMPLE
Next is the BLACK AND WHITE SHADER tutorial.