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

Project #6.  Add bitmapped textures and a procedural texture to a scene
Due date: Monday, November 31 at 11pm.

Goals: Continue working with your Project 4 and 5 programs to learn how to use texture mapping in OpenGL. Add textures to spheres, a rectangle, a cylinder and a surface of rotation. Add texture coordinates to the surface of rotation.  Write a procedural texture for the floor of the scene.

Project 5, and the supplied source code, will be discussed in Monday’s zoom class meeting.

What to hand in: 

· Upload to your shared google drive folder:

o Your main source files MyGeometries.cpp, PhongData.cpp, and MyShaders.glsl. If there are changes to any other source files, please upload those as well.

o All of your texture map bitmap files (apart those supplied with the project).

o Also, upload your PDF report with (a) Report on consultations/feedback given and received. (b) Discussion of any special features or of any problems encountered, and how difficult or easy you found the project. (c) Two or three images, showing attractive views of your project.

· Upload to gradescope: Your PDF report.

Get an individual zoom grading session with Professor Buss or a TA

The supplied code in shows how to apply textures. You will modify this code (the routine MyGeometries.cpp and the shader code in MyShaders.glsl) for your Project 6. In addition, the “MathCG2” web page has two sample programs with source code, TextureBmpModern and FourTexturesModern which illustrate how to use texture mapping in OpenGL.  (http://www.math.ucsd.edu/~sbuss/MathCG2/OpenGLsoft.)

INSTRUCTIONS:

1. Download the zip file Project_6_files.zip. It has .bmp (Bitmap file) texture maps, GLSL shader programs, and C++ code, and two “demo” Windows executables.

2. Run the executable Project6Demo.exe on a PC, with the seven  .bmp files in the same directory and the two GLSL files, EduPhong.glsl  and MyShadersDemo.glsl. For this, extract the files from the .zip file first. You will see a scene with a floor, a back wall, two spheres, a cylinder, and the parametric surface of rotation. The back wall, the floor, the two spheres, the cylinder and the surface of rotation should all show textures (and not just be white).  If this not the case, then there were problems loading the texture maps from the .bmp files.

a. Pressing the arrow keys changes the view position.

b. Pressing “HOME” and “END” changes the distance of the scene from the viewer (slowly).  This is new.

c. Pressing the "w" key toggles wire frame mode.  In non-wireframe mode, you can see the textures

d. Pressing “c” toggles culling back faces.

e. The program always uses Phong interpolation, never Gouraud interpolation.

f. Pressing the "M" or "m" increases or decreases the mesh resolution on the spheres, the surface of rotation, and the cylinder.

g. Pressing the "1", "2", "3" and "4" keys (one at a time) toggles the four lights off and on. The fourth is a spotlight.

h. Pressing e, a, d, s toggles the rendering of emissive, ambient, diffuse, and specular light.

i. The back wall has a brick texture.  The two spheres have textures of Earth and Jupiter. The cylinder has a wood texture, and has a green star texture on the end faces.  The surface of rotation has a mandala texture map. 

j. The floor has a marble texture with a large “F” superimposed on it. 

k. Press the escape key to exit.

3. Experiment with the program.  Things to notice include:

a. Observe how the appearance changes with the mesh resolution and with the view point.  Try viewing the brick wall obliquely (from the side). Do you see any aliasing artifacts?

b. Observe that there are specular highlights.  This is possible mostly through the use of “separate specular lighting”

c. You can also try the “NoMipmap” version of the executable to see how textures look without mipmapping.

4. Create a new project and solution named, say, TextureProject6. Add all the source files from the zip file, and two of the GLSL files: EduPhong.glsl and MyShaders.glsl (but you do not need to add MyShadersDemo.glsl). Also add the files listed items c.-g below: they are all accessible from the book’s software web page at https://www.math.ucsd.edu/~sbuss/MathCG2/OpenGLsoft/.
Items d.-g. are identical to files from Projects 4 and 5.

a. Six C++ files in the zip file: PhongData[.h,.cpp], MyGeometries[.h,.cpp], TextureProg[.h,.cpp].

i. TextureProj.cpp is the main file.

ii. PhongData.cpp sets light and material values, similar to Project 5, but with different materials and light values.

iii. MyGeometries.cpp defines geometric shapes (and *replaces* MyInitial.cpp and MySurfaces.cpp, which are no longer needed).There are some new routines, and a couple changed routines. This is one of the two files you will modify for the project.

b. MyShaders.glsl in the zip file. Set up to work in conjunction with the shaders in EduPhong.glsl. It allows you to write a procedural texture map fragment shader without needing to alter EduPhong.glsl. This is the other main file you will modify for the project.

c. RgbImage.cpp and RgbImage.h – These are new for this project. They let you read texture maps from 24 bit bitmap files. You can create bitmap files from any image, by using the Windows program Paint (for instance). Available from the software web page.

d. LinearR3.[h,.cpp], LinearR4.[h,.cpp], MathMisc.h – The GlLinearMath files available from the software web page. Unchanged from Project 5.

e. GlShaderMgr[.h,.cpp] Available from the software web page. Unchanged from Project 5.

f. GlGeomBase[.h,.cpp], GlGeomSphere[.h,.cpp], GlGeomCylinder[.h,.cpp], and GlGeomTorus[.h,.cpp]. Available from the software web page. Unchanged from Project 5.

g. EduPhong[.h,.cpp], and EduPhong.glsl – for Phong lighting. Available from the software web page. Unchanged from Project 5.

h. There are seven .bmp (bitmap) files. You may wish to find other ones to use in your scene instead. See paragraph 18 below.

i. Make sure your .GLSL files and .BMP files are in the same directory as your Visual Studio Project file.  (It is suggested to first create the Visual Studio project, and then copy these files into the directory with the *project* files).

5. Compile and run. You will see a scene with the floor having the “F” procedural texture, the cylinder having a wood texture on its side, and one sphere with an Earth texture, and no other surfaces with textures.  The back wall is missing.  The surface of rotation is just white for now.

6. Your assignment is recreate more-or-less, the “demo” version of the scene.  For this, you need to add textures to

a. The two flat ends of the cylinder. Note GlGeomCylinder has commands for rendering the side of the cylinder, the top of the cylinder, and the bottom of the cylinder independently. This lets you apply different texture maps to each one. This is done similarly to the way the wood grain texture is applied to the side of the cylinder.

b. The other sphere. Use the supplied Jupiter map, or find some other texture image on the web and use it instead. This is done similarly to the way the texture is applied to the first sphere.

c. The back wall.  Create the geometry for the back wall and texture it.  (Dimensions: x ranges from -5 to 5; y ranges from 0 to 5;  z is equal to -5.) Create a new VAO, VBO, EBO for the ground plane. Give it normals and texture coordinates. You can see how this is done for the ground plane. Alternately, you can use the geometry already created for the floor, and transform it to be at the correct position. This surface can be formed as a single rectangle (two triangles). It does NOT need variable meshing.

d. The surface of rotation.   This is currently rendered with “SamsRemeshCircularSurf” and “SamsRenderCircularSurf” You may use these routines (recommended), or replace it with your own code from Project 4 and 5 for the same surface. 
You must add texture coordinates for the circular surface.  For this, you must first rebuild the VAO, VBO data to include texture coordinates for the surface. The VBO will hold vertex attributes of position (3 floats), normal vector (3 floats) and texture coordinates (2 floats). In other words, eight entries instead of six. Be sure to allocate enough space, increase the step size and enable the vertex attribute.  See item 10, below for more details.

e. You may wish to use different textures than are shown in the demo program. (See paragraph 18 below.) BUT you must use the supplied Brick Wall texture for the back wall.

f. You must write your own procedural texture for the floor. The supplied fragment shader code in MyShaders.glsl makes a solid black “F” shape on a surface of fixed color.  You must do something different (!): it should be technically about as difficult as the “F” in the MyShaders.glsl code. (It does not need to be as difficult at the “F” in the demo code: the demo code is in MyShadersDemo.glsl.) Your procedural might be as simple as modifying the test for being inside the “F” shape to render some other shape instead.

g. The textures in the scene are all applied to white or gray materials. That is the lights have colors, but the surface materials have equal R,G,B components. The reason for this is that fragment shader adds the color by multiplying the emissive, ambient, and diffuse components of Phong lighting with the texture map color. By using a surface material without color, it allow the texture to provide the color, while allowing the Phong lighting to provide the brightness.

h. The texture mapping in EduPhong uses “Separate Specular Colors”, so that the texture map is not multiplied with the specular highlights, and thus does not diminish the specular highlights.

7. Orient the cylinder sideways, as shown in the demo program. Add texture maps to its two ends. The supplied code shows how to render the side of the cylinder and the ends of the cylinder independently to put different textures on each part of the cylinder. (See 6.a above.)

8. Create the back wall as a rectangle formed from two triangles. This is very similar to what is down already for the floor. Put the brick wall texture on it. (See 6.c)

9. Texture the second sphere. (See 6.b)

10. Adding texture coordinates to the surface of rotation. (See 6.d)

a. Update either your own MyRemeshCircularSurf, or the routine SamsRemeshCircularSurf.  Change the stride to 8 floats in the calls to glVertexAttribPointer(). Be sure to allocate enough space the the “new” commands for the vertices (which now use 8 floats per vertex instead of 6).

b. The (s,t) coordinates will equal (0.5, 0.5) at the center of the circular surface. They both vary from 0 to 1, and pick out a circular region of the texture map. (So the parts in the corners of a square texture map are not used.)

c. The vertex data uploaded to the VBO now includes 8 floats per vertex instead of 6 floats. You will need to modify the nested loops that fill in the VBO data to also put the (s,t) coordinates into the VBO.

d. The stride length for the VBO vertex data needs to change in all the calls to glVertexAttribPointer for the surface of rotation. There needs to be an extra pair of calls to glVertexAttribPointer and glEnableVertexAttribArray to enable texture coordinates as vertex attributes. These last two lines are present in myGeometries.cpp, but are commented out.

11. Create a new procedural texture map, by modifying the routines in MyShaders.glsl. (See 6.f.)

a. The current code builds a black “F” shape. You should be creative about trying something else.  Some possibilities include using another letter of the alphabet; making some other kind of shape; doing a colorful pattern; making a spiral; etc. This need not be more difficult or complicated than the supplied “F”. (The point is not to make something complicated or hard to code, but just to start learning how shader programs work. The demo program has some animation, but this is *not* required for your Project 6.) See also paragraph 18 below.

b. There are two shader programs created in TextureProj.cpp. They are called “shaderProgramBitmap”  and “shaderProgramProc”. The first one uses code defined in EduPhong.glsl:  it computes the Phong lighting and then applies bitmap texture as read from a file.  The second uses also code in MyShaders.glsl. This code takes the output of the Phong lighting, and uses an algorithm to decide how to modify the color.  The MyShaders.glsl code is what you need to re-write to create the procedural texture for the floor.

c. Learning to program in GLSL: The basic language is very C-like, and thus fairly easy to learn, especially for the short program you will write for Project 6. (Where things get quite complex is interfacing with C++ code, and understanding the flow of data from one shader to another.)  The best way to get started learning is to look at the code in the supplied .glsl files, and of course using internet searches if you need specific language features.

12. Try toggling the mip-mipmapping. For this, go to line 101 of MyGeometries.cpp and change the “#if 1” to “#if 0”. How does the brick look with and without mipmapping when viewed from close up? From far way?  How does it look as you change the view distance, again with and without mip-mapping?  Change it back to a “#if 1”to re-enable mipmapping.  Be prepared to discuss this during grading. (We will demo all this in a zoom class meeting, but the effects can be subtle, and maybe hard to see during a zoom session.)

13. If surfaces look too bright: you might wish to create another version of the material materialUnderTexture. This can happen with light colored textures, such as the marble texture used for the floor in the demo. The demo program does use a new material: for the floor it uses a material called materialUnderTextureDark (not present in the supplied code) which is about half as bright as materialUnderTexture.  The LoadIntoShaders method is used to switch between materials.

14. Use glUniform1i(applyTextureLocation, true) to make the shader use texture maps (either procedural or bitmapped).  Use glUniform1i(applyTextureLocation, false) to have the shader just render Phong lighting without applying a texture. 

15. The EduPhong shader uses the “separate specular highlights” method. You should be able to discuss this during grading.

16. You must use 24 bit bitmaps as texture maps.  You may use same ones provided in the assignment, or you can take a photo of something, or you may look for downloadable texture maps on the internet.  You must convert your images to .bmp files (bitmap files), as this is the only kind of file that RgbImage can work with.  The Windows program Paint may be used for the file conversion.  Your files should not be too huge, and otherwise they can be slow to. (See paragraph 18.)

17. Keep the brick texture on the back wall. This is so we can look at the effect of mipmapping on the brick wall. Other textures may change if you wish.

18. The project grading will be based mostly on technical work, but part of the grade will based on creative and artistic aspects.  However, you are not expected to put excessive work into creative/artistic aspects.  The suggestion is to do one of the following two items

a. Choose new texture maps (except don’t change the back brick wall so we can see how mipmapping works). Try to find texture maps that make an attractive scene. OR

b. Do something creative with the procedural texture map. In prior years, projects did things such as creating a spiral, for instance.

19. Once your texture maps and texture coordinates and procedural texture are working:

a. Check that the scene still looks attractive.

b. Specular highlights should still be visible. For example, for a texture map with a lot of white, it might be helpful to change the ambient and diffuse material color to be a darker color, see item 10 above.

c. Experiment with the four lights being on separately.  Optional: if needed you might adjust the colors of the lights if needed to make your textures more attractive; for instance, you might include more whiteness in the lights.

20. Understand how texture maps work and be ready to discuss it during grading.  For instance, what do the calls to glBindTexture and glGenTextures do?  What is being held in the array TextureNames?  What do the various parameters to glParameteri and glBuild2dMipmaps mean?  How do separate specular colors work? How did the brick wall texture behave differently in mip-mapped and non-mip-mapped forms?

21. Be prepared to discuss your procedural texture during grading.

22. Upload to the shared google drive turn-in folder:  The files listed at the beginning of the assignment along with any other changed source files. Also upload your PDF file here.

23. Upload to gradescope a single PDF file (possibly two pages) showing two or three attractive images of your scene.

24. How to write the PDF report. Call it “Project6report.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. Feedback/consultation. 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. A short paragraph: Describe any special issues that pertain to your project. State how difficult you found the project, or whether it was easy. Which parts were the most difficult? Was there any particular inspiration for your choice of textures or your design of the procedural texture?

d. Two or three pictures showing attractive images of your scene. As in Project 6, the attractiveness of the scene will be part of the grade. Grading will be based in part on the effort put into it, and in part on the attractiveness of the result.

Grading is on a scale of 0-10.