OpenGL Textures rendering upside down, and blurred

Question

I was developing a game earlier and came across a bit of an issue! I had started the game with single images. Each texture had it's own file. It was a bit into it that I realized how much of an idiot I was to do that, and tried to switch over to using one picture that contains all the textures ( they're quite small anyway ). Now, a problem arose. When a larger image than my original texture ( 10 x 10 ) is loaded in, it's almost as if it's not being displayed with the nearest neighbor sizing algorithm. What I get is a blurred image. Also it's flipped... Why are either of these issues happening?

Code and images below.

Here is the first showing a sprite sheet containing text and symbols. (It's quite small, 100 x 100 ) http://imgur.com/HU5zEAO.jpg

This is what I get when the program is run. http://i.imgur.com/HeVPdPy.jpg

Here is the main.cpp file

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

#include "spritesheet_class.h"
#include "load_img.h"

GLuint TextSheet;
Spritesheet Test;

void LoadFiles()
{

    GLuint TextSheet = LoadTexture( "davetica.png", 100, 100, 0 );

    Test.SetTex( TextSheet, 100, 100, 10, 10 );

}

void Reshape( int width, int height )
{

    glViewport( 0, 0, (GLsizei)width, (GLsizei)height );
    glMatrixMode( GL_PROJECTION );

    glLoadIdentity();
    glOrtho( 0.0f, width, 0.0f, height, 1.0f, 100.0f );

    glMatrixMode( GL_MODELVIEW );

}

void Display()
{

    glClear( GL_COLOR_BUFFER_BIT );
    glLoadIdentity();

    glTranslatef( 0.0f, 0.0f, -1.0f );

    Test.DrawSprite( 1, 0, 0, 400, 400 );

    glutSwapBuffers();

}

int main( int argc, char **argv )
{

    glutInit( &argc, argv );
    glutInitDisplayMode( GLUT_DOUBLE );

    glutInitWindowPosition( 200, 100 );
    glutInitWindowSize( 512, 512 );

    glutCreateWindow( "Sprite Sheets" );

    glutDisplayFunc( Display );
    glutIdleFunc( Display );
    glutReshapeFunc( Reshape );

    LoadFiles();

    glutMainLoop();

}

Now here is the class header in which I write the Spritesheet class.

#ifndef SPRITESHEET_CLASS_H_INCLUDED
#define SPRITESHEET_CLASS_H_INCLUDED

#include "load_img.h"

class Spritesheet
{

    public:
        void SetTex( GLuint Tex, int ImgW, int ImgH, int HorzAm, int VertAm );

        void DrawSprite( int spriteNum, int xLoc, int yLoc, int width, int height );

    private:
        GLuint Texture;
        int imageWidth, imageHeight, horiAm, vertAm;

};

void Spritesheet::SetTex( GLuint Tex, int ImgW, int ImgH, int HorzAm, int VertAm )
{

    imageWidth = ImgW;
    imageHeight = ImgH;
    horiAm = HorzAm;
    vertAm = VertAm;

    Texture = Tex;

}

void Spritesheet::DrawSprite( int spriteNum, int xLoc, int yLoc, int width, int height )
{

    glEnable( GL_TEXTURE_2D );

    glBindTexture( GL_TEXTURE_2D, Texture );

    glBegin( GL_QUADS );

        glTexCoord2f( 1.0f, 0.0f );
        glVertex2f( xLoc, yLoc );

        glTexCoord2f( 1.0f, 1.0f );
        glVertex2f( xLoc, yLoc+height );

        glTexCoord2f( 0.0f, 1.0f );
        glVertex2f( xLoc+width, yLoc+height );

        glTexCoord2f( 0.0f, 0.0f );
        glVertex2f( xLoc+width, yLoc );

    glEnd();

    glDisable( GL_TEXTURE_2D );

}

#endif // SPRITESHEET_CLASS_H_INCLUDED

Finally, if you need this, here is the file that handles the LoadImage function in which I use to load and format the textures.

#ifndef LOAD_IMG_H_INCLUDED
#define LOAD_IMG_H_INCLUDED

#include <iostream>
#include <stbimg.h>
#include <string>

bool loadCorrectly = true;

using namespace std;

GLuint LoadTexture( const char *filename, int w, int h, int n )
{

    unsigned char *data = stbi_load( filename, &w, &h, &n, 4 );
    GLuint texture;

    if( data == NULL )
    {

        cout << "ERROR: '"<< filename << "' HAS BEEN MODIFIED OR IS MISSING." << endl;
        return 0;

    }else
    {

        cout << "Loaded: '" << filename << "' successfully." << endl;

    }

    glGenTextures( 1, &texture );
    glBindTexture( GL_TEXTURE_2D, texture );
    glTexEnvf( GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE,GL_MODULATE );

    glTexParameterf( GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER,GL_NEAREST );
    glTexParameterf( GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER,GL_NEAREST );

    glTexParameterf( GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_MIRRORED_REPEAT );
    glTexParameterf( GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_MIRRORED_REPEAT );

    gluBuild2DMipmaps( GL_TEXTURE_2D, 3, w, h,GL_RGBA, GL_UNSIGNED_BYTE, data );

    free( data );

    return texture;
}

EDIT: I found out the issue. My image was not a square of two, so therefore it was not displaying properly.

I had this problem a few days ago. I solved the problem by literally flipping the image upside down, but I'd like to know why it actually happened... — hasherr
Yeah, I was thinking about going that route. But it seems a bit sloppy to be honest haha. — DavidBittner

GraphicsMuncher GraphicsMuncher · Accepted Answer · 2013-07-22T03:41:49

Your images are flipped because you have not flipped them to be oriented properly. It sounds tautological, but OpenGL's coordinate system maps textures down to up where (0,0) is in the bottom left and (1,1) is in the top right. Fixing this is a textbook type of exercise.
You need to call glActiveTexture(GL_TEXTURE0) to make subsequent gl* calls know which texture they're modifying (ie make that texture active). The initial value is GL_TEXTURE0 but I'd still put it in so that you don't end up with potential problems down the line.
I know it's not part of your question, but you're using OpenGL code that's been deprecated for 7 years. As a general suggestion, you should switch to the programmable pipeline. Here's a link to ogldev to the basics in modern OpenGL, or at least some of it is 4.0+. Some is in the 3's but shaders are better than FFP. Here's another short few from Swiftless. Basically search for OpenGL 4.0 or later and the Googles will guide you. It's a steeper learning curve but it is worth it.

OpenGL Textures rendering upside down, and blurred

2 Answers