WebGLImageFilter

Construct a chain of image filters and apply them to an Image or Canvas element. All filters are executed by WebGL Shaders which makes them pretty fast.

Demo: phoboslab.org/log/2013/11/webgl-image-filter

Please also have a look at the excellent glfx.js by @evanw.

Usage

// Synopsis: create the filter object, add filters to it and apply
// it to an image

// Example:
try {
    var filter = new WebGLImageFilter();
}
catch( err ) {
    // Handle browsers that don't support WebGL
}

filter.addFilter('hue', 180);
filter.addFilter('negative');
filter.addFilter('blur', 7);

// inputImage may be an Image, or even an HTML Canvas!
var filteredImage = filter.apply(inputImage);

// The 'filteredImage' is a canvas element. You can draw it on a 2D canvas
// or just add it to your DOM

// Use .reset() to clear the current filter chain. This is faster than creating a new
// WebGLImageFilter instance
filter.reset();

Using an Existing Canvas element

Internally, WebGLImageFilter creates one canvas element, which is what the output filtered result is written to. If you have an existing canvas element that you want to render to, you can configure WebGLImageFilter to use it:

try {
    // in this case, filteredImage is an existing html canvas
    var filter = new WebGLImageFilter({ canvas: filteredImage });
}
catch( err ) { }

// .. filters setup here

filter.apply(inputImage); 

// at this point, filteredImage has already been updated

Filters

Main filters

• colorMatrix( matrix ) apply a the 5x5 color matrix (Array[20]), similar to Flash's ColorMatrixFilter
• convolution( matrix ) apply a 3x3 convolution matrix (Array[9])
• blur( radius ) blur with radius in pixels

Presets using the main filters

• brightness( amount ) change brightness. 1 increases the it two fold, -1 halves it
• saturation( amount ) change saturation. 1 increases the it two fold, -1 halves it
• contrast( amount ) change contrast. 1 increases the it two fold, -1 halves it
• negative() invert colors
• hue( rotation ) rotate the hue, values are 0-360
• desaturate() desaturate the image by all channels equally
• desaturateLuminance() desaturate the image taking the natural luminace of each channel into acocunt
• sepia() sepia colors
• brownie() vintage colors
• vintagePinhole() vintage colors
• kodachrome() vintage colors
• technicolor() vintage colors
• detectEdges() detect edges
• sobelX() detect edges using a horizontal sobel operator
• sobelY() detect edges using a vertical sobel operator
• sharpen( amount ) sharpen
• emboss( size ) emboss effect with size in pixels
• polaroid() polaroid camera effect
• shiftToBGR() shift colors from RGB to BGR
• pixelate(amount) pixelate

License

MIT