Partial Panoramas using ROI in PTViewer
If you have a panorama that is not fully 360°x180°, and you still want to use PTViewer to immerse your audience into your panorama, there are a few methods to do that.
You can expand your Panorama with blank space around, and use the normal way of displaying a panorama in PTViewer. The disadvantage of this is that if you put this picture online, the download times can be significantly longer because of all the blank space.
To avoid this, it is possible to use a Region Of Interest picture (ROI) to display the panorama. This will only download the partial panorama. We will have to tell PTViewer where to place the picture, and how far the user may pan left and right, and how much they can tilt up and down.
Note this is not an explanation of the syntax of PTViewer, rather a tutorial on how to calculate the different parameters. For the syntax on PTViewer you can visit : PTViewer Documentation
From the ROI picture we need to get some basic information :
- Width in pixels (ROI Width) 800 px
- Height in pixels (ROI Height) 541 px
- Position of the horizon from the top of the picture (Horizon pos) 227 px
The picture must have equirectangular projection
From the stitcher we should be able to get the Horizontal Field of View (HFOV). In this case 160°
From these 4 numbers we should be able to calculate the parameters necessary for PTViewer to display a partial panorama.
Calculating the parameters for PTViewer
Since we know the ROI Width of the picture as well as the Horizontal Field of View (HFOV), we can calculate the field of view for 1 pixel. In this case
We need this number to convert from pixels to degrees and vice versa. You need an accuracy of a couple of decimals otherwise it won't work.
The objective is to place the ROI picture inside the 360°x180° panorama with the horizon in the ROI image over the horizontal 0° line of the pano, and the middle of the ROI image in the middle of the panorama.
pwidth and pheight
To do that we first need to calculate the total size of the panorama image, of which the ROI image is a part of. The calculation is done by using the number of degrees per pixel. Since we know the degrees, we can calculate the number of pixels.
x and y insertion point
To calculate the x and y position of the insertion point (the point where the picture needs to be placed) we can take half of the panorama height and subtracting the horizon position in the ROI.
Similarly we can calculate the x offset. In most circumstances, you either don't know, or don't care about the direction the picture was taken. In that case it is good practice to place the ROI in the middle of the large pano where 0° is the middle of the picture. You can do this by taking half of the total panorama width and subtracting half the size of the picture
panmin, panmax, tiltmin and tiltmax
To limit the freedom the user has in moving around your pano, you want to restrict the pan and tilt angles. To calculate this is relatively easy with the information we have gathered above. The pan and tilt angles are calculated in degrees.
Because the ROI is horizontally in the middle, you may pan half the width of the image to the left and right, converted to degrees.
The minimum tilt is calculated as the height of the ROI minus the position of the horizon, converted to degrees.
The maximum tilt is calculated as the position of the horizon, converted to degrees.
Because ptviewer does not take fractions of degrees, you throw away the fraction.
Using these numbers in PTViewer should give you a good partial panorama. If you see blank space at the edges of the panorama, you may want to make a 1 degree change to the minimum and maximum pan and tilt untill it does not show up anymore.
To see how these calculations translate in HTML code, the above sample could result in the following HTML code :
<source lang="html"> <applet archive="ptviewer27L2.jar" code="ptviewer.class" WIDTH="300" HEIGHT="200" mayscript=true>
<param name=pwidth value=1800> <param name=pheight value=900> <param name=roi0 value="i'sample.jpg' x500 y223"> <param name=panmin value=-80> <param name=panmax value=80> <param name=tiltmax value=45> <param name=tiltmin value=-62>
If all these computations give you a headache, you can use the following form. Just input your data and it will generate the applet HTML code with all the correct parameters. Enjoy !