Side-by-Side Presentation format for Passive 3D TVs and 3D projectors

landrvr1 · September 11, 2016 at 7:18 PM

I'm wondering if it were possible to actually create a webvr in which the left eye and right eye images were squeezed for side-by-side viewing format on a passive 3D TV?

There would have to be a way to specify that the original left and right panos would need to be 1920x1080 before they were squeezed...

In this way we could get a fantastic HD webvr 3D experience going on a very large screen for clients!

I've been able to successfully view my webvr 3D pano on a 3DTV but, of course, you need to place the TV in 4:3 viewing mode in order to get the correct presentation aspect.

This old thread discussed the issue a bit, but I've seen nothing since and the latest build has no scripts to support..

krpano HTML5 Multiresolution Preview

landrvr1 · September 14, 2016 at 4:43 PM

Gotta give this a bump because the notion of presenting a virtual tour on a large 3D TV in 16:9 is just too awesome to ignore, LOL.

klaus.krpano · September 15, 2016 at 10:21 AM

Hi,

WebVR and 3DTV are two different things!

See here the old stereo3d examples:
https://krpano.com/stereo3d/

Click the '3D side by side' icon on the examples.

There two viewers, side by side embedded, horizontally scaled down by CSS3D transforms and with synchronized moving by JS are used.

Best regards,
Klaus

landrvr1 · September 15, 2016 at 3:57 PM

Klaus, that's fantastic! Is this no longer supported in the latest build? I don't see any CSS3D transform / sync js examples. Would absolutely love to still be able to do this...

klaus.krpano · September 15, 2016 at 9:11 PM

This is still 'supported' / possible of course.

That's not a feature of the viewer itself, that's a kind of usage or 'how-to-use-krpano' feature...

That means you would be still able to do that - e.g. have a look at html and xml sources of the online examples.

Best regards,
Klaus

landrvr1 · September 16, 2016 at 1:14 AM

Haha! Yes I forgot that CTRL + U was my friend in Chrome!

Okay, I'm using the Indian Temple example as my guide.

When I use a standard url it loads the images in both the left and right panos on the screen, but of course they are both from the left eye folder.

<image>
<cube url="panos/http://panos.left/01.tiles/pano_%s.jpg"/>
</image>

However, when I try and use the url from the stereo example, nothing loads:

spacerywirtualne · September 16, 2016 at 8:52 AM

Quote from landrvr1

panopath

You need defined this variable in you html index page by initvars

Piotr

landrvr1 · September 16, 2016 at 4:02 PM

Hey Piotr, here's the structure of what I have now:

HTML
The panopath is being defined here:

Code

var panobasepath = "panos";
// embed the krpano viewers
embedpano({html5:"only+webgl", id:"krpanoLeftEyeViewer", target:"krpanoLeftEyeDiv", xml:"sbs3d.xml", vars:{side:"left", panopath:(panobasepath+".left")}, passQueryParameters:true, onready:fullscreensetup});
embedpano({html5:"only+webgl", id:"krpanoRightEyeViewer", target:"krpanoRightEyeDiv", xml:"sbs3d.xml", vars:{side:"right", panopath:(panobasepath+".right")}, passQueryParameters:true});

sbs3d.xml
The sgs3d.xml is then including the tour.xml

tour.xml
In the tour.xml I then have this code:

Code

<scene name="scene_01" title="01" thumburl="panos/panos.left/01.tiles/thumb.jpg" lat="" lng="" heading="">
<view hlookat="0" vlookat="0"/>
<preview url="panos/panos.left/01.tiles/preview.jpg"/>


<image>
<cube url="%$panopath%/01.tiles/pano_%s.jpg"/>
</image>


<hotspot name="spot2" style="skin_hotspotstyle_black" ath="-165.457" atv="0.111" preload="true" linkedscene="scene_pano2_l" />
 <hotspot name="spot3" style="skin_hotspotstyle_lobby_black" ath="20.931" atv="82.430" preload="true" linkedscene="scene_panolobby_l" />


</scene>


</krpano>

Display More

Panos Folder Structure
Here's what my panos folder structure looks like:

panos/http://panos.left/01.tiles/pano_b.jpg etc etc
panos/panos.right/01.tiles/pano_b.jpg etc etc

spacerywirtualne · September 16, 2016 at 4:52 PM

Hi

try use initvars NOT vars

vars:{...} != initvars:{...}

Klaus write:

This is basically the same as the vars setting, but these variables will be set BEFOREthe xml file wil be loaded and parsed.

Code

var panobasepath = "panos";  
//embed the krpano viewers  
embedpano({html5:"only+webgl", id:"krpanoLeftEyeViewer", target:"krpanoLeftEyeDiv", xml:"sbs3d.xml", vars:{side:"left"}, initvars:{panopath:panobasepath+".left"}, passQueryParameters:true, onready:fullscreensetup});
embedpano({html5:"only+webgl", id:"krpanoRightEyeViewer", target:"krpanoRightEyeDiv", xml:"sbs3d.xml", vars:{side:"right"}, initvars:{panopath:panobasepath+".right"}, passQueryParameters:true});

try it

Piotr

landrvr1 · September 16, 2016 at 5:19 PM

I'm afraid that didn't work.

landrvr1 · September 16, 2016 at 5:48 PM

Okay, I think I figured it out. I was thinking all along that I needed a 'panos' folder and then within that folder I would have my 'panos.left' and 'panos.right'

But then I again looked at the panobasepath:

var panobasepath = "panos";

and realized that when it's being called by (panobasepath+".left"), there's no accounting for the base 'panos' folder!

Once I changed it to var panobasepath = "panos/panos"; , and also added the panos/ to the thumb url, it all worked.

Piotr, I also used you new initvars and that works great as well. Tnx!

landrvr1 · September 16, 2016 at 5:58 PM

The issue now is that hotspots do not work. Even in the source example, they don't do anything...!????

https://krpano.com/stereo3d/indiantemple/sbs3d.html

Any thoughts here?

klaus.krpano · September 19, 2016 at 12:03 PM

Hi,

add renderer="css3d" to the hotspots.

This is because the mouse coordinate tracking (used in the webgl hotspot rendering for the hit-testing) is based on window coordinates and not on the css-transformed(scaled) coordinates of the viewer layers. I will try to improve that.

Best regards,
Klaus

landrvr1 · September 19, 2016 at 3:59 PM

Thanks Klaus!

Participate now!