2D Rendering with OpenGL ES 2.0 on Android (matrices not working)

Posted by TranquilMarmot on Game Development See other posts from Game Development or by TranquilMarmot
Published on 2012-07-07T03:30:16Z Indexed on 2012/07/07 9:27 UTC
Read the original article Hit count: 455

Filed under:
|
|
|

So I'm trying to render two moving quads, each at different locations. My shaders are as simple as possible (vertices are only transformed by the modelview-projection matrix, there's only one color).

Whenever I try and render something, I only end up with slivers of color! I've only done work with 3D rendering in OpenGL before so I'm having issues with 2D stuff.

Here's my basic rendering loop, simplified a bit (I'm using the Matrix manipulation methods provided by android.opengl.Matrix and program is a custom class I created that just calls GLES20.glUniformMatrix4fv()):

Matrix.orthoM(projection, 0, 0, windowWidth, 0, windowHeight, -1, 1);
program.setUniformMatrix4f("Projection", projection);

At this point, I render the quads (this is repeated for each quad):

Matrix.setIdentityM(modelview, 0);
Matrix.translateM(modelview, 0, quadX, quadY, 0);
program.setUniformMatrix4f("ModelView", modelview);
quad.render(); // calls glDrawArrays

and all I see is a sliver of the color each quad is! I'm at my wits end here, I've tried everything I can think of and I'm at the point where I'm screaming at my computer and tossing phones across the room. Anybody got any pointers? Am I using ortho wrong? I'm 100% sure I'm rendering everything at a Z value of 0. I tried using frustumM instead of orthoM, which made it so that I could see the quads but they would get totally skewed whenever they got moved, which makes sense if I correctly understand the way frustum works (it's more for 3D rendering, anyway).

If it makes any difference, I defined my viewport with

 GLES20.glViewport(0, 0, windowWidth, windowHeight);

Where windowWidth and windowHeight are the same values that are pased to orthoM

It might be worth noting that the android.opengl.Matrix methods take in an offset as the second parameter so that multiple matrices can be shoved into one array, so that'w what the first 0 is for

For reference, here's my vertex shader code:

uniform mat4 ModelView;
uniform mat4 Projection;

attribute vec4 vPosition;

void main() {
    mat4 mvp = Projection * ModelView; 
    gl_Position = vPosition * mvp;
}

I tried swapping Projection * ModelView with ModelView * Projection but now I just get some really funky looking shapes...

EDIT

Okay, I finally figured it out! (Note: Since I'm new here (longtime lurker!) I can't answer my own question for a few hours, so as soon as I can I'll move this into an actual answer to the question)

I changed

Matrix.orthoM(projection, 0, 0, windowWidth, 0, windowHeight, -1, 1);

to

float ratio = windowWwidth / windowHeight;
Matrix.orthoM(projection, 0, 0, ratio, 0, 1, -1, 1);

I then had to scale my projection matrix to make it a lot smaller with Matrix.scaleM(projection, 0, 0.05f, 0.05f, 1.0f);.

I then added an offset to the modelview translations to simulate a camera so that I could center on my action (so Matrix.translateM(modelview, 0, quadX, quadY, 0); was changed to Matrix.translateM(modelview, 0, quadX + camX, quadY + camY, 0);)

Thanks for the help, all!

© Game Development or respective owner

Related posts about opengl

Related posts about android