Why I draw an png image using glDrawPixels() can't work well?

General Discussions
#1

now I first use the Slick-Util which lwjgl recommand to load my game data(now just some image^_^)
the code like these:


png = new PNGImageData();
		try {
		png.loadImage(ResourceLoader.getResourceAsStream("src/img/logo.png"));
		System.out.println(png.isRGB());
		}
		catch (IOException e) {
			e.getStackTrace();
		}

then I draw image like these:


GL14.glWindowPos2d(20, 20);
		//GL11.glBitmap(142, 142, 0, 0, 0, 0, this.byteBuffer);
		GL11.glDrawPixels(142, 142, GL11.GL_RGB, GL11.GL_BYTE, png.getImageBufferData());

but the result is let me sad !! image can’t display correct
!!

I don’t know why? how about you to load image and draw it in openGL?
(what I sad about is 2d Image not Texture, but I can’t find any tutorial for 2D openGL)
Thx for help^_^

#2

is there anyone can help me? I ???really need help!!

#3

Try changing it to GL_RGBA and GL_UNSIGNED_BYTE

#4

Sorry I just try it
but the image is still error display…
how do you to draw an 2d img in onpenGL?
use Texture’s bind? or GL11.glDrawPixels()?..
I want to make a 2d game using OpenGL but I just an Newer for it
so I need your help…
Thx

#5

Images are drawn using textures. Bind the texture and draw a quad where you want the texture to show up. Don’t forget to set the right texture coordinates (glTexCoords)

#6

uh Thx
but can we use use glDrawPixels() to direct draw image on screen?
I want to know why glDrawPixels doesn’t work well

#7

If u use drawPixels please tell me why I can’t render image rightly。。。

#8

Merged topics. :point:

#9

Might be worth mentioning what exactly is going wrong. Nothing appears? Crash? You see something but the pixels are garbage?

#10

glDrawPixels requires passing around byte data from CPU to GPU, which may be potentially very huge and could potentially stall the pipeline. glTexImage2D will “store” the byte data in a texture on the GPU, allowing you to reuse it very quickly.

If you’re trying to draw a sprite, load it with SlickUtil’s TextureLoader (which allows for more formats than just PNG). Then set the projection matrix to orthographic and render a quad.

If that doesn’t make sense, start with Google, the LWJGL wiki, and a modern OpenGL book. :slight_smile:

#11

I have see something but pixels are garbage…
It’s my code:


import java.io.IOException;
import java.nio.ByteBuffer;
import org.lwjgl.LWJGLException;
import org.lwjgl.opengl.Display;
import org.lwjgl.opengl.DisplayMode;
import org.lwjgl.opengl.GL11;
import org.lwjgl.opengl.GL14;
import org.newdawn.slick.opengl.PNGImageData;
import org.newdawn.slick.util.ResourceLoader;

public class GameMain2 {
	private ByteBuffer byteBuffer;
	/**
	 * 
	 * @param args
	 */
	public static void main(String[] args) {
		new GameMain2().launch();
	}

	public void launch() {
		try {
			Display.setDisplayMode(new DisplayMode(800, 600));
			Display.setTitle("YourGame");
			Display.create();
			this.initGL();
		}
		catch (LWJGLException e) {
			e.getStackTrace();
		}

		while (!Display.isCloseRequested()) {
			this.render();
			Display.update();
			Display.sync(60);
		}
		Display.destroy();
	}

	private void initGL() {
		GL11.glClearColor(0, 0, 0, 0);
		
		GL11.glOrtho(0, 800, 0, 600, -1, 1); 

		//GL11.glEnable(GL11.GL_TEXTURE_2D);
		
		try {
			PNGImageData png = new PNGImageData();
			png.loadImage(ResourceLoader.getResourceAsStream("src/img/logo.png"));
			this.byteBuffer = png.getImageBufferData();
		}
		catch (IOException e) {
			e.getStackTrace();
		}
	}
	
	private void render() {
		GL11.glClear(GL11.GL_COLOR_BUFFER_BIT);
		//GL11.glColor3f(0, 1, 1);
		GL14.glWindowPos2d(20, 20);
		//GL11.glBitmap(142, 142, 0, 0, 0, 0, this.byteBuffer);
		GL11.glDrawPixels(142, 142, GL11.GL_RGB, GL11.GL_BYTE, this.byteBuffer);
	}
}

this is the image what I want to display（I don’t know why img can’t display， you can click it to display） :

http://www.imageuploads.net/ims/pic.php?u=4279233yOM&i=200997

and this is the garbage pixels what display:

http://www.imageuploads.net/ims/pic.php?u=4279233yOM&i=200998

Did you know where has wrong? I feel so anxious now…

#12

Weird. I would expect something like this when you have manual loading code, but you’re just using standard Slick/LWJGL stuff.

I’ve managed to garbage up many an image in my day and it was usually because I fudged up the bit-order of the color components. The only thing I can come up with is to use GL_RGBA in stead of GL_RGB since its going to be 32 bits data with an alpha channel.

#13

so is this error display cause by sllick-util’s internal mechanism? I just abuse the class and the methods in slick-util?

#14

So my suggestion didn’t change anything?

I’m not too familiar with Slick but I like to believe that you are not the first person to use that code so you’re not going to be the one that discovers that it is in fact broken. Simple reasoning.

#15

sor my English is not good
so may always miss what you say…
but now just thought that there are glDrawPixels method in opengl but I had to use the Texture bind to make a 2D game it’s feel so shit。。（may because I just a newer for opengl and I always think that use Texture may more waste performance because we should draw a rec and bind texture, but drawPixels just need draw it, right?)

#16

Any issues with the image is likely because of the format you are specifying – it should be an unsigned byte in either RGB, RGBA, LUMINANCE, or LUMINANCE_ALPHA depending on the output of the PNG decoder.

Read my earlier post.

#17

The images aren’t loading, but I think I know what you’re missing: alignment. OpenGL works with pixel alignments of 4 by default. Your image resolution is not dividable by 4. (142 / 4 = 35.5).

Add this in initGL():


GL11.glPixelStorei(GL11.GL_UNPACK_ALIGNMENT, 1);

GL11.glPixelStorei(GL11.GL_PACK_ALIGNMENT, 1);

Textures are faster than glDrawPixels()! They are more difficult than glDrawPixels(), but they are faster because GPUs are made for drawing triangles with textures (in 3D games) and the texture is stored on the GPU’s VRAM, so it does not have to be uploaded every frame.

#18

thanks for your help
but it’s still no work even if I add these code
So now I don’t want to think it until one day I know the cause ::slight_smile:

#19

… If you had taken my advice …

LWJGL Wiki - Loading Images with Slick-Util

Maybe you should start smaller – learn the core concepts of programming, objects, etc. and try to make a simple Pong clone in LibGDX, Slick2D or another simple library. :slight_smile:

#20

Thx for your advice
I will try :smiley: