1 - Kodachrome
Due Monday 2/08/10
The purpose of this
project is to learn about GLSL shaders by experimenting with various
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
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.
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
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:
- star wars
blue hologram / ghost where the transparency varies over time (and
detection or embossing or posterization plus edge detection to create a
color comic book look
make it more pixelated w/ black borderd on big pixels
- add noise
and discolouration to make it look like an old faded photo
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
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
mirror where you dynamically distort the image through some
mathematical function (ie the image distortion changes over time)
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.
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.
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.
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.