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
|
// 00
void main() {
gl_FragColor = vec4(0., 0., 0., 1.0);
}
|
|
// 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);
}
|
|
//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);
}
|
|
// 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);
}
|
|
// 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);
...
|
|
// 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);
...
|
|
// 06
// Depends on 04
...
float sdf = 0.5 + (st.x - st.y) * .5;;
color += stroke(sdf, .5, .1);
...
|
|
// 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);
...
|
|
// 08
// Depends on 04
float circleSDF(vec2 st) {
return length(st - .5) * 2.;
}
...
color += stroke(circleSDF(st), .5, .05);
...
|
|
// 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);
...
|
|
// 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);
...
|