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

Project #6.  Add bitmapped textures and a procedural texture to a scene
Due date: Friday, March 1 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.  Write a procedural texture for the floor of the scene.
 
What to hand in:  (1)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.   As usual, grading will be personalized and one-on-one with a TA or with Sam Buss.  (2) Handin to gradescope three items: (a) A PDF file with one of two pictures of your scene. Include your name, but not your ID number in the PDF file. (b) Your .glsl file with your shader code. (c) Your MyGeometries.cpp file.

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.

2.      Run the executable Project6_Demo.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.  (You are not supposed to reproduce this completely!)

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”

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 conjuction 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 use the same textures in your scene, or find other ones to use in your scene instead.

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, or replace it with your own code from Project 4 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 use different textures than are shown in the demo program. 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 code 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 supplied code. (It does not need to be as difficult at the “F” in the demo code. This could 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 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. 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. Be sure to allocate enough space 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. 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 myGeometries.cpp, but are commented out.

11.   Create a new procedural texture map, by modifying the routines in MyShaders.glsl. (See 6.f.) 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.)

12.   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.

13.   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.

14.   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.

15.   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 uses a material called materialUnderTextureDark (not supplied) which is about half as bright as materialUnderTexture.  The LoadIntoShaders method is used to switch between materials.

16.   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. 

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

18.   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 load (especially with the slow networked file system in the APM computer lab).

19.   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.

20.   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.

21.   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?

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

23.   Turnin the three items to gradescope. (PDF with pictures, GLSL file and MyGeometries.cpp) Save your project for in-person grading.

Grading is on a scale of 0-10.