Drawing textured quads OpenGL not working - java

I am trying to render a group of textured quads.
I can get colored quads to render, but not textured ones (screen comes up empty.)
I am using LWJGL and PNGDecoder.
Code for initializing my OGL:
GL11.glMatrixMode(GL11.GL_PROJECTION);
GL11.glLoadIdentity();
GL11.glOrtho(0, 800, 0, 600, 1, -1);
GL11.glMatrixMode(GL11.GL_MODELVIEW);
GL11.glEnable(GL11.GL_TEXTURE_2D);
Code for decoding my image:
ByteBuffer buffer = null;
InputStream in = ClassLoader.getSystemResourceAsStream(filename);
try {
buffer = decodeStreamToBuffer(in);
} finally {
in.close();
}
return buffer;
My decodeStreamToBuffer(InputStream in):
PNGDecoder decoder;
ByteBuffer buf = null;
try {
decoder = new PNGDecoder(in);
buf = ByteBuffer.allocateDirect(4*decoder.getWidth()*decoder.getHeight());
decoder.decode(buf, decoder.getWidth()*4, Format.RGBA);
buf.flip();
} catch (Exception e) {
e.printStackTrace();
}
return buf;
My rendering code:
GL11.glClear(GL11.GL_COLOR_BUFFER_BIT | GL11.GL_DEPTH_BUFFER_BIT);
GL11.glColor3f(0.5f, 0.5f, 1.0f); //Still there to test color quads.
// draw quad
GL11.glPushMatrix();
GL11.glTranslatef(screencenter.getX(), screencenter.getY(), 0);
GL11.glScalef(1f, 0.5f, 1f);
GL11.glRotatef(camRotation, 0f, 0f, 1f);
GL11.glTranslatef(-screencenter.getX(), -screencenter.getY(), 0);
GL11.glBindTexture(GL11.GL_TEXTURE_2D, texture);
GL11.glBegin(GL11.GL_TEXTURE_2D);
GL11.glTexCoord2f(0.0f, 0.0f);
GL11.glVertex2f(0, 0);
GL11.glTexCoord2f(1.0f, 0.0f);
GL11.glVertex2f(32, 0);
GL11.glTexCoord2f(1.0f, 1.0f);
GL11.glVertex2f(32, 32);
GL11.glTexCoord2f(0.0f, 1.0f);
GL11.glVertex2f(0, 32);
GL11.glEnd();
GL11.glPopMatrix();
When I leave the texture binding out and change the GL_TEXTURE_2D to GL_MODELVIEW it all works... but with color instead of a texture. Am I making a noob mistake here?

This is wrong GL11.glBegin(GL11.GL_TEXTURE_2D);
The glBegin method an primitive mode GLenum.
Thereby you either use:
GL_POINTS
GL_LINES
GL_LINE_STRIP
GL_LINE_LOOP
GL_TRIANGLES
GL_TRIANGLE_STRIP
GL_TRIANGLE_FAN
GL_QUADS
GL_QUAD_STRIP
GL_POLYGON
The mode you use specify what you are rendering. In your case you would code GL_QUADS So to fix your code you need to replace GL11.glBegin(GL11.GL_TEXTURE_2D); with GL11.glBegin(GL11.GL_QUADS);.
Extra
Also take in mind that the glVertex, glNormal, glTexCoord, etc. Methods are deprecated and should not be used. You are suppose to use VBOs and Shaders. Though if you are learning OpenGL then keep using the deprecated methods since they are good and easy to use when learning!

Related

Problems with OpenGL Rotation and Scale

I just started trying out some OpenGL with java. I downloaded the LWJGL and the Slick-Util Library. Now I'm trying to paint some images on the screen which is working quite fine. But I have to big problems:
When i rotate my image and it's about 45° you can see some bits of the same image at the corners like it's a spritesheet with the same image, which get rotated.
How do I scale my image? It's pretty small and the glScale() func scales the image itself, but not the space where it's printed. So if the image has a size of 16*16 pixels and i scale it up i just see a part of the the scaled image in the 16*16pixels
Here's my code for the OpenGL:
public class Widget {
String name;
int angle;
public Texture image_texture;
public String image_path ;
public int image_ID;
public int cord_x = 0;
public int cord_y = 0;
static LinkedList<Widget> llwidget = new LinkedList<Widget>();
public Widget(String path){
llwidget.add(this);
image_path = path;
try {
image_texture = TextureLoader.getTexture("PNG", ResourceLoader.getResourceAsStream(image_path), GL_NEAREST);
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
};
image_ID = image_texture.getTextureID();
glEnable(GL_TEXTURE_2D);
glClearColor(0.0f, 0.0f, 0.0f, 0.0f);
glEnable(GL_BLEND);
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
glViewport(0,0,Display.getWidth(),Display.getHeight());
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
glOrtho(0, Display.getWidth(),Display.getHeight(), 0, 1, -1);
glMatrixMode(GL_MODELVIEW);
}
void render(){
glMatrixMode(GL_TEXTURE);
glLoadIdentity();
glTranslatef(0.5f,0.5f,0.0f);
//! Graphics bug
glRotatef(angle,0.0f,0.0f,1.0f);
//
glTranslatef(-0.5f,-0.5f,0.0f);
//! Doesn't work
glScalef(2f, 2f, 2f);
//
glMatrixMode(GL_MODELVIEW);
Color.white.bind();
image_texture.bind();
glBegin(GL_QUADS);
glTexCoord2f(0,0);
glVertex2f(cord_x, Display.getHeight() - cord_y);
glTexCoord2f(1,0);
glVertex2f(cord_x+image_texture.getTextureWidth(),Display.getHeight() - cord_y);
glTexCoord2f(1,1);
glVertex2f(cord_x+image_texture.getTextureWidth(),Display.getHeight() - cord_y+image_texture.getTextureHeight());
glTexCoord2f(0,1);
glVertex2f(cord_x,Display.getHeight() - cord_y+image_texture.getTextureHeight());
glEnd();
}
}
Question 1:
Calling glScalef(2f, 2f, 2f) in GL_TEXTURE mode results in a zoom of the texture inside a quad which has the size determined by your glVertex2f calls. This could lead to unwanted artifacts at the edge of the quad.
Question 2:
The main problem at this is that the program is not in a state which allows to translate your quad coordinates when glScalef(2f, 2f, 2f) got called. After calling glMatrixMode(GL_TEXTURE) all following matrix operations affect the texture matrix. To get a zoom effect of the quad which you draw with glVertex2f you need to get in GL_MODELVIEW Mode before calling glScale2f.
Alternative:
With glVertex2f you determine on which coordinates you draw the quad. The parameters of glVertex2f are coordinates on which to draw vertices. So altering this params would also do the job.

My Engine flickers when I try to render 2D and 3D

I am working with LWJGL to make a game. It's very basic. Before even implementing any sort of gpu rendering, or fancy model loaders, I wanted to make sure I could at least render 2D and 3D at the same time; My game has a gui while you walk around. Or at least, it is supposed to. Here is my initialization code; The flickering does not happen when I only render 3D.
public void clearGL() {
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT );
glLoadIdentity();
}
public void init3D() {
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
gluPerspective((float) 68, Engine.size[0] / Engine.size[1], 0.3f, 1000);
glMatrixMode(GL_MODELVIEW);
glEnable(GL_TEXTURE_2D);
glShadeModel(GL_SMOOTH);
glClearColor(0.0f, 0.0f, 0.0f, 0.5f);
glClearDepth(1.0f);
glEnable(GL_DEPTH_TEST);
glDepthFunc(GL_LEQUAL);
}
public void render3D(Camera c) {
init3D();
clearGL();
//Do translations here
glTranslatef(0f, -5f, 0f);
glColor3f(0, 1, 0);
glBegin(GL_QUADS);
glVertex3f(-50f, 0f, -50f);
glColor3f(0, 0, 1);
glVertex3f(50f, 0f, -50f);
glColor3f(1, 0, 0);
glVertex3f(50f, 0f, 50f);
glColor3f(0, 1, 1);
glVertex3f(-50f, 0f, 50f);
glEnd();
}
public void init2D() {
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
glOrtho(0, Engine.size[0], 0, Engine.size[1], -1, 1);
glMatrixMode(GL_MODELVIEW);
glEnable(GL_TEXTURE_2D);
glLoadIdentity();
}
public void render2D() {
init2D();
glBegin(GL_QUADS);
glVertex2f(0f, 50f);
glVertex2f(50f, 50f);
glVertex2f(50f, 0f);
glVertex2f(0f, 0f);
glPopMatrix();
}
I can tell its rendering at all because I am drawing a quad to represent the floor in JBullet. For some reason it is above the cameras head, but when I translate the camera up towards it it get's further away, which is why I translated the Camera to -5. That's another problem, for another day.
You should really consider disabling the depth test when you "switch" from 3D to 2D if you are going to draw at Z=0 (middle of your depth range). Half of the visible space in your 3D scene will potentially obstruct your 2D drawing if you do not do this. Alternatively, you could replace your glVertex2f (...) calls with glVertex3f (x,y, -1.0) to bring everything in 2D to the very front of the depth range.
But the really weird thing about all of this is the end of your render2D (...) function: You never call glEnd (...) and you pop a matrix that you appear never to have pushed. That is two sources of mismatched weirdness, either one of them could be causing your problem.

OpenGL: 2D Overlay is white over of 3D Scene

I'm trying to make a copy of MineCraft in Java using OpenGL (LWJGL). The problem I'm facing is that everything of my 2D overlay (aiming cross in the middle, menus, etc...) are all white. The 3D part of the game works great: every cube has a texture on each side.
But when I try to draw the overlay, as I said, every texture is white, but I can see the shape of it (because it has transparent areas). I'll add a picture of it.
(This is supposed to be the inventory)
As you can see, the overlay is completely white. And it should look like this:
I'm already searching the web for hours. Can't seem to find a solution.
This drives my crazy... I already searched for instructions of how to create a 2D overlay on a 3D scene, but they don't help either. So I though, I'll give StackOverflow a try.
Hopefully someone can help me?
Thanks for reading my question and for the (hopefully coming) answers!
Martijn
Here is the code:
Initialising OpenGL
public void initOpenGL() throws IOException
{
// init OpenGL
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
glOrtho(0, 800, 600, 0, 1, 300);
glMatrixMode(GL_MODELVIEW);
float color = 0.9f;
glClearColor(color, color, color, color);
glEnable(GL_TEXTURE_2D);
glHint(GL_PERSPECTIVE_CORRECTION_HINT, GL_NICEST);
glShadeModel(GL_FLAT);
glEnable(GL_DEPTH_TEST);
glDepthFunc(GL_LEQUAL);
glEnable(GL_LINE_SMOOTH);
glEnable(GL_CULL_FACE);
glEnable(GL_FOG);
glFog(GL_FOG_COLOR, MineCraft.wrapDirect(color, color, color, 1.0f));
glFogi(GL_FOG_MODE, GL_LINEAR);
glFogf(GL_FOG_START, _configuration.getViewingDistance() * 0.8f);
glFogf(GL_FOG_END, _configuration.getViewingDistance());
glFogi(NVFogDistance.GL_FOG_DISTANCE_MODE_NV, NVFogDistance.GL_EYE_RADIAL_NV);
glHint(GL_FOG_HINT, GL_NICEST);
glEnable(GL_BLEND);
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
}
Configuring the matrixes for drawing the overlay (Out of inspiration, I literally copied all the OpenGL calls for this method from BlockMania (another open-source MineCraft copy), which works great)
public void renderOverlay()
{
glMatrixMode(GL_PROJECTION);
glPushMatrix();
glLoadIdentity();
GLU.gluOrtho2D(0, conf.getWidth(), conf.getHeight(), 0);
glMatrixMode(GL_MODELVIEW);
glEnable(GL_COLOR_MATERIAL);
glPushMatrix();
glLoadIdentity();
glDisable(GL_CULL_FACE);
glDisable(GL_DEPTH_TEST);
glEnable(GL_BLEND);
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
/** RENDER **/
if (_activatedInventory != null)
{
_activatedInventory.renderInventory();
}
glDisable(GL_BLEND);
glEnable(GL_DEPTH_TEST);
glEnable(GL_CULL_FACE);
glPopMatrix();
glMatrixMode(GL_PROJECTION);
glPopMatrix();
glMatrixMode(GL_MODELVIEW);
}
Drawing the texture itself:
public void renderInventory()
{
Configuration conf = Game.getInstance().getConfiguration();
glTranslatef(conf.getWidth() / 2.0f, conf.getHeight() / 2.0f, 0.0f);
glEnable(GL_TEXTURE_2D);
Texture tex = TextureStorage.getTexture("gui.inventory");
tex.bind(); // newdawn.slick (same library for my whole program, so this works)
float hw = 170; // half width
float hh = 163; // half height
Vector2f _texPosUpLeft = new Vector2f(3, 0);
Vector2f _texPosDownRight = new Vector2f(_texPosUpLeft.x + hw, _texPosUpLeft.y + hh);
_texPosUpLeft.x /= tex.getTextureWidth();
_texPosUpLeft.y /= tex.getTextureHeight();
_texPosDownRight.x /= tex.getTextureWidth();
_texPosDownRight.y /= tex.getTextureHeight();
glColor3f(1, 1, 1); // Changes this doesn't make any effect
glBegin(GL_QUADS);
glTexCoord2f(_texPosUpLeft.x, _texPosUpLeft.y);
glVertex2f(-hw, -hh);
glTexCoord2f(_texPosDownRight.x, _texPosUpLeft.y);
glVertex2f(hw, -hh);
glTexCoord2f(_texPosDownRight.x, _texPosDownRight.y);
glVertex2f(hw, hh);
glTexCoord2f(_texPosUpLeft.x, _texPosDownRight.y);
glVertex2f(-hw, hh);
glEnd();
}
(The texture pack I'm using is CUBISM1.00)
I found it!!
It was the fog. For one or another reason it looks like it thinks the overlay is out of sight and gives it the color of the fog. So, disabling the fog before rendering the overlay solved it.
glDisable(GL_FOG);
/* Render overlay here */
glEnable(GL_FOG);
If there are still people who read this, is this caused by matrix abuse or is this behaviour normal?

Render image for 2D game use in OpenGL ES for android

EDIT: Solved it! I made stupid mistake, I had a textureId I'd forgotten about when it was textureID I should use.
Okay, I am fully aware that this is a recurring question, and that there is a lot of tutorials and open source code. But I've been trying as best as I can for quite a while here, and my screen is still blank (with whatever color I set using glClearColor()).
So, I would be grateful for some pointers to what I'm doing wrong, or even better, some working code that will render a resource image.
I'll show what I've got so far (by doing some crafty copy-pasting) in my onDrawFrame of the class that implements the Renderer. I've removed some of the jumping between methods, and will simply paste it in the order it is executed.
Feel free to disregard my current code, I'm more than happy to start over, if anyone can give me a working piece of code.
Setup:
bitmap = BitmapFactory.decodeResource(panel.getResources(),
R.drawable.test);
addGameComponent(new MeleeAttackComponent());
// Mapping coordinates for the vertices
float textureCoordinates[] = { 0.0f, 2.0f, //
2.0f, 2.0f, //
0.0f, 0.0f, //
2.0f, 0.0f, //
};
short[] indices = new short[] { 0, 1, 2, 1, 3, 2 };
float[] vertices = new float[] { -0.5f, -0.5f, 0.0f,
0.5f, -0.5f, 0.0f,
-0.5f, 0.5f, 0.0f,
0.5f, 0.5f, 0.0f };
setIndices(indices);
setVertices(vertices);
setTextureCoordinates(textureCoordinates);
protected void setVertices(float[] vertices) {
// a float is 4 bytes, therefore we multiply the number if
// vertices with 4.
ByteBuffer vbb = ByteBuffer.allocateDirect(vertices.length * 4);
vbb.order(ByteOrder.nativeOrder());
mVerticesBuffer = vbb.asFloatBuffer();
mVerticesBuffer.put(vertices);
mVerticesBuffer.position(0);
}
protected void setIndices(short[] indices) {
// short is 2 bytes, therefore we multiply the number if
// vertices with 2.
ByteBuffer ibb = ByteBuffer.allocateDirect(indices.length * 2);
ibb.order(ByteOrder.nativeOrder());
mIndicesBuffer = ibb.asShortBuffer();
mIndicesBuffer.put(indices);
mIndicesBuffer.position(0);
mNumOfIndices = indices.length;
}
protected void setTextureCoordinates(float[] textureCoords) {
// float is 4 bytes, therefore we multiply the number of
// vertices with 4.
ByteBuffer byteBuf = ByteBuffer
.allocateDirect(textureCoords.length * 4);
byteBuf.order(ByteOrder.nativeOrder());
mTextureBuffer = byteBuf.asFloatBuffer();
mTextureBuffer.put(textureCoords);
mTextureBuffer.position(0);
}
//The onDrawFrame(GL10 gl)
gl.glClear(GL10.GL_COLOR_BUFFER_BIT);
gl.glLoadIdentity();
gl.glTranslatef(0, 0, -4);
gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
// Specifies the location and data format of an array of vertex
// coordinates to use when rendering.
gl.glVertexPointer(3, GL10.GL_FLOAT, 0, mVerticesBuffer);
if(shoudlLoadTexture){
loadGLTextures(gl);
shoudlLoadTexture = false;
}
if (mTextureId != -1 && mTextureBuffer != null) {
gl.glEnable(GL10.GL_TEXTURE_2D);
// Enable the texture state
gl.glEnableClientState(GL10.GL_TEXTURE_COORD_ARRAY);
// Point to our buffers
gl.glTexCoordPointer(2, GL10.GL_FLOAT, 0, mTextureBuffer);
gl.glBindTexture(GL10.GL_TEXTURE_2D, mTextureId);
}
gl.glTranslatef(posX, posY, 0);
// Point out the where the color buffer is.
gl.glDrawElements(GL10.GL_TRIANGLES, mNumOfIndices,
GL10.GL_UNSIGNED_SHORT, mIndicesBuffer);
// Disable the vertices buffer.
gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);
if (mTextureId != -1 && mTextureBuffer != null) {
gl.glDisableClientState(GL10.GL_TEXTURE_COORD_ARRAY);
}
private void loadGLTextures(GL10 gl) {
int[] textures = new int[1];
gl.glGenTextures(1, textures, 0);
mTextureID = textures[0];
gl.glBindTexture(GL10.GL_TEXTURE_2D, mTextureID);
gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_MIN_FILTER, GL10.GL_LINEAR);
gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_MAG_FILTER, GL10.GL_LINEAR);
gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_WRAP_S, GL10.GL_CLAMP_TO_EDGE);
gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_WRAP_T, GL10.GL_CLAMP_TO_EDGE);
gl.glTexEnvf(GL10.GL_TEXTURE_ENV, GL10.GL_TEXTURE_ENV_MODE, GL10.GL_REPLACE);
GLUtils.texImage2D(GL10.GL_TEXTURE_2D, 0, bitmap, 0);
}
It doesn't crash, no exceptions, simply a blank screen with color. I've printed stuff in there, so I'm pretty sure it is all executed.
I know it's not optimal to just paste code, but at the moment, I just want to be able to do what I was able to do with canvas :)
Thanks a lot
If you're getting the background colour, that means your window is properly set up. OpenGL is connected to that area of the screen.
However, OpenGL clips to the near and far clip planes, ensuring that objects don't cross or intersect the camera (which, both mathematically and logically, doesn't make sense) and that objects too far away don't appear. So if you've not set up modelview and projection correctly, it's probable that all your geometry is being clipped.
Modelview is used to map from world to eye space. Projection maps from eye space to screen space. So a typical applications uses the former to position objects within the scene, and position the scene relative to the camera, then the latter deals with whether the camera sees with perspective or not, how many world units make how many screen units, etc.
If you look at examples like this one, particularly onSurfaceChanged, you'll see an example of a perspective projection with a camera fixed at the origin.
Because the camera is at (0, 0, 0), leaving your geometry on z = 0 as your code does will cause it to be clipped. In that example code they've set the near clip plane to be at z = 0.1, so in your existing code you could change:
gl.glTranslatef(posX, posY, 0);
To:
gl.glTranslatef(posX, posY, -1.0);
To push your geometry back sufficiently far to appear on screen.

Texture size when using JOGL

In my next project, I'm trying to learn JOGL. The result should be a simple 2d animation.
I've heard, that a texture must be 2^n*2^n in size. Can I still use images which don't have this size, or do I have to edit all images in advance? What do I have to take care of, when using such textures?
As an example, I want to show a kind of progress bar, whose image is at the size of 1024*96px. Do I have to define a quad (eg.1024*1024 in size if you calculate the pixels) and use alpha blending to show only the "filled" part? Or are texture coordinates the way to go?
[Edit]
Works, solution looks like this (using orthogonal projection):
#Override
public void init(GLAutoDrawable drawable) {
GL gl = drawable.getGL(); // get GL
glu = new GLU();
//...
t = load(".\\TEXTURES\\ProgressBarBG.png");
//...
}
public Texture load(String fileName){
Texture text = null;
try{
text = TextureIO.newTexture(new File(fileName), false);
text.setTexParameteri(GL.GL_TEXTURE_MAG_FILTER, GL.GL_NEAREST);
text.setTexParameteri(GL.GL_TEXTURE_MIN_FILTER, GL.GL_NEAREST);
}catch(Exception e){
System.out.println(e.getMessage());
System.out.println("Error loading texture " + fileName);
}
return text;
}
private void drawProgressBG(GL gl, int z) {
gl.glPushMatrix();
gl.glLoadIdentity();
gl.glEnable(GL.GL_BLEND);
gl.glBlendFunc(GL.GL_SRC_ALPHA, GL.GL_ONE_MINUS_SRC_ALPHA);
gl.glEnable(GL.GL_ALPHA_TEST);
gl.glAlphaFunc(GL.GL_GREATER, 0); // only render if alpha > 0
// don't show source alpha parts in the destination
gl.glEnable(GL.GL_TEXTURE_2D);
TextureCoords tc = t.getImageTexCoords();
t.enable();
t.bind();
gl.glTexEnvi(GL.GL_TEXTURE_ENV, GL.GL_TEXTURE_ENV_MODE,
GL.GL_REPLACE);
gl.glBegin(GL.GL_QUADS);
gl.glTexCoord2f(tc.left(), tc.bottom()); gl.glVertex3f( 0f, 0f, z);
gl.glTexCoord2f(tc.right(), tc.bottom()); gl.glVertex3f( 1024f, 0f, z);
gl.glTexCoord2f(tc.right(), tc.top()); gl.glVertex3f( 1024f, 96f, z);
gl.glTexCoord2f(tc.left(), tc.top()); gl.glVertex3f( 0f, 96f, z);
gl.glEnd();
gl.glDisable(GL.GL_TEXTURE_2D);
// switch back to modulation of quad colours and texture
gl.glTexEnvi(GL.GL_TEXTURE_ENV, GL.GL_TEXTURE_ENV_MODE,
GL.GL_MODULATE);
gl.glDisable(GL.GL_ALPHA); // switch off transparency
gl.glDisable(GL.GL_BLEND);
gl.glPopMatrix();
}
[/EDIT]
I don't think it has to be 2^n anymore. You could test it easily
nehe.gamedev.net has great opengl tutorials and some also in JOGL. Using only 9% of your 1024*1024 texture is a big waste of video ram. You'd better edit it. Use texture coordinates if you only need a portion of your texture, that's why we have them.

Categories