Textures

Goal

We now add a texture to all faces of our cube.

Assignment

Use the repository from last time and follow the instructions in the slides:

means that the code is already in the repository and you just need to look at it.

means you can copy-paste the code and it should work.

means that you need to create a new file

indicates that you need to do more than just copy-paste the code.

In any case you need to understand what you are doing.

Material

• Videos:

  • Texture mapping in GLSL by Thorsten Thormählen.

• Slides:

  • Textured cube in WebGL

• Web links:

  • WebGL2 Fundamentals - Textures

Tasks (for the “Textured cube” demo)

In the following, some tasks are listed that need to be implemented in order to better understand the implemented code.

Simple

(small and easy code changes)

• Change the texture by using a different image file.
• Use texture coordinates larger than 1.0 to repeat the texture on the cube.
• Change the TEXTURE_WRAP_S and TEXTURE_WRAP_T parameters to CLAMP_TO_EDGE or MIRROR_REPEAT and observe the difference.
• Assign the texture coordinates as color using outColor = vec4(vTexcoord.s, vTexcoord.t, 0.0f, 1.0f); in the fragment shader. This will help you understand how texture coordinates are mapped to the cube’s surface.
• Change the appearance of the texture by modifying the texture color using a variable in the fragment shader, e.g., vec3 texColor = texture(uTexture, vTexcoord);. Then modify this variable before assigning it to outColor.

Complex

• Use different texture coordinates so that each side of the cube looks different. Try to map this texture to the cube: Dice Texture. You might start with these coded textures for debugging: UV Test, UV Checker Map.
• Load two different textures and switch between them using a key press (e.g., spacebar).

Insights

• TBD