Worksheet 6

Exercise	Solution
Part 1 + 2 Create a rectangle with vertices (-4, -1, -1), (4, -1, -1), (4, -1, -21), (−4, −1, −21). Set up a perspective camera with a 90° field of view. Use the default view matrix and draw the rectangle in white on a blue background. Map a procedurally generated checkerboard texture to the rectangle using the following steps: Create a texture object and bind it as the current 2D texture object. [Angel 7.5.1] Generate a 64 × 64 resolution texture image that forms an 8 × 8 black-and-white checkerboard, and set it to be used with the currently bound 2D texture. [Angel 7.5.2] Create texture coordinates (−1.5, 0.0), (2.5, 0.0), (2.5, 10.0), (−1.5, 10.0) for your rectangle, such that the texture repeats four times along the width and ten times along the length of the rectangle. Set up the texture coordinates to be received as an attribute in the vertex shader. [Angel 7.5.3] Set up the texture map as a uniform sampler2D in the fragment shader and link this sampler to the default texture (0). Pass the texture coordinates to the fragment shader and use them to replace the fragment color with a color from the texture map. [Angel 7.5.3] Set the texture filtering parameters to use nearest point sampling. This ensures texture completeness. You should now be able to draw the texture mapped rectangle. [Angel 7.5.4] Create buttons and/or selection menus that enable you to switch between different texture wrapping modes (repeat or clamp-to-edge) and different texture filtering modes (nearest, linear, mipmap). [Angel 3.6, 7.5.3, 7.5.4]	Wrapping mode Filtering mode
Part 3 Start from a diffuse sphere illuminated by a directional light (Part 3 of Worksheet 4). We will now map an earth texture onto the sphere. To do this, we load the texture from an image file and calculate the texture coordinates in the fragment shader. Some steps to follow: When initializing the texture, load the texture image from the file earth.jpg (available on CampusNet). [Angel 7.5.2] The next step is to pass the normal of the sphere to the fragment shader and use it to calculate the texture coordinates. The normals define points on the unit sphere. The unit sphere is then an intermediate surface to which we can map texture coordinates. Use spherical coordinates to define the relation between a surface normal (a point on the unit sphere) and the texture coordinates (u and v). [Angel 7.4] Invert the relation you found using inverse trigonometric functions. Use the resulting formula in the fragment shader to calculate texture coordinates from the surface normal. An atan2 function is needed to get the signs right. In GLSL, the atan2 function is simply to use atan(y, x) instead of atan(y/x). Use the color found by texture look-up as k_a and k_d of the sphere and illuminate the sphere by a directional source and an ambient source. [Angel 6.3.1, 6.3.2, 7.5.3] Spin the globe. The earth texture has high resolution leading to minification issues, especially in the mountain ranges during a spin. Choose a filtering option that betters these minification issues without too much blurring of the texture. Explain your choice. [Angel 7.5.4] ANSWER My choice was to use the linear filtering since it gives a bit smoother texture than using the nearest value. I could've also generated mipmaps for the texture, but it this results in a slightly lower resolution.	Subdivision level:
Part 2 - answers Explain the effect of the different filtering modes and their influence on texture magnification and minification issues. ANSWER Everything boils down to how we draw pixels corresponding to texels that are smaller or bigger than them. We have three ways to do so: gl.NEAREST Valid for both minification and magnification and the simplest of methods. Unfortunately, there are many potential artifacts that can happen when using this technique. It can result in aliasing, "blockiness" of the texture during magnification and shimmering during minification. Using this with lines or other straight edges results in awful aliasing effects. gl.LINEAR Again, valid for both problems. Gives smoother, interpolated results, although Moire patters can still occur. One downside is that it can sometimes result in colors that are not present in the texture due to interpolation – example being gray in out checkerboard. Mipmaps Mipmaps can be generated from the original texture and to be used for minification. They are only available for textures which dimensions are squares with a side being a power of two (as of WebGL 1.0). This family of methods is capable of reducing aliasing and shimmering with better results, but can not eliminate all artifacts.

Exercise

Solution

Part 1 + 2

Create a rectangle with vertices (-4, -1, -1), (4, -1, -1), (4, -1, -21), (−4, −1, −21). Set up a perspective camera with a 90° field of view. Use the default view matrix and draw the rectangle in white on a blue background. Map a procedurally generated checkerboard texture to the rectangle using the following steps:

Create a texture object and bind it as the current 2D texture object. [Angel 7.5.1]
Generate a 64 × 64 resolution texture image that forms an 8 × 8 black-and-white checkerboard, and set it to be used with the currently bound 2D texture. [Angel 7.5.2]
Create texture coordinates (−1.5, 0.0), (2.5, 0.0), (2.5, 10.0), (−1.5, 10.0) for your rectangle, such that the texture repeats four times along the width and ten times along the length of the rectangle. Set up the texture coordinates to be received as an attribute in the vertex shader. [Angel 7.5.3]
Set up the texture map as a uniform sampler2D in the fragment shader and link this sampler to the default texture (0). Pass the texture coordinates to the fragment shader and use them to replace the fragment color with a color from the texture map. [Angel 7.5.3]
Set the texture filtering parameters to use nearest point sampling. This ensures texture completeness. You should now be able to draw the texture mapped rectangle. [Angel 7.5.4]

Create buttons and/or selection menus that enable you to switch between different texture wrapping modes (repeat or clamp-to-edge) and different texture filtering modes (nearest, linear, mipmap). [Angel 3.6, 7.5.3, 7.5.4]

Wrapping mode

Filtering mode

Part 3

Start from a diffuse sphere illuminated by a directional light (Part 3 of Worksheet 4). We will now map an earth texture onto the sphere. To do this, we load the texture from an image file and calculate the texture coordinates in the fragment shader. Some steps to follow:

When initializing the texture, load the texture image from the file earth.jpg (available on CampusNet). [Angel 7.5.2]
The next step is to pass the normal of the sphere to the fragment shader and use it to calculate the texture coordinates. The normals define points on the unit sphere. The unit sphere is then an intermediate surface to which we can map texture coordinates. Use spherical coordinates to define the relation between a surface normal (a point on the unit sphere) and the texture coordinates (u and v). [Angel 7.4]
Invert the relation you found using inverse trigonometric functions. Use the resulting formula in the fragment shader to calculate texture coordinates from the surface normal. An atan2 function is needed to get the signs right. In GLSL, the atan2 function is simply to use atan(y, x) instead of atan(y/x).
Use the color found by texture look-up as k_a and k_d of the sphere and illuminate the sphere by a directional source and an ambient source. [Angel 6.3.1, 6.3.2, 7.5.3]
Spin the globe. The earth texture has high resolution leading to minification issues, especially in the mountain ranges during a spin. Choose a filtering option that betters these minification issues without too much blurring of the texture. Explain your choice. [Angel 7.5.4]

ANSWER

My choice was to use the linear filtering since it gives a bit smoother texture than using the nearest value. I could've also generated mipmaps for the texture, but it this results in a slightly lower resolution.

Subdivision level:

Part 2 - answers

Explain the effect of the different filtering modes and their influence on texture magnification and minification issues.

ANSWER

Everything boils down to how we draw pixels corresponding to texels that are smaller or bigger than them. We have three ways to do so:

gl.NEAREST
Valid for both minification and magnification and the simplest of methods. Unfortunately, there are many potential artifacts that can happen when using this technique. It can result in aliasing, "blockiness" of the texture during magnification and shimmering during minification. Using this with lines or other straight edges results in awful aliasing effects.

gl.LINEAR
Again, valid for both problems. Gives smoother, interpolated results, although Moire patters can still occur. One downside is that it can sometimes result in colors that are not present in the texture due to interpolation – example being gray in out checkerboard.

Mipmaps
Mipmaps can be generated from the original texture and to be used for minification. They are only available for textures which dimensions are squares with a side being a power of two (as of WebGL 1.0). This family of methods is capable of reducing aliasing and shimmering with better results, but can not eliminate all artifacts.