Log in or register to post comments

WebGL Rendering Matrix Pose Position

April 1, 2013 - 3:37am #1

Hello, I'm doing a proyect with WebGL and Three.js (Newbie here)

I'm looking for how to positioning the 3D Object in the center of the target. 

So far, I have a Cube which appers on screen, but I can't make it to stay on the marker, also some camera problems..

I have looked at this and I take the Matrix Pose from there:

https://developer.vuforia.com/forum/faq/technical-how-do-i-get-camera-position

This is my code:

 

                var VIEW_ANGLE = 45,

                ASPECT = WIDTH / HEIGHT,

                NEAR = 0.1,

                FAR = 10000;

                var renderer = new THREE.WebGLRenderer();

                var camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);

                var scene = new THREE.Scene();

 

                    cam_x = invTranspMV.data[12];

                    cam_y = invTranspMV.data[13];

                    cam_z = invTranspMV.data[14];

 

 

                    cam_right_x = invTranspMV.data[0];

                    cam_right_y = invTranspMV.data[1];

                    cam_right_z = invTranspMV.data[2];

                    cam_up_x    = -invTranspMV.data[4];

                    cam_up_y    = -invTranspMV.data[5];

                    cam_up_z    = -invTranspMV.data[6];

                    cam_dir_x   = invTranspMV.data[8];

                    cam_dir_y   = invTranspMV.data[9];

                    cam_dir_z   = invTranspMV.data[10];

 

                    //Print the cube..

                    three.cube.position.x= cam_x * -1;

                    three.cube.position.y= cam_y * -1;

                    three.cube.position.z= cam_z * -1;

                    

                    three.cube.rotation.x = cam_right_y*-1;

                    three.cube.rotation.y = cam_up_y*-1;

                    three.cube.rotation.z = cam_up_z*-1;

                    

                    // < -- Set the Camera -- >

                            

                    three.camera.position.x = Math.sin(cam_up_y) * 600; // cRX

                    three.camera.position.y = 0;

                    three.camera.position.z = Math.cos(cam_right_y) * 600; //CRZ cDX cDY

                            

                    three.camera.rotation.x = 0;

                    three.camera.rotation.y = 0;

                    three.camera.rotation.z = 0;

                    

                    three.camera.lookAt(three.scene.position);

                    three.renderer.render(three.scene, three.camera);

 

So help will be so much appreaciated, also notice I'm new at this.

 

Thank you in advance...

 

 

WebGL Rendering Matrix Pose Position

May 24, 2014 - 12:35pm #8

I think you'll either need to write a Vuforia plugin for phonegap or overlay phonegap as a view on top of your Vuforia app, and pass pose and projection matrix values from Vuforia to phonegap. 

WebGL Rendering Matrix Pose Position

May 24, 2014 - 8:51am #7

Hi,

I am trying to create a project using phonegap + vuforia . I am not using wikitude as I want to use open source technologies. Going through your comment make me think you are using threejs and vuforia together. How are you using both together. A help would be really appreciated.

WebGL Rendering Matrix Pose Position

April 5, 2013 - 10:04am #6

Which device and OS version are you using that has a WebGL renderer?

WebGL Rendering Matrix Pose Position

April 5, 2013 - 2:16am #5

Great, thanks fro sharing!

WebGL Rendering Matrix Pose Position

April 5, 2013 - 2:13am #4

Also here's the code for Euler Angles.

// < -- Set Position for object -- >
three.cube.position.x= -model14;
three.cube.position.y= -model13;
//Get Euler Angles for object
ModelEulerx = Math.atan2(model10, model11);
ModelEulery = Math.atan2(-model9, Math.sqrt(model10*model10 + model11*model11));
ModelEulerz = Math.atan2(model5, model1);
//Get Euler Angles for camera
three.cube.eulerOrder   = 'YXZ';
//Rotate the cube with Euler Angles.
three.cube.rotation.x = ModelEulery;
three.cube.rotation.y = ModelEulerx;
three.cube.rotation.z = ModelEulerz;
// < -- Set the Camera -- >
three.camera.position.z = model15 + cam_z/2;
// < -- Look at scene and render -- >
three.camera.lookAt(three.scene.position);
three.renderer.render(three.scene, three.camera);

regards,

Francisco.

WebGL Rendering Matrix Pose Position

April 5, 2013 - 2:10am #3

Finally I've figured it out, it turns out that the matrix is defined like this: 

https://developer.vuforia.com/sites/default/files/VuforiaMatrix.png

https://www.dropbox.com/s/a7gu5hjkfoun375/VuforiaMatrix.png

So, for using in Three.Js API you need to switch some values.

Hope this helps anyone else...

Best regards,

Francisco.

AttachmentSize
Image icon VuforiaMatrix.png106.23 KB

WebGL Rendering Matrix Pose Position

April 2, 2013 - 4:30am #2

Hi,

one problem that I see in your code is that you are setting the VIEW angle arbitrarily to 45 degrees; however, this value may not correspond to the value delivered by Vuforia (which reflects tha actual device camera field of view).

Also, not quite sure to understand why you set the camera position with this code:

 

three.camera.position.x = Math.sin(cam_up_y) * 600; // cRX
    three.camera.position.y = 0;
    three.camera.position.z = Math.cos(cam_right_y) * 600; //CRZ cDX cDY
            
 
Log in or register to post comments