• Stars
    star
    329
  • Rank 128,030 (Top 3 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created about 11 years ago
  • Updated almost 4 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Fast image filters for Browsers with WebGL support

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

More Repositories

1

qoi

The “Quite OK Image Format” for fast, lossless image compression
C
6,851
star
2

jsmpeg

MPEG1 Video Decoder in JavaScript
JavaScript
6,313
star
3

Ejecta

A Fast, Open Source JavaScript, Canvas & Audio Implementation for iOS
Objective-C
2,802
star
4

wipeout-rewrite

C
2,613
star
5

jsmpeg-vnc

A low latency, high framerate screen sharing server for Windows and client for browsers
C
2,373
star
6

Impact

HTML5 Game Engine
JavaScript
1,955
star
7

q1k3

A tiny FPS for js13k
JavaScript
1,852
star
8

underrun

Twin stick shooter game in 13kb of JavaScript/WebGL
JavaScript
1,086
star
9

pl_mpeg

Single file C library for decoding MPEG1 Video and MP2 Audio
C
737
star
10

qoa

The “Quite OK Audio Format” for fast, lossy audio compression
C
724
star
11

JavaScriptCore-iOS

Apple's JavaScript Engine, with modified project files for iOS
C++
691
star
12

wipeout

WipEout (PSX) Model Viewer in WebGL/Three.js
JavaScript
524
star
13

voidcall

Real time strategy game in 13kb of JavaScript/WebGL
JavaScript
367
star
14

js-hqx

hqx Pixel Art Scaling Algorithm in JavaScript
JavaScript
190
star
15

TwoPointFive

3D View Plugin for the Impact HTML5 Game Engine
JavaScript
141
star
16

Quakespasm-Rift

Quake for Oculus Rift
C
140
star
17

ttt

Tiny Texture Tumbler – A JS library and an editor to create textures
HTML
106
star
18

Asaph

A micro-blogging system, focusing on collecting links and images
PHP
97
star
19

neuralink_brainwire

Attempt at Neuralink's Compression Challenge
C
84
star
20

pagenode

Pagenode – No Bullshit Content Management
PHP
75
star
21

OculusWeb

A fast and lean HTTP/WebSocket Oculus Rift Tracking Server for Windows and Mac
C
58
star
22

impact-box2d

Box2D Plugin for the Impact Game Engine
JavaScript
51
star
23

JS360

A NET framework for JavaScript on the XBox with XNA.
C#
48
star
24

pl_json

Yet another single header json parser
C
41
star
25

json-format

JSON Pretty Printer for JavaScript
JavaScript
38
star
26

picturelicious

Social Imaging Platform
PHP
37
star
27

impact-splash-loader

A loading screen for Impact that shows the Impact logo
JavaScript
34
star
28

rectpack

Super Simple Rectangle Packing for JS
JavaScript
15
star
29

arduboy-games

My Arduboy Mini Games
C
14
star
30

jQuery-JSH

Tiny jQuery Plugin for JavaScript SyntaxHighlighting
11
star
31

pagenode-legacy

Older version of Pagenode with a complete admin interface
PHP
2
star
32

badissue.com

HTML
2
star