Converting GlSLsandbox Shaders

In the last tutorial we talked about converting ShaderToy shaders to GameMaker: Studio. Today we'll be converting GLSL Sandbox shaders. Today we'll convert this shader (the code can also be found below). The main differences are caused by undeclared variables. I will list the fixes to the most common ones.

Shaders on glslsandbox.com

Shaders on GLSL Sandbox have a few differences from shaders in GameMaker. Like on ShaderToy there are no textures most of the time. However GLSL Sandbox only supports frame buffers. If a shader uses theses, there will be a uniform sampler2D with the other uniforms. It can be named anything, but it is most often called "backbuffer" or "bb". Frame buffers must be made in GameMaker outside of the shader. These can be done with surfaces in GameMaker, but because these are very rarely used I will not get in too much detail. 

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.
Some shaders also have a varying vec2 called "surfacePosition" (although it is not in this shader). This is used to make shaders where you can scroll and zoom. To make this in GameMaker you should another varying vector in vertex shader called "surfacePosition". Then you should be set like this: 

surfacePosition = in_Position.xy*Scroll.zw+Scroll.xy;

"Scroll" will be a vec4 uniform that we'll add next. That code will zoom with z and w components and offset with the x and y.

Uniforms

Make sure you see tutorial 5 part 2 for details about uniforms.
GLSL Sandbox shaders already have the uniforms setup. As long as you set them to the right values it should work fine. If the shader has "surfacePosition" then only thing you need to add is a vec4 uniform called "Scroll". This can be used in GameMaker to scroll and zoom.

Summary

Here's a final summary of what we have learned:

• Change "gl_FragCoord" to "fragCoord"
• Add "fragCoord" and  "surfacePosition" (if needed) to vertex shader
• Add "Scroll" vec4 uniform if needed
• Set all uniforms (may include time, resolution or mouse)

Here is the GLSL Sandbox code:

#ifdef GL_ES
precision mediump float;
#endif

uniform float time;
uniform vec2 resolution;

void main( void ) {

vec2 uv = ( gl_FragCoord.xy / resolution.y );

vec3 color = vec3(fract(sin(dot(floor(uv.xy*32.0+time*2.0),vec2(5.364,6.357)))*357.536));
gl_FragColor = vec4( color, 1.0 );

Converted GameMaker fragment code:

#ifdef GL_ES
precision mediump float;
#endif
varying vec2 FragCoord;
uniform float time;
uniform vec2 resolution;

void main( void )
{
    vec2 uv = ( FragCoord.xy / resolution.y );
    vec3 color = vec3(fract(sin(dot(floor(uv.xy*32.0+time*2.0),vec2(5.364,6.357)))*357.536));
    gl_FragColor = vec4( color, 1.0 );
}

Converted 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 is the example file:
DOWNLOAD EXAMPLE