OpenGL: Properly attach Texture

Question

Problem:

Been trying for hours to set a simple png of a cross hair as a texture (so I could later stick in the middle of the view like a normal cross hair), without luck.

I'm coding in Java with JOGL.

P.S Also need to make the background of the texture transparent. But that's another problem.

Code:

public void display(GLAutoDrawable gLDrawable) {
    final GL2 gl = gLDrawable.getGL().getGL2();
    gl.glClear(GL2.GL_COLOR_BUFFER_BIT | GL2.GL_DEPTH_BUFFER_BIT);
    gl.glLoadIdentity();  // Reset The View
    gl.glTranslatef(0.0f, 0.0f, -5.0f);

    gl.glTexParameteri ( GL2.GL_TEXTURE_2D,GL2.GL_TEXTURE_WRAP_T, GL2.GL_REPEAT );
    gl.glTexParameteri( GL2.GL_TEXTURE_2D,GL2.GL_TEXTURE_WRAP_S, GL2.GL_REPEAT );
    texture.bind(gl);

    gl.glBegin(GL2.GL_QUADS);
    // Front Face
    gl.glTexCoord2d(0, 0);
    gl.glVertex3d(0, 0, 0);
    gl.glTexCoord2d(0, 1);
    gl.glVertex3d(0, 1, 0);
    gl.glTexCoord2d(1, 1);
    gl.glVertex3d(1, 1, 0);
    gl.glTexCoord2d(1, 0);
    gl.glVertex3d(1, 0, 0);
    gl.glEnd();
}

public void init(GLAutoDrawable drawable) {
    final GL2 gl = drawable.getGL().getGL2();
    gl.glShadeModel(GL2.GL_SMOOTH);              // Enable Smooth Shading
    gl.glClearColor(0.0f, 0.0f, 0.0f, 0.5f);    // Black Background
    gl.glClearDepth(1.0f);                      // Depth Buffer Setup
    gl.glEnable(GL2.GL_DEPTH_TEST);              // Enables Depth Testing
    gl.glDepthFunc(GL2.GL_LEQUAL);               // The Type Of Depth Testing To Do
    // Really Nice Perspective Calculations
    gl.glHint(GL2.GL_PERSPECTIVE_CORRECTION_HINT, GL2.GL_NICEST);
    gl.glEnable(GL2.GL_TEXTURE_2D);
    gl.glEnable(GL2.GL_BLEND);
    try {
        String filename = "resources/misc/crosshair.png";
        texture=TextureIO.newTexture(new File( filename ),true);
    } catch (IOException e) {
        e.printStackTrace();
        throw new RuntimeException(e);
    }
    gl.glTexParameteri(GL2.GL_TEXTURE_2D, GL2.GL_TEXTURE_MIN_FILTER, GL2.GL_LINEAR);
    gl.glTexParameteri(GL2.GL_TEXTURE_2D, GL2.GL_TEXTURE_MAG_FILTER, GL2.GL_LINEAR);
}

Result:

Original png:

Edit

Changed code above according to comments, here's the new result:

Another Edit

Had to add this line after glBlend, everything works after that:

gl.glBlendFunc(GL2.GL_SRC_ALPHA, GL2.GL_ONE_MINUS_SRC_ALPHA);

Answer 1

SurvivalMachine nailed one of your problems (you can see that the texture is repeated twice).

Your other problem (the texture is a big blob instead of a crosshair) is because you don't use transparency : some of the completely transparent pixels of your texture have a green color value (that's a common sight with optimized PNGs).

Just enable blending with gl.glEnable(GL.GL_BLEND);, and you'll have proper color blending in the transparent areas.

Answer 2

Maybe there's more problems, but at least this looks incorrect:

gl.glTexCoord2f(2f, 1.0f);

Your texture is repeated horizontally 2 times because its wrap mode is repeat and the coordinates you set are over 1 (in this case 2f). To fix this, replace 2f with 1f:

gl.glTexCoord2f(1f, 1.0f);