Historical:Dynamic Field of View for Embedded QTVRs

Larger panoramas offer more detail, allowing viewiers to zoom in to much higher levels and appreciate more of the scene. This improvement, however, comes at the cost of larger file sizes and longer download times. Typical suggestions for the ideal size of the source equirectangular images for cubic VR movies for web presentation range from 3000x1500 to 5000x2500 -- roughly the full resolution achievable using circular fisheye lenses on 1.5x crop factor SLR cameras.

Much larger source images are naturally obtained from full-frame fisheye lenses or rectilinear lenses, often shot in multiple rows to cover the entire sphere. Though QTVR movies made from sources images of 10000x5000 pixels or more are somewhat large files (up to 10MB or more, depending on quality settings), increasing bandwidth availability means that it is becoming less difficult to downloading these high-res panoramas.

However, since most casual viewers do not zoom in on movies, the large download can be wasted, even for full-screen panorama display, if the initial field of view is set too large. Most of the detail available will not be seen. Full-screen display on large monitors means that even at a modestly wide initial zoom, most or all of the detail in a given panorama will be visible. If you cater to large monitor size, those with smaller monitors will be zoomed too far out, wasting pixels. If you cater to small monitors, those with large monitors will be zoomed in too far and ugly pixelization may be visible.

Here we describe a method to compute an optimal initial field of view independent of monitor size.

Optimal Vertical Field of View

The optimal vertical field of view to achieve 1:1 mapping between source panorama pixels and display pixels is:

 FOV=2.*atan(PI*winHeight/pano_width)

where win_height is the vertical height of the display window, and pano_width is the width of equirectangular source image. This assumes a cubic panorama is made with the ideal cube face size of pano_width/PI. The table below lists this field of view for monitor windows of a given height, for a variety of panorama sizes:

Vertical FOV for 1:1 pixel mapping (degrees)

Equirect.	Screen Height
size	600	800	1024	1200	1600
1500x750	103.0	118.3	130.0	136.6	146.8
3000x1500	64.3	79.9	94.0	103.0	118.3
5000x2500	41.3	53.4	65.5	74.0	90.3
8000x4000	26.5	34.9	43.8	50.5	64.3
10000x5000	21.3	28.2	35.7	41.3	53.4
15000x7500	14.3	19.0	24.2	28.2	37.1

For instance, for a large 10000x5000 pixel equirectangular source image, the vertical field of view on a 1200 pixel high screen required to achieve 1:1 mapping of panorama pixels to display pixels is 41.3 degrees. Remember that toolbars, headers, etc. can reduce the vertical display size from the full monitor size.

Setting FOV Dynamically with Javascript

The initial vertical field of view of an embedded QuickTime VR movie can be modified using the appropriate EMBED and OBJECT tags. Using Javascript, you can set the initial field of view dynamically, so that pixels in the cube are displayed as close as possible to a 1:1 mapping, as in the example below:

In the header, you can enable full-screen by expanding the window as much as possible, and then compute an approximate window height. Remember to take into account any headers or other material which uses up vertical pixels in the fudge factor:

<script TYPE="text/javascript">
<!--
window.moveTo(0,0);
window.resizeTo(window.screen.availWidth,window.screen.availHeight);

window.focus();

var winHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
 //Non-IE
 winHeight = window.innerHeight;
} else if(document.documentElement && document.documentElement.clientHeight) {
 //IE 6+ in 'standards compliant mode'
 winHeight = document.documentElement.clientHeight;
 } else if(document.body &&  document.body.clientHeight) {
  //IE 4 compatible
 winHeight = document.body.clientHeight;
}

winHeight*=0.96; // Not quite the full height, approximate via fudge
var fov=Math.min(Math.max(
         180./Math.PI*2.*Math.atan(Math.PI*winHeight/$pano_width),5),90);
winHeight=Math.round(winHeight);

-->
</script>

Note that this requires access to the width of the panorama's equirectangular source ($pano_width here). This can be supplied by hand or replaced via other methods (e.g. server-side processing).

Then the embed tag can then be written in the body where you'd like the QTVR to appear:

<script TYPE="text/javascript">
document.write('<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="100%" height="100%"> <param name="bgcolor" value="#000000"> <param name="kioskmode" value="true"> <param name="scale" value="tofit"> <param name="controller" value="false"> <param name="cache" value="false"> <param name="src" value="movie.mov"> <param name="fov" value="' + fov.toFixed(2) + '">');
document.write('<embed src="movie.mov" width="100%" height="100%" bgcolor="#000000" kioskmode="true" scale="tofit" controller="false" cache="false" fov="' + fov.toFixed(2) + '"></embed></object>');
</script>

Note the long lines. Be sure to replace movie.mov with your movie name. The fov Javascript variable can be used elsewhere as well (for example, to report the computed optimal FOV).

The minimum and maximum FOV settings encoded into a movie will override any FOV computed in this way. You can use this to avoid overly large zooms on very small monitors (which can be disorienting), or overly large fields of view on very large monitors (which can accentuate the mapping distortion).

--JDS