Lab 6: Textures CS 445: Computer Graphics, Fall 2014

---

Goals

• Learn about applying 2D procedural and image based texture maps.

Resources

Before you begin, review the following:

• Texture mapping introduced in Chpater 6 (p. 259) of your textbook.
• Procedural textures, e.g. stripes, brick, discussed in Chapter 8 )p. 411.
• The summary of all of the details surrounding textures found at openGL wiki.

Implementing a Procedurally Generated Checkerboard Texture

Begin with your completed car project from lab 5.

Texture Coordinates

Modify the code for each of your objects (Cube, Cylinder, etc ) to include a new attribute variable for texture coordinates:

• In GeometryBase.h file: Add a new array of vec2 variables, e.g. called tex_coords.
• In GeometryBase.cpp file:
  • Update the various constructors and destructor to include tex_coords.
  • Update createBuffers to include the additional subbuffer. Be careful, it will have a different size than the points buffer because its elements are vec2 and not vec4. Assume the uniform variable in the shader will be called "vTexture" (similar to vColor, vPosition, etc)
• In each of your shape cpp files (Cube, Disk, etc):
  • Create the tex_coords array: tex_coords = new vec2[numVertices];
  • Load the tex_coords array: For each vertex, set the value for the tex_coords, along the lines of how you set the values for the points, normals, and colors. However, these will be vec2. We will discuss in class how to determine their values.

Texture Objects

Download the folder Textures and place it and all of its contents into your project folder. Don't forget to add the files to the Codeblocks project. The folder contains the following files:

• TextureBase.cpp and TextureBase.h: The super class for any procedural textures you make. It contains information such as the size of the texture and the textureID. It also contains the functions:
  • setUp(): Creates, loads, and sets parameters for the texture object. To make sense of what setUp() does, read the comments in the code and also read the description on the openGL wiki.
  • bind(): binds the active texture unit to this particular texture. Note, we currently only use one texture unit (unit #0) and one texture (the checkerboard). In the next section, we will see how to use bind() to choose between multiple textures (e.g. checkerboard and image).
• Checkerboard.cpp and Checkerboard.h: An example of a procedural texture. It is a subclass of TextureBase.

The Textures folder also contains the following files which will be used in the second part of this lab:

• TargaLoad.cpp and TargaLoad.h: Utility for reading in Targa files.
• ImageTexture.cpp and ImageTexture.h: Creates the texture data stored in the "image" variable. Makes use of the the TargaLoad class.
• Several targa images: test.tga and wood_texture.tga. Note, you may use Photoshop in the lab go convert your own images to the targa format.

Search Directories: Not only do you need to add the individual files to the project, but you also need to let Codeblocks know about the Textures folder. Therefore, you need to add this folder to the list of Search Directories. To do this:

• Right click on the name of the project and select "Build Options".
• In the "Project build options" window, select your project name on the left.
• Select the "Search Directories" tab.
• Click the Add button and enter the folder name Textures, then click OK.
• When done, you should see the folder Textures listed along with the others in the image below. Click OK to exit the Project build options.

Application Program

In the application program (main.cpp), create a Checkerboard object (don't forget the header file as well)

In init():

• Call the checkerboard's setUp(program) (after "program" is already created). In setUp, the texture will be bound and since, right now you are using only one texture, you do not need to explicitly call bind() in display(). However, later when you use multiple textures, you will need to bind your texture each time it changes.
• Make sure you have set your shader to the Phong shader:
  program = InitShader( "vertexPhong.glsl", "fragmentPhong.glsl" );

Shaders

Modify the vertex and fragment shaders as discussed below. Most of these changes may already be in your code. If so, just take note of what they are and what they do.

The instructions below assume you are using the Phong shader (as opposed to the Gouraud shader), so that your color calculations are done in the fragment shader.

The Vertex Shader:

• The texture coordinate attribute variable (e.g. vTexture) must be passed as an "in" variable into the vertex shader (attribute variables can't be passed to the fragment shader). This variable will need to be interpolated (by the rasterizer) and passed on to the fragment shader. Therefore, you need both an "in" and an "out" variable:

  in  vec2 vTexture;  // in from the attribute variable
  out vec2 texCoord;  // out to the rasterizer and fragment shader
  

• Somewhere in the shader's main() method, you need to make the connection between these two variables:

  texCoord    = vTexture;
  

The Fragment Shader:

• You need an "in" variable to store the incoming texture coordinate passed in from the vertex shader.

  in  vec2 texCoord;
  

• In GLSL, a "sampler" is a uniform variable that represents a texture. Texture objects are not directly associated with or attached to program objects. Instead, program samplers reference texture image unit indices (remember, we associated our texture with GL_TEXTURE0 - see the setUp code - and then linked it with the uniform variable name "texture" in the shader). Therefore, you need to declare a uniform sampler in order to access the texture:

  uniform sampler2D texture;
  

• To obtain the value of the texture at the specific texture coordinate, you use the texture2D method. Assuming you want to combine the lighting computation with the texture, replace the line:

  vec4 myColor = model_color;  

  with the line

  vec4 myColor = texture2D( texture, texCoord );

  or, if you want to combine the texture with the model_color:

  vec4 myColor = model_color*texture2D( texture, texCoord );

  You should be able to run the code to see one of the images below. Once the code is working, create a new procedural texture (modeled after Checkerboard) and apply it to the objects in the scene. Some examples are at 2D Procedural Textures

  Car with lighting and texture.	Car with model_color combined with texture.	Car with black elements discarded.

Implementing an Image Texture

To use images as textures, you need to be able to read images into your c++ code. We limit ourselves to tga files because they are easy to read. You may use Photoshop (or other program) to convert your own images to this format. However, if you use your own images, it is recommended that you resize them so that both their width and height are powers of 2. Odd sized images don't always render properly.

The files you need were added when you included the Textures folder. They are

• TargaLoad.cpp and TargaLoad.h: reads in tga files
• ImageTexture.cpp and ImageTexture.h: This class is very similar to the Texture class from the previous section except that instead of creating a texture (checkerboard), it uses the TargaLoad.cpp class to read in a tga image file and set it as an openGL texture.
• test.tga: a sample tga file that looks like:

Just as you did in the previous section with the Texture class, create an ImageTexture object in the application program (main.cpp), and call setUp(program) from the init() method (after "program" is already created):

 ImageTexture myImageTexture("Textures/images/test.tga");

Just before you draw an object, you can set which texture to use by calling bind():

myImageTexture.bind(program);

If everything is black when you run the program with the image texture, it may be that it is not finding the tga file. An error will be generated on the console if this is the case. Make sure that you have the path set properly. Another reason it may not find the file is because you do not have the project's execution directory set properly. Go to the menu: "Project->Properties...", then click on the tab "Build Targets", and make sure the "Execution working dir" is set to "..\Nagivation" (this assumes your project name is Navigation).

Of course, you generally don't want everything to have the same type of texture. For example, you may want one shape to use the model_color, another to have a checkerboard, and another to have an image. It is simple to switch between different textures. In your code, you have created two different texture objects, a checkerboard and an image. All you have to do is to bind the desired texture just before you are about to draw a shape. For example, if my image texture object is called myImageTexture, then you add the line:

myImageTexture.bind(program);

If you want some shapes to use the model_color and others to use vColor or textures, then it is more complicated. One option is to create different shader programs. However, in this case, we are only wanting to change one line in the shader code so it makes more sense to introduce a new uniform variable that is a flag indicating whether one wants to use model_color, vColor, or textures. The image below shows 3 cars, one is drawn with the image texture, one is drawn using the model_color, and one is drawn using vColor. The ground is drawn with the checkerboard texture.

No later 5pm on Tues, Nov 11, demonstrate your final program (the one with different textures and coloring) in lab and submit this code via WISE Assignments. Include a snapshot of your scene. Zip together your codeblocks project (please delete the bin and obj folders) and submit via WISE.

---