Math 155A - Introduction to Computer Graphics – Winter
Instructor: Sam Buss, Univ. of California, San Diego
Project #6. Add textures to a scene
Due date: Friday, March 2 at 9pm.
Goals: 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.
What to hand in: When you are done, place your C++ files, executable, and Visual Studio solution and project files together in a separate folder, preferably named “Project6” or “TextureProj” or something similar, in your PC computer account in the APM basement labs. There should be nothing in this folder except your files for this homework assignment, and the creation/modification dates should be before the turn in deadline. The program must compile and run on these computers. Grading will be personalized and one-on-one with a TA or with Sam Buss. Your program must run on the PC lab, you must come into the PC lab and meet one of us. As usual, 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.
There is no gradescope hand-in
The supplied code in shows how to apply textures. You will modify this code (the routine MyGeometries.cpp) 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.)
Download the zip file TextureProj.zip from the web. (Full URL is:
2. Run the executable TextureDemo.exe on a PC, with the seven .bmp files in the same directory. 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 a (sin r)/ r 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. Press “P” toggles the use of Phong shading. Initially, Phong shading is used.
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 or 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. The floor has a marble texture.
j. 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. Try toggling the mip-mipmapping. For this, go to line 109 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.
4. Create a new project and solution, TextureProf. And add all the source files There are couple new routines, and a couple changed routines.
a. RgbImage.cpp and RgbImage.h – 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).
b. MyGeometries.cpp – replaces MyInitial.cpp and MySurfaces.cpp. All your programming changes for Project 6 can be made to this file. All other files can be left unchanged.
c. EduPhong has had its functionality upgraded to allow applying a bitmap to surface.
5. Compile and run. You will see a scene with the back wall having the brick texture map, the cylinder having a wood texture, and one sphere with an Earth texture, and no other surfaces with textures. The ground plane (the floor) is missing.
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 there are new commands for rendering the side of the cylinder, the top of the cylinder, and the bottom of the cylinder independently. This lets you apply separate texture maps to each one.
b. The other sphere. Use the supplied Jupiter map, or find some other texture image on the web and use it instead.
c. The ground plane. Create a ground plane and texture it. (Dimensions: x,z range from -5 to 5; y is equal to zero.) 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 back wall. This can be formed as a single rectangle. It does NOT need variable meshing.
d. The surface of rotation. For this, you must first rebuild the VAO, VBO data to include texture coordinates for the surface.
e. You may use different textures than are shown in the demo program.
f. 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.
g. The texturing 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.
8. Create the floor as a rectangle formed from two triangles. This is very similar to what is down already for the back wall. Put a texture on it.
9. Adding texture coordinates to the surface of rotation.
a. Update either your own MyRemeshCircularSurf, or the routine SamsRemeshCircularSurf. Change the stride to 8 floats. Be sure to allocate enough space for the vertices (which now use 8 floats per vertex instead of 6.
b. The (s,t) coordinates are (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. The stride length needs to change in all the calls to glVertexAttribPointer. There needs to be an extra call to glVertexAttribPointer and glEnableVertexAttribArray to enable texture coordinates as vertex attributes. These last two lines are present in myGeomtries.cpp, but are commented out.
10. 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 supplied demo does use a new material: for the floor it use a material called materialUnderTextureDark (not supplied) which is about half as bright as materialUnderTexture. The LoadIntoShaders method is used to switch between materials.
11. Use glUniform1i(applyTextureLocation, true) to make the shader use texture maps. Use glUniform1i(applyTextureLocation, false) to have the shader just render Phong lighting without applying a texture.
12. The shader uses the “separate specular highlights” method.
13. 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.
14. Keep the brick texture on the back wall. Other textures may change if you wish.
15. Once your texture maps and texture coordinates 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.
16. 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?
17. Save your project for in-person grading. There is no gradescope turnin this time.
Grading is on a scale of 0-10.