Log in or register to post comments

Align Android view with image target

May 8, 2017 - 9:40am #1


I am trying to align an Android view (such as Weviiew) with image target. I cannot use textures with openGL (as illustrated in the Video Playback sample).

With iOS, this can be achieved by applying the transformation matrix to UIView animation layer.

But for Android, I am having a very hard time to get the same result. Here are the steps I am following:

1. obtain transformation matrix by multiplying projection matrix with modelview matrix

2. obtain translate, scale, and rotation by following this algorithm: https://math.stackexchange.com/questions/237369/given-this-transformation-matrix-how-do-i-decompose-it-into-translation-rotati

3. Further decompose the rotation matrix to get axis angles: http://nghiaho.com/?page_id=846

4. Apply translate, scale, and rotation via Android ViewPropertyAnimation

here is my code:


public void updateWebView(final Matrix44F modelViewMatrix, final Matrix44F projectionMatrix, final Size targetSize){

        runOnUiThread(new Runnable() {


            public void run() {

                float[] modelViewMatrixData = modelViewMatrix.getData();

                WindowManager wm = (WindowManager) getSystemService(Context.WINDOW_SERVICE);

                Display display = wm.getDefaultDisplay();

                android.opengl.Matrix.translateM(modelViewMatrixData, 0, 0.0f, 0.0f, 3.0f);

                android.opengl.Matrix.multiplyMM(modelViewMatrixData, 0, projectionMatrix.getData(), 0, modelViewMatrixData, 0);

                double scaleX = java.lang.Math.sqrt(modelViewMatrixData[0] * modelViewMatrixData[0] + modelViewMatrixData[1] * modelViewMatrixData[1] + modelViewMatrixData[2] * modelViewMatrixData[2]);

                double scaleY = java.lang.Math.sqrt(modelViewMatrixData[4] * modelViewMatrixData[4] + modelViewMatrixData[5] * modelViewMatrixData[5] + modelViewMatrixData[6] * modelViewMatrixData[6]);

                double scaleZ = java.lang.Math.sqrt(modelViewMatrixData[8] * modelViewMatrixData[8] + modelViewMatrixData[9] * modelViewMatrixData[9] + modelViewMatrixData[10] * modelViewMatrixData[10]);

                double[][] m = {{modelViewMatrixData[0]/scaleX,  modelViewMatrixData[4]/scaleY, modelViewMatrixData[8]/scaleZ},

                                {modelViewMatrixData[1]/scaleX,  modelViewMatrixData[5]/scaleY, modelViewMatrixData[9]/scaleZ},

                                {modelViewMatrixData[2]/scaleX,  modelViewMatrixData[6]/scaleY, modelViewMatrixData[10]/scaleZ}};

                GLUtilities.Angle angle = GLUtilities.extractAngleFromRotationMatrix(m);

                if(counter % 5 == 0) {




                                .scaleX((float) scaleX * targetSize.getWidth() / targetSize.getHeight())

                                .scaleY((float) scaleY)





                counter ++;





The above code does not result in the right translate and scale. Only the rotation seems correct.

Anybody had similar experience? Am I going down the correct path? 



Align Android view with image target

June 2, 2017 - 1:59pm #2

Take a look into Books sample. There we generate a texture from an android view which is used as an augmentation for the book cover. 

Also the matrices we use should work the same way on iOS and Android. We are using the same gl code for android and iOS.

Make sure you are not using transpose values. To get the gl matrix you could use Tool.convert2GLMatrix method located in our samples.

Log in or register to post comments