Converting Shadertoy Shaders

Shaders on websites like Shadertoy.com or GLSLsandbox.com work a little different than shaders in GameMaker: Studio. Today I'll be talking about Shadertoy.com. For this example, we will port my "Pixel Noise" shader to GameMaker (code also below), so use that for the code. 
Note that because the shaders are designed for Shadertoy.com, they won't always be fully optimized for GameMaker. It can often be best to just design a shader yourself. This tutorial may not cover all the differences, but it should help you convert most shaders from Shadertoy.com.

The shaders on Shadertoy.com don't need textures and most of them don't even use textures (my shader does not use any textures either). If a shader does use textures it will show the textures at the bottom right (at the iChannel0-iChannel3). In GameMaker: Studio, shaders must  be applied to something, so most of the shaders designed for GameMaker, are applied to sprites, backgrounds, or in 3D they can be applied to planes. That means shaders in GameMaker must have at least one texture (although that texture can be a blank rectangle). Another difference is Shadertoy shaders recently started using fragColor for gl_FragColor. To remove errors simply change those back to gl_FragColor. Also "void mainImage( out vec4 fragColor, in vec2 fragCoord )" should be replaced with this "void main( void)".

Shaders on shadertoy.com

Varying Vectors

Check out tutorial 4 if you haven't already for information about varying vectors. You will need to create a varying vec2 called fragCoord. Then set it in the vertex shader to "in_Position.xy". You can also remove v_vColour and v_vTexcoord because they won' be used in this shader.

Uniforms

To see all the uniforms you may need, click the "Shader inputs" menu above the shader code. This will show all the uniforms ShaderToy uses. You should copy all the uniforms the specific shader uses in to the shader in GameMaker. Make sure you see tutorial 5 part 2 for details about uniforms.

Texture Differences

 If a shader does not use textures, then you just apply the shader to a rectangle or blank texture. In order to get textures, you must use uniform samplers (unless it's just one texture). With one texture you could just use the base texture (which is whatever you applied it to). For now we won't worry about textures since we're not using them.

Summary

So to make things easier I'll make a list for you. So when converting shaders you'll most likely need to change all these things:

• Change "fragColor" to "gl_FragColor"

• Change "void mainImage( out vec4 fragColor, in vec2 fragCoord )" to "void main( void)"
• Create the varying vec2 called "fragCoord"
• Remove unneeded attribute vectors
• Add the needed uniforms including the samplers

That's it! Here is the Shadertoy code:

float rand(vec3 n)
{
  return fract(abs(sin(dot(n,vec3(4.3357,-5.8464,6.7645))*52.47))*256.75+0.325);   
}
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
vec3 p = vec3(fragCoord.xy+vec2(iGlobalTime)*64.0,0.0);
    float b = (rand(floor(p/64.0))*0.5+rand(floor(p/32.0))*0.3+rand(floor(p/16.0))*0.2);
fragColor = vec4(vec3(b*0.6),1.0);
}

Here's the converted fragment code:

uniform float iGlobalTime;
varying vec2 fragCoord;
float rand(vec3 n)
{
 return fract(abs(sin(dot(n,vec3(4.3357,-5.8464,6.7645))*52.47))*256.75+0.325);   
}
void main(void)
{
    vec3 p = vec3(fragCoord.xy+vec2(iGlobalTime)*64.0,0.0);
    float b = (rand(floor(p/64.0))*0.5+rand(floor(p/32.0))*0.3+rand(floor(p/16.0))*0.2);
    gl_FragColor = vec4(vec3(b*0.6),1.0);
}

Now here is the vertex code:

attribute vec3 in_Position;                  // (x,y,z)
//attribute vec3 in_Normal;                  // (x,y,z)     unused in this shader.
//attribute vec4 in_Colour;                    // (r,g,b,a) unused in this shader.
//attribute vec2 in_TextureCoord;              // (u,v)     unused in this shader.

varying vec2 fragCoord;

void main()
{
    vec4 object_space_pos = vec4( in_Position.x, in_Position.y, in_Position.z, 1.0);
    gl_Position = gm_Matrices[MATRIX_WORLD_VIEW_PROJECTION] * object_space_pos;
    
    fragCoord = in_Position.xy;
}

Here's the example file:
DOWNLOAD EXAMPLE
For a challenge you can convert my "Cool Lake"shader.