Dynamic Field of View for Embedded QTVRs - Revision history

WikiSysop: /* Optimal Vertical Field of View */ render formular using math tag

2007-11-04T16:21:32Z

‎Optimal Vertical Field of View: render formular using math tag

WikiSysop: /* Setting FOV Dynamically with Javascript */ color code

2007-11-04T16:12:55Z

‎Setting FOV Dynamically with Javascript: color code

Erik Krause: 1 revision(s)

2007-03-21T18:09:01Z

1 revision(s)

Erik Krause: categorized, typo, TOC

2007-03-21T18:07:00Z

categorized, typo, TOC

Erik Krause: categorized, typo, TOC

2007-03-17T20:02:49Z

categorized, typo, TOC

Jdsmith at 20:44, 11 December 2006

2006-12-11T20:44:09Z

Erik Krause: /* Setting FOV Dynamically with Javascript */ better readable preformatted text

2006-12-11T20:25:54Z

‎Setting FOV Dynamically with Javascript: better readable preformatted text

Jdsmith at 21:40, 8 December 2006

2006-12-08T21:40:19Z

Jdsmith at 21:27, 8 December 2006

2006-12-08T21:27:52Z

Jdsmith at 21:11, 8 December 2006

2006-12-08T21:11:24Z

@@ Line 14: / Line 14: @@
 The optimal vertical field of view to achieve 1:1 mapping between source panorama pixels and display pixels is:
-<pre>
+<math>
-  FOV=2.*atan(PI*winHeight/pano_width)
+  FoV=2*atan(\frac{\pi*winHeight}{panoWidth})
-</pre>
+</math>
 where <tt>win_height</tt> is the vertical height of the display window, and <tt>pano_width</tt> is the width of equirectangular source image.  This assumes a cubic panorama is made with the ideal cube face size of <tt>pano_width/PI</tt>.  The table below lists this field of view for monitor windows of a given height, for a variety of panorama sizes:

@@ Line 55: / Line 55: @@
 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:
-<pre>
+<source lang="js">
 <script TYPE="text/javascript">
 <!--
@@ Line 82: / Line 82: @@
 -->
 </script>
-</pre>
+</source>
 Note that this requires access to the width of the panorama's equirectangular source (<tt>$pano_width</tt> here).  This can be supplied by hand or replaced via other methods (e.g. server-side processing).
@@ Line 88: / Line 88: @@
 Then the embed tag can then be written in the body where you'd like the QTVR to appear:
-<pre>
+<source lang="js">
 <script TYPE="text/javascript">
 document.write('<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"'
@@ Line 106: / Line 106: @@
    +' "></embed></object>');
 </script>
-</pre>
+</source>
 Be sure to replace <tt>movie.mov</tt> with your movie name.  The <tt>fov</tt> Javascript variable can be used elsewhere as well (for example, to report the computed optimal FOV).

← Older revision		Revision as of 18:07, 21 March 2007
Line 114:		Line 114:
	--[[User:Jdsmith\|Jdsmith]] 21:44, 11 December 2006 (CET)		--[[User:Jdsmith\|Jdsmith]] 21:44, 11 December 2006 (CET)

−	~~[[Category:Tutorial]]~~[[Category:Tutorial:Nice to know]]	+	[[Category:Tutorial:Nice to know]]

@@ Line 1: / Line 1: @@
-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 Projection|fisheye]] lenses on 1.5x [[crop factor]] SLR cameras.
+__TOC__
 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-resolution panoramas.
@@ Line 110: / Line 113: @@
 --[[User:Jdsmith|Jdsmith]] 21:44, 11 December 2006 (CET)

← Older revision		Revision as of 20:44, 11 December 2006
Line 109:		Line 109:
	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).		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~~	+	--[[User:Jdsmith\|Jdsmith]] 21:44, 11 December 2006 (CET)

@@ Line 87: / Line 87: @@
 <pre>
 <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('<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"'
-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>');
+  +' codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="100%" height="100%">'
 </script>
 </pre>
-Note the long lines.  Be sure to replace <tt>movie.mov</tt> with your movie name.  The <tt>fov</tt> Javascript variable can be used elsewhere as well (for example, to report the computed optimal FOV).
+Be sure to replace <tt>movie.mov</tt> with your movie name.  The <tt>fov</tt> 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

@@ Line 1: / Line 1: @@
-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 Projection|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.
+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 Projection|fisheye]] lenses on 1.5x [[crop factor]] SLR cameras.
-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:
+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.
-{| cellspacing=0 cellpadding="5" style="border:1px solid black; background-color:#aaaaaa; margin-left:10px;"
+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.
-|+ Zoom for 1:1 pixel mapping (degrees)
 ! style="background-color:#666666;" | Equirect.
 ! colspan="5" style="background-color:#666666;" | Screen Height
@@ Line 29: / Line 43: @@
 |}
-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 [[QTVR|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:
@@ Line 67: / Line 81: @@
 </pre>
 Note that this requires access to the width of the panorama's equirectangular source (<tt>$pano_width</tt> 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:
@@ Line 79: / Line 93: @@
 Note the long lines.  Be sure to replace <tt>movie.mov</tt> with your movie name.  The <tt>fov</tt> Javascript variable can be used elsewhere as well (for example, to report the computed optimal FOV).
 --JDS

@@ Line 8: / Line 8: @@
 ! colspan="5" style="background-color:#666666;" | Screen Height
 |-
-! style="background-color:#666666;" |  size   !! 600 !! 800 !! 1024 !! 1200 !! 1600
+! style="background-color:#666666; border-bottom: 2px solid black;" |  size   !! style="background-color:#666666; border-bottom: 2px solid black;" |600 !! style="background-color:#666666; border-bottom: 2px solid black;" |800 !! style="background-color:#666666; border-bottom: 2px solid black;" |1024 !! style="background-color:#666666; border-bottom: 2px solid black;" |1200 !! style="background-color:#666666; border-bottom: 2px solid black;" |1600
 |-
 ! align="right" | 1500x750