Texturing

A picture is worth a thousand words

Texturing

Texturing is the art of doing this with any picture to any model.

(This is Opus the Penguin wrapped around a sphere.)

Texturing

First, a few words about what a picture is: A picture is a 2D array of color values (RGB or RGBA). Each element in the array is one pixel. The size of an image in pixels is its width times its height. A picture stored in memory is called a bitmap.

Next, a few words about images in Windows: Windows BMPs store DIBs, or Device Independent Bitmaps. Loading a DIB is a really huge hassle.

Next, a few words about images in OpenGL: The height and width of any bitmaps in OpenGL must be

powers of two (32x32, 512x512, but not 31x31 or 42x27). The GLAUX library simplifies loading DIBs for you.

Texturing

A bitmap in memory:

...a two-dimensional array of color values

Texture Co-ordinates

We use texture co-ordinates to identify locations in the texture itself. (0,0) is the lower left-hand corner of the texture. (0.5, 0.5) is the middle of the texture. (1,1) is the upper right-hand corner.

Caveat: OpenGL draws bottom-to-top, not top-to-bottom, so in your own rendering you may have to invert Y.

(1,1)

(0,0)

Texture Mapping

Texture-mapping is the mapping from 3D vertices in your model to 2D texture co-ordinates. This associates a particular point on your polygon with a

particular point on your picture. As the polygon is rendered,

the inside of the polygon is filled in with the space of the picture that runs between the texture co-ordinates of the polygon’s vertices.

(0,1)

(1,0)

(0,0)

Texture Mapping

Shifting texture co-ordinates If the values you map to your texture co-ordinates shift, the

image will appear to shift on the surface.

The image at right is drawnwith texture co-ordinatesshifted by (0.25, 0.25).

(0.25,1.25)

(1.25,0.25)

(0.25,0.25)

Texture Mapping in OpenGL

OpenGL works on the idea that you bind the current texture before you glBegin(), and then you specify texture co-ordinates for each glVertex() you draw.

Fortunately, the GLAUX library makes file loading easy. Remember, your image dimensions MUST be multiples of 2. To compile an app which uses glaux functions, you’ll need to

link glaux.lib. To link a .lib library, go to Project / Settings... / Link tab, and add ‘glaux.lib’ to the list of Library Modules.

Texture Mapping in OpenGL

Loading BMPs with GLAUX:Gluint arrTextures[NUM_TEXTURES];

char *arrNames[NUM_TEXTURES] = { “filename1.bmp”, “filename2.bmp”, ... };

glEnable(GL_TEXTURE_2D);

glGenTextures(NUM_TEXTURES, arrTextures);

for (i = 0; i<NUM_TEXTURES; i++)

{

AUX_RGBImageRec *pAuxImgLoader = auxDIBImageLoad(arrNames[i]);

if (pAuxImgLoader && pAuxImgLoader->data)

{

glBindTexture(GL_TEXTURE_2D, arrTextures[i]);

glTexImage2D(GL_TEXTURE_2D,

0, 3,

pAuxImgLoader->sizeX,

pAuxImgLoader->sizeY,

0, GL_RGB, GL_UNSIGNED_BYTE,

pAuxImgLoader->data);

glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MIN_FILTER,GL_LINEAR);

glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MAG_FILTER,GL_LINEAR);

free(pAuxImgLoader->data);

}

}

Texture Mapping in OpenGL

Displaying a texture-mapped square

glBindTexture(GL_TEXTURE_2D, arrTextures[whichTexture]);

glColor3f(1,1,1);

glNormal3f(0,0,1);

glBegin(GL_QUADS);

glTexCoord2f(0,1); glVertex3f(-5,5,0);

glTexCoord2f(0,0); glVertex3f(-5,-5,0);

glTexCoord2f(1,0); glVertex3f(5,-5,0);

glTexCoord2f(1,1); glVertex3f(5,5,0);

glEnd();

glBindTexture(GL_TEXTURE_2D, 0);

Texture Mapping in OpenGL

Texturing a parametric surface Texture-mapping a parametric surface is very easy.

If u and v range from 0 to 1, then they also cover the range of the texture co-ordinates.

You can set the current texture co-ordinate as (u,v) to map your image to any parametric surface.

Texture Mapping in OpenGL

Texturing a parametric surface This should look familiar...

..........................

A = evaluateFunction(which, u, v);

B = evaluateFunction(which, u, v+step);

C = evaluateFunction(which, u+step, v+step);

D = evaluateFunction(which, u+step, v);

N = (((C-A).normalized()) ^ ((B-A).normalized())).normalized();

glColor3f(1,1,1);

glNormal3f(N.x(),N.y(),N.z());

glBegin(GL_QUADS);

{

glTexCoord2f(u, v); glVertex3f(A.x(),A.y(),A.z());

glTexCoord2f(u, v+step); glVertex3f(B.x(),B.y(),B.z());

glTexCoord2f(u+step, v+step); glVertex3f(C.x(),C.y(),C.z());

glTexCoord2f(u+step, v); glVertex3f(D.x(),D.y(),D.z());

}

glEnd();

..........................