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

Project #6.  Add bitmapped textures and a procedural texture to a scene
Due date: Friday, May 20 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.
 
What to hand in:  

·       Place your main source files and texture files:

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). Please make sure these are not too large! E.g., under 1 MB each.  You can use the Windows Paint program for instance to generate a lower resolution image of your bitmap file.

o   Also, upload your PDF report with one or two (at most three) images, showing attractive views of your project.

Get an individual zoom grading session with Professor Buss or a TA. The grading rubric is available online at Rubric_Project6_Spring2022.pdf

The supplied code the zip file given in Step 1 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_Spring2022.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 “q” to toggle showing the geometries, so that you can see the floor more clearly.

l.      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, Project6NoMipMap_Spring2022.exe, to see how textures look without mipmapping.  Watch especially the brick wall or the surface of rotation as you change viewpoint or more away from or towards the scene.

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). It contains 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. For part of your project, you will find other ones to use in your scene instead. See paragraph 18 below.

i.      IMPORTANT: 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 or solution files). After that, you can the .glsl files into your Visual Studio project so you can edit them inside Visual Studio (note however, that Visual Studio does not understand .glsl 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 back wall. 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 dynamic re-meshing.

d.     The surface of rotation.   This is currently rendered with “SamsRemeshCircularSurf” and “SamsRenderCircularSurf” You may use these supplied routines, 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 rewrite the code that generates 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 should 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 from Project 5, or the routine SamsRemeshCircularSurf in the supplied code  Change the stride to 8 floats in the calls to glVertexAttribPointer(). Be sure to allocate enough space in 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 already 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 load. (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. The other textures in the scene should be changed.

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.  For full credit on artistic aspects, you should do three of the following four items:

a.      The scene should be attractive overall, combining texture maps and Phong lighting.  The overall balance of light should be good.

b.     Specular highlights should be visible even on textures, at least in some lighting settings.

c.      The scene should use new texture maps different from the provided ones (except don’t change the back brick wall so we can see how mipmapping works). There are many sources of royalty-free and copyright-free bitmaps available on the internet. Or, take a picture with your phone, and convert it to a texture image in the form of a bitmap file (say using Windows Paint).

d.     Do something creative with the procedural texture map, not just a direct copy of the methods used for the “F”. For full credit in this category, the procedure should be novel in some way, or technically difficult in some way. In prior years, projects did things such as creating a spiral, for instance. The supplied “F” procedural texture is animated, but you can get credit for this part even without animating the procedural texture.

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 gradescope a zip contain (a) a PDF file (possibly two pages) showing one or two (possibly three) attractive images of your scene. (b) Your texture maps. (c) your main changed source files, including especially your procedural texture in the GLSL file.  And no other files.
Make sure your bitmap files for the textures are not too large. If necessary, you can use the Windows
Paint program (for instance) to create a lower resolution version of a bitmap file.

a.     How to write the PDF report. Call it “Project6report.pdf” (This name exactly, same capitalization!) It must have: Your name on the first page, near the upper left corner.

b.     An optional short paragraph: Describe any special issues that pertain to your project. These topics will be covered during the in-person grading as well. Was there any particular inspiration for your choice of textures or your design of the procedural texture?

c.      Two or three pictures showing attractive images of your scene. As in Project 6, the attractiveness or novelty of the scene will be part of the grade.

23.  Have an in-person grading session with Professor Buss or a TA.