Project 1 - Kodachrome

Due Monday 2/08/10 at 11:59pm Chicago time

The purpose of this project is to learn about GLSL shaders by experimenting with various GLSL shaders.

For this project you should use GLSL only so everyone has a common comparable set of code, no CUDA, no other shading languages. We will get to CUDA in Project 2, and people will be free to pick their language in Project 3.

For this project you will simulate a photo booth.

Start with a photo (perhaps several) of yourself and also take a photo of the same backdrop without the you in the picture. Try to set up some nice lighting so you look reasonably normal to start with.

Load the image data into OpenGL and then you can write several different shaders to modify the image. If you've seen apple's 'photo booth' app or YouCam under windows then you'll know what we are going for here.

Your program should start off by breaking the main OpenGL window into a 2 x 2 grid with your normal picture in the upper left corner. In each of the other 3 positions you should have a modified version of that image.

By clicking the mouse in any of the 4 regions (or pressing Q, W, A, or S), that region should enlage and fill the entire window. Clicking on the window again (or pressing the Z key) should return the user to the 2 x 2 matrix.

On this first screen you will use 3 different fragment shaders to alter the image, along with a simple pass-thru vertex shader like the one we used in the image adjustment discussion. Some possibilities are:

star wars blue hologram / ghost where the transparency varies over time (and possibly space)
exotic background replacement
edge detection or embossing or posterization plus edge detection to create a color comic book look
digital-ness - make it more pixelated w/ black borderd on big pixels
add noise and discolouration to make it look like an old faded photo

Doing the first page correctly gets you a C on the project. To get a B you need to add a second page of shaders. The user can use the 1, 2, or 3 to move between the three pages of shaders. On page 2, in addition to your original image, you should have 3 more examples:

simultaneously bump mapped and texture mapped spinning polygon as a variation on the procedural bump map we did in class.
using the image as an environment map for a spinning cube with lighting
funhouse mirror where you dynamically distort the image through some mathematical function (ie the image distortion changes over time)

To get an A you need to add a third page of shaders. On page 3, in addition to your original image, you should have 3 more examples of your own choosing where at least one should involve a geometry shader

For all three pages of shaders you can draw inspriation from existing shaders (in GLSL or other shading languages) you find in the class notes, on the web, or in texbooks, but you can't just copy the code. You need to make some modifications to the code that show you understand how it works.

You also get a bonus for feeding in a live image from your own webcam

In order to get you started on this, especially people who haven't played with texture maps in OpenGL before, here are a couple examples that I will be going through in class: animation.tar.gz and convolution.tar.gz . They should give you a starting point for loading in textures and doing some simple work with them. One issue you will need to deal with is the format of your photos. Internally OpenGL deals with raw RGB images. For example joes_red_raw is a 512 x 512 8-bit RGB image. There are various free and commercial applications that can write to a raw format, or there are C libraries that can be used to read in more commonplace image formats and convert them internally to raw.

The biggest common problem with assignment 1 in the past has been waiting too long to start coding in GLSL / C. Try to get one of the sample GLSL / C program running by the end of the week, and then you can start adding shaders onto it. If you have trouble with particular configurations (windows x with microsoft studio Y etc) then ask your classmates.

To turn in your project you should set up a web page describing your work, including the well-commented source code and required files to be able to compile and run your program, and some screendumps showing what your application should look like when its running. You should then email andy with the location of this website before the deadline. It would probably be a good idea to put a backup copy of the web page at a second website just in case I can't get to the first one.

As part of this web page you should describe each shader, where you learned about it (eg I found this shader on www.yada.yada/etc/etc) and say what changes you made to it. Other people should be able to read your web page and understand how they can make use of all your cool shader ideas. This way we can share these methods with the rest of the class. Please use lots of images and explanatory text. Usually people do not put enough work into the website. Remember that this site may be useful to you later on when you are looking for a job and want to show off the projects you have done.

When you send andy the location of your webpage you should also email a screen snapshot of your favourite shader image that is 320 pixels wide by 240 pixels tall in jpeg format named p1.<your_last_name>.jpg. This image will be used on the class web pages along with the link to your project web page.

Each student will also give a short presentation about their project in-class and answer some questions about your work. You should prepare a good presentation - you can use your project website, or create some slides. You should definitely run your code and show your shaders to the class. Be sure to practice your presentation so you finish within the alloted time so everyone has equal time to present.

last revision 1/11/10