Texture Mapping in OpenGL

Texture Mapping in OpenGL
An Introduction

Prof. David Bernstein
James Madison University

Computer Science Department

bernstdh@jmu.edu

Steps in the Initialization Process

Name the texture
Bind the texture to its name
Specify the parameters to use
Specify an application mode (either replace or modulate)
Create the texture object
Enable texture mapping

Steps in the Rendering Process

Select a texture
Specify a mapping from the texture to pixels

Naming a Texture

The Function:
- void glGenTextures(GLsizei n, GLuint* names)
Purpose:
- Returns n unused "names" (actually integers)
- The "names" need not be contiguous

Naming a Texture (cont.)

An Example

openglexamples/textures/image.c

(Fragment: name)

static GLuint     textureName;

  // Get a name for the texture
  glGenTextures(1, &textureName);

Binding a Texture to a Name

The Function:
- void glBindTexture(GLenum target, GLuint name)
The Target:
- Either GL_TEXTURE_1D, GL_TEXTURE_2D, GL_TEXTURE_3D or GL_TEXTURE_CUBE_MAP

Binding a Texture to a Name (cont.)

An Example

openglexamples/textures/image.c

(Fragment: bind)

  // Bind the texture object to its name
  glBindTexture(GL_TEXTURE_2D, textureName);

Specifying Parameters

The Function:
- void glTexParameter*(GLenum target, GLenum name, TYPE value)
- where the target is either GL_TEXTURE_1D, GL_TEXTURE_2D, GL_TEXTURE_3D or GL_TEXTURE_CUBE_MAP
Wrapping:
- Name: GL_TEXTURE_WRAP_S or GL_TEXTURE_WRAP_T (the \(s\) and \(t\) directions)
- Value: GL_CLAMP, GL_REPEAT, (GL_CLAMP_TO_EDGE, GL_CLAMP_TO_BORDER, GL_MIRRORED_REPEAT)
Border Color:
- Name: GL_TEXTURE_BORDER_COLOR
- Value: RGBA
Magnification and Minification:
- Name: GL_TEXTURE_MAG_FILTER and GL_TEXTURE_MIN_FILTER
- Value: GL_NEAREST and GL_LINEAR (and others)

Specifying Parameters (cont.)

An Example

openglexamples/textures/image.c

(Fragment: parameters)

  // Specify the parameters
  glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);
  glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);
  glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST);
  glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST);

Specifying the Application Mode

The Function:
- void glTexEnvf(GLenum target, Glenum name, TYPE value)
- where target is GL_TEXTURE_ENV and name is GL_TEXTURE_ENV_MODE
Values:
- GL_REPLACE, GL_ADD, GL_COMBINE, or GL_BLEND
- The last three are different ways of combing source and destination pixels

Specifying the Application Mode (cont.)

An Example

openglexamples/textures/image.c

(Fragment: mode)

  // Specify the application mode
  glTexEnvf(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_REPLACE);

Creating the Texture Object

The Function:
- void glTexImage2D(GLenum target, GLint level, GLint internalFormat, GLsizei width, GLsizei height, GLint borderWidth, GLenum format, Glenum type const GLvoid* texels)
- where target is GL_TEXTURE_2D (or one of several other values)
Level:
- 0 when one resolution is supplied
Internal Format:
- 1..4 to indicate which components are included or one of many symbolic constants
Format:
- GL_RGB, GL_RGBA, GL_COLOR_INDEX (or others)
Deleting:
- Use glDeleteTextures()

Creating the Texture Object (cont.)

An Example

openglexamples/textures/image.c

(Fragment: create)

  // Create the texture object
  glTexImage2D(GL_TEXTURE_2D, 0,                // One resolution (i.e. level 0)
               3,                 // 3 components (i.e., RGB)
               256,               // Width
               256,               // Height
               0,                 // Border width
               GL_RGB,            // Format
               GL_UNSIGNED_BYTE,  // Data type of the texels
               image);

Enabling Texture Mapping

The Function:
- void glEnable(GLenum capability)
Capabilities:
- GL_TEXTURE_2D, GL_TEXTURE_3D, (or one of several others)

Enabling Texture Mapping (cont.)

An Example

openglexamples/textures/image.c

(Fragment: enable)

  // Enable textures
  glEnable(GL_TEXTURE_2D);

Rendering

Selecting a Texture:
- Use glBindTexture() again
Mapping to Texels:
- glTexCoord*(TYPE coords)

Rendering (cont.)

An Example

openglexamples/textures/image.c

(Fragment: render)

/**
 * The display callback
 */
void display() {
  // Clear the screen
  glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

  // Select the texture object
  glBindTexture(GL_TEXTURE_2D, textureName);

  // Draw the cube
  for (int f = 0; f < 6; f++) {
    glBegin(GL_POLYGON);
    int v;

    v = faces[f][0];
    glTexCoord2f(0.0, 0.0);  // Map to the bottom left texel
    glVertex3fv(vertices[v]);

    v = faces[f][1];
    glTexCoord2f(0.0, 1.0);  // Map to the bottom right texel
    glVertex3fv(vertices[v]);

    v = faces[f][2];
    glTexCoord2f(1.0, 1.0);  // Map to the top right texel
    glVertex3fv(vertices[v]);

    v = faces[f][3];
    glTexCoord2f(1.0, 0.0);  // Map to the top left texel
    glVertex3fv(vertices[v]);

    glEnd();
  }

  // Force the rendering (off-screen)
  glFlush();

  // Handle the double buffering
  glutSwapBuffers();
}

Reading Images

An Observation:
- This is not OpenGL's responsibility
Utilities:
- GLUT has functions for reading OBJ model files which includes a function glmReadPPM() that reads .ppm files
- SDL has a function SDL_LoadBMP() for reading .bmp files
- Many other utilities exist

Reading Images (cont.)

An Example

openglexamples/textures/image.c

(Fragment: image)

/**
 * Fill the given matrix with a RAW image
 *
 * @param data          The matrix to fill
 */
void readRAWImage(char* filename, GLbyte data[256][256][3]) {
  FILE * file;

  file = fopen(filename, "rb");
  if (file != NULL) {
    fread(data, 256 * 256 * 3, 1, file);
    fclose(file);
  }
}

  // Read the "image"
  GLbyte image[256][256][3];
  readRAWImage("oak.raw", image);

Using Multiple Textures

Using Multiple Textures (cont.)

Initialization

openglexamples/textures/multiple.c

(Fragment: init)

/**
 * Initializations
 */
void init() {
  glClearColor(1.0, 1.0, 1.0, 1.0);
  glShadeModel(GL_FLAT);
  glEnable(GL_DEPTH_TEST);

  // Read the images
  GLbyte image[6][256][256][3];
  readRAWImage("brick.raw", image[0]);
  readRAWImage("brownpaper.raw", image[1]);
  readRAWImage("flagstone.raw", image[2]);
  readRAWImage("frostedglass.raw", image[3]);
  readRAWImage("lake.raw", image[4]);
  readRAWImage("oak.raw", image[5]);

  // Get "names" for the textures
  glGenTextures(6, textureNames);

  for (int i = 0; i < 6; i++) {
    // Select the texture object
    glBindTexture(GL_TEXTURE_2D, textureNames[i]);

    // Set the parameters
    glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);
    glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);
    glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST);
    glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST);

    // Create the texture object
    glTexImage2D(GL_TEXTURE_2D, 0, 3, 256, 256, 0, GL_RGB, GL_UNSIGNED_BYTE,
                 image[i]);
  }

  // Enable textures
  glEnable(GL_TEXTURE_2D);
}

Rendering

openglexamples/textures/multiple.c

(Fragment: render)

/**
 * The display callback.
 */
void display() {
  // Clear the screen
  glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

  // Create the cube
  for (int f = 0; f < 6; f++) {
    // Select a texture object
    glBindTexture(GL_TEXTURE_2D, textureNames[f]);

    // Create the face
    glBegin(GL_QUADS);
    int v;

    v = faces[f][0];
    glTexCoord2f(0.0, 0.0);  // Use bottom left texel
    glVertex3fv(vertices[v]);

    v = faces[f][1];
    glTexCoord2f(0.0, 1.0);  // Use bottom right texel
    glVertex3fv(vertices[v]);

    v = faces[f][2];
    glTexCoord2f(1.0, 1.0);  // Use top right texel
    glVertex3fv(vertices[v]);

    v = faces[f][3];
    glTexCoord2f(1.0, 0.0);  // Use top left texel
    glVertex3fv(vertices[v]);

    glEnd();
  }

  // Force the rendering (off-screen)
  glFlush();

  // Handle the double buffering
  glutSwapBuffers();
}

Manipulating Textures

Scaling:
- gluScaleImage()
Copying:
- glCopyTexImage2D()
Parts:
- glTexSubImage2D()

Non-2D Textures

One-Dimensional:
- Essentially a 2D texture with a height of 1
Three-Dimensional:
- Different grids at different depths
- Mostly used for medical imaging

Mipmaps

Initializing:
- Use glTexParameter*() with a GL_TEXTURE_MIN_FILTER of either GL_NEAREST_MIMPAP_NEAREST, GL_NEAREST_MIMPAP_LINEAR, GL_LINEAR_MIMPAP_NEAREST or GL_LINEAR_MIMPAP_LINEAR
Example:
- See the "Red Book"

Texture Mapping onto a Sphere

We Need a Quadric:
- A quadric (sometimes called a quadric surface) is the locus of zeros of a quadratic polynomial (i.e., letting \(\bs{Q}\) be an \(n \times n\) matrix, \(\bs{r}\) be an \(n\)-dimensional point, and \(s\) be a scalar, the set of \(\bs{p}\) that satisfy \(\bs{p}^T \bs{Q} \bs{p} + \bs{p}^T r + s = 0\)
We Need an Appropriate Texture:
- A cylindrical projection

Texture Mapping onto a Sphere (cont.)

The Display Callback

openglexamples/textures/sphere.c

(Fragment: display)

/**
 * The display callback.
 */
void display() {
  // Clear the screen
  glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

  // Select the texture object
  glBindTexture(GL_TEXTURE_2D, textureName);

  // Create the sphere
  glPushMatrix();
  glRotatef(90.0, 1.0, 0.0, 0.0);

  GLUquadric *quadric = gluNewQuadric();
  gluQuadricDrawStyle(quadric, GLU_FILL);
  gluQuadricNormals(quadric, GLU_SMOOTH);
  gluQuadricTexture(quadric, GL_TRUE);
  gluSphere(quadric, 1.0, 20, 20);
  gluDeleteQuadric(quadric);
  glPopMatrix();

  // Force the rendering (off-screen)
  glFlush();

  // Handle the double buffering
  glutSwapBuffers();
}

Texture Mapping onto other Shapes

We Need the Shape:
- Teapots are always good!
We Need an Appropriate Texture:
- Something irregular works best

Texture Mapping onto other Shapes (cont.)

The Display Callback

openglexamples/textures/teapot.c

(Fragment: display)

/**
 * The display callback
 */
void display() {
  // Clear the screen
  glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

  // Select the texture object
  glBindTexture(GL_TEXTURE_2D, textureName);

  // Create the teapot
  glutSolidTeapot(1.0);

  // Force the rendering (off-screen)
  glFlush();

  // Handle the double buffering
  glutSwapBuffers();
}