Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/phoboslab/WebGLImageFilter
Fast image filters for Browsers with WebGL support
https://github.com/phoboslab/WebGLImageFilter
Last synced: 18 days ago
JSON representation
Fast image filters for Browsers with WebGL support
- Host: GitHub
- URL: https://github.com/phoboslab/WebGLImageFilter
- Owner: phoboslab
- License: mit
- Created: 2013-11-03T22:57:56.000Z (about 11 years ago)
- Default Branch: master
- Last Pushed: 2020-11-27T14:43:47.000Z (almost 4 years ago)
- Last Synced: 2024-08-01T00:57:05.251Z (3 months ago)
- Language: JavaScript
- Size: 29.3 KB
- Stars: 329
- Watchers: 10
- Forks: 62
- Open Issues: 3
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
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](http://phoboslab.org/log/2013/11/fast-image-filters-with-webgl)
Please also have a look at the excellent [glfx.js](https://github.com/evanw/glfx.js) by @evanw.
### Usage ###
```javascript
// 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:
```javascript
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