Department of Computer Science Worcester Polytechnic Institute

Objective:	In this project, you will learn how to write shaders to produce some of the mapping effects we have discussed. This will allow you to feel more comfortable writing more-advanced shader code. In addition, you will implement camera movement and object inspection controls. This assignment consists of two parts: a "Preparation" part and a "New Stuff" part. NOTE: The "prep" portion is due on November 24, and the "new" stuff is due on December 02.
Preparation:	The aim of this preparation part is for you to create the basic layout of the scene, and to implement camera movement controls to allow you to better inspect the results of your shader writing, which you will do in the "New Stuff" part. Setup: Create basic .html and .js files initialized to do nothing special but provide placeholders. Add a Floor Plane: Create a checkerboard ground plane so that you have some reference for your scene. You may want to use this code to generate a checkerboard texture: // Texture size. var texSize = 256; // Number of squares per side of the checkerboard. var squaresPerSide = 16; var texelsPerSquareSide = texSize / squaresPerSide; // Color depth. var tDepth = 4; // Create a checkerboard pattern using floats var image1 = new Uint8Array( tDepth * texSize * texSize ); for( var i = 0; i < texSize; i++ ) { for( var j = 0; j < texSize; j++ ) { // Compute the Black/White color, switching every texelsPerSquareSide texels. var bw = ( ( ( i & texelsPerSquareSide ) == 0 ) ^ ( ( j & texelsPerSquareSide ) == 0 ) ); for( var k = 0; k < tDepth-1; k++ ) { image1[ ( tDepth * texSize * i ) + ( tDepth * j ) + k ] = ( 255 * bw ); } // Set the alpha to 1. image1[ ( tDepth * texSize * i ) + ( tDepth * j ) + k ] = ( 255 * 1.0 ); } } Add Three Objects: Create three objects (a Sphere, a Cube, and a Cylinder) that you will apply different mappings to. By default, these should just be arranged horizontally in front of you. Add Flexible Camera Control: Allow the user to move the camera to view your scene from various points. The minimal keystrokes/actions are as follows: Keystroke Action Right Arrow Slide camera 1 unit in the positive X direction Left Arrow Slide camera 1 unit in the negative X direction Up Arrow Slide camera 1 unit in the positive Y direction Down Arrow Slide camera 1 unit in the negative Y direction Shift Up Arrow Slide camera 1 unit in the positive Z ("in") direction Shift Down Arrow Slide camera 1 unit in the negative Z ("out") direction Control Down Arrow Change camera pitch by 2 degrees Control Up Arrow Change camera pitch by -2 degrees Control Right Arrow Change camera yaw by 2 degrees Control Left Arrow Change camera yaw by -2 degrees < Change camera roll by 2 degrees > Change camera roll by -2 degrees r Reset to the default position and orientation
New Stuff:	You will now edit the three shader pairs to implement the different shaders for each of the objects. You should implement Environment Mapping (Cube Mapping) for the Sphere (repository for Cube Maps, which you will need to slice into 6 images). You should implement Parallax Mapping for the Cube (Map and Image) You should implement Bump Mapping for the Cylinder (Map and Image) You should be able to fly around the scene, and see the effects.
Attacking the Problem:	Do this project incrementally. Start by just getting the basics in place. Just place the ground plane with the checkerboard on it. Then add the objects (with default shading) placed in front of you. Next, create three separate pairs of vertex/fragment shaders, one pair per object. Set the color in each of the shader pairs to be different, so you know that the different ones are being called. You'll need another pair for the ground plane, but that should be easy, since you already have that done. Then add camera control. This should be pretty straightforward, since we've covered this a lot in class and the readings. Test everything. Once you've gotten this far, you should be ready to start the New Stuff.
Documentation:	You must create adequate documentation, both internal and external, along with your assignment. The best way to produce internal documentation is by including inline comments. The preferred way to do this is to write the comments as you code. Get in the habit of writing comments as you type in your code. A good rule of thumb is that all code that does something non-trivial should have comments describing what you are doing. This is as much for others who might have to maintain your code, as for you (imagine you have to go back and maintain code you have not looked at for six months -- this WILL happen to you in the future!). I use these file and function (method) headers, in my code. Create external documentation for your program and submit it along with the project. The documentation does not have to be unnecessarily long, but should explain briefly what each part of your program does, and how your filenames tie in.
What to Turn in:	Submit everything you need to run your program (source files, data files, etc.) BEFORE YOU SUBMIT YOUR ASSIGNMENT, put everything in one directory and make sure it runs. Then zip everything up into a single archive file. Capture some screen shots of your output, and turn those in as well. The command to ZIP everything, assuming your code is in a directory "proj3", is: zip FirstName_LastName_proj2-prep.zip proj3 and zip FirstName_LastName_proj2.zip proj3 To submit your work, email the ZIP file to me.
Academic Honesty:	Remember the policy on Academic Honesty: You may discuss the assignment with others, but you are to do your own work. The official WPI statement for Academic Honesty can be accessed HERE.