68

I know that I must call one of the following before each call to glVertex:

glTexCoord(0,0); 
glTexCoord(0,1); 
glTexCoord(1,1); 
glTexCoord(1,0);

But I have no idea what they mean. I know, however, that if I multiply (or is that divide?) the right side (or is it all the ones?) by two, my texture expands, and if I do the opposite, my texture repeats twice. I've managed to code a texture atlas by applying operations until it worked. But I have no proper idea about what's going on. Why does dividing these coordinates affect the image and why does reversing them mirror it? How do texture coordinates work?

Hari
  • 1,561
  • 4
  • 17
  • 26
mk.
  • 11,360
  • 6
  • 40
  • 54

4 Answers4

162

Texture coordinates specify the point in the texture image that will correspond to the vertex you are specifying them for. Think of a rectangular rubber sheet with your texture image printed on it, where the length of each side is normalized to the range 0-1. Now let's say you wanted to draw a triangle using that texture. You'd take 3 pins and place them in the rubber sheet in the positions of each of your desired texture coordinates. (Say [0, 0], [1, 0] and [1, 1]) then move those pins (without taking them out) to your desired vertex coordinates (Say [0, 0], [0.5, 0] and [1, 1]), so that the rubber sheet is stretched out and the image is distorted. That's basically how texture coordinates work.

If you use texture coordinates greater than 1 and your texture is set to repeat, then it's as if the rubber sheet was infinite in size and the texture was tiled across it. Therefore if your texture coordinates for two vertices were 0, 0 and 4, 0, then the image would have to be repeated 4 times between those vertices.

enter image description here @b1nary.atr0phy Image for all you visual thinkers!

geofftnz
  • 9,954
  • 2
  • 42
  • 50
  • 5
    The pins analogy is great. I was thinking of stretching and moving the texture over the quad, rather than the quad 'taking a sample' from the texture using texture coords. Thanks. – mk. Apr 04 '11 at 03:47
  • 4
    I might be wrong but for webgl the texture's origin is in the top left instead of the bottom left. I believe it is the same for all gls. The picture caused confusion. – 0xcaff Jun 07 '16 at 03:27
  • I know this is an old post, but texture dimensions no longer have to be multiples of two. – SwiftsNamesake Oct 12 '16 at 15:31
  • 2
    @SwiftsNamesake that was probably already true back when I wrote that answer too... I'll go take it out. – geofftnz Oct 15 '16 at 09:06
  • @geofftnz yes and no, thet could be not, but they were and are resampled internally into such – Swift - Friday Pie Jul 08 '20 at 17:21
9

OpenGL uses inverse texturing. It takes coordinates from world space (X,Y,Z) to texture space (X,Y) to discrete space(U,V), where the discrete space is in the [0,1] domain.

Take a polygon, think of it as a sheet of paper. With this:

glTexCoord(0,0); 
glTexCoord(0,1); 
glTexCoord(1,1); 
glTexCoord(1,0);

You tell OpenGL to draw on the whole sheet of paper. When you apply modifications your texturing space modifies accordingly to the give coordinates. That is why for example when you divide you get the same texture twice, you tell OpenGL to map half of your sheet, instead of the whole sheet of paper.

Cristina
  • 1,991
  • 3
  • 17
  • 24
6

Chapter 9 of the Red Book explains this in detail and is available for free online.

http://www.glprogramming.com/red/chapter09.html

Texture coordinates map x,y to the space 0-1 in width and height texture space. This is then stretched like a rubber sheet over the triangles. It is best explained with pictures and the Red Book does this.

dorbie
  • 109
  • 2
  • 2
5

For 2D image textures, 0,0 in texture coordinates corresponds to the bottom left corner of the image, and 1,1 in texture coordinates corresponds to the top right corner of the image. Note that "bottom left corner of the image" is not at the center of the bottom left pixel, but at the edge of the pixel.

Also interesting when uploading images:

8.5.3 Texture Image Structure

The texture image itself (referred to by data) is a sequence of groups of values. The first group is the lower left back corner of the texture image. Subsequent groups fill out rows of width width from left to right; height rows are stacked from bottom to top forming a single two-dimensional image slice; and depth slices are stacked from back to front.

Note that most image formats have the data start at the top, not at the bottom row.

Andreas Haferburg
  • 5,189
  • 3
  • 37
  • 63