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

Project #5 – Add Phong lighting to the plane, your initial & the surface of rotation.
Due date: Thursday, November 10, 11:59pm. (Note: Thursday due date.)

Goals: Continue working with your program from Project 4 to add Phong lighting to the scene. Use illumination and shading to make your scene from Project 4 look more three-dimensional.  Learn how to shade objects with the Phong lighting model in OpenGL.  Create four lights, including a spotlight, and create three materials.
If your project 4 did not get completed successfully: You may start the project using the floor and your initial. If necessary, please ask Professor Buss for code for the surface of revolution after Project 4’s are all handed in. 

What to hand in:  

·        Upload to gradescope, your main source files and PDF report of your project, all placed together in a zip file. For most people, there will be four files uploaded, three source (.cpp) files and one PDF file.

o   The source files are  MySurfaces.cpp, MyInitial.cpp, and PhongData.cpp. Please use exactly these names for your main files and place them in a zip file to upload.

o   A PDF file with a report of your work. See the instructions below. This will include your name, but not your student ID.  This should include one or two images showing attractive views of your scene. Put your name at the top of the first page of the PDF file.

·        Get an individual zoom grading session with Professor Buss or a TA. If you have not already had Project 4 graded, get it graded at the same time.  The grading rubric (preliminary form) can be found at Rubric_Project5_Fall22.pdf.


1.      Be sure to save copies of all your source files from Project 4.  This is very important! (It allows you to get Project 4 graded. Also, it can prevent a loss of the files needed for Project 5.)

2.      Download the file  This zip file contains four C++ source and header files.  It also contains an executable Project5Phong_Demo_Fall2022.exe.  

3.      Run the executable on a PC (or CloudLabs). For this, first download the GLSL file EduPhong.glsl from the web at; and place it in the same folder as PhongDemo.exe.  When you run the program, you will see a scene with a surface of rotation and a letter "X".  To get started: Use “M” to increase the mesh resolution. Press “W” to toggle wireframe mode. Then use “P” to use Phong interpolation instead of Gouraud interpolaton. The scene should now look decent (after switching from Gouraud interpolation to Phong interpolation.  There are a lot of keystroke commands act on the scene. Some of them are familiar:

a.      Pressing the arrow keys changes the view position. 

b.      Pressing the “W” or “w” key toggles wire frame mode. 

c.      Pressing the “C” or “c” key toggles culling of back faces. 

d.      Pressing the “M” or “m” key increases or decreases the mesh resolution on the spheres (ellipsoids), cylinders and tori.

e.      The animation can be turned off and on by pressing “R” or “r”. The animation can be made to run faster or slower by pressing “X” (faster) or “x” (slower).

4.      There are also a number of new keystroke commands:

a.      “1” turns the first light off and on.  There is a small emissive sphere that appears and disappears when the light is turned off and on.  This emissive sphere is *not* the light; instead it just marks the position of the light.

b.      “2” turns the second light off and on.

c.      “3” turns the third light off and on.

d.      “4” turns a spotlight off and on.

e.      “P” toggles between Phong shading and Gouraud shading. (That is, between Phong interpolation and Gouraud interpolation.)

f.       “E” toggles emissive lighting off and on. (Note the spheres marking the lights appear and disappear, since they are the only emissive materials in the scene.)

g.      “A” toggles ambient lighting off and on.

h.      “D” toggles diffuse lighting off and on.

i.       “S” toggles specular lighting off and on.

j.       “H”/“h” selects using the halfway vector (“H”) and not using it (“h”)

5.      Take some time to run the program and look carefully how things render in the Demo code. You should understand what all these keys are doing by the end of your programming project.

6.      For another source for learning how to implement Phong lighting, there is another source program available, SimpleLightModern, which is available at This program shows a light rotating around three spheres: the source code is available, and there is a web page at the EduPhong web page describing how to use the Phong lighting code.

7.      Your job is to re-create the program Project5Phong_Demo_Fall2022.exe -- sort of!!  You will use your initial and floor and circular mesh from Project 4 for this. (If your Project 4 code does not work, please email with Professor Buss for replacement code for Project 5.)

8.      Form a new project and solution; the next two steps describe how to integrate your project 4 code into the new system. Include all of thesupplied source files in the new project. (Again, save copies of your old source files!  Do not overwrite them.) 

a.      There are six completely new C++ sources files and one new .glsl file. These are

                                                    i.     PhongData.cpp and PhongData.h. These plus MyInitial.cpp and MySurfaces.cpp are the primary programs you will modify. They set the light and material properties. These were in the zip file you downloaded

                                                  ii.     PhongProj.cpp and PhongProj.h. These are the new main programs. They replace SurfaceProj.h and SurfaceProg.h.  (The latter two files are no longer used.) These two files are in the zip file you downloaded.

                                                 iii.     EduPhong.cpp and EduPhong.h C++ files for interfacing with the .glsl programs for Phong lighting. This is available from the EduPhong software web page at

                                                 iv.     EduPhong.glsl – Shader programs that do the Phong lighting calculation. This replaces the old .glsl file. This is also available from the same EduPhong web page.

b.      Other than these files, please copy all of your Project 4 source files into your new Project 5: except do not include SurfaceProj.h and SurfaceProj.cpp. The files to keep include the C++ source and header files for GlGeom objects, GlLinear files, GlShaderMgr files and MathMisc.h, and your MyInitial files, and MySurfaces files.

c.      Create your Project 5 with Visual Studio. Include all the files in your project. Also, put a copy of the EduPhong.glsl file in the same folder as your Visual Studio project files (or in the correct directory for your computer set up).

d.      Your code will not compile yet. Follow the instructions in Step 9.

9.      To get your program compiling.

a.      In both of your source files MySurfaces.cpp and MyInitial.cpp change #include “SurfaceProj.h” to #include “PhongProj.h”

b.      Decrease your variable animateIncrement to be much smaller, say 1/10th its current value, or perhaps even to zero. We want objects to move only very slowly.

c.      Everywhere the “vColor_loc” variable is used, you will have a compile error. This will happen in both MyInitial.cpp and MySurfaces.cpp. Each line looks something like
glVertexAttrib3f(vColor_loc, 1.0f, 0.4f, 0.4f);
You will replace this – for the moment – with the line
This will make everything be colored (emissively) red. For your Project 5, you will change this red color to attractive Phong-illuminated similar to the colors you used in Project 5.

d.      You can start with using myMaterials[0],but for your programming project, the “0” will be replaced by some value 0, 1, 2, etc. so as to match the old color. You will probably want to use as many new “materials” in this project, as there were colors in your Project 4 (surface project).
The PhongData.cpp file sets the value of
myMaterials[i].  The supplied code makes the material purely emissive so it does not get used in Phong ambient, diffuse or specular light.

e.      You may need to add more materials if you have a lot of colors in your initial. If you have animated colors, a little more work is still needed to have animated colors in your Project 5 (this is optional: you may instead turn off the animation.)

f.       Once you have made all the above changes, you should have a running program that shows everything well in wireframe mode.

g.      These changes make the colors for the surfaces now be given as emissive Phong colors.

10.   Your main programming task is to update PhongData.cpp and MySurfaces.cpp and MyInitial.cpp. Most of your work for Project 5 will be updating PhongData.cpp. Yours tasks are below:

11.   Create material properties. You will design at least three or four different materials: One for the ground plane. One for the surface of revolution. And, at least one for the initial. These each need to have ambient, diffuse and specular colors, and a specular exponent.  In the supplied code, the colors are purely emissive, with the other colors black (0.0, 0.0, 0.0).  You will change these to be different colors --- they should be completely non-emissive.
These materials are designed by changing the numbers in the routine MySetupMaterials.
The supplied code comes with an array of three materials. You may wish to may need to add more materials if you have a lot of colors in your initial. If you have animated colors, a little more work is still needed (or you can turn off the animation.)
It is very rare, but if your Project 4 initial does not have a good surface to apply Phong lighting to, you may add a sphere somewhere and use Phong lighting on it instead of your initial.

12.   Create three lights, by updating the routine MySetupLights(). Values for the first light are already supplied, so you can see how it is done.  You do not need to use the same values for the first light in your own project! It is suggested that you experiment with changing them. And, you need to design values for the second and third lights (that is, myLights[1] and myLights[2]). This is done by giving ambient, diffuse and specular values for each light. The suggested x-y-z positions for the lights are given in the array myLightPositions[3]. However, you may modify these positions somewhat if it improves your scene (e.g. to avoid hitting your initial).  The positions are set in the routine LoadAllLights().

13.   Create a spotlight.  myLights[3] should be a spotlight. Set its ambient, diffuse and specular colors in  MySetupLights().  Also, set its “cosine cutoff” value, and its spot exponent, in MySetupLights().  You will also need to use myLights[3].IsSpotLight=true; in order to make it act as a spotlight.  Also, set the position of the spotlight, and the direction of the spotlight in the routine LoadAllLights().  LoadAllLights()already has the needed code for the position and direction, but commented out. You will need to provide numbers for the position and the spot direction to make a nice-looking spotlight.

14.   Suggestions:

a.      The web page has documentation on how to use the EduPhong classes. 

b.     You do NOT need to match the colors in PhongDemo.exe. In fact, you should choose your own colors and experiment with colors. It is probably best if the colors are similar to the ones you used in Project 4.

c.      Ambient and Diffuse colors are typically either equal or are scalar multiples of each other.  However, it is OK to modify the ambient color if you want mimic the ambient light picking up some its color from the environment. You may wish to scale down the Ambient colors to be less bright.

d.     Specular colors on materials generally should be white or gray (that is, with R, G and B values all equal).

e.      Specular colors of lights should usually be a scalar multiple of their diffuse color. This way the specular highlights will be the correct color.

f.       Add material colors and lights one at a time to get the look you want in stages.

g.      A common problem is to set too many colors too bright. If you scene looks overly saturated or is “bright and washed out”, try lowering your color values. (This is a common problem in working this assignment.)

h.     Avoid using R,G,B color values for materials that are equal to zero. It makes the surface too monochromatic, and unresponsive to light in that color. However, it is OK for the lights to have a zero value for a color.

i.       Use the “e”, “a”, “d” and “s” commands to view ambient, diffuse and specular light separately. This will help you debug visual problems, and design your colors more effectively.

j.       Try the “H”/”h” commands to see your scene with the halfway vector computation, and without. Do you see any improvement of one method over the other?

k.     The spotlight will look much better when using Phong shading (i.e., Phong interpolation). Point the spotlight at the floor, and circular mesh (or your initial) to make a nice image out of it.

l.       The EduPhong code supports the Schlick-Fresnel term, but you do not need to use it.  (If you do try it, it should be on a surface that has a very low specular reflectivity, otherwise, you will probably not be able to see any effect from the Schlick-Fresnel term.)

15.   Goals for your scene:

a.      Choose your own colors for the scene; do not just copy the colors of the Demo executable.

b.     Specular highlights should be visible for all three surfaces, at least under the right viewing conditions.

c.      One of the three lights should be mostly white to render the surfaces in their native colors.

d.     The lights and materials should give a really good impression of three dimensionality. (This is important!)

e.      There should be at least two or three ways to set the lights on and off to give an attractive scene.  Choose your own colors, and try to make it a bit artistic color-wise.

f.       The scene will probably not look good in all combinations of lights, but you should try to avoid having it look terrible in any setting of the lights.

g.      Your code should still support all the keystrokes described above

16.   Write a PDF report. Call it “Project5report.pdf” (This name exactly, same capitalization!) It must have:

a.      Your name on the first page, near the upper left corner. If you use different versions of your name, it will help with grading to use the same version in the PDF and on the in-person grading sheet. Please do not include your student ID (for privacy).

b.     Include a picture (or at most two pictures) showing an attractive view of your project.

c.      No descriptive paragraph is required unless there is something that merits discussion. (A picture or two is good enough.)

17.   Place the PDF file in a zip file along with your main changed source files (and no other files).  Upload the zip file to gradescope.

18.   Grading session: Be able to show what is attractive about your scene. Which lights should be turned off or on to make the most attractive versions of the scene?  Which lights can show specular highlights on which surfaces? Be able to discuss on Phong shading improves over Gouraud shading.

Program grading: Scale of 0 to 20.  Personal grading session with a TA or Professor Buss.