3D panorama examples for 3D TV

Q&A about the latest versions
Post Reply
User avatar
Wim.Koornneef
Posts: 218
Joined: Wed Jan 03, 2007 4:11 pm
Location: The Netherlands
Contact:

Fri Nov 29, 2013 3:34 pm

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
Posts: 20
Joined: Fri Dec 28, 2012 12:32 pm

Sat Dec 28, 2013 8:50 pm

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. :D

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.
User avatar
Wim.Koornneef
Posts: 218
Joined: Wed Jan 03, 2007 4:11 pm
Location: The Netherlands
Contact:

Sun Dec 29, 2013 9:32 am

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
Posts: 249
Joined: Sat Apr 16, 2011 12:51 pm

Wed Jan 08, 2014 4:47 pm

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

Cheers,
Rob.
RobM
Posts: 249
Joined: Sat Apr 16, 2011 12:51 pm

Thu Jan 09, 2014 2:13 pm

Anyone?
User avatar
thomas
Chief Gnome
Posts: 2565
Joined: Fri Sep 01, 2006 3:56 pm
Location: Vienna, Austria
Contact:

Thu Jan 09, 2014 6:14 pm

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
MfG, Thomas
User avatar
Wim.Koornneef
Posts: 218
Joined: Wed Jan 03, 2007 4:11 pm
Location: The Netherlands
Contact:

Thu Jan 09, 2014 10:14 pm

Wim.Koornneef wrote: . . . . 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
Posts: 249
Joined: Sat Apr 16, 2011 12:51 pm

Tue Jan 14, 2014 6:49 pm

Thanks Wim, Will try get my head around this.

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