Exercise Solution

Part 1

Start from a textured sphere (Part 3 of Worksheet 6). Instead of the ordinary 2D texture, we will now use a cube map to texture the sphere. [Angel 7.8]

Modify your texture initialization such that it loads a cube map from six image files, one file for each face.

Once the cube map is initialized, no inverse map is needed to compute texture coordinates. Simply use the world space normal as texture coordinates when looking up the texture color in the fragment shader.
Please use a browser supporting HTML5

Part 2

The next step is to also draw the environment in the background. To do this, we draw a screen-filling quad very close to the far plane of the view frustum and texture it using the cube map.

  • A screen-filling quad close to the far plane is most easily drawn using clip coordinates, where the diagonal goes from (−1, −1, 0.999, 1) to to (1, 1, 0.999, 1). Insert this background quad into your scene.
  • Draw the background quad using the same shaders as in Part 1, but introduce a uniform matrix M_tex in the vertex shader that transforms the vertex position to texture coordinates.
  • For the sphere, M_tex is an identity matrix. The vertices of the background quad are however in clip space, so its model-view-projection matrix is an identity matrix, but its M_tex should transform from clip space positions to world space directions. Create M_tex for the background quad using (a) the inverse of the projection matrix to go from clip coordinates to camera coordinates and (b) the inverse of the rotational part of the view matrix (no translation) to get direction vectors in world coordinates. Explain the transformation.
-------------
ANSWER
TODO
Please use a browser supporting HTML5

Part 3

The sphere is not really like a mirror ball. Instead of looking up the environment in the normal direction, we should look up the environment in the direction of reflection. [Angel 7.7]

  • Create a uniform variable (reflective) to distinguish reflective objects (the mirror ball) from other objects (the background quad).
  • Upload the eye position to the fragment shader as a uniform variable and compute the direction of incidence (the view vector, v) in world coordinates.
  • Use a conditional operator (or an if-statement) to choose the direction of reflection as texture coordinates for reflective objects.
Please use a browser supporting HTML5

Part 4

Finally, we will perturb the normal of the mirror ball using a normal map to give the impression that the ball surface is 'bumpy'. [Angel 7.9]

  • Load the normal map texture from the file textures/normalmap.png. Map it onto the sphere using the same technique as in Part 3 of Worksheet 6.
  • Bind the normal map to TEXTURE1 so that it can be used together with the cube map. The color found in the normal map is in [0, 1]. Transform it to be in [−1, 1] to get the actual normal.
  • The normal retrieved from the normal map is in tangent space. We need to transform it to world space to use it in place of the sphere normal when calculating the direction of reflection.
Please use a browser supporting HTML5 Select the environment: