https://visionscarto.net/observable-jekyll/explore/2019/04/29/aframe.html works in an iphone 3D/VR setting, but https://observablehq.com/d/dac249dff69f3ca7 doesn’t.
Is it because the iframe doesn’t have allowvr=“yes” (https://stackoverflow.com/questions/40652576/how-do-i-run-webvr-content-within-in-an-iframe) — and if so, is it something that you could consider adding? I’m confused because it has allow=“vr”, so maybe it’s something else.
(No hurry for me — the external Runtime thing is working and allows me to control the fullscreen experience at the same time, so better.)
From searching around, it might be due to that supposedy Safari doesn’t send devicemotion events to cross origin iframes. In testing though I couldn’t easily reproduce this yet.
Confounding the issue is that my phone had “Motion & Orientation Access” disabled in Settings and my test case didn’t work until I enabled it. At the same time, your visionscarto.net test case worked on my phone irrespective of my access setting. Do you know how aframe detects device orientation/motion?
no idea, I’m just a beginner :^) I’ll ask.
Since iOS 12.2 devicemotion comes disabled by default and the user has to enable manually. devicemotion is also not available in cross origin iframes. That’s explain the behavior you see. The allowvr attribute won’t work in mobile devices.
I saw discussion of that. And yeah, after trying at aframe.io, I consistently see it disabled with the safari setting.
So @Fil, you’re going to be out of luck for up to date iPhones anyway. At least until you convince people to toggle a setting.
Now that this setting makes consistent sense, let me play around a bit with forwarding devicemotion events into the iframe via postMessage.
thank you Diego and Visnu.
My use case is not towards the public so toggling a setting is not a problem
I’ve had a mixed success with Safari (once the setting was on), where the menu disappeared when I:
- opened the AFrame in vertical mode,
- double clicked to switch to another app
- turned the phone to horizontal mode
- came back to Safari
It’s not working consistently. Plus, sometimes AFrame loses track of the dimensions, and a fragment of the left image goes into the right eye. (This might be related with the dimensions of the container div, I’ll investigate more.)
On Android it works perfectly on the first try :-/