As mentioned in the material, defining colors per vertices will not give us a high enough granularity of colors (unless we have a lot more vertices then otherwise necessary). For this reason we can specify functions or images that can be sampled to get a color value at some position.

The main question is, what position is that? 

Image used as a texture has its own coordinates called the UV coordinates. These coordinates will range from $[0, 1]$ in both axes of the image. Bottom-left corner is the point with coordinates $(0, 0)$.

Task is to create a mapping from the UV coordinates to the local vertex coordinates (that we know in the shader). Using that mapping we can afterwards sample our colors from the image correctly.

Texture image with its UV coordinates is on the left. If we have a triangulized square with width 20 units and local center at $(0, 0)$ (that have been the walls in our chopper task), then that might resemble something like the image on the right.

In the task there is a perspective camera that is looking straight down on such a square. Your job is to send the correct UV coordinates to the correct vertices as attributes in the shader. Then interpolate them to the fragment shader, where you can use those values to sample from the texture image.

Try to render the texture as repeated 2 times in both directions. Final result might look something like:

JavaScript

Follow the instructions in the base code:
https://cglearn.codelight.eu/files/course/7/UvMappingJS.zip

Currently you should see a red mesh. This is the mesh you will be texturing. There is a small sphere flying around, that is the point light source. Start by copying one of the lighting models from the previous tasks to the shaders. 
There are in total 3 textures loaded, arrow keys to the left and right will change the current texture.

Three.js may have variables named uv and uv2 already in use, so use another name for your mapping (like uvCoord). You may also want to check out different properties of the THREE.Texture object.

C++

Follow the instructions in the base code:
https://cglearn.codelight.eu/files/course/7/UvMappingCPP.zip

Currently you should see a red mesh. This is the mesh you will be texturing. Start by copying one of the lighting models from the previous tasks to the shaders. You will have to complete the vertex and fragment shaders in files texture.vert.glsl and texture.frag.gsls respectively.

We are using the DevIL image library for loading images in the texture_util.cpp.