GLSL image converter
JavaScript GLSL
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
bin
src
test
.eslintrc
.gitignore
.travis.yml
README.md
appveyor.yml
package.json
yarn.lock

README.md

glsl2img

Build Status NPM Version License Coverage Status

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.

out

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

out2

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.

out.gif

Uniforms

GLSL Sandbox style uniform variables are available in fragment shaders.

uniform float time;            // --time or the elapsed time from the first frame. Default: 0
uniform vec2 mouse;            // Always vec2(0) because there is no mouse in CLI
uniform vec2 resolution;       // Resolution of output image. Default: vec2(600.);
uniform sampler2D backBuffer;  // Rendered output in previous frame

LICENSE

MIT