2D Rendering with OpenGL ES 2.0 on Android (matrices not working)
- by TranquilMarmot
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!
