Historical:Dynamic Field of View for Embedded QTVRs

Large panoramas can offer more detail, and allow zooming in to much higher level, but come at the cost of larger file sizes and longer downloads. Typical suggestions for the size of the source equirectangular images for cubic VR movies for web presentation is 5000x2500, which is roughly the full resolution for circular fisheye lenses on 1.5x crop factor SLR cameras. Much larger source images can be 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 larger files (up to 10MB or more, depending on quality settings), increasing bandwidth availability means that it is icnreasingly less difficult to downloading these high-res panos.

Since most casual viewers do not zoom in on movies, such a large download can be wasted, even for full-screen panorama display, if the initial field of view is 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. The table below lists the vertical field of view required on monitor windows of a given height to achieve 1:1 pixel mapping from the source panorama to the display:

Zoom 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 pano, 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).

--JDS