Introduction:

In this project, GLSL shaders are used to create photo-booth like effects. Three pages of shaders are created where each page has three shaders. The bottom left cell shows the original camera capture and other three cells show different shaders applied to the original capture. The vidoe describing these shaders and also screenshot of three pages are shown below. All shaders are described individually later.

Control:

Switch among shader pages: 1, 2, 3
Enlarge top-left cell: q/Q
Enlarge top-right cell: w/W
Enlarge bootom-left cell: a/A
Enlarge bootom-right cell: s/S
Show all cells: z/Z
Increase/decrease bloom amount: b/B

Download:

Source code can be downloaded from here

Lite brite effect:

The camera image is divided into multiple blocks and center of these blocks are calculated at first. If a fragment is located within the circle with the center calculated in the earlier step then the fragments are colored with the center color. Otherwise the fragment is colored gray. This produces a nice led like effect.

Cartoon effect:

Cartoon shader is created in three steps. At first the edges are detected applying the convolution matrix for edge detection and detected edges are colored as black. Then Gaussian smoothing is applied so that there is no abrupt color changes for the step-wise coloring. Finally, step-wise coloring is done.

Old movie effect:

Steps of creating old movie effect is following. First, the luminance is calculated from RGB values to get old black-and-white effect. The overall frame luminance is varied over time to get a flickering effect typically found in old movies. Also some vertical lines are drawn over time to get flickering film scratch effect. A counter is passed from main program to fragment shader to get the variation of time.

Fun mirror effect:

Fun mirror effects can be obtained by modifying texture coordinate according to some mathmatical function. It is easy to to apply the mathematical function in polar coordinates. Hence initial Cartesian coordinates are converted to polar coordinates at first. Then different effects can be obtained by modifying (r, theta) values according to some function. In the screenshot below squeeze effect is shown where r is modified over time to get changing squeeze effect.

Ref: http://web.archive.org/web/20100310063925/http://dem.ocracy.org/libero/photobooth/

Bump effect:

A procedural bump map is used to create circular bumps which represents normal map for the light calculation. Color is calculated from the texture obtained by image captured from the camera. OpneGL light-source is moved to get better view of bumps. Light position is varied in the main program and passed to shaders over time. 

Ref: http://www.evl.uic.edu/aej/525/index.html, GLSL Redbook

Bloom effect:

Bloom or glow effect gives the effect of glowing light in the scene. To get this soft glow effect Gaussian smoothing is applied at first to get the smoothing. Then the color of the fragments are modified to according to red values to get more bias to white glows. I got the idea for this shader from the link given below and parametrized it to get varying amount of glow.

Control: Glow amount can be increased by pressing 'b' and decreased by pressing 'B'

Ref: http://myheroics.wordpress.com/2008/09/04/glsl-bloom-shader/

Negative effect:

This is very easy to achieve using the shader. Here fragment RGV values are converted to complement of the original RGB values.

Thermal effect:

Thermal effect is done based on the G value of the fragment. Also Gaussian filter is applied to eliminate abrupt change is color and have a nice smooth color variation.

Sketch effect:

This sketch effect is obtained by combining two textures, the camera image texture and another texture with pencil strokes. From the camera image luminance is calculated at first. The fragment color values are calculated by combining the value from camera texture and pencil texture based on the luminance value. If the luminance is greater than some threshold hence more white then priority is more percentage of color is taken from the camera texture and reverse otherwise.

Useful Links:

http://www.evl.uic.edu/aej/525/index.html
http://myheroics.wordpress.com/2008/09/04/glsl-bloom-shader/
http://web.archive.org/web/20100310063925/http://dem.ocracy.org/libero/photobooth/
http://www.lighthouse3d.com/tutorials/glsl-tutorial/
http://www.ozone3d.net/tutorials/bump_mapping.php