[question] visualize sfm_data in ThreeJS

[yuyou]

Hi

This is not an issue but could not find other places for helps like this.

I tried to create a simple sfm_data Web viewer by using ThreeJS lib. The original cloud_and_poses PLY file does not show the camera direction (extrinsics). So far I managed to visualize all points and cameras (using THREE.PlaneGeometry) with their position values. My question, however, is how to use the extrinsics' rotation values. I tried to use those values directly as a rotation matrix (4x4), for example, as follows:

var rotation = sfm_data.extrinsics[i].value.rotation;
var rotationMatrix = new THREE.Matrix4();
          rotationMatrix.set(
                        rotation[0][0],  rotation[0][1],  rotation[0][2],  0,
                        rotation[1][0], rotation[1][1],rotation[1][2],  0,
                        rotation[2][0], rotation[2][1],rotation[2][2] , 0,
                        0,  0,  0,  1 );
plane.quaternion.setFromRotationMatrix(rotationMatrix);

The result looks incorrect.

Thanks for any help.

Regards,

Yu

[simogasp]

Can it be a columnmajor kind of problem?
THREE.Matrix4() is colummajor,
http://threejs.org/docs/api/math/Matrix4.html
while the matrices in openMVG are rowmajor.

S.

[pmoulon]

I was thinking to the same, can you try to set the transpose of the rotation matrix?

[csp256]

I would be very interested to see what you come up with @yuyou as I have done a little work in threejs before. :) Please include a link when you can!

[yuyou]

Thanks to @simogasp and @pmoulon, the transpose made it work. See the attached screenshot. The plane has 2 colored faces: yellow and white.

I will share the code after I add a normal pointer and clean it up.

[yuyou]

You can get a simplified but working viewer from https://gist.github.com/yuyou/2665238329ca34f0288b073d735a7bcb

it uses scripts hosted remotely to save your time for quick testing. Just save the file to your local place from where a file "sfm_data.json" must exist (or change the line 69 accordingly). Optionally, you can place all key frame images under the same directory, and change the variable "load_image" to "true" to show images rendered in the back of the camera "cards".

It worked with FireFox and Safari. Chrome works only when the "sfm_data.json" is served from a server over a valid URI address.

[pmoulon]

Thank you @yuyou

I tested it on some scene and it worked fine.

Here a minor comments:

• I think having a button to change the point size could be valuable.
• I got this warning error if I use the load_image to true:
  • Maybe you can consider it to have a call that is closer the the actual API.
    THREE.ImageUtils.loadTexture has been deprecated. Use THREE.TextureLoader() instead

We must see how we can ship it with OpenMVG