1
\$\begingroup\$

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:

demonstration

Original png:

demonstration

Edit

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

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);
\$\endgroup\$
3
\$\begingroup\$

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.

\$\endgroup\$
  • \$\begingroup\$ I changed the code, also tried to put GL_BLEND as you suggested (in several places). The result was always the same, updated the question... \$\endgroup\$ – Jjang Jul 21 '16 at 17:54
  • \$\begingroup\$ I chose your answer because it directed me to think about blending. I actually had to add your line, plus the following: gl.glBlendFunc(GL2.GL_SRC_ALPHA, GL2.GL_ONE_MINUS_SRC_ALPHA); Now everything works! \$\endgroup\$ – Jjang Jul 21 '16 at 18:02
  • \$\begingroup\$ @Jjang I'm a bit surprised that this blending function is not the default, but kudos for figuring it out :) \$\endgroup\$ – Quentin Jul 21 '16 at 19:08
2
\$\begingroup\$

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);
\$\endgroup\$
  • \$\begingroup\$ I fixed that, now no duplicates but still looks bad... \$\endgroup\$ – Jjang Jul 21 '16 at 17:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.