[Android] Accelerometer tracking broken on latest Chrome update

computerjazz commented 6 years ago

Steps to reproduce: update chrome on android device and go to https://developers.google.com/vr/concepts/vrview Example does not respond to phone orientation changes.

Hoping that upcoming Chromium release fixes the issue: https://bugs.chromium.org/p/chromium/issues/detail?id=779443#c39

jsantell commented 6 years ago

Is this Chrome 62.0? Related: https://github.com/googlevr/webvr-polyfill/issues/291

jsantell commented 6 years ago

And is this specifically for webview?

computerjazz commented 6 years ago

It is definitely an issue for webview, but I also see the issue when navigating to the above link in android chrome 62.0.3202.84.

When I open up the remote device Chrome developer tools for that link I see:

THREE.WebGLRenderer 81
embed.min.js:8 No DPDB device match.
Dpdb.calcDeviceParams_ @ embed.min.js:8
embed.min.js:8 Failed to recalculate device parameters.
Dpdb.recalculateDeviceParams_ @ embed.min.js:8
embed.min.js:7 Using fallback Android device measurements.
DeviceInfo.determineDevice_ @ embed.min.js:7
embed.min.js:8 No DPDB device match.
Dpdb.calcDeviceParams_ @ embed.min.js:8
embed.min.js:8 Failed to recalculate device parameters.
Dpdb.recalculateDeviceParams_ @ embed.min.js:8
3index.html:1 Uncaught (in promise) DOMException: Access to the feature "vr" is disallowed by feature policy.
embed.min.js:6 Uncaught (in promise) TypeError: Cannot read property 'isPolyfilled' of null
    at WebVRManager.<anonymous> (embed.min.js:6)
    at <anonymous>
2vrview.min.js:1 Received message with no type.

Here's what I see -- image does not move with phone movement: screen shot 2017-11-13 at 10 32 12 am

I have been able to successfully view some 360 content in chrome, so I can't pinpoint the exact issue.

aerialglasgow commented 6 years ago

Hi Daniel

I am experiencing this issue with the same mobile version of Android Chrome (62.0.3202.84) and not when using the Samsung Internet browser, save device, which is rendering 360 vrview content as expected.

62.0.3202.84 seems to the very latest stable version available.

Neill

*Aerial Digital Ltd*
Tel 0141 416 5010 | neill@aerialdigital.co.uk
Studio 407, South Block, 60 Osborne Street, Glasgow, G1 5QH
appdeveloperscotland.co.uk | Twitter <https://twitter.com/appscotland>

| LinkedIn http://uk.linkedin.com/in/neillritchie

On 13 November 2017 at 18:30, Daniel Merrill notifications@github.com wrote:

It is definitely an issue for webview, but I also see the issue when navigating to the above link in android chrome 62.0.3202.84.

I have been able to successfully view some 360 content in chrome, so I can't pinpoint the exact issue.

When I open up the remote device Chrome developer tools I see:

THREE.WebGLRenderer 81 embed.min.js:8 No DPDB device match. Dpdb.calcDeviceParams @ embed.min.js:8 embed.min.js:8 Failed to recalculate device parameters. Dpdb.recalculateDeviceParams @ embed.min.js:8 embed.min.js:7 Using fallback Android device measurements. DeviceInfo.determineDevice @ embed.min.js:7 embed.min.js:8 No DPDB device match. Dpdb.calcDeviceParams @ embed.min.js:8 embed.min.js:8 Failed to recalculate device parameters. Dpdb.recalculateDeviceParams_ @ embed.min.js:8 3index.html:1 Uncaught (in promise) DOMException: Access to the feature "vr" is disallowed by feature policy. embed.min.js:6 Uncaught (in promise) TypeError: Cannot read property 'isPolyfilled' of null at WebVRManager. (embed.min.js:6) at 2vrview.min.js:1 Received message with no type.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/googlevr/vrview/issues/274#issuecomment-344013093, or mute the thread https://github.com/notifications/unsubscribe-auth/AOpzkgWVAbj7oAZC1z9CLM2Nd6R198Sxks5s2IrLgaJpZM4QcMK2 .

ademarre commented 6 years ago

I see the same issues on Android after updating to Chrome 62. It is only a problem when running VR View through a cross-domain iframe, and it is solved by adding allow="vr" Feature Policy attribute to the <iframe>.

In addition to the accelerometer, these issues present as well:

Touch only works to look from side-to-side, not up and down
The view is rotated/skewed at an awkward angle in landscape orientation

Perhaps coincidentally, Firefox on Android is broken with the same symptoms, but allow="vr" does not resolve it.

aerialglasgow commented 6 years ago

Thanks for the advice. But I didn't see this resolved by adding the allow=vr attribute to vrview.js, line 513, when the iframe is created

iframe.setAttribute('allow', 'vr');

Is this the route to add the attribute? The only one I could see within the code.

*Aerial Digital Ltd*
Tel 0141 416 5010 | neill@aerialdigital.co.uk
Studio 407, South Block, 60 Osborne Street, Glasgow, G1 5QH
appdeveloperscotland.co.uk | Twitter <https://twitter.com/appscotland>

| LinkedIn http://uk.linkedin.com/in/neillritchie

On 16 November 2017 at 19:33, Andre DeMarre notifications@github.com wrote:

I see the same issues on Android after updating to Chrome 62. It is only a problem when running VR View through a cross-domain iframe, and it is solved by adding allow="vr" Feature Policy attribute to the .</p> <p>In addition to the accelerometer, these issues present as well:</p> <ul> <li>Touch only works to look from side-to-side, not up and down</li> <li>The view is rotated/skewed at an awkward angle in landscape orientation</li> </ul> <p>Perhaps coincidentally, Firefox on Android is broken with the same symptoms, but allow="vr" does not resolve it.</p> <p>— You are receiving this because you commented. Reply to this email directly, view it on GitHub <a href="https://github.com/googlevr/vrview/issues/274#issuecomment-345037683">https://github.com/googlevr/vrview/issues/274#issuecomment-345037683</a>, or mute the thread <a href="https://github.com/notifications/unsubscribe-auth/AOpzkiej3LLrj1Y3cho_-b_A_6tt7nZTks5s3I4fgaJpZM4QcMK2">https://github.com/notifications/unsubscribe-auth/AOpzkiej3LLrj1Y3cho_-b_A_6tt7nZTks5s3I4fgaJpZM4QcMK2</a> .</p> </blockquote> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/ademarre"><img src="https://avatars.githubusercontent.com/u/3452351?v=4" />ademarre</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>@aerialglasgow, I don't know about that line number, but I was putting it in <code>layer.prototype.createIframe_</code> after this line: <a href="https://github.com/googlevr/vrview/blob/2f8e9d22ac345ad90fcc97a7fd32808b4dfbb7a7/src/api/player.js#L165">https://github.com/googlevr/vrview/blob/2f8e9d22ac345ad90fcc97a7fd32808b4dfbb7a7/src/api/player.js#L165</a></p> <pre><code>iframe.setAttribute('allow', 'vr');</code></pre> <p>Nonetheless, you are correct that it does not solve the problem. I was mistaken and had a false positive when I tested it. Although I am confident that it is only an issue with cross-domain iframes.</p> <p>Since the <code>vr</code> Feature Policy doesn't fix it for Chrome, I want to revise my previous statement to say that <strong>Firefox on Android is broken in exactly the same way.</strong></p> <p>The <code>allow="vr"</code> change is probably still good though, because of this: <a href="https://developers.google.com/web/updates/2017/09/webvr-origin-trial-chrome-62">https://developers.google.com/web/updates/2017/09/webvr-origin-trial-chrome-62</a></p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/lincolnfrog"><img src="https://avatars.githubusercontent.com/u/7972305?v=4" />lincolnfrog</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>@ademarre do you mind putting up a PR with this change?</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/adamweld"><img src="https://avatars.githubusercontent.com/u/525911?v=4" />adamweld</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>This issue is still present for me even after adding allow='vr' to the iframe. </p> <p>For example view my site in Chrome on Android: <a href="http://microgoats.life/">http://microgoats.life/</a></p> <p>The viewpoint appears locked to the ground. Tapping and dragging to change yaw still works. Here's a code snippet:</p> <pre><code><iframe width="100%" height="100%" allowfullscreen scrolling="no" frameborder="0" allow="vr" src="//storage.googleapis.com/vrview/index.html?image=//microgoats.life/microgoats.jpg& is_stereo=false&is_vr_off=true&start_yaw=180&hide_fullscreen_button=true"> </iframe></code></pre> <p>Note I've also tried using a self hosted version of VRView with the following src line:</p> <pre><code>src="//microgoats.life/vrview/index.html?image=//microgoats.life/microgoats.jpg& is_stereo=false&is_vr_off=true&start_yaw=180&hide_fullscreen_button=true"></code></pre> <p>But in that case the image fails to load.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/ademarre"><img src="https://avatars.githubusercontent.com/u/3452351?v=4" />ademarre</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>It seems to be fixed with Chrome 64. Verified with Chrome Dev 64.0.3282.12 on Android 8.1.0.</p> <p>Firefox on Android is still unresolved as of the latest nightly 59.0a1 (2017-12-13).</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/neilloispy"><img src="https://avatars.githubusercontent.com/u/7439867?v=4" />neilloispy</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>Just to let you know exactly the same issue has appeared again in latest release of Chrome 65.0.3325.109, however not an issue in other browsers, using sample view here: <a href="https://developers.google.com/vr/concepts/vrview">https://developers.google.com/vr/concepts/vrview</a></p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/jsantell"><img src="https://avatars.githubusercontent.com/u/641267?v=4" />jsantell</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>Does this also occur in Chrome 65 in the webview?</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/neilloispy"><img src="https://avatars.githubusercontent.com/u/7439867?v=4" />neilloispy</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>Hi Jordan</p> <p>Sorry do you mean a webview in a native app?</p> <p>If so yes I believe it is broken there as well.</p> <p>Regards Neill Ritchie</p> <p>Neill Ritchie</p> <p><em>iSPY</em> Studio 407 South Block 60 Osborne Street Glasgow G1 5QH T: 0141 416 5010 appdeveloperscotland.co.uk</p> <p>On 13 March 2018 at 15:28, Jordan Santell <a href="mailto:notifications@github.com">notifications@github.com</a> wrote:</p> <blockquote> <p>Does this also occur in Chrome 65 in the webview?</p> <p>— You are receiving this because you commented. Reply to this email directly, view it on GitHub <a href="https://github.com/googlevr/vrview/issues/274#issuecomment-372706255">https://github.com/googlevr/vrview/issues/274#issuecomment-372706255</a>, or mute the thread <a href="https://github.com/notifications/unsubscribe-auth/AHGF-zdWUg9wgRuEgx_Ohdlns6kpSLc-ks5td-W5gaJpZM4QcMK2">https://github.com/notifications/unsubscribe-auth/AHGF-zdWUg9wgRuEgx_Ohdlns6kpSLc-ks5td-W5gaJpZM4QcMK2</a> .</p> </blockquote> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/thomclae33"><img src="https://avatars.githubusercontent.com/u/25058057?v=4" />thomclae33</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>Accelerometer tracking seems indeed broken on Chrome mobile</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/jsantell"><img src="https://avatars.githubusercontent.com/u/641267?v=4" />jsantell</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>There are a few regressions in Chrome m65 detailed in the <a href="https://github.com/immersive-web/webvr-polyfill/releases/tag/v0.10.3">0.10.3 release notes for webvr-polyfill</a>, vrview needs to be updated with the latest polyfill to mitigate these changes, although there still could be low frequency of devicemotion events, which there's not much we can do until m66</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/McGern"><img src="https://avatars.githubusercontent.com/u/2475102?v=4" />McGern</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>Can confirm it was working for me this morning using an aframe demo (don't know what version of Chrome sorry). I have set updates to manual on my phone. When I updated to 65.0.3325.109 the gyroscope is not working anymore. Using a oneplus one.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/tksharpless"><img src="https://avatars.githubusercontent.com/u/8539366?v=4" />tksharpless</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>On my Samsung Galaxy S6, several recent versions of Chrome, Chrome Dev and Chrome Beta show incorrect gyro behavior at multiple VR/360 websites. Either the gyro response is wildly unstable & hypersensitive, or it works very slowly and only on the vertical axis. The current Samsung Internet app is usable, though both jumpy & sluggish.</p> <p>Rolling back the factory installed Chrome app to the original version, which is several years old, restored correct gyro behavior. I was also able able to install version 63.0.3239.71 of Chrome Beta, which works right. So this is definitely a case of "better is the assasin of good".</p> <p>I hope there is a fix real soon, as this is a major problem for the VR industry.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/tinywolf3"><img src="https://avatars.githubusercontent.com/u/7299147?v=4" />tinywolf3</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>I tested with <a href="https://googlevr.github.io/vrview/?image=examples/gallery/chichen-itza.jpg">this</a>. <img src="https://user-images.githubusercontent.com/7299147/39777204-e575345a-533d-11e8-8d83-52691e328945.gif" alt="gvrview_tracking_error" /></p> <p>Mobile Chrome(v66) and Opera Mini(v33) have the problem. Mobile Firefox(v60) and Samsung Internet(v6.4) are fine.</p> <p>The other 360 web viewer, <a href="https://pannellum.org/">pannellum.org</a>, is fine in all browsers.</p> <p>I hope fix this soon.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/steindelek"><img src="https://avatars.githubusercontent.com/u/25557075?v=4" />steindelek</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>To fix @tinywolf3 issue in latest Chrome or webview, just force vrview to calculate the rotation the same way as for Firefox and IOS. In embed.js in FusionPoseSensor.prototype.updateDeviceMotion function take this.gyroscope.multiplyScalar(Math.PI / 180) out of "isIOS or isFirefoxAndroid" condition. Hope that helps :)</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/jsantell"><img src="https://avatars.githubusercontent.com/u/641267?v=4" />jsantell</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>Chrome m65 has deviceorientation platform issues that the polyfill cannot work around. In Chrome m66, the deviceorientation events are now calculated similarly to iOS/Firefox -- the latest webvr-polyfill version addresses this, which this library needs to update to</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/ademarre"><img src="https://avatars.githubusercontent.com/u/3452351?v=4" />ademarre</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>@jsantell is anyone actively working on updating this library to the new polyfill?</p> <p>I understand there will be some work involved to provide new keyboard/mouse controls since <code>MouseKeyboardVRDisplay</code> was removed from the new polyfill. I'm not sure of the best way to solve that in VRView.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/tinywolf3"><img src="https://avatars.githubusercontent.com/u/7299147?v=4" />tinywolf3</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>@steindelek Thank you for your help. I change the function, isFirefoxAndroid to isAndroid. <code>Util.isAndroid = (function() { var isAndroid = navigator.userAgent.indexOf('Android') !== -1; return function() { return isAndroid; }; })();</code> Now, all browsers are OK.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/Donosor"><img src="https://avatars.githubusercontent.com/u/33164982?v=4" />Donosor</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>@tinywolf3 Also on Huawei? Can you help me please? if I modify mi code don't work nothing. I see the white screen on all browser!</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/kadupenido"><img src="https://avatars.githubusercontent.com/u/7156349?v=4" />kadupenido</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>@steindelek @tinywolf3 Thank you. I made the changes and it worked out here. I tested on android 7.1 and chrome 66 and it worked fine</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/jedaan"><img src="https://avatars.githubusercontent.com/u/5883725?v=4" />jedaan</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>@steindelek i tested on android 7.0 and chrome 67 and it <strong>does not work</strong></p> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>

googlearchive / vrview

[Android] Accelerometer tracking broken on latest Chrome update #274