Shaders

26 June 2018

Online Shader Editors

The Book of Shaders Editor supports the The Book of Shaders website

GLSL Sandbox

Shader Frog

Shader Toy bit heavy, uses own syntax, still in “beta”

Kick.js | Shader editor

Shdr – shader editor

GLTransitions specialised for image transitions

GSN Composer a node based composer/shader editor

Firefox has a built in editor, details at Firefox Developer Tools Shader Editor, a bit esoteric?

Pixel Spirit Deck

Pixel Spirit Deck – github
Pixel Spirit Deck online editor

void, blank
1
2
3
4
5
// 00
 
void main() {
  gl_FragColor = vec4(0., 0., 0., 1.0);
}
justice, vertical split
1
2
3
4
5
6
7
8
9
10
// 01
 
uniform vec2 u_resolution;
 
void main() {
  vec3 color = vec3(0.);
  vec st = gl_FragCoord.xy / u_resolution;
  color += step(.5, st.x);
  gl_FragColor = vec4(color, 1.0);
}
strength, vertical wavy split
1
2
3
4
5
6
7
8
9
10
//02
 
uniform vec2 u_resolution;
 
void main() {
  vec3 color = vec3(0.);
  vec st = gl_FragCoord.xy / u_resolution;
  color += step(.5 * cos(st.y * PI) * .25, st.x);
  gl_FragColor = vec4(color, 1.0);
}
death, diagonal split
1
2
3
4
5
6
7
8
9
10
// 03
 
uniform vec2 u_resolution;
 
void main() {
  vec3 color = vec3(0.);
  vec st = gl_FragCoord.xy / u_resolution;
  color += step(.5, (st.x * st.y) * .5);
  gl_FragColor = vec4(color, 1.0);
}
the wall, thick vertical line
1
2
3
4
5
6
7
8
9
10
// 04
 
float stroke(float x, float s, float w){
  float d = step(s, x + w * .5) -
            step(s, x - w * .5);
  return clamp(d, 0., 1.);
 
...
color += stroke(st.x, .5, .15);
...
temperance, three vertical wavy lines
1
2
3
4
5
6
7
8
9
// 05
// Depends on 04
 
...
float offset = cos(st.y * PI) * .15;
color += stroke(st.x, .28 + offset, .1);
color += stroke(st.x, .5  + offset, .1);
color += stroke(st.x, .72 + offset, .1);
...
the branch, diagonal line
1
2
3
4
5
6
7
// 06
// Depends on 04
 
...
float sdf = 0.5 + (st.x - st.y) * .5;;
color += stroke(sdf, .5, .1);
...
the hanged man, crossing diagonal lines
1
2
3
4
5
6
7
8
9
// 07
// Depends on 04
 
...
float sdf = 0.5 + (st.x - st.y) * .5;;
color += stroke(sdf, .5, .1);
float sdf_inv = 0.5 + (st.x + st.y) * .5;;
color += stroke(sdf_inv , .5, .1);
...
the high priestess, circle line
1
2
3
4
5
6
7
8
9
10
// 08
// Depends on 04
 
float circleSDF(vec2 st) {
  return length(st - .5) * 2.;
}
 
...
color += stroke(circleSDF(st), .5, .05);
...
the moon, crescent
1
2
3
4
5
6
7
8
9
10
11
12
// 09
// Depends on 08
 
float fill(float x, float size) {
  return 1. - step(size, x);
}
 
...
color += fill(circleSDF(st), .65);
vec2 offset = vec2(.1, .05);
color -= fill(circleSDF(st - offset), .5);
...
the emperor, small square inside larger square
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 10
// Depends on 04, 09
 
float rectSDF(vec2 st, vec2 s) {
  st = st * 2. - 1.;
  return max( abs(st.x / s.x),
              abs(st.y / s.y) );
}
 
...
float sdf = rectSDF(st, vec(1.));
color += stroke(sdf, .5, .125);
color += fill(sdf, .1);
...