Develop Reference

Scene slowly rotating away

In my GLSurfaceView.Renderer, I'm drawing my scene in two parts. The first group is offset and rotated, while the second is aligned to the "camera", so I apply a glRotate and glTranslate, then apply the exact opposite glTranslate and glRotate. On some devices, this works fine, but on others, the entire scene slowly rotates off "center".
Images: At start and After ~5 mins
Here's the onDraw() function:
#Override
public void onDrawFrame(GL10 gl) {
gl.glClear(GL10.GL_COLOR_BUFFER_BIT | GL10.GL_DEPTH_BUFFER_BIT);
gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
// rotate card table
gl.glRotatef(-20f, 1f, 0f, 0f);
gl.glRotatef( 5f, 0f, 1f, 0f);
gl.glRotatef(-10f, 0f, 0f, 1f);
gl.glTranslatef( 1f, 3f, 0f);
mDeck.draw(gl);
// undo rotate for buttons/overlays
gl.glTranslatef(-1f, -3f, 0f);
gl.glRotatef( 10f, 0f, 0f, 1f);
gl.glRotatef( -5f, 0f, 1f, 0f);
gl.glRotatef( 20f, 1f, 0f, 0f);
mOverlayBtns.draw(gl);
mPass.draw(gl);
}
The full source can be found on GitHub, here.
Is there something obvious I'm missing? Is there a better way to handle rotating, then rotating back?
So far, I've noticed this problem on:
Nexus 4
HTC Sensation
Another LG phone whose name I can't remember
These devices do not show the problem:
Galaxy Nexus
Nexus 7
Xoom

Your code was applying a set of affine transformations each frame, the problem is that each transformation is accumulative, so you were applying the transformation over and over. You either need to reset the current loaded MODELVIEW matrix using glLoadIdentity (http://www.khronos.org/opengles/sdk/1.1/docs/man/glLoadIdentity.xml) or push the current matrix, load your new matrix, draw and then pop the matrix back (as you were doing in your fix response).
I would put a glLoadIdentity at the beginning of each frame draw. Also, with your fix, I would also do this:
gl.glPushMatrix();
gl.glLoadIdentity(); // Be sure we start clean
// rotate card table
gl.glRotatef(-20f, 1f, 0f, 0f);
gl.glRotatef( 5f, 0f, 1f, 0f);
gl.glRotatef(-10f, 0f, 0f, 1f);
gl.glTranslatef( 1f, 3f, 0f);
mDeck.draw(gl);
gl.glPopMatrix();
Hope that helps.

I've found a fix for the issue, but I'm still hoping someone will be able to explain the problem I'm seeing above.
Instead of rotating the scene, then rotating back, I can use glPushMatrix and glPopMatrix to isolate the two groups. That way, the group of glTranslate and glRotate to move the scene back are unnecessary.
#Override
public void onDrawFrame(GL10 gl) {
gl.glClear(GL10.GL_COLOR_BUFFER_BIT | GL10.GL_DEPTH_BUFFER_BIT);
gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
gl.glPushMatrix();
// rotate card table
gl.glRotatef(-20f, 1f, 0f, 0f);
gl.glRotatef( 5f, 0f, 1f, 0f);
gl.glRotatef(-10f, 0f, 0f, 1f);
gl.glTranslatef( 1f, 3f, 0f);
mDeck.draw(gl);
gl.glPopMatrix();
gl.glPushMatrix();
// undo rotate for buttons/overlays
// gl.glTranslatef(-1f, -3f, 0f);
// gl.glRotatef( 10f, 0f, 0f, 1f);
// gl.glRotatef( -5f, 0f, 1f, 0f);
// gl.glRotatef( 20f, 1f, 0f, 0f);
mOverlayBtns.draw(gl);
mPass.draw(gl);
gl.glPopMatrix();
}

2d Triangle with OpenGL ES 2.0

EDIT 2: Take a look on the Triangle2d sample of this GitHub project for a complete, working sample.
EDIT: See the accepted answer for a link with a good explanation on how the ortographic matrix works. In the end, I tweaked the provided code a little:
float[] mvp = {
2f/width, 0f, 0f, 0f,
0f, -2f/height, 0f, 0f,
0f, 0f, 0f, 0f,
-1f, 1f, 0f, 1f
};
Please note that my z is fixed in 0 and w fixed in 1. This matrix make the origin (0,0) at the bottom-left of the screen; if you want the origin at top-left, try:
float[] mvp = {
2f/width, 0f, 0f, 0f,
0f, 2f/height, 0f, 0f,
0f, 0f, 0f, 0f,
-1f, -1f, 0f, 1f
};
Another problem was the call to GLES20.glUniformMatrix4fv which I changed to:
FloatBuffer b = ByteBuffer.allocateDirect(mvp.length * 4).order(ByteOrder.nativeOrder()).asFloatBuffer();
b.put(mvp).position(0);
GLES20.glUniformMatrix4fv(uMvpPos, b.limit() / mvp.length, false, b);
If you want to mess with this a bit, try this online calculator. Just remember that the rows in your sorce file will be columns in the calculator.
Original Problem:
I'm trying to draw a 2d triangle using OpenGLES 2.0 on android, but so far, not much success. These are my shaders:
(Vertex shader)
uniform mat4 uMvp;
attribute vec3 aPosition;
attribute vec3 aColor;
varying vec4 vColor;
void main() {
vColor = vec4(aColor.xyz, 1.0);
vec4 position = vec4(aPosition.xyz, 1.0);
gl_Position = uMvp * position;
};
(Fragment shader)
precision mediump float;
varying vec4 vColor;
void main(void)
{
gl_FragColor = vColor;
};
Then, in the onSurfaceChanged method of GLSurfaceView.Renderer, I put the following:
public void onSurfaceChanged(GL10 gl, int width, int height)
{
// here I load and compile the shaders and link the program.
// in the end, I use GLES20.glUseProgram(programHandle);
// (code omitted)
// create the matrix for the uniform
int uMvpPos = GLES20.glGetUniformLocation(programHandle, "uMvp");
float[] mvp = {width, 0f, 0f, 0f,
0f, -height, 0f, 0f,
0f, 0f, -2f, 0f,
-1f, 1, -1f, 1};
GLES20.glUniformMatrix4fv(uMvpPos, mvp.length * 4, false, mvp, 0);
// set viewport and clear color to white
GLES20.glViewport(0, 0, width, height);
GLES20.glClearColor(1f, 1f, 1f,1.0f);
}
I used the values of the matrix showed on this question. My intent here is to work with coordinates in the same way as a canvas works: (0,0) on top-left of screen and (width, height) on bottom-right.
And last but not least, this is the code of onDrawFrame:
public void onDrawFrame(GL10 gl)
{
int aPos = GLES20.glGetAttribLocation(programHandle,"aPosition");
int aColor = GLES20.glGetAttribLocation(programHandle,"aColor");
// assuming I correctly set up my coordinate system,
// these are the triangle coordinates and color
float[] data =
{
// XYZ, RGB
100f, 100f, 0f,
1f, 0f, 0f,
50f, 50f, 0f,
1f, 0f, 0f,
150f, 50f, 0f,
1f, 0f, 0f,
};
// put all my data into a float buffer
// the '* 4' is because a float has 4 bytes
FloatBuffer dataVertex = ByteBuffer.allocateDirect(data.length * 4).order(ByteOrder.nativeOrder()).asFloatBuffer();
dataVertex.put(data).position(0);
// set the POSITION values
// attribute, dataSize(number of elements), data type, normalized?, size(bytes), data
GLES20.glEnableVertexAttribArray(aPos);
GLES20.glVertexAttribPointer(aPos, 3, GLES20.GL_FLOAT, false, 6 * 4, dataVertex);
// set the COLOR values
dataVertex.position(3); // offset
GLES20.glEnableVertexAttribArray(aColor);
GLES20.glVertexAttribPointer(aColor, 3, GLES20.GL_FLOAT, false, 6 * 4, dataVertex);
// put a white background
GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT | GLES20.GL_DEPTH_BUFFER_BIT);
// and finally draw the triangle!
GLES20.glDrawArrays(GLES20.GL_TRIANGLES, 0, 3);
}
The end result is... a boring white screen, without the triangle. I guess I'm committing a very simple mistake, but I just can't spot it. Any thoughts?

Your orthographic projection matrix is wrong.
Orthographic projection is defined as (in column major order):
2/(r-l), 0, 0, 0,
0, 2/(t-b), 0, 0,
0, 0, 2/(f-n), 0,
(r+l)/(l-r), (t+b)/(b-t), (f+n)/(n-f), 1
In your case r=0, l=width, t=height, b=0, f=1, n=0 and you get:
-2/width, 0, 0, 0,
0, 2/height, 0, 0,
0, 0, 2, 0,
1, -1, -1, 1

Drawing .png image like a path

So I have a PNG file which I am using as a custom brush in my app. As a motion event takes place, I keep redrawing it to give a brush effect. But if I drag too fast I miss pixels and some brushes look really bad - like the images are just drawn over each other.
Is there any way I can draw it in a drawpath mode instead?
The code below is my onDraw method. The mbitmapBrush variable has the PNG image file, and pos.a and pos.b are the current motion event 'x' and 'y' coordinates.
#Override
protected void onDraw(Canvas canvas) {
Paint paint=mPaint;
canvas.drawColor(0xFFAAAAAA);
mCM.set(new float[]{1f, 1f, 1f, 0f, 1f,
0f, 1f, 3f, 0f, 4f,
1f, 4f, 1f, 1f, 0f,
1f, 0f, 0f, 1f, 0f });
ColorMatrixColorFilter cm3=new ColorMatrixColorFilter(mCM);
paint.setColorFilter(cm3);
canvas.drawBitmap(mBitmap, 0, 0, mBitmapPaint);
for (Vector2 pos : mPositions) {
canvas.drawBitmap(mBitmapBrush, pos.a, pos.b, paint);
//canvas.drawCircle(pos.a, pos.b, 7, mPaint);
}
//canvas.drawBitmap(mBitmapBrush, clickX, clickY, null);
//canvas.drawPath(mPath, mPaint);
invalidate();
}

OpenGL 2D colors gone wrong

I am having problems with my simple 2D OpenGL game.
Its really weird, I get textures to display correctly etc. but when I wanted to create particle effect with simple changing colors, for some reason it displays wrong colors from the buffer. I am using Android's OpenGL ES 1.1 but its the same with any version of OpenGL that uses VBO's.
I initialize the screen etc. and red triangle is displayed, but according to my color buffer it should be white, whats wrong?
GL11 gl11 = (GL11) gl;
gl11.glLoadIdentity();
gl11.glClear(GL_COLOR_BUFFER_BIT);
GLU.gluLookAt(gl, 0f, 0f, -container.getCamera().getScale(), 0f, 0f, 0f, 0f, -1f, 0f);
gl11.glEnableClientState(GL10.GL_VERTEX_ARRAY);
gl11.glEnableClientState(GL10.GL_COLOR_ARRAY);
gl11.glTranslatef(container.getCamera().getX(), container.getCamera().getY(), 0.0f);
container.addParticle(new ColouredParticle(-container.getCamera().getX(), -container.getCamera().getY(), (float)Math.random(), (float)Math.random(), 0f, 5000));
particleColorBufferPointer = createFloatBuffer(gl11, GL11.GL_ARRAY_BUFFER, new float[] {
1f, 1f, 1f, 1f,
1f, 1f, 1f, 1f,
1f, 1f, 1f, 1f,
});
gl11.glBindBuffer(GL11.GL_ARRAY_BUFFER, particleColorBufferPointer);
gl11.glColorPointer(4, GL10.GL_FLOAT, 0, 0);
particleVertexBufferPointer = createFloatBuffer(gl11, GL11.GL_ARRAY_BUFFER, new float[]{
-0.1f, -0.05f,
0.1f, -0.05f,
0.0f, 0.05f
});
gl11.glBindBuffer(GL11.GL_ARRAY_BUFFER, particleVertexBufferPointer);
gl11.glVertexPointer(2, GL10.GL_FLOAT, 0, 0);
gl11.glDrawArrays(GL11.GL_TRIANGLES, 0, 3);
gl11.glDeleteBuffers(2, new int[]{particleVertexBufferPointer, particleColorBufferPointer}, 0);
gl11.glDisableClientState(GL10.GL_VERTEX_ARRAY);
gl11.glDisableClientState(GL10.GL_COLOR_ARRAY);
int error = gl11.glGetError();
if(error != GL11.GL_NO_ERROR) {
Log.v(TAG, "error " + Integer.toHexString(error));
}
Its just simple hardcoded float array containing the triangle vertices and colors, but for some reason the colors are wrong as I said before, what can possibly go wrong with such small amount of code? the color doesn't change to anything but black, like it only reads the red value from the buffer. Also it gives absolutely no error at all!
createFloatBuffer method:
private int createFloatBuffer(GL11 gl, int type, float[] data) {
int[] bufferPointerBuffer = new int[1];
gl.glGenBuffers(1, bufferPointerBuffer, 0);
int bufferPointer = bufferPointerBuffer[0];
gl.glBindBuffer(type, bufferPointer);
FloatBuffer dataBuffer = createFloatBuffer(data);
gl.glBufferData(type, data.length * FLOAT_SIZE, dataBuffer, GL_STATIC_DRAW);
gl.glBindBuffer(type, -1);
return bufferPointer;
}

Wow.. It all was because I had texture bound and it for some reason tried to draw it even if I had texture coords disabled, I wish i could have just listened when I got told to disable any state thats not needed anymore.. Thanks guys! Problem solved!

Obj mesh does not render correctly

I have a problem with the rendering of a cube. I don't know why but it isn't correct.
Here are two images of the "cube":
Front:
Back:
Here's the OpenGL code:
Vertices, faces, colors..
private void initTriangle() {
float[] coords = {
-0.5f, 0.f, 0.5f,
-0.5f, 0.f, -0.5f,
0.5f, 0.f, -0.5f,
0.5f, 0.f, 0.5f,
-0.5f, 1.f, 0.5f,
0.5f, 1.f, 0.5f,
0.5f, 1.f, -0.5f,
-0.5f, 1.f, -0.5f,
};
_nrOfVertices = coords.length;
float[] colors = {
1f, 0f, 0f, 1f, // point 1 red
0f, 1f, 0f, 1f, // point 2 green
0f, 0f, 1f, 1f, // point 3 blue
1f, 1f, 1f, 1f, // point 4 white
1f, 1f, 1f, 1f, // point 5 white
1f, 0f, 0f, 1f, // point 6 white
1f, 1f, 1f, 1f, // point 7 white
1f, 1f, 1f, 1f, // point 8 white
1f, 0f, 0f, 1f, // point 9 white
1f, 1f, 1f, 1f, // point 10 white
1f, 1f, 1f, 1f, // point 11 white
1f, 1f, 1f, 1f, // point 12 white
};
short[] indices = new short[] {
1, 2, 3, // 1
3, 4, 1, // 2
5, 6, 7, // 3
7, 8, 5, // 4
1, 4, 6, // 5
6, 5, 1, // 6
4, 3, 7, // 7
7, 6, 4, // 8
3, 2, 8, // 9
8, 7, 3, // 10
2, 1, 5, // 11
5, 8, 2, // 12
};
// float has 4 bytes, coordinate * 4 bytes
ByteBuffer vbb = ByteBuffer.allocateDirect(coords.length * 4);
vbb.order(ByteOrder.nativeOrder());
_vertexBuffer = vbb.asFloatBuffer();
// short has 2 bytes, indices * 2 bytes
ByteBuffer ibb = ByteBuffer.allocateDirect(indices.length * 2);
ibb.order(ByteOrder.nativeOrder());
_indexBuffer = ibb.asShortBuffer();
// float has 4 bytes, colors (RGBA) * 4 bytes
ByteBuffer cbb = ByteBuffer.allocateDirect(colors.length * 4);
cbb.order(ByteOrder.nativeOrder());
_colorBuffer = cbb.asFloatBuffer();
_vertexBuffer.put(coords);
_indexBuffer.put(indices);
_colorBuffer.put(colors);
_vertexBuffer.position(0);
_indexBuffer.position(0);
_colorBuffer.position(0);
}
Rendering:
public void onDrawFrame(GL10 gl) {
//gl.glFrontFace(GL10.GL_CCW);
gl.glClearColor(0f, 0f, 0f, 1.0f);
gl.glLoadIdentity();
gl.glClear(GL10.GL_COLOR_BUFFER_BIT);
// set rotation
gl.glRotatef(_xAngle, 1f, 0f, 0f);
gl.glRotatef(_yAngle, 0f, 1f, 0f);
gl.glVertexPointer(3, GL10.GL_FLOAT, 0, _vertexBuffer);
gl.glColorPointer(4, GL10.GL_FLOAT, 0, _colorBuffer);
gl.glDrawElements(GL10.GL_TRIANGLES, _nrOfVertices, GL10.GL_UNSIGNED_SHORT, _indexBuffer);
gl.glFrontFace(GL10.GL_CCW);
}
here the obj content:
# 3ds Max Wavefront OBJ Exporter v0.97b - (c)2007 guruware
# File Created: 19.02.2012 13:31:12
mtllib box22.mtl
#
# object Box01
#
v -0.5000 0.0000 0.5000
v -0.5000 0.0000 -0.5000
v 0.5000 0.0000 -0.5000
v 0.5000 0.0000 0.5000
v -0.5000 1.0000 0.5000
v 0.5000 1.0000 0.5000
v 0.5000 1.0000 -0.5000
v -0.5000 1.0000 -0.5000
# 8 vertices
vn 0.0000 -1.0000 -0.0000
vn 0.0000 1.0000 -0.0000
vn 0.0000 0.0000 1.0000
vn 1.0000 0.0000 -0.0000
vn 0.0000 0.0000 -1.0000
vn -1.0000 0.0000 -0.0000
# 6 vertex normals
vt 1.0000 0.0000 0.0000
vt 1.0000 1.0000 0.0000
vt 0.0000 1.0000 0.0000
vt 0.0000 0.0000 0.0000
# 4 texture coords
g Box01
usemtl wire_177088026
f 1/1/1 2/2/1 3/3/1
f 3/3/1 4/4/1 1/1/1
f 5/4/2 6/1/2 7/2/2
f 7/2/2 8/3/2 5/4/2
f 1/4/3 4/1/3 6/2/3
f 6/2/3 5/3/3 1/4/3
f 4/4/4 3/1/4 7/2/4
f 7/2/4 6/3/4 4/4/4
f 3/4/5 2/1/5 8/2/5
f 8/2/5 7/3/5 3/4/5
f 2/4/6 1/1/6 5/2/6
f 5/2/6 8/3/6 2/4/6
# 12 faces
Hope you can help me.
Thank for your attention (:

Make sure your indices are correct.
The OBJ format starts counting with indices at 1. However, the actual indexing within your array will start at 0. So you will have to subtract 1 from each index within the OBJ file for it to work as you expect.