WebVR with 2 panos on 2 different divs

  • Hi,


    I'm trying to merge 2 visits without too much fuss. My plan was to put 2 divs in an html and an embedpano for each, and play on visibility between both with the z-index.

    <body>
    <script src="krpano.js"></script>
    <div id="pano1" style="position:absolute;width:100%;height:100%;z-index:2;">
    <script> embedpano({xml:"krpano_vr.xml", target:"pano1", id:"pano1Object"});</script>
    </div>
    <div id="pano2" style="position:absolute;width:100%;height:100%;z-index:1;">
    <script> embedpano({xml:"krpano_vr.xml", target:"pano2", id:"pano2Object"});</script>
    </div>
    </body>


    Perfect until I tried webVR on Chrome (no headset connected, just "cardboard webVR"): if I clicked VR on pano1, then pano2 was not going in VR mode automatically. I synchronized both panos by calling pano2Object.call("webvr.entervr"); each time pano1 was going VR. However, when I did this, neither Fullscreen nor webVR were working anymore.

    Seems like only one div can go webVR or FullScreen. So I then created a parent "container" div and a specific js RequestFullScreen("container") function that says fullscreen should apply to the container div instead of the pano1Object one.

    <body>
    <script src="krpano.js"></script>
    <div id="container">
    <div id="pano1" style="position:absolute;width:100%;height:100%;z-index:2;">

    <script> embedpano({xml:"krpano_vr.xml", target:"pano1", id:"pano1Object"});</script>
    </div>
    <div id="pano2" style="position:absolute;width:100%;height:100%;z-index:1;">
    <script> embedpano({xml:"krpano_vr.xml", target:"pano2", id:"pano2Object"});</script>
    </div>
    </div>
    </body>


    It worked well on Chrome and Firefox, webVR is now synchronized on the two divs: if I go VR on one, then the other one goes VR too. But it's not working on Edge (no idea for Safari) and as a consequence it does not work on my Windows Mixed Reality Headset. I'm guessing it's a miracle that it works on Chrome and Firefox.

    I'm kind of stuck for my Windows MR Headset at least. I have another idea but need help to know howto:

    webvr.entervr() is assuming I want VR on the pano1Object div only, but as I coded a RequestFullScreen("container"), is there a way I can code a webvr.entervr("container")?

    Thanks in advance


  • Hi,

    WebVR doesn't work that way!

    There can be not 'two divs', WebVR requires ONE WebGL canvas element and several 'setup' code for the movement tracking and the rendering.

    That means only one viewer instance can use WebVR at one time.

    Btw - why that strange setup with two divs?

    Best regards,
    Klaus

  • Sorry for delay in the answer.

    I want to have a carousel of tours. Like https://krpano.com/krpanocloud/webvr/?v=119pr15, but with different configs on each tour (different vtourskin.xml, different vtourskin.png, different versions of krpano...)


    The way you do it on your side is with loadpanoscene/loadscene/loadpano/... but they seem to miss arguments (compared to embedpano at least, for instance the missing initvars argument). Plus they leave the keep="true" hotspots visible, or the state of globals. And I'm not sure I can reset the FIRSTXML variable, on which I rely heavily in my tours to find my images and secondary plugins.

    From what you say, I have to use loadpanoscene/loadscene/loadpano/...
    It means I also have to add what's missing compared to embedpano:
    - reinit FIRSTXML and global variables
    - try not to use initvars
    - remove keep=true hotspots
    - reinit the bottom navigation layer (my tours have different vtourskin.png / vtourskin.xml)


    Maybe you have some set of actions to do that already?

    That's why I wanted to try several divs/canvases... much easier *tongue*


    Florian

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!