Shaderfrog 2.0

Promote shaders into modules!

Shaderfrog turns shader programs into composable modules.

Shaderfrog derives node inputs and outputs from your source code.

modularize(

varying vec2 vUv;

uniform sampler2D image;

void main() {
    vec4 col = texture2D(image, vUv);
    vec3 noRed = vec3(0.0, col.g, col.b);
    gl_FragColor = vec4(noRed, 1.0);
}

)

Compose modules into new shaders

Compose shader modules together by replacing any part of a module with the output from any other module.

Shaderfrog is built on an open source compiler which does the heavy lifting for you.

compose(

varying vec2 vUv;

void main() {
    vec2 uv = vUv * 10.0;
    float test = floor(uv.x) + floor(uv.y);
    float color = mod(test, 2.0) == 1.0
      ? 1.0
      : 0.0;
    gl_FragColor = vec4(vec3(color), 1.0);
}

uniform sampler2D image;

varying vec2 vUv;

void main() {
    vec4 col = texture2D(image, vUv);
    vec3 noRed = vec3(0.0, col.g, col.b);
    gl_FragColor = vec4(noRed, 1.0);
}

)

varying vec2 vUv;
 
vec4 checkerboard() {
    vec2 uv = vUv * 10.0;
    float test = floor(uv.x) + floor(uv.y);
    float color = mod(test, 2.0) == 1.0
      ? 1.0
      : 0.0;
    gl_FragColor = vec4(vec3(color), 1.0);
}
 
void main() {
    vec4 col = checkerboard();
    vec3 noRed = vec3(0.0, col.g, col.b);
    gl_FragColor = vec4(noRed, 1.0);
}

Inject variables with "backfilling"

Shaderfrog introduces a GLSL module composition technique called "backfilling," which lets you replace local variables in shader code with your own.

For example, you can manipulate the UV coordinates in one shader, and pass those new coordinates to another shader, preserving your UV transforms in another effect.

backfill(

varying vec2 vUv;

void main() {
    vec2 uv = vUv + 3.3;
    gl_FragColor = vec4(vec3(uv, 1.0), 1.0);
}

uniform sampler2D image;

varying vec2 vUv;

void main() {
    vec4 col = texture2D(image, vUv * 10.0);
    gl_FragColor = vec4(col.rgb, 1.0);
}

)

varying vec2 vUv;
 
vec4 checkerboard(vec2 vUv) {
    vec2 uv = vUv + 3.3;
    gl_FragColor = vec4(vec3(uv, 1.0), 1.0);
}
 
void main() {
    vec4 col = checkerboard(vUv * 10.0);
    gl_FragColor = vec4(noRed, 1.0);
}

Introducing the "Hybrid Graph"

Work in an intuitive node editor while maintaining full control over the source code.

Shaderfrog is a visual graph editor where every node contains editable source code.

Work in an intuitive visual graph editor.
Connections between nodes represent module composition.

Maintain full control over the source code in a familiar editor.

Infinite Combinations

Every shader on the site is composable. The more people creating shaders, the more nodes you have to experiment with.

Try it out!

Shaderfrog is a free tool with enhanced Pro options available.