Whats the difference between these two OpenGL calls (Basic OpenGL Question)?

Question

It's a really stupid, basic question, but: Can someone please tell me the difference between:

glBegin(GL_QUADS);
glTexCoord3f(0, 0, 0); glVertex3f(0, 1, 0);
glTexCoord3f(1, 0, 0); glVertex3f(1, 1, 0);
glTexCoord3f(1, 1, 0); glVertex3f(1, 0, 0);
glTexCoord3f(0, 1, 0); glVertex3f(0, 0, 0);        
glEnd();

and

glEnableClientState(GL_VERTEX_ARRAY);
glEnableClientState(GL_TEXTURE_COORD_ARRAY);
const GLfloat vertexData[] = {
    0,  0,  0,
    width,  0,  0,
    0,  height, 0,
    width,  height, 0
};
const GLfloat texCoords[] = {
    0,      0,
    1,      0,
    0,      1,
    1,      1
};  
glVertexPointer(3, GL_FLOAT, 0, &vertexData);
glTexCoordPointer(2, GL_FLOAT, 0, &texCoords);
glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);
glDisableClientState(GL_TEXTURE_COORD_ARRAY);
glDisableClientState(GL_VERTEX_ARRAY);

(width & height is the texture size in pixel)

I can't really understand why, but if I use the second code (because OpenGL ES compatible) my texture is on the y-axis inverted. What I'm doing wrong?

Edit:

I dont know, if its relevant - maybe i made a mistake at init the viewport for 2D drawing?

GLint iViewport[4];
glGetIntegerv( GL_VIEWPORT, iViewport );
glMatrixMode(GL_PROJECTION);
glPushMatrix();
glLoadIdentity();   
glOrtho( iViewport[0], iViewport[0]+iViewport[2], iViewport[1]+iViewport[3], iViewport[1], -1, 1 );
glMatrixMode(GL_MODELVIEW);
glPushMatrix();
glLoadIdentity();

Answer 1

Sticking to the simplest, you have 4 vertices with texcoords. Here they are put in parallel:

texcoord/vert
0, 0, / 0, 1
1, 0, / 1, 1
1, 1, / 1, 0
0, 1, / 0, 0

0, 0 /  0,  0
1, 0 /  width,  0
0, 1 /  0,  height
1, 1 /  width,  height

Now, if we reorder them by verts, you can see that the texcoords do not correspond

// sorted verts by "alphabetical" position. 
0, 1, / 0, 0
0, 0, / 0, 1
1, 1, / 1, 0
1, 0, / 1, 1

0, 0 /  0,  0
0, 1 /  0,  height
1, 0 /  width,  0
1, 1 /  width,  height

As you can see, for each equivalent position, the second texture coordinate is inverted between the 2. That explains why the textures are y-flipped.

So if you want to fix it, simply flip them back on the second method:

const GLfloat texCoords[] = {
    0,      1,
    1,      1,
    0,      0,
    1,      0
}; 

Answer 2

Try using the same geometry in each case:

Immediate mode:

glBegin(GL_TRIANGLES);
glTexCoord2f(0, 0, 0); glVertex3f(0, 0, 0);
glTexCoord2f(1, 0, 0); glVertex3f(1, 0, 0);
glTexCoord2f(1, 1, 0); glVertex3f(1, 1, 0);
glTexCoord2f(1, 1, 0); glVertex3f(1, 1, 0);
glTexCoord2f(0, 1, 0); glVertex3f(0, 1, 0);        
glTexCoord2f(0, 0, 0); glVertex3f(0, 0, 0);
glEnd();

Vertex arrays:

glEnableClientState(GL_VERTEX_ARRAY);
glEnableClientState(GL_TEXTURE_COORD_ARRAY);
const GLfloat vertexData[] = {
    0,  0,  0,
    width,  0,  0,
    width,  height, 0
    width,  height, 0
    0,  height, 0,
    0,  0,  0,
};
const GLfloat texCoords[] = {
    0,      0,
    1,      0,
    1,      1
    1,      1
    0,      1,
    0,      0,
};  
glVertexPointer(3, GL_FLOAT, 0, &vertexData);
glTexCoordPointer(2, GL_FLOAT, 0, &texCoords);
glDrawArrays(GL_TRIANGLES, 0, 6);
glDisableClientState(GL_TEXTURE_COORD_ARRAY);
glDisableClientState(GL_VERTEX_ARRAY);

Answer 3

Ok, try this complete GLUT program. I actually tested it this time around :)

#include <vector>
#include <GL/glut.h>

using namespace std;

size_t win_w = 0;
size_t win_h = 0;
double aspect_ratio = 0;

GLuint tex_obj;

void display(void)
{
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

    glMatrixMode(GL_PROJECTION);
    glLoadIdentity();
    glOrtho(-10*aspect_ratio, 10*aspect_ratio, -10, 10, -1, 1);

    glMatrixMode(GL_MODELVIEW);
    glLoadIdentity();

    glEnable(GL_TEXTURE_2D);
    glBindTexture(GL_TEXTURE_2D, tex_obj);

    glPushMatrix();
    glScalef(5,5,0);

    /*
    glBegin(GL_TRIANGLES);
    glTexCoord2f(0, 0); glVertex3f(0, 0, 0);
    glTexCoord2f(1, 0); glVertex3f(1, 0, 0);
    glTexCoord2f(1, 1); glVertex3f(1, 1, 0);
    glTexCoord2f(1, 1); glVertex3f(1, 1, 0);
    glTexCoord2f(0, 1); glVertex3f(0, 1, 0);        
    glTexCoord2f(0, 0); glVertex3f(0, 0, 0);
    glEnd();
    */

    glEnableClientState(GL_VERTEX_ARRAY);
    glEnableClientState(GL_TEXTURE_COORD_ARRAY);
    const GLfloat vertexData[] = {
        0,  0,  0,
        1,  0,  0,
        1,  1,  0,
        1,  1,  0,
        0,  1,  0,
        0,  0,  0,
    };
    const GLfloat texCoords[] = {
        0,      0,
        1,      0,
        1,      1,
        1,      1,
        0,      1,
        0,      0,
    };  
    glVertexPointer(3, GL_FLOAT, 0, &vertexData);
    glTexCoordPointer(2, GL_FLOAT, 0, &texCoords);
    glDrawArrays(GL_TRIANGLES, 0, 6);
    glDisableClientState(GL_TEXTURE_COORD_ARRAY);
    glDisableClientState(GL_VERTEX_ARRAY);

    glPopMatrix();

    glFlush();
    glutSwapBuffers();
}

void reshape(int w, int h)
{
    win_w = w;
    win_h = h;
    aspect_ratio = (double)win_w / (double)win_h;
    glViewport(0, 0, w, h);
}

int main(int argc, char **argv)
{
    glutInit(&argc, argv);
    glutInitDisplayMode(GLUT_RGBA | GLUT_DEPTH | GLUT_DOUBLE);

    glutInitWindowSize(800,600);
    glutCreateWindow("Aspect Ratio");

    glPixelStorei(GL_UNPACK_ALIGNMENT, 1);

    glEnable(GL_TEXTURE_2D);
    glGenTextures(1, &tex_obj);
    glBindTexture(GL_TEXTURE_2D, tex_obj);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST); 

    vector< unsigned char > pixels(4 * 3);
    pixels[3*0+0] = 255;    
    pixels[3*0+1] = 0;    
    pixels[3*0+2] = 0;    

    pixels[3*1+0] = 0;    
    pixels[3*1+1] = 255;    
    pixels[3*1+2] = 0;    

    pixels[3*2+0] = 0;    
    pixels[3*2+1] = 0;    
    pixels[3*2+2] = 255;    

    pixels[3*3+0] = 255;    
    pixels[3*3+1] = 255;    
    pixels[3*3+2] = 255;    

    glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, 2, 2, 0, GL_RGB, GL_UNSIGNED_BYTE, &pixels[0]);

    glutDisplayFunc(display);
    glutReshapeFunc(reshape);
    glutMainLoop();
    return 0;
}