Friday, November 9, 2012

Wave Shader - WebGL

Implemented simple sin wave, simplex vertex shader using webGL.

I also implemented ocean wave based shader with some more effects in x and y -direction.





Some effects in video:



Thursday, November 8, 2012

Image processing using shader language

This project uses fragment shader to implement various image effects.

1. Image Negative: The formula is very simple just deduct the rgb values of image from 1 i.e. 1 - rgb is the new color of the image.




2. Grey Scale: Greyscale image is an image in which the value of each pixel contains only the intensity of color at that pixel. Hence, the formula to calculate intensity is:
vec3 W = vec3 (0.2125, 0.7154, 0.0721);
float luminance = dot(rgb, W);

Then, just set the luminance value to be the rgb value for the pixel.







3. Gaussian Blur: It is used to reduce image noise and details.

4. Edge Detection:









5. Toon Shader:

6. Gamma Correction: Response color of the monitor is in the form c_out = c_in ^ (gamma). Hence, the actual color displayed on screen has lesser value. Hence, to counter the effect of gamma factor, we use the formula: c_in ^(1/gamma).


7. Contrast: used algorithm specified at http://www.dfstudios.co.uk/articles/image-processing-algorithms-part-5/#comment-20632

8. Night Vision: It is simple. First calculate the noise and then multiply that noise with the green color. Set the newly calculated value to be the value of the pixel color.

9. Brightness: As I understand brightness is just adding the light to the pixel.