#2 Black and white shader

In this tutorial, you will make your first black and white shader.
Make sure you have seen the SHADER BASICS tutorial because we will be building off of things we have already learned.

vertex to fragment

You probably noticed "varying vec2 v_vTexcoord; " in the  fragment code. This is a 2 dimension vector from the vertex shader (vec2). This tells the pixel coordinates for each pixel (which I will explain in the SAMPLERS AND TEXTURES section). You should also see "varying vec4 v_vColour;". This is for when you set image_blend on a sprite or draw_vertex_colour in primatives. So if you remove "v_vColour", then changing image_blend on a sprite would make no difference in the shader. We won't really need to mess with these for now.

More components

You know the components R, G, B, and A, and you can use these for any vector, but you should also know that there is X, Y, Z, and W. These are used for positioning variables in general while R, G, B, and A are used for color vectors, so you could still use R and G for texture coordinates, but it just makes more sense to use X and Y.

samplers and textures

Samplers are basically just textures. There are many types of samplers (cube map, 3d, or 1d samplers) but GameMaker: Studio only supports 2D samplers at this point. The first sampler you need to know is "gm_BaseTexture". It is the texture that you applied the shader to. So if I applied the shader to a sprite, then "gm_BaseTexture" is that sprite. You can even apply the shader to a group of drawn sprites in which case "gm_BaseTexture" is the whole group of sprites. In most cases you'll want the shader to be applied to textures that are in power of 2 sizes (like 256 by 256 or 512 by 512),  because those the sizes are easier for the shader to work with (it can create distortions at other sizes). The function "texture2D()" uses two arguments. The first argument is for the sampler (we'll use "gm_BaseTexture" for now).  The second argument is a vec2 (for the position on the texture to get). Texture positions are between 0 and 1, so "texture2D( gm_BaseTexture,vec2(0.5,1.0))" would return the red, green, blue, and alpha values at the bottom middle pixel of the texture. We'll leave the coordinates at "v_vTexcoord" because we are not modifying the shape or position of the texture. Instead we are modifying the color results of the texture to get shades of gray. We'll get the average of red, green, and blue values. This makes the colors only gray. The code should look like this: 

varying vec2 v_vTexcoord;
varying vec4 v_vColour;

void main()
{
    vec4 Color = texture2D( gm_BaseTexture, v_vTexcoord );
    gl_FragColor = vec4( vec3(Color.r+Color.g+Color.b)/3.0, Color.a);
}


So what this code does is it sets "Color" to the texture color. Then gl_FragColor is set so that the red, green and blue values are averaged while the alpha is still set to the textures alpha.
The result should look like this:

On the left is the original texture and on the right is the texture processed through the shader.
This black and white shader is alright, but not very precise. That is because some colors are brighter than the average. To get the proper values we'll try this:

varying vec2 v_vTexcoord;
varying vec4 v_vColour;

void main()
{
    vec4 Color = texture2D( gm_BaseTexture, v_vTexcoord );
    vec3 lum = vec3(0.299, 0.587, 0.114);
    gl_FragColor = vec4( vec3(dot( Color.rgb, lum)), Color.a);
}


This is the result:

On the left is the our first black and white shader and on the right is the new one.
The function "dot()" gets the dot product of two vectors. The reason we do this is because some colors are brighter then others (green is the brightess while blue is the darkest). The dot product makes sure the green is brighter then red and red is brighter then blue. So it basically is a short way to type:

gl_FragColor = vec4( vec3( Color.r * lum.r+Color.g * lum.g+Color.b * lum.b), Color.a);

That fixes the brightness.
DOWNLOAD EXAMPLE