Gl-shader-output NPM

gl-shader-output

A helper module for unit testing shaders and comparing the result of gl_FragColor from a 1x1 WebGL canvas. See glsl-hsl2rgb for a practical example.

Example:

var createShaderOutput = require('gl-shader-output');

// Fragment shader source, or a gl-shader instance
var fragShader = [
    'precision mediump float;',
    'uniform float green;',
    'void main() {',
        'gl_FragColor = vec4(0.0, green, 0.0, 1.0);',
    '}'
].join('\n');

// get a draw function for our test
var draw = createShaderOutput(fragShader);

// returns the frag color as [R, G, B, A]
var color = draw();

// we could also set uniforms before rendering
var color2 = draw({ green: 0.5 });

// due to precision loss, you may want to use a fuzzy equality check
var epsilon = 0.01;
var almostEqual = require('array-almost-equal');
almostEqual(color2, [0.0, 0.5, 0.0, 1.0], epsilon);

You can use this with tools like smokestack for test-driven GLSL development.

Usage

`draw = createShaderOutput(shader, [opt])`

Takes a shader with optional opt settings and returns a draw function.

Where shader can be one of the following:

A GLSL String, which is used as the fragment shader
An instance of gl-shader
A function with the signature fn(gl), which returns a new gl-shader instance

Options:

gl the WebGL context – defaults to shader.gl if an instance is passed, otherwise constructs a new context
width the width of gl context, by default 1
height the height of gl context, by default 1
float whether to use floating point values, default true (requires an extension)

Also supports webgl-context options such as alpha and premultipliedAlpha.

The returned function has the following signature: