Description

In this assignment, you will create an image processing application in GLSL shader. Essentially, you will load textures from the disk and process the pixel values to apply various types of simple image processing effects and then render the result on a square object using texture mapping. You can translate the image to fit the canvas size and turn off mouse interaction. You will use the glMatrix-0.9.5.min.js JavaScript matrix-vector manipulation library to perform necessary transformations using the APIs provided by it. Other than the glMatrix-0.9.5.min.js library, no additional library can be used to complete your assignment.

Here is the Image Processing Application that you will create (See attached video):

Pointers for your assignment:

1. Your application will allow for loading two different images. One is a background image, and the other is a foreground image. Here, we will load foreground images that have alpha channels so that we can perform alpha blending.
2. Once both the image has been loaded, you can show the background image by selecting the ‘Background Only’ radio button.
3. Your application will allow users to change the image into grayscale or in sepia color mode by selecting the appropriate checkbox options.
4. Two slides will be added to allow contrast and brightness adjustment.
5. The Alpha Blended radio button can be used to perform alpha blending. Note that here, we are assuming only the foreground image has an alpha channel. Refer to Lecture 2, alpha blending section, to see how you can blend the color of two images when only the foreground has an alpha channel.
6. The contrast and brightness sliders should be able to work on the alpha-blended image.
7. There will be four more image processing operations available in your application: smooth, sharpen, gradient, and Laplacian. These operations will only work on the background image.
8. There will be a button called ‘Reset Scene,’ which will reset the rendering, show the initial background image without any color modulation, and set the sliders at their initial position.
9. There will be another button called ‘Save Screenshot’, which will save the currently processed image as a new file on your disk. This should save the processed image that is currently being shown on the screen.
10. Disable the mouse interaction for this assignment.
11. All the above operations should be implemented in fragment shader.
12. Other than the alpha blending, details about all other image processing operations can be found in Lecture 15. For alpha blending, refer to Lecture 2.

How to submit?

Grading: