Using Matrix. Rotate in OpenGL ES 2.0

Question

Edit - Added more code

Having a lot of problems attempting to correctly rotate my quad using OpenGL ES 2.0.

It always seems to rotate around the centre of the screen co-ordinates. I'm trying to get it to rotate around it's own centre (for 2d, so z axis only).

I've been experimenting with Matrix.translate as show below. However, changing the x or y pos here simply draws the quad at a different place on the screen, but when it rotates, again it rotates around the centre of the screen. Please could someone explain how to get it to spin around it's own z axis (like a wheel)?

Thanks, here are the relevant lines of code - if more is needed, please ask and I will post. (Please note, I've looked at a lot of similar questions on SO and the wider internet but I've not managed to find an answer thus far).

Thanks.

//Set rotation
Matrix.setRotateM(mRotationMatrix, 0, -angle, 0, 0, 1.0f);

//Testing translation
Matrix.translateM(mRotationMatrix, 0, -.5f, .5f, 0f);

// Combine the rotation matrix with the projection and camera view
Matrix.multiplyMM(mvpMatrix, 0, mRotationMatrix, 0, mvpMatrix, 0);

My Shaders (declared at class level)

private final String vertexShaderCode =
"uniform mat4 uMVPMatrix;" +

"attribute vec4 vPosition;" +
"void main() {" +
" gl_Position = uMVPMatrix * vPosition;" +
"}";

private final String fragmentShaderCode =
"precision mediump float;" +
"uniform vec4 vColor;" +
"void main() {" +
" gl_FragColor = vColor;" +
"}";

From onSurfaceChanged

float ratio = (float) width / height;
Matrix.frustumM(mProjMatrix, 0, -ratio, ratio, -1, 1, 3, 7);

In My onDrawFrame method

// Set the camera position (View matrix)
Matrix.setLookAtM(mVMatrix, 0, 0, 0, 3, 0f, 0f, 0f, 0f, 1.0f, 0.0f);

//Calculate the projection and view transformation
Matrix.multiplyMM(mMVPMatrix, 0, mProjMatrix, 0, mVMatrix, 0);

Answer 1

I´ve encountered the same problems (seen weird distortions and everything else), my solution based on the Android Training > Displaying Graphics with OpenGL ES > Adding Motion below.

(Head over to my detailed post for at if needed: OpenGL ES Android Matrix Transformations.)

1. Set a mModelMatrix to identity Matrix

   Matrix.setIdentityM(mModelMatrix, 0); // initialize to identity matrix
   

2. Apply translation to the mModelMatrix

   Matrix.translateM(mModelMatrix, 0, -0.5f, 0, 0); // translation to the left
   

3. Apply rotation to a mRotationMatrix (angles in degrees)

   Matrix.setRotateM(mRotationMatrix, 0, mAngle, 0, 0, -1.0f);
   

4. Combine rotation and translation via Matrix.multiplyMM

   mTempMatrix = mModelMatrix.clone();
   Matrix.multiplyMM(mModelMatrix, 0, mTempMatrix, 0, mRotationMatrix, 0);
   

5. Combine the model matrix with the projection and camera view

   mTempMatrix = mMVPMatrix.clone();
   Matrix.multiplyMM(mMVPMatrix, 0, mTempMatrix, 0, mModelMatrix, 0);
   

Answer 2

Rotation usually occurs around the origin, so you want to rotate your quad before you translate it. If you rotate after you translate, then the quad will first be moved away from the origin, then rotated around the origin.

Without knowing how your Matrix function are implemented, we cannot advise on whether you are using them correctly. All you've show us in the functions' interface.

But in general, rotate before you translate.

Answer 3

Here is a walkthrough. Let's say you were to draw a teapot... the modelMatrix would be an identity to start with. The shape is centered on the origin like this:

Verify this is what you have before you continue...

Once you have you should apply the rotation to the model matrix, compile+run - you get a rotated copy...

Once you have this you can translate:

So for you, all you need to do appears to verify when rotation matrix is identity e.g. Matrix.setIdentityM( mRotationMatrix,0); that the shape is in the center. If it is not move it to the center.

Once it is in the center apply the rotation e.g.

    Matrix.setIdentityM( mRotationMatrix,0); 
    <as needed movement to center>

    Matrix.rotate(mRotationMatrix, 0, -angle, 0, 0, 1.0f);
    <any other translation you want>

Do it in steps to make your life easy so you see what is going on.

Answer 4

Apply your operations backwards:

1st- Matrix.translateM(mRotationMatrix, 0, -.5f, .5f, 0f);

2nd- Matrix.setRotateM(mRotationMatrix, 0, -angle, 0, 0, 1.0f);

It will rotate around its own center