# SFML Shader Example

In this tutorial I will show you how to use a fragment shader with SFML.
The goal is not to learn GLSL but to integrate a shader taken from Shadertoy or GLSL Sandbox into an SFML apps.

At the end of the tutorial you will have:

Here is the code of the shader we will use:

``````#ifdef GL_ES
precision mediump float;
#endif

uniform float time;
uniform vec2 mouse;
uniform vec2 resolution;

float snoise(vec3 uv, float res)
{
const vec3 s = vec3(1e0, 1e2, 1e3);

uv *= res;

vec3 uv0 = floor(mod(uv, res))*s;
vec3 uv1 = floor(mod(uv+vec3(1.), res))*s;

vec3 f = fract(uv); f = f*f*(3.0-2.0*f);

vec4 v = vec4(uv0.x+uv0.y+uv0.z, uv1.x+uv0.y+uv0.z,
uv0.x+uv1.y+uv0.z, uv1.x+uv1.y+uv0.z);

vec4 r = fract(sin(v*1e-1)*1e3);
float r0 = mix(mix(r.x, r.y, f.x), mix(r.z, r.w, f.x), f.y);

r = fract(sin((v + uv1.z - uv0.z)*1e-1)*1e3);
float r1 = mix(mix(r.x, r.y, f.x), mix(r.z, r.w, f.x), f.y);

return mix(r0, r1, f.z)*2.-1.;
}

void main( void ) {
vec2 p = gl_FragCoord.xy / resolution.xy;
p.x = p.x - mouse.x / resolution.x;
p.y = p.y + mouse.y / resolution.y;
p.y = p.y - 1.0;

p.x*=resolution.x/resolution.y;

float color = 3.0 - (6.*length(p));

vec3 coord = vec3(atan(p.x,p.y)/6.2832, length(p)*0.4, .5);

for(int i = 1; i <= 7; i++){
float power = pow(2.0, float(i));
color += (1.5 / power) * snoise(coord + vec3(0.,-time*.05, time*.01), power*16.);
}

gl_FragColor = vec4( color, pow(max(color,0.),2.)*0.4, pow(max(color,0.),3.)*0.15 , 1.0);

}``````

As you can see there is a lot of mathematics involved when we want to make a shader with some blur or in this case noise.

Another interesting things are the parameters we will need to give to the shader:
``````uniform float time;
uniform vec2 mouse;
uniform vec2 resolution;``````

time = the time elapsed since the beginning of the program (in seconds).
mouse = coordinate (x, y) of the cursor (in pixel).
resolution = resolution of the window (in pixel).

## The SFML Apps

Now we need to create the window and load the shader in the main. We will need to create a sprite to display the shader. And after that we will update the shader paramaters. Here is the source code.