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...

 

 

pakitomx
Joined:
January 16, 2013
Posts: 9
Top

WebGL Rendering Matrix Pose Position

January 26, 2021 - 1:04am #9

Hi, I'm currently working on a project with three.js / vue.js WebGL and want to use the Vuforia Model Tracking for one time initial object registration, so I would only need the coordinates of the matched Object.

So far I've read that there is no support for webgl, anyways this reads as if it is possible to write a vuforia plugin for three.js/webgl?

Is it possible to get Vuforia to work in threejs as a plugin, or to run Vuforia in the background and just pass the coordinates to three.js after detection?

Thank you!

svoe
Joined:
October 1, 2020
Posts: 2
Top

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. 

DavidBeard
Joined:
January 30, 2012
Posts: 2791
Top

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.

naveen007
Joined:
March 29, 2014
Posts: 1
Top

WebGL Rendering Matrix Pose Position

April 5, 2013 - 10:04am #6

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

DavidBeard
Joined:
January 30, 2012
Posts: 2791
Top

WebGL Rendering Matrix Pose Position

April 5, 2013 - 2:16am #5

Great, thanks fro sharing!

AlessandroB
Joined:
October 9, 2012
Posts: 8591
Top

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.

pakitomx
Joined:
January 16, 2013
Posts: 9
Top

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
pakitomx
Joined:
January 16, 2013
Posts: 9
Top

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
            
 
AlessandroB
Joined:
October 9, 2012
Posts: 8591
Top
Log in or register to post comments