3D panorama examples for 3D TV

[Wim.Koornneef]

Hello Forum,

With help (*) from Thomas I managed to make the 3D examples on my website ready for display on 3D TV.
http://www.dmmdh.nl/index_3d_en.htm

More info can be found on the Nodal Ninja forum:
http://www.nodalninja.com/forum/showthr ... g-on-3D-TV

Happy 3D viewing,
Wim

(*) Thomas supplied me the WebKit code needed for a modified display of the left and right panorama in a single webpage.
Thanks again Thomas.

[mr_cg]

I will receive my ordered Samsung 3D TV the next couple of days ... can't wait to test your 3D pano's with shutter glasses.

My next task will be to create my own 3D panorama. Unfortunetely i did not understand the right workflow right now.
Can you describe the full workflow and which tools are needed?

e.g.
1. Setup of taking the shots with panoramic tripod? (Currently i have to make 5 shots every 72° ... what is the procedure for 3d?)
2. Process the left/right pictures before or after stitching?
3. How to convert and align the left/right pictures to be handled correctly from the TV?

Thanks for your help.

[Wim.Koornneef]

Here is a link to a tutorial on the Nodal Ninja forum how to make a 3D panorama with a single camera.

http://www.nodalninja.com/forum/showthr ... -lens-quot

In the tutorial you will find all the info you need to create your own 3D panorama.
With Pano2VR you convert the left and right equirectangulars to html5 multi resolution panoramas with external xml files.
For viewing on your 3D TV you need to modify the script of the html source code of one of the panoramas to embed the left and right panorama in a single webpage, take a peek inside the html source code of one of my 3D panoramas to see how I do this.
Copy/paste the webkit code, alter the name and path to the xml files and you're ready to go.

Success,
Wim

[RobM]

And this code to display the split image. it's available to use?

Cheers,
Rob.

[RobM]

Anyone?

[thomas]

Hello Rob,

the code for side by side view can be found here:
http://ggnome.com/wiki/Synchronizing%20Panoramas

If you want to squeeze them as well you need to add CSS transformations to the player DIVs. For example this way:

Code: Select all

<div id="container_left"  style="position:absolute;top:0px;left:0px;width:500px;height:500px;-webkit-transform-origin:0% 0%;-webkit-transform: scaleY(0.5);"></div>
<div id="container_right" style="position:absolute;top:250px;left:0px;width:500px;height:500px;-webkit-transform-origin:0% 0%;-webkit-transform: scaleY(0.5);"></div>

You can find test example here:
http://gardengnomesoftware.com/test/sync/scale2.html

[Wim.Koornneef]

. . . . Copy/paste the webkit code, alter the name and path to the xml files and you're ready to go . . . .

Sorry but I was wrong. As it turns out the source code of the html files of my 3D panoramas are changed severe by the WebKit engine of the webbrowser.
These changes are making it impossible to read the original unaltered source code and copy/paste of the code with the webbrowser makes no sense so therefore I have put the part of the code that makes the 3D panorama working in the box below:

Code: Select all

		<div id="container_left" style="position:absolute;top:0px;left:0px;width:100%;height:100%;-webkit-transform-origin:0% 0%;-webkit-transform: scaleY(0.5);"><div style="top: 0px; left: 0px; position: relative; "><div style="top: 0px; left: 0px; width: 100%; height: 100%; overflow: hidden; position: absolute; z-index: 0; -webkit-user-select: none; "><canvas width="100%" height="100%"></canvas></div><div style="top: 0px; left: 0px; width: 100%; height: 100%; overflow: hidden; position: absolute; z-index: 1000; -webkit-user-select: none; cursor: auto; "></div><canvas style="top: 0px; left: 0px; width: 100%; height: 100%; overflow: hidden; position: absolute; z-index: 900; -webkit-user-select: none; visibility: inherit; " width="100%" height="100%"></canvas><div style="top: 0px; left: 0px; position: absolute; padding: 0px; visibility: hidden; z-index: 1100; "></div></div></div>
		<div id="container_right" style="position:absolute;top:50%;left:0px;width:100%;height:100%;-webkit-transform-origin:0% 0%;-webkit-transform: scaleY(0.5);"><div style="top: 0px; left: 0px; position: relative; "><div style="top: 0px; left: 0px; width: 100%; height: 100%; overflow: hidden; position: absolute; z-index: 0; -webkit-user-select: none; "><canvas width="100%" height="100%"></canvas></div><div style="top: 0px; left: 0px; width: 100%; height: 100%; overflow: hidden; position: absolute; z-index: 1000; -webkit-user-select: none; cursor: auto; "></div><canvas style="top: 0px; left: 0px; width: 100%; height: 100%; overflow: hidden; position: absolute; z-index: 900; -webkit-user-select: none; visibility: inherit; " width="100%" height="100%"></canvas><div style="top: 0px; left: 0px; position: absolute; padding: 0px; visibility: hidden; z-index: 1100; "></div></div></div>
		<script type="text/javascript">
			// create the panorama player with the container
			pano_left=new pano2vrPlayer("container_left");
			pano_left.readConfigUrl("image_001_left.xml");
			skin=new pano2vrSkin(pano_left);
			pano_right=new pano2vrPlayer("container_right");
			pano_right.readConfigUrl("image_001_right.xml");
			skin=new pano2vrSkin(pano_right);
			// syncronize both panoramas
			function syncPanos() {
				pano_right.setPan(pano_left.getPan());
				pano_right.setTilt(pano_left.getTilt());
				pano_right.setFov(pano_left.getFov());
			}
			setInterval ( "syncPanos()", 10 );
		</script>

I hope this helps a bit.
Wim

[RobM]

Thanks Wim, Will try get my head around this.

I had hoped one of the dev team would have stepped in actually.