aframevr / aframe

:a: Web framework for building virtual reality experiences.
https://aframe.io/
MIT License
16.69k stars 3.98k forks source link

Document how to enter/exit VR #1473

Closed cvan closed 5 years ago

cvan commented 8 years ago

Description:

document.querySelector('a-scene').enterVR();
document.querySelector('a-scene').exitVR();

And also document how to when <iframe>-ing content.

ngokevin commented 8 years ago

https://github.com/aframevr/aframe/blob/master/docs/core/scene.md#methods

cvan commented 8 years ago

Nice section here, but for some reason waiting for loaded doesn't work. you have to add a setTimeout. gotta figure out why:

<script>
   (function () {
       // switch to stereoscopic mode directly on page load, this needs to be after the a-scene loads.
       var scene = document.querySelector('a-scene');
       if (scene.hasLoaded) {
           scene.enterVR();
       } else {
           scene.addEventListener('loaded', function () {
               setTimeout(function () {
                   scene.enterVR();
               }, 1000);
           });
       };
   })();
</script>

Also, not exactly specific to this issue, but still think we should support #705.

ngokevin commented 8 years ago

Well, no one is against #705. Though I might also just recommend creating a scene component. They have the advantage that you don't have to worry about query selecting, waiting for events. Just write JS and attach:

AFRAME.registerComponent('auto-enter-vr', {
  init: function () {
    this.el.sceneEl.enterVR();
  }
});
<a-scene auto-enter-vr>
cvan commented 8 years ago

like it

ngokevin commented 8 years ago

Though I guess you might still have to add the event listener...but at least you don't have to query selector or worry whether it's already loaded. And you get reusable code for free.

manojkota commented 7 years ago

This is not working with version >=0.3.0

cvan commented 7 years ago

This is not working with version >=0.3.0

Are you testing in Chromium or Firefox Nightly? Chromium currently has a temporary user-gesture requirement; Firefox Nightly does not.

cvan commented 7 years ago

(Accidentally closed issue.)

manojkota commented 7 years ago

I have tested in firefox & chrome in Android. It is not working. When I change the afrmae version to 0.2.0, it is directly going to vr mode.

UXVirtual commented 7 years ago

The following code seems to work with v0.4.0 in Firefox Nightly when auto-init-vr component is attached to the scene. Unfortunately Chromium still requires user interaction before it can auto-trigger VR mode:

AFRAME.registerComponent('auto-init-vr', {
    init: function () {

        var scene = this;

        scene.el.addEventListener('loaded', function () {
            setTimeout(function(){
                console.log('Automatically entering VR...');
                scene.el.sceneEl.enterVR();
            },1000);
        });
    }
});

Note that I changed the component name since the original name collides with an internal component in v0.4.0. The setTimeout isn't exactly very elegant - is there a better way of detecting when the entire scene is ready?

machenmusik commented 7 years ago

auto-enter-vr in 0.4.0 does what you want, but is configured by default to only enter if VR display is Gear VR (for Carmel browser which has no other way to enter VR)

Silver-Seagull commented 7 years ago

Is there any way for auto-enter-vr to have the GearVR be over-ridden? We are trying to jump through multiple small scenes, but we have to enter VR manually each time, which is inconvenient on Cardboard!

None of the "old" methods of calling a script of setting a setTimeout or loaded work on 0.4.0, so this is extra-frustrating.

cvan commented 7 years ago

@Silver-Seagull yep, there is - I'm working on it right now. out of curiosity, are you working with only Cardboard? or are you using Chromium/Firefox w/ Vive/Rift? I'm just curious which platforms A-Frame devs are using.

Silver-Seagull commented 7 years ago

@cvan Do you have an ETA, or a hint? I'm sorta stuck and it's driving me bonkers.

Our main platform will be cardboard and cardboard-like devices. Vive and Rift aren't really on the map for now :)

cvan commented 7 years ago

@Silver-Seagull there are a couple bugs in that code. I'm fixing them right now. but if you're trying to do it right now, just set <a-scene auto-enter-vr="display: all">; that's a temporary workaround though.

dmarcos commented 7 years ago

Just for the record. auto-enter-vr will go away in next version in favor of the link component and system

machenmusik commented 7 years ago

sorry about the bugs :-/

machenmusik commented 7 years ago

@cvan not sure display: all works correctly at the moment, https://github.com/aframevr/aframe/blob/master/src/components/scene/auto-enter-vr.js#L50 ... the original intent was to leave blank for all, but unfortunately the parsing just fills in the default... which is unfortunately still GearVR. if you've got fixes forthcoming, they haven't appeared in master yet

machenmusik commented 7 years ago

auto-enter-vr will go away in next version in favor of the link component and system

we will presumably still want the vrdisplayactivate and vrdisplaydeactivate enter/exit behaviors (assuming that browsers fire the events)

machenmusik commented 7 years ago

@Silver-Seagull try: https://rawgit.com/chenzlabs/aframe/fix-auto-enter-vr-dist/dist/aframe-master.js https://rawgit.com/chenzlabs/aframe/fix-auto-enter-vr-dist/dist/aframe-master.min.js with <a-scene auto-enter-vr="display:all">

Silver-Seagull commented 7 years ago

@cvan & @machenmusik Thank you for the help and tips - however the app isn't entering the split-view as it should.

I feel a little out of my depth (to say the least) and I may have posted out of turn. Looking at our code, I think the view is not Cardboard, but an a-frame page in a Cordova app using the Crosswalk browser. I assume the WebKit-based browser is why this is not working?

:edit: Running the code now, definitely a Crosswalk-based project in Cordova. On desktop, the VR/cardboard button disappears, which looks like it fired.

cvan commented 7 years ago

I got this patch working to auto-enter VR, but I still have to fix up the tests (and write new ones).

As Diego mentions above, the code in A-Frame (and three.js) is going to have to be reimplemented soon anyway (to support all the variations in Oculus Carmel, Google Daydream, Google Cardboard, Firefox Nightly, and Chromium Desktop), as the WebVR API's navigation flow (for auto-entering VR) is in flux right now (see issues w3c/webvr#30 and w3c/webvr#152).

@Silver-Seagull: I'd recommend dropping this JS snippet into your scene for now:

window.addEventListener('load', function () {
  var scene = document.querySelector('a-scene');
  if (scene.hasLoaded) {
    scene.enterVR();
  } else {
    el.addEventListener('loaded', function () {
      scene.enterVR();
    });
  }
});

Hope that gets you where you need to be.

Silver-Seagull commented 7 years ago

@cvan It looks like it's a WebVR block, as browsers (save Carmel?) won't allow that sort of action unless it comes from a human.

Thank you for the help and suggestions - hopefully link comes along in the January roadmap as planned ^_^

0atman commented 5 years ago

Hi all. Has this been fixed? I see that in the link docs we have the requirements:

The browser is up-to-date with the WebVR specification and implements the vrdisplayactivate event. The destination web page listens to the window [vrdisplayactivate] event and enters VR.

How would one listen to vrdisplayactivate and kick off a scene.enterVR();? I've tried this, and it doesn't seem to fire:

window.addEventListener('vrdisplayactivate', function () {
  var scene = document.querySelector('a-scene');
  scene.enterVR();
  console.log(scene);
}
ngokevin commented 5 years ago

aframe has vrdisplayactivate automatic. entervr/exitvr methods documented

0atman commented 5 years ago

Unsatisfactory.

Aframe makes very bold claims, on the frontpage of the site, that it

Works on Vive, Rift, Daydream, GearVR, desktop

When in fact vrdisplayactivate works only on Vive and Rift.

We should manage our users expectations correctly. Here is an example of the update I would like to see:

https://github.com/aframevr/aframe/pull/3994

0atman commented 5 years ago

This is now documented thank you, guys! https://github.com/aframevr/aframe/commit/8f94626b81bc7a2c6faaf0742d4af35f2bd63c06

fmagrosoto commented 5 years ago

Hello every one... I tried to load my scene in VR mode using enterVR() within a component:

AFRAME.registerComponent('do-something', {
  init: function () {
    var sceneEl = this.el;
   sceneEl.enterVR()
  }
});

In Chrome for iOS (77.0.8685.103) works fine, but in Android, same Chrome version, do not works... anybody has a solution?, or maybe an explanation?

Thanks in advance

0atman commented 5 years ago

Halloween was last week, I'm not into zombie threads this week :laughing:

@fmagrosoto I don't think this is the right place to ask this question. Try the aframe discord, or if you think it's a bug, open your own issue. Good luck!