I am extending a 3D webapp that visualizes point clouds, to support images. The app is based on the open source app, Potree (which in turn uses three.js), and allows measuring distances. A demo of the measurement tools in Potree can be viewed here.
My goal is to overlay a photograph onto the point cloud, so that the measurement can be made on the image rather than on the point cloud (note: the actual measurement will still be made on the point cloud. The image overlay acts as a guide and therefore needs to be aligned). To align the photograph, I am using external camera parameters - chiefly for translation and rotation. The pics below show the results I have obtained so far when aligning the image to the 3D-scene. It must be noted that the image has not been corrected for the camera's distortion (internal parameter in the link above). The process to obtain this image can be summed up in the following major steps:
- Translate the image object in the scene, to the position where the photograph was taken. Let's call it
(X,Y,Z)
- Rotate the image object using the Heading/Pitch/Roll angles obtained from the camera orientation
- Position the 3D scene's virtual camera at
(X,Y,Z)
and look at the image object. Use the field of view parameter to adjust how near/far the image should appear.
Point cloud with image overlaid
The photograph in the obtained result looks roughly aligned, but needs tweaking. The alignment was obtained using only the following parameters/variables which I have or can modify:
- Camera orientation (Angles - Heading/ Pitch/ Roll; Position - GPS/Projected coordinates) for the photograph
- Camera parameters (Focal Length - 8.5mm in this case, and other manufacturer specified params)
- Picture size (5328 x 4608 pixels)
- Virtual Camera Pose (within the 3D scene. Includes field of view, position, orientation, near & far distances)
(Note: Using the formula for the field of view, FOV = 2*atan(H/2f) = 2*atan( 4608/( 2 * 8.5))
, with the above data gives a field of view of ~180 degrees, which causes the three.js Perspective camera to render the scene incorrectly).
What I do not have are the following:
- Depth information in the image (image is not part of a stereo pair)
- Control/registration points
- Coordinates of identifiable features/objects in the 3d scene to align the image to the scene. I might be able to do this for one or two images, but cannot scale it to hundreds of images.
I am not too well versed in Photogrammetry/Computer Vision and not even sure if I have used the proper terminology in the description above. Other articles/papers I skimmed though speak of image registration via use of control points and/or object matching, which I am unable or unwilling to do, a reason being, they are too computationally expensive to be performed in a Web browser.
All this boils down to my question. With the parameters listed above is it possible to get an alignment that is good enough to take measurements on the photograph? If not, what is missing?
Source code is purposely not included here, since my aim is to develop an understanding of the required theoretical concepts for this particular scenario.