Lab 7: Textures
CS 445: Computer Graphics, Fall 2017

Due Date: be ready to demo at the beginning of lab Friday, Nov 3

Goals

Learn how to create and apply 2D procedural and image based texture maps.

Resources

Before you begin, review the following:

The summary of all of the details surrounding textures found at openGL wiki.
Using textures in WebGL

Overview

To add textures to your scene, you need to address the 3 items below. The directions will lead you through each of these :

Texture Coordinates: These determine how the texture is going to sit on your geometry. They are associated with the vertices.
Texture Objects: These are the textures themselves, e.g. an image or a procedurally generated texture such as a checkerboard. A texture object is placed on the geometry according to the texture coordinates.
Shader variables: You will need a shader attribute variable (e.g. vTexCoords) for the texture coordinates. You will need a shader uniform sampler variable (e.g. uTexture) to hold the texture. You will also add a uniform variable to select how you want to color a shape object.

Directions - Part 1

Starting Code:Begin with your completed project from Lab 5 Lighting and Shading, using Phong Shading.
Texture Coordinates: To add the texture coordinates, you need to do the following:
- Add Texture Coordinate Arrays: Similar to the vertices and normals, add texture arrays to each of your objects (Cone, Cylinder, etc ). Note that texture coordinates are 2D thus they are stored in vec2 variables rather than vec4. This is already done for you in Cube.js.
- Load Texture Buffers: In the initBuffers function of Shapes.js, load the texture coordinates into an array buffer, e.g. called texBuffer.
- Bind the texture arrays when drawing object: In the drawPrimitive function of Shapes.js, bind the texture buffer. Be careful, it will have a different size than the other buffers because its elements are vec2 and not vec4. Unbind after drawing the primitive.
- Texture Attribute Variable: In render_scene.js, add a global shader attribute variable, e.g. called vTexCoords. In the shaderSetup function, add code for the handle to the shader attribute variable vTexCoords, similar to what is done for vColor, vPosition, etc
Texture Objects: To add the textures, you need to do the following
- Download the folder textures.zip. Unzip place the texture folder into your project folder for Lab 7. It contains
  - Checkerboard.js: code for a procedurally generated checkerboard texture.
  - ImageTexture.js: code for loading an image into a texture.
  - A test image: you should get your own images but try this one first just to make sure that any problems you encounter aren't due to the image itself. Note, images typically need to have dimensions that are powers of 2, e.g. 256x512.
  Read through both of the above .js files. They each do 4 things: 1) generate/load the texture, 2) create/load a texture buffer, 3) set the parameters for applying the texture, and 4) provide a function for activating the texture.
- In start_here.js, load the .js files into the program. Also, change the heading from Lab 5 to Lab 7.
- In render_scene.js, add global variables at the top for checkerboard and imageTexture objects. In order to create the actual texture objects, you need the gl object, so create the objects in init function after gl is created:
```
checkerboard = new Checkerboard();
imageTexture = new ImageTexture("textures/test.jpg");
```
- Create a global variable (uTexture) for the shader uniform variable. In the shaderSetup function, add the code for uTexture similar to the other uniform variables.
- When you want to use a texture (e.g. imageTexture or checkerboard), you need to activate the texture, e.g. imageTexture.activate(); In render, be sure to activate the texture you want before drawing your shape, e.g.
```
imageTexture.activate(); 
Shapes.drawPrimitive(Shapes.cube);
```
Shader Code: You need to add both the texture coordinate variable (vTexCoords) and the texture object sampler variable (uTexture) to your shaders:
- Vertex Shader: Recall that attribute variables (e.g. vTexCoords) are associated with vertices and thus can only be added to your vertex shader. However, you need the texture coordinates in your fragment shader. So you need to create a varying variable to pass the interpolated texture coordinate from the vertex to the fragment shader. So, to your vertex shader, add your attribute and varying variables
```
attribute vec2 vTexCoords;
varying vec2 texCoord;
```
  Inside of main in the vertex shader, you need to assign the texture coordinate to the varying variable:
```
texCoord = vTexCoords;
```
- Fragment Shader: In the fragment shader, you need to add the varying variable that is being sent from the vertex shader
```
varying vec2 texCoord;
```
  Uniform variables can go directly to either the fragment or vertex shader (do you understand why?), therefore, we put uTexture directly in the fragment shader. Also, textures are stored in structures called samplers. So, to the fragment shader, add
```
uniform sampler2D uTexture;
```
  The base color of your geometry object is determined from the texture. You can get this color as follows (in main):
```
vec4 myColor = texture2D( uTexture, texCoord );
```
  Previously, you got the base color from uColor. So, now you need to replace any occurance of uColor in the lighting calculation with myColor.
Phew! You should be able to run your code now. Fingers crossed!

Directions - Part 2

Add several other procedural textures that you have designed yourself. Some textures are shown here: 2D Procedural Textures. Here we have soft bands
Add several different imageTexture objects so you can use more than one in a scene.
Create a scene that uses all of your textures.

Directions - Part 3

When your run your code, everything gets it's color from a texture. However, you may sometimes want a texture and, at other times, a uniform color, or something else. You are now to modify your code to make it possible to select which kind of color you want. Let's list all of the possible choices:

vertex colors (vColor)
uniform colors (uColor)
texture colors (uTexture)
calculated in the shader (e.g. as in the fractal landscape). For example, here are polka dots which are calculated in the fragment shader:

To be able to choose:

Add a uniform variable, e.g. called uColorMode, which you can set to one of the above choices (0-3). At this point, you should know all of the code necessary for adding uniform variables so the details are left you!
In your fragment shader, add if-else code that sets myColor depending on the value of uColorMode. If the color is to be calculated in the shader, you can just set the color to a fixed color (e.g. white) or you can do something more elaborate as was done in the fractal lab.
In the render function, each time you draw a shape, you should set uColorMode to the index of the kind of color you want to use. If you use a texture, you need to be sure to activate the desired texture. If you use uniform colors, you need to set the value of uColor.
Create a scene with various objects, where each type of color is used.

There are many other tricks you can do right in the shaders. For example, there is a discard function that lets you throw fragments away. This is completely different from setting a fragment to be transparent (ask why if you want to know). Here is the result when the dots of the polka dot pattern are discarded:

To Hand In

By the beginning of lab on the due date above, be ready to demonstrate your finished program. The scene should include:

Each of your primitive shapes with various textures to show that your texture coordinates are working on each of the primitives.
There should be at least one procedural that you have created (the checkerboard was given to you)
At least one object for each of the color options (uniform, vertex color, texture color, or calculated in fragment shader).

Then submit your code to WISE:

Be sure your code is clean, formatted, and well commented. Your name should be at the top of the render_scene code.
Zip together your Lab7 folder (please delete old or unused files) and submit via WISE. One should be able to run your code by placing the unzipped folder into a Netbeans project that already contains the Common folder.

Lab 7: Textures CS 445: Computer Graphics, Fall 2017