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

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

Due date: Friday, January 17, 8:00pm.

Goals:  Gain some basic familiarity with triangle fans and triangle strips and using VAO’s, VBO’s and glDrawArrays.  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) When you are done, place your C++ files, executable, and Visual Studio solution together in a separate folder in your PC computer account in the APM basement labs. If you were able to create a suitable image file showing z-fighting (PNG or JPEG or BMP files are all OK), please also place this in the same folder. There should be nothing in this folder except your files for this homework assignment, and the creation/modification dates should match the turn in date.   The program must compile and run on these computers. 

(2) Hand in the main source file (HexDiamond.cpp) by uploading it to gradescope. Turn it in to the “Project 1 (Diamond) Source Code” homework. Please note that your project will NOT be graded from the gradescope hand in. Instead, you need a one-on-one session with a TA or Professor Buss.

Grading will be personalized and one-on-one with one of the TAs Jon Pham or Inderjot Saggu or with Professor Sam Buss.  Your program must run on the PC lab, you must come into the PC lab and meet one of us.  You will have to show 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, no later than the due date for the next programming assignment.

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

0. Examine the code and online documentation for SimpleDrawModern.  Read Chapter 1 in the REVISED version of the textbook, available. 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 by reading the source code, and the accompanying online documentation.

1. Download the HexDiamondProject program from the zip file HexDiamondProject.zip.  Extract these into a directory named HexDiamondProject or Project_1 (or something similar). Be sure to save this in your networked, permanent folder. Files left elsewhere on the computer lab computers are likely to be to erased automatically!  (The full URL for the zip file is: http://www.math.ucsd.edu/~sbuss/CourseWeb/Math155A_2020Winter/Project_1/HexDiamondProject.zip.)

2. There is an executable "HexDiamondDemo.exe" that shows (more-or-less) how your program should end up.  This is a 32-bit Windows program and should run on the computer lab, and most other Windows machines.
Experiment with this program.  Notice the following items and keyboard commands.

a. There are two hexagonal diamonds shown in the scene.   They have light gray top and multicolored sides and bottom.

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 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 view points.

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

f. The colors is a solid light gray (0.8, 0.8, 0.8).

g. The colors on the sides are full brightness red, yellow, green, cyan, blue and magenta.

h. The colors are on the base sides on the flat shaded diamond are the 70% brightness colors (same pattern of red, yellow, etc., but only 70% brightness).

i. The color on the on the base vertex in the smooth shaded diamond is a dark gray (0.25, 0.25, 0.25). This is visible only the smooth shaded diamond.

j. The exact same numeric values are used for colors of the vertices on the smooth shaded shape as on the flat shaded shape!

3. Create an empty Visual C++ project. Include the following eight source files:

a. HexDiamondProject.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 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 …”).

4. Examine the source code in HexDiamondProject.cpp and run this program.  This program acts somewhat like the HexDiamondDemo.exe.  However, it draws tetrahedra instead of the hexangonal diamonds.   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 in HexDiamondProject.cpp to draw hexagonal diamonds instead of tetrahedra.  You should use a triangle fan for the top and the bottom and a triangle strip for the sides. However, you do not need to build with the exact same shape diamonds, as long as the appearance of the smoothed, non-wireframe, diamond is approximately the same.
For the hexagonal diamonds, rewrite the appropriate parts of mySetupGeometries() and myRenderScene(). You only need to create the vertex data for a SINGLE hexagonal diamond in mySetupGeometries(). (That is, exactly the same data generates both diamonds.) Use the following conventions.

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

b. Required: Use one triangle strip and two triangle fans. It is not required to match exactly the method of the demo program; in particular, there is more than one natural way to form the fan defining the top face of the diamond.

c. Required: Match the colors of the HexDiamondDemo 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 diamonds for good viewing.

e. If necessary: change the scale factor from 0.5 in myRenderScene() so that the diamonds 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 values for your geometric objects (to replace iTetra).  (Compare to how this is done in SimpleDrawModern.)

h. Suggested: Use glDrawArrays commands to render the hexagonal diamond.
Optional: Alternately, use glDrawElements commands to render the diamond.  (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 all but one of the vertices.  (Why?)

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

6. Be sure that all faces of the hexagonal diamond are facing in the correct outward direction.  Be careful about specifying vertices in the right order.  There should not be any holes in your diamond.  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 diamonds are rotated in wire frame mode?  Are there any artifacts due to aliasing? (E.g., jagged lines, or crawling visual artifacts, or visual jumps when lines cross.)  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 usually with only one pixel the wrong color.   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 diamonds. 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! (For instance, it does not happen on my laptop, but it does happen on the APM computers.)
Be ready to discuss what you see with your TA during grading. 

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 diamond. 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. On some systems, including some of the machines in the APM lab, you will need to press the FUNCTION (FN) key at the same time. 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 and especially do NOT to use a photo editor to view the file, as they will reduce the image quality.

10. Turn in the project as described above.  Namely, install the project on the lab computers if needed, save any z-fighting photo on the lab computers, and turn in the main source code file on gradescope.

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