glsl2img

CLI tool to render fragment shaders into PNG images.
Thanks to https://gist.github.com/bsergean/6780d7cc0cabb1b4d6c8.

Install

npm install -g glsl2img

Usage

This package includes 2 CLI commands: glsl2png and glsl2gif.

glsl2png

glsl2png -h shows the help:

  Usage
  $ glsl2png <input>

  Options
    --out, -o   Output file name. Default: out.png
    --size, -s  Specify image size in wxh format. Default: 600x600
    --time, -t  Specify time to pass the shader as uniform. Default: 0

  Examples
    $ glsl2png foo.frag -s 720x540 -o image.png

Examples

Assume we have metaball.frag like this:

#ifdef GL_ES
precision mediump float;
#endif

uniform float time;
uniform vec2 resolution;

void main (void) {
    vec2 position = gl_FragCoord.xy / resolution.xy;

    float d = sin(time) * 0.2;

    float dist1 = pow(max(1.0 - distance(position, vec2(0.5 + d, 0.5)) * 5.0, 0.0), 2.0);
    float dist2 = pow(max(1.0 - distance(position, vec2(0.5 - d, 0.5)) * 5.0, 0.0), 2.0);

    float c = smoothstep(0.3, 0.301, dist1 + dist2);
    gl_FragColor = vec4(c, 0, c, 1.0);
}

then glsl2png metaball.frag -o out.png gives following image.

We can also specify time value via -t option.
Here is the result of glsl2png metaball.frag -o out2.png -t 10.

glsl2gif

glsl2gif -h shows the help:

  Usage
  $ glsl2gif <input>

  Options
    --out, -o     Output file name. Default: out.gif
    --rate, -r    Frames per second. Default: 15
    --length, -l  The length of GIF animation. Default: 1 (second)
    --size, -s    Specify image size in wxh format. Default: 600x600

  Examples
    $ glsl2gif foo.frag -s 720x540 -o image.gif

Examples

glsl2gif metaball.frag -r 30 -l 3.0 gives following image.

LICENSE

MIT