Tutorial: Texturing and Skybox

Simple Texture Viewer

The simple texture viewer in this tutorial uses the stb image loader - which is a pure header file "library" (like the STL in C++).

There are other simple image loading libraries including SOIL and SOIL2 library (Simple OpenGL Image Library) SOIL2. Both are layered over stb.

• Download this texture viewer program. Look at textureViewer.c to see how it loads and draws the texture. Note the calls to glTexCoord2f(..) that occur before each glVertex call. What do you think this program will render?
• Compile the program with the command make.
• Run the program, providing an image file as a command line argument. Three procedurally generated (using perlin noise) image files are provided as examples.
• Now run the program using this wood texture.

Loading a Texture

• Using your code from last week to draw a grid (or alternatively, code from assignment 1), add code to load a texture in the same way as textureViewer.c, refer to the Makefile to see how it is compiled.
• Print the GLuint handle given by loadTexture when loading a valid image file. What happens if loadTexture is called before glutInit? What happens if it is called after?

Texture Mapping

• Use glEnable(GL_TEXTURE_2D) to tell OpenGL to texture geometry, then use glBindTexture(GL_TEXTURE_2D, texture) to tell OpenGL which texture to use.
• Comment out your current rendering of a grid (or sphere) and replace it with a single quad on the xz plane.
• Apply texture coordinates to the quad using the function glTexCoord2f(...). What order do the coordinates need to be provided? Confirm that the quad is textured correctly.
• The function glTexParameteri(...) can be used to change the way a texture is mapped to geometry. Add a call to glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT) and glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT).
• Now try using texture values greater than 1 (ie, from 0,0 to 4,4). What happens? Instead of using GL_REPEAT use GL_CLAMP. What happens now?
• Uncomment the grid rendering code, and provide texture coordinates for it in basically the same way - except that every vertex needs its own texture, or UV, coordinates, otherwise similar to other state settings such as colour the most recent value will be used. For 3D shapes standard convention is to have the x (alternatively u or s) component of the texture in the direction of the tangent, and the y (alternatively v or t) component in the direction of the binormal (or if you have applied the texture first, have the tangent in the direction of the u component, and the binormal in the direction of the v component).
• Try animating the textured grid with a sine wave.

Skybox

A skybox is a use of texture mapping to create a background for a scene, as in the above screenshot of an 'Island Defence' shooting game, where the cloudy sky in the distance is in fact texture mapped quads.

A skybox is a set of six textures which form a cube at distance 1 around the camera. They form a background image with an “infinite” depth. The textures may be separate or all six may be packed into the one texture with varying layouts. They are created with a perspective distortion so that they may be drawn directly as a cube with the camera in the exact center (it is incorrect to move the camera from the center).

It is not possible to physically draw the skybox at infinity. The standard projection matrix will clip geometry outside the near/far planes. Attempting to increase the near/far range will result in depth fighting artifacts. Instead, draw the skybox first without depth testing enabled. Now the box will not affect the depth testing of any following geometry.

Incorrect application of the textures of a skybox can cause a seam at the edges. One possible solution is to offset the coordinates at the edge to half a texel (0.5/width, 0.5/height). Another solution is to provide the correct arguments to glTexParameteri(...) before rendering the texture, with regards to texture clamping. Here are the skybox textures for the above example. Feel free to use a different set of images if you prefer.