Math 155A - Introduction to Computer Graphics – Fall 2020
Instructor: Sam Buss,  Univ. of California, San Diego

Project #1 – Create two “tent” shapes with smooth and flat colors.

Due date: Friday, October 16, 10:00pm.

Goals:  Gain some basic familiarity with triangle fans and triangle strips.  Learn how to make triangles of solid color as well as how to shade colors smoothly.  See how to use key controls to control viewpoint, and toggle wireframe and toggle culling of back faces.

What to hand in: 

(1) You will be given access to shared Google Drive folder named something like 155A_handin_FIRST_LAST where “FIRST” and “LAST” are your first and last name. Inside this folder, there are subfolders named “Project_1” though “Project_7”. You will hand in your project 1 files placing them inside the “Project_1” folder. Place them directly in this folder, not in any subfolder. Do not change the names of any files or folders.

(2) You will hand in (at least) two files:

a. The main project source file TentProject.cpp. This should be the only file you alter for your project. However, if you do change any other source file, please place it also in this folder.

b. A PDF file with a report of your work.  See instructions below.

c. Possibly a .png file or a .bmp file showing z-fighting.

Special consultation/feedback credit: You will receive a small amount of credit if you consult with other students, the professor or a TA before you hand in your program.  How this works: List anyone whom you showed your code or your running program to and who looked at it meaningfully and gave you feedback on your project. Describe what kind of feedback they gave you. Conversely: List anyone whose code and/or running program you looked at and describe what kind of feedback or suggestions you gave them.  For full credit for consultation, get feedback from or give feedback to at least two people.

Grading will be personalized in a one-on-one zoom session with one of the TAs Ruihan Yang or Nicholas Sieger or with Professor Sam Buss.  If you are using a Mac, you are requested to meet with Ruihan, but you may if you wish also meet with Prof. Buss. You will have to discuss your source code, run the program, make changes on the spot to your program and recompile as requested by the grader, and be able to explain how your program works and why it renders what it does.  The grading should be completed promptly, preferably no later than the due date for the next programming assignment.

FOR PROJECT #1, PLEASE DO THE FOLLOWING STEPS #0 - #12.

0. Examine the code and online documentation for SimpleDrawModern. 
Read Chapter 1 in the REVISED version, available online.
SimpleDrawModern shows the first round of OpenGL features that will be in your programs. So it is a good time to become familiar with it.

1. Download the TentProject program from the zip file TentProject.zip.  Extract these into a directory named TentProject (or something similar). The full URL is: http://www.math.ucsd.edu/~sbuss/CourseWeb/Math155A_2020Fall/Project_1/TentProject.zip.)

2. There is an executable "TentDemo.exe" that shows (more-or-less) how your program should end up.  This is a 32-bit program and should run on most Windows machines. You can run it on the CloudLabs system if you do not have access to a PC.
Experiment with this program.  Notice the following items and keyboard commands.

a. There are two tent shapes shown in the scene.   They have multicolored top and sides and a gray base.

b. The arrow keys (left, right, up down) control the view position.  The scene moves only when you press an arrow key.  (No animation yet.) Look at from all sides, and from the top and bottom to see the colors.

c. The "w" key toggles wire-frame mode.  

d. The “c” key toggles whether back faces are culled. This makes a difference only in wireframe mode. Try this from multiple viewpoints.

e. The shape on the left is smooth shaded,.  The shape on the right is flat-shaded. 

f. The colors on four sides and the top of the tent are fully saturated as red, yellow, green, and blue. 

i. On the top, the four corner vertices are colored bright red (1,0,0), bright yellow (1,1,0), etc.

ii. On the sides, the vertex colors are dark red (0.7, 0.0, 0.0), dark yellow (0.7, 0.7, 0.0), etc.

g. The color on the top is white (1,1,1) and the color on the base is a gray (0.5, 0.5, 0.5)

h. The exact same numeric values are used for colors on the smooth shaded shape. 

3. Create an empty Visual C++ project (somewhere in a permanent location where it will not deleted). Include the following eight source files:

a. TentProject.cpp is in the zip file you already downloaded.

b. ShaderMgrSAM.cpp and ShaderMgrSAM.h are part of the SimpleAnimModern program. Obtain them from the book’s website at http://www.math.ucsd.edu/~sbuss/MathCG2/, from the SimpleAnimModern folder. Direct URL is: http://www.math.ucsd.edu/~sbuss/MathCG2/OpenGLsoft/SimpleAnimModern/

c. LinearR3.cpp”, “LinearR3.h”, “LinearR4.cpp”, “LinearR4.h”, and “MathMisc.h are from the GlLinearMath programs. Obtain them also from the book’s website. Direct URL is: http://www.math.ucsd.edu/~sbuss/MathCG2/OpenGLsoft/GlLinearMath/

d. Instructions for creating a project and adding source files are in the Project #0 handout from last week. You must create a new empty C++ project, put all the .h and .cpp files in the same folder as the Solution .sln file, and add them to the project (Project … Add Existing File …”).

e. If extra steps are needed on your system for glew, and glfw, these must be done as well.

4. Examine the source code in TentProject.cpp and run this program.  This program acts somewhat like the TentDemo.exe.  However, it draws tetrahedra instead of the tents.   When you examine the source, do the following:

a. Figure out how the vertices of the tetrahedron are specified with positions and colors in the routine mySetupGeometries().

b. See how glBindVertexArray and glDrawArrays are used in myRenderScene to draw the tetrahedron.  The tetrahedron vertices are set so that the tetrahedron is centered at the origin.

c. Understand how the loop in myRenderScene works. When i=0, it uses the shader program which does smooth shading. When i=1, it uses the shader program which does flat shading. For i=0, it shifts the tetrahedron left, down the negative x-axis.  For i=0, it shifts the tetrahedron right, along the positive x-axis.

d. Examine the code to understand the OpenGL commands that control the wireframe mode turning off and on.  This is changed by the ‘w’ (wireframe) key, and the routine key_callback using glPolygonMode.

e. Examine the code to understand the OpenGL commands that turn culling of back faces on and off.  This is changed by the ‘c’ (cull) key, and the routine key_callback using glEnable and glDisable.

f. Strongly Recommended: See SimpleDrawModern’s code from Project #0 to see how to combine multiple geometries one scene. Or, see either SimpleDrawModern and SimpleAnimModern from the updated textbook website at http://www.math.ucsd.edu/~sbuss/MathCG2/ for examples of how to use multiple geometries in one scene.

5. Re-write the code TentProject to draw tents instead of tetrahedra.  You should use a triangle fan for the top; a triangle strip for the sides; and GL_TRIANGLES for the base.  However, you do not need to build with the exact same geometry, as long as the appearance of the smoothed, non-wireframe, tent is approximately the same.
For this tents, rewrite the appropriate parts of mySetupGeometries() and myRenderScene(). You only need to create the vertex data for a SIGNLE tent in mySetupGeometries(). (That is, the same data generates both tents.) Use the following conventions.

a. Suggested: In mySetupGeometries(), design the tent to be centered at the origin, and to fit within a circle of radius two. It does not need to exactly match the dimensions of the tent in the supplied TentDemo.exe.

b. Required: Use one triangle strip, one triangle fan, and one GL_TRIANGLES.

c. Required: Match the colors of the TentDemo program, except you do not need exactly match the darkness/brightness of the colors.

d. If necessary: adjust the translations in myRenderScene() to appropriately position the tents for good viewing.

e. If necessary: change the scale factor from 0.5 in myRenderScene() so that the tents are the right size for good viewing.

f. Probably not necessary: You can also adjust the values of Xmin, Xmax, Ymin, Ymax, Zmin and Zmax.  These values control what (x,y,z) points can be rendered without going outside the borders of the window or being too near or too far away from the viewer.

g. Probably necessary: Change the value of NumObjects on line 60 (you will want it to equal 3). Also, add index value for your geometric objects (to replace iTetra).  (Compare to how this is done in SimpleDrawModern.)

h. Suggested: Use glDrawArrays commands to render the tent.
Optional: Alternately, use glDrawElements commands to render the tent.  (For glDrawElements see the online Chapter 1, or the BasicDrawModes sample code at the book’s web site.) If you use glDrawElements, vertices can be reused, but you will need to give two different versions of the four base vertices.  (Why?)

i. Suggested: Use a generic vertex attribute for the base vertices, that is by using glVertexAttrib3f().

6. Be sure that all faces of the tents are facing in the correct outward direction.  Be careful about specifying vertices in the right order.  There should not be any holes in your tent.  It is OK to use glFrontFace(...)  if you wish to switch between CCW and CW modes.

7. Understand the difference between flat and smooth shading.  Be able to discuss the differences with the TA grading your program, and to explain how the shading is caused by the source code.

8. Examine carefully the way the program works in wire frame mode.  Do you notice anything unusual as the tents are rotated in wire frame mode?  Are there any artifacts due to aliasing? (E.g., jagged lines, or crawling visual artifacts.)  Can you see any z-fighting?  For z-fighting, you will see isolated pixels that are the wrong color. (See item 10.)  These effects may be subtle.   If you have trouble seeing aliasing problems, try slowing down the motion by change the value of deltaTheta to a smaller value such as 0.005 or 0.002 instead of 0.01: then recompile and hold down arrow key and watch the edges of the wireframe tents. To see z-fighting, use only wire-frame mode and be sure that back faces are not culled.  Then look for pixels popping up in the wrong color: this will be the most visible on the top edges of the flat shaded polygon. It is the edges of the front face and back faces that are z-fighting with each other.
These phenomena may well be different on different machines!  There is a tendency for OpenGL implementations of lines and of wire-frame mode to have small bugs and this may be part of what you see.)  However, you may not be able to create z-fighting on a home computer! It does not happen on most laptops, but does happen on my brand new Dell XPS. (: 
Be ready to discuss what you see with your TA during grading. 
There is an example image of z-fighting in the file ZfightingExample.png in the zip file downloaded in Step 1. To view this on a PC, open it with Paint or a graphics editor such as Photoshop or Gimp (but not Photos!).

9. If you are able to see any z-fighting: Make a screenshot showing the z-fighting and save the image as PNG or BMP file. z-fighting will be visible only in wire-frame mode, only if back faces are not culled, and mostly on the flat-shaded tent. z-fighting will show one of the edges having a few pixels replaced with a different color (due the fact that the same edge is drawn twice, with different colors). The best way to find the z-fighting is to tilt the image by rotating up or down, making the window large to enlarge the image, and slowing down the rate by replacing the value of the variable deltaAngle to a smaller value such as 0.005.   Then use the arrow keys to rotate, and watch carefully for pixels flashing different colors. The lab computers are usually able to show z-fighting, but most other computers (with different implementations of OpenGL) might not.
To form the screenshot of a window on a PC, hold down the “ALT” and the “RIGHT-SHIFT” buttons and press the “PRINT SCREEN” (PRT-SCN) buttons. Then open an image program such as Paint, paste the screenshot image in, and save to disk as a .bmp or .png file.  It is recommended to not use jpeg files or especially not to use a photo editor to view the file, as they will reduce the image quality.

10. Create a PDF report of your project.  Call it “Project1report.pdf” (This name exactly, same capitalization!) It must have:

a. Your name and student ID on the first page, near the upper left corner.

b. Next have a paragraph describing:

i. Everyone you received feedback from, and the type of feedback they provided. If the feedback was helpful, describe this.

ii. Everyone you gave feedback to, and the type of feedback you provided.

iii. Feedback can happen either while you are writing your program (say, if you run into problems), or after your program is finished (say, if you just want someone to check that it looks OK).

iv. If you get feedback from someone not in the course, please explain.

v. Your help from feedback should follow the guidelines for academic integrity on the course web: “However, you should definitely NOT: hand in someone else's code as your own, directly copy code from others, or work too closely with one person for the entire quarter. These will be viewed as serious violations of academic integrity. It is OK however to see someone else's code, and then take a short break (say, three minutes) and then write your own version of the code on your own. If you are not sure what is permitted, please talk with a TA or Professor Buss. (Any help you get from a TA or Professor Buss is permitted of course!)”

c. If you have any comments for the TA and Professor about your project, please include them after the paragraph about feedback. For instance, let us know if some parts seem confusing, or you think they may not be implemented correctly, etc.

d. Add two pictures, one showing a wireframe image and one showing a solid image. (See item 9 for how to capture a screen image.)

e. If you found z-fighting, include its image for the wireframe image. Also include a .png or .bmp file with the z-fighting in your Project_1 turnin folder.

11. Turn in the project as described above.  Put the modified source file, the PDR report, and optionally a picture showing z-fighting in your Project_1 turn-in folder.

Program grading: Scale of 0 to 10.  Personal grading session with a TA or the professor on zoom.  For grading, be ready to discuss any of the above topics, plus be prepared to make small modifications to the source code and recompile.